html5案例代码(HTML5案例)[20240425更新]
admin 发布:2024-04-25 05:36 129
今天给各位分享html5案例代码的知识,其中也会对HTML5案例进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、谁能帮我用HTML语言做一个简单的网页?代码就行
- 2、html5上下滑动“翻页”实现,是真正的翻页
- 3、HTML5 滑动条js代码怎么写?
- 4、如何用html5写特殊符号五角星
- 5、HTML5网页前端设计中如下图表单的代码怎么写?
谁能帮我用HTML语言做一个简单的网页?代码就行
html
head
title第一个html网页/title
metacharset="utf-8"
/head
body
/body
/html
html
head
title第一个html网页/title
metacharset="utf-8"
/head
body
table
tr
td第一行第一列/td
td第一行第二列/td
/tr
tr
td第二行第一列/td
td第二行第二列/td
/tr
/table
/body
/html
扩展资料
HTML语言特点
1、HTML语法较弱。
在w3c制定的HTML5规范中,对于HTML5在语法结构上的规格限制是较松散的,如、或在浏览器中具有同样的功能,是不区分大小写的。另外,也没有严格要求每个控制标记都要有相对应的结束控制标记。
2、HTML5编写简单。
即使用户没有任何编程经验,也可以轻易使用HTML来设计网页,HTML5的使用只需将文本加上一些标记(Tags)即可。
3、HTML标记数目有限。
在w3C所建议使用的HTML5规范中,所有控制标记都是固定的且数目是有限的。固定是指控制标记的名称固定不变,且每个控制标记都已被定义过,其所提供的功能与相关属性的设置都是固定的。
html5上下滑动“翻页”实现,是真正的翻页
HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下:
1、html5页面代码
!DOCTYPE html
htmlheadmeta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titleHTML5手机页面触屏滑动上下翻页特效/title
meta charset="utf-8"
meta name="apple-touch-fullscreen" content="YES"
meta name="format-detection" content="telephone=no"
meta name="apple-mobile-web-app-capable" content="yes"
meta name="apple-mobile-web-app-status-bar-style" content="black"
meta http-equiv="Expires" content="-1"
meta http-equiv="pragram" content="no-cache"
link rel="stylesheet" type="text/css" href="./hamer_files/main.css"
link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css"
script type="text/javascript" src="./hamer_files/offline.js"/script
meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi"
/head
body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;"
section class="u-alert"
img style="display:none;" src="./hamer_files/loading_large.gif"
div class="alert-loading z-move"
div class="cycleWrap" span class="cycle cycle-1"/span
span class="cycle cycle-2"/spanspan class="cycle cycle-3"/spanspan class="cycle cycle-4"/span
/div
div class="lineWrap" span class="line line-1"/spanspan class="line line-2"/spanspan class="line line-3"/span
/div
/div
/section
section class="u-arrow"
p class="css_sprite01"/p
/section
section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;"
div class="translate-back" style="height: 918px;"
div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;"
div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;"
div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"/div
/div
/div
/section
section class="u-pageLoading"
img src="./hamer_files/load.gif" alt="loading"
/section
script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"/script
script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"/script
/body/html
2、css代码:
@charset "utf-8";
.ad_foot li { margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;}
.ad_foot li a {display:block;}
.ad_foot li .l {width:75px; height:75px; float:left; overflow:hidden;}
.ad_foot li .l img {width:75px; width:75px;}
.ad_foot li .r {width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;}
.ad_foot li .r p {color:#999; font-size:1.2em; }
.ad_foot li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
.lazy-img, .lazy-finish{background-color:#f0eded;}
.page-list{font-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;}
.ad_foot{padding:15px 15px 0 15px;}
/*声音播放按钮*/
#song_img {width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;}
/*底部推荐*/
.ad_list{margin-top:2em;}.ad_list li {width:46%; background:none; padding:0; float:left;margin-bottom: 1em;}
.ad_list li.r {float:right;}.ad_list li a img {width:100%; height:auto;}
.ad_foot h3 {width:100%; height:48px; line-height:48px; background:#F9F5EC;}
.ad_foot h3 a {display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;}
.ad_foot h3 a.active {color:#FFF; background:#FF9240;}
.magazine_1 li {
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;}
.magazine_1 li a {display:block;}
.magazine_1 li .l {width: 75px;
height: 75px;
float: left;
overflow: hidden;}
.magazine_1 li .l img {width:75px; height:75px;}
.magazine_1 li .r {width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;}
.magazine_1 li .r p {
color: #999;
font-size: 1.2em;
.magazine_1 li .r span {font-size:0.8em;}
.ad_foot li .r i {font-style:normal;}
3、运行效果如下:
HTML5 滑动条js代码怎么写?
强大的HTML5提供了一种新的标签progress,只需要通过该标签+简单的js,即可以实现进度条滚动的效果。
代码如下:
HTML
1
progress max="100" value="0" id="pg"/progress
这个标签意义很明确,并且属性只有以上两个,max表示需要完成的任务量,value是目前完成的任务量。
js
12345
var pg=document.getElementById('pg'); setInterval(function(e){ if(pg.value!=100) pg.value++; else pg.value=0;},100);
以上的实现方式不仅更加的语义化,同时也极大的简化了我们的代码,并且灵活性更高,所以熟练使用HTML5是非常有必要的!
不过HTML5标签的浏览器兼容性也是我们需要考虑的一个问题,所以如果网页需求的兼容性比较高的话,特别是对低版本IE有兼容需求的话,那么HTML5的标签就不太适用了。以下为progress的浏览器支持情况。
如何用html5写特殊符号五角星
首先贴出HTML5页面的代码:
!DOCTYPE html
html
head
meta charset="UTF-8" /
titleCanvas案例/title
/head
script type="text/javascript" src="script.js"/script
body onload="draw('canvas')"
h1Canvas案例/h1
canvas id='canvas' width="400" height="300" /
/body
/html
在这个页面中我们写了一个canvas元素。该元素的ID为canvas。然后链接了script.js这个文件。
//script.js
function draw(id)
{
var canvas = document.getElementById(id);
if(canvas==null){
return false;
}
var context = canvas.getContext('2d');
context.fillStyle="#eeeeff";
context.fillRect(0,0,400,300);
context.fillStyle='rgba(255,0,0,0.25)';
context.translate(200,50);
createFiveStar(context);
context.fill();
}
function createFiveStar(context){
var dx = 0;
var dy = 100;
var s = 50;
context.beginPath();
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI/5*4;
for(var i=0;i5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);
}
context.closePath();
}
我们提供了两个方法一个是draw方法。当页面加载完成的时候就会执行draw方法中的内容。
而draw方法中呢又会执行createFiveStart函数。
下面我来分析下createFiveStart函数的内容:
function createFiveStar(context){
var dx = 0;//画出来的五角星x偏移位置
var dy = 100;//画出来的五角星y偏移位置
var s = 50;//画出来的五角星的大小
context.beginPath();//开始路径绘制
var x = Math.sin(0);//默认的x坐标
var y = Math.cos(0);//默认的y坐标
var dig = Math.PI/5*4;//弧度值
for(var i=0;i5;i++){
var x = Math.sin(i*dig);
var y = Math.cos(i*dig);
context.lineTo(dx+x*s,dy+y*s);//划线
}
context.closePath();//结束路径
}
好了到了这里我们就完成了HTML5中,五角星的绘制。
HTML5网页前端设计中如下图表单的代码怎么写?
下面是表单代码,你直接再加属性就可以了,表单用 table 写比较简单,div 太麻烦了;
html xmlns=" "
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title黑板/title
/head
body
div style="width:500px;"
h1 style="width:500px;height:50px;color:#2A8DF0;border-bottom:#2A8DF0 solid 3px; text-align:center;"用户注册页面/h1
table cellpadding="0" cellspacing="10" style="margin:0 auto;"
tr
td align="right" valign="top"div用户名:/div/td
tdinput style='width:250px' value='请输入用户名' //td
/tr
tr
td align="right" valign="top"div密 码:/div/td
tdinput style='width:250px' value='请输入密码' //td
/tr
tr
td align="right" valign="top"div确 认:/div/td
tdinput style='width:250px' value='请再次输入密码' //td
/tr
tr
td align="right" valign="top"div姓 名:/div/td
tdinput style='width:250px' value='请输入真实姓名' //td
/tr
tr
td align="right" valign="top"div邮 箱:/div/td
tdinput style='width:250px' value='请输入电子邮箱' //td
/tr
/table
div align="center"input style="width:100px;height:30px;text-align:center;line-height:30px;background:#2289F0;border:#2289F0;color:white;font-weight:bold;font-size:16px;" type="submit" value="提交注册" //div
/div
/body
/html
关于html5案例代码和HTML5案例的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-04音乐播放器系统代码大全(音乐播放器c语言代码)[20240504更新]
- 05-04菜单滑动代码(开始菜单自动滚动)[20240504更新]
- 05-04好看登录界面代码(好看的登陆界面)[20240504更新]
- 05-04html上下箭头代码(html下拉箭头符号)[20240504更新]
- 05-04点击切换图片代码滚动(图片左右滚动代码)[20240504更新]
- 05-04易语言代码格式(易语言编码转换)[20240504更新]
- 05-04c语言连连看开源代码(python连连看源代码)[20240504更新]
- 05-04七夕html代码(七夕网页源码)[20240504更新]
- 05-04html合同模板代码(开发合同模版)[20240504更新]
- 05-04盖章代码(盖章代码是什么东西)[20240504更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
-
- 网络营销策划公司,网络营销策划公司的发展目标与方向有哪些内容
- 易语言代码格式(易语言编码转换)[20240504更新]
- c语言连连看开源代码(python连连看源代码)[20240504更新]
- 七夕html代码(七夕网页源码)[20240504更新]
- html合同模板代码(开发合同模版)[20240504更新]
- 盖章代码(盖章代码是什么东西)[20240504更新]
- java简易计算器源代码(简易计算器编程java)[20240504更新]
- 网页代码下载html(网页代码下载音乐)[20240504更新]
- 飞秋文件传输源代码(飞秋怎么传输文件)[20240504更新]
- sql超市商品信息视图代码的简单介绍[20240504更新]
- 友情链接