HTML5基础小结（二）——标签小例

来源：互联网发布：腾讯游戏数据分析岗位编辑：程序博客网时间：2024/05/20 08:25

随篇博客的思维导图，继续：

二，看下标签的使用，这里看几个小例子（效果图不再给出）：

1，结构标签的使用，这里来看一个页面的布局：

<!doctype html><html><head><style>/* *{border:1px solid red;height:20px}所有的HTML5结构标签本质上来说就是一个div标签，只不过有意义*//*页面头部 header*/header{height:150px;background:#ABCDEF}nav{height:30px;background:#ff9900;margin-top:100px}nav ul li{width:100px;height:30px;float:left;line-height:30px}/*页面中间 div */div{margin-top:10px;height:1000px;}section{height:1000px;background:#ABCDEF;width:70%;float:left}article{background:#F90;width:500px;margin:0 auto;text-align:center}aside{height:1000px;background:#ABCDEF;width:28%;float:right}/*页面底部 footer*/footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}</style></head><body><header><p>这是一个header标签</p><nav><ul><li>首页</li><li>起夜</li><li>论坛</li><li>商城</li><li>社区</li></ul></nav></header><div><section><p>这是一个section标签</p><article><h2>春晓</h2><p>春眠不觉晓，<br />处处蚊子咬，<br />打上敌敌畏，<br />不至死多少。<br /></p></article><hr /><article><h2>上学歌</h2><p>太阳当空照，<br />花儿对我笑，<br />小鸟说早早早，你为什么背上小书包?<br />我要炸学校老师不知道，一拉线，赶快跑，<br />轰的一声，学校炸没了。<br /></p></article><hr /><figure><figcaption>UFO</figcaption><p>不明飞行物 Unknown Flying Object</p></figure><figure>     <dt>DDS</dt> <dd>nihaome </dd></figure><hr /><dialog><dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt><dd>悟空:...(看着)</dd><dt>唐僧:乱扔是不对的，砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt><dd>悟空:...(纠结)</dd><dt>唐僧:悟空你想要么？想要你就告诉我呀，你不告诉我怎么知道你想要呢？。。。。</dt><dd>悟空:我靠!(一棍子抡上去！)</dd></dialog><hr /><menu><li>点击</li><li>右键单击</li></menu><hr /><span contextmenu="candan">右键单击我试试</span><menu type="context" id="candan"><menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem></menu><hr /><meter min="0" max="10" value="5" low="3" high="7" ></meter><progress max="100" value="0" id="pro"></progress><script>var pro =document.getElementById('pro');setInterval(function(){pro.value+=1;},100);</script><hr /><details><dt>这是一个问题？</dt><dd>to be or not to be</dd><dt>这是一个问题？</dt><dd>to be or not to be</dd></details><hr /><ruby>翰<rp>(</rp><rt>han</rt><rp>)</rp></ruby><hr />女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食，偶尔还会呜呜的哭，于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~·</section><aside><p>这是一个aside标签</p><hgroup><h3>大家好才是真的好</h3><h3>大家好才是真的好</h3><h3>大家好才是真的好</h3><h3>大家好才是真的好</h3></hgroup></aside></div><footer><p>这是一个footer标签</p><hr /><small>法律条文</small><small>联系我们</small><small>客户意见</small><small>商户合作</small></footer></body></html>

2，Canvas画布，可以在这个上边进行画图，例如直线，折线，圆，矩形等，这个要是学好了发挥的控件特别大，这里主要是JS来调用它的一些方法和属性：

a，画直线：

<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");context.beginPath();context.moveTo(40,40);context.lineTo(340,340);context.closePath();context.stroke();});</script></head><body><canvas id="myCanvas" width="500" height="500">该浏览器不支持HTML5</canvas></body></html>

b，画矩形；

<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");context.fillRect(40,40,100,100);context.strokeRect(100,100,120,120);});</script></head><body><canvas id="myCanvas" width="500" height="500">该浏览器不支持HTML5</canvas></body></html>

c,画圆（弧等）：

<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");context.beginPath();var degrees=10;var radians=degrees*(Math.PI/180);//context.arc(230,90,50,0,Math.PI*2,false);context.arc(230,90,50,0,Math.PI*0.5,false);context.closePath();//context.fillStyle="rgb(255,255,0)";//context.fill();context.strokeStyle="rgb(255,0,255)";context.stroke();});</script></head><body><canvas id="myCanvas" width="500" height="500">该浏览器不支持HTML5</canvas></body></html>

d，对文字样式的设置：

<!DOCTYPE html><html><head><title>Learning the basic of canvas</title><meta charset="utf-8" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript" charset="utf-8">$(document).ready(function(){var canvas =$("#myCanvas");var context =canvas.get(0).getContext("2d");var text="Hello,World";context.font="italic 30px serif";context.fillText(text,40,40);});</script></head><body><canvas id="myCanvas" width="500" height="500">该浏览器不支持HTML5</canvas></body></html>

3,Video/Audio使用

<!doctype html><html><head></head><body><!-- <video src="movie.webm" controls="controls">您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。</video>--><hr />多资源的视频播放<video  width="1000" height="1000"  poster="PLMM.jpg"></video><video controls="controls" width="1000" height="1000" autoplay="autoplay" loop="loop" poster="PLMM.jpg"><source src="movie.webm" type="video/webm" /><source src="movie.ogg" type="video/ogg" />您的浏览器不支持视频标签，还不赶快升级。</video> <hr />使用以下VIDEO标签的API<br /><video src="movie.ogg" controls="controls" id="video">您的破浏览器都是古董早该换了，不然休想看我们的激情小电影。</video><br /><button onclick="bofang()">播放</button><button onclick="zanting()">暂停</button><button onclick="kuaijin()">快进10秒</button><button onclick="kuaitui()">快退10秒</button><button onclick="shutup(this)">闭嘴</button><button onclick="soso()">加速播放</button><button onclick="yu()">减速播放</button><button onclick="normal()">正常播放</button><button onclick="upper()">提高嗓门</button><button onclick="lower()">降低嗓门</button><script>//获取对应的video标签var video=document.getElementById('video');//播放方法function bofang(){video.play();}//暂停方法function zanting(){video.pause();}//快进10秒function kuaijin(){video.currentTime+=10;//相当于video.currentTime=video.currentTime+10}//快退10秒function kuaitui(){video.currentTime-=10;}//静音按钮function shutup(obj){if(video.muted){obj.innerHTML="闭嘴";video.muted=false;}else{obj.innerHTML="张嘴";video.muted=true;}}//加速播放(3倍速度)function soso(){video.playbackRate=3;}//慢速播放(慢三倍)function yu(){video.playbackRate=1/3;}//正常倍速function normal(){video.playbackRate=1;//默认的播放倍速是1}//调高声音function upper(){video.volume+=0.2;//声音值的范围是0-1}//调低声音function lower(){video.volume-=0.2;}</script><hr />音频标签的使用<br /><audio src="a.mp3" controls="controls">您的老牛已经拉不动破车了，赶紧换了吧，想听中国好声音么？</audio><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image();img.src="PLMM.jpg";cxt.drawImage(img,0,0);</script></body></html>

4,智能表单的简单实例：

<!doctype html><html><head></head><body><form action="http://localhost/test.php" method="post" id="register"></form><input type="text" name="user" value="" form="register" /><input type="password" name="pwd" value="" form="register" /><select name="year" form="register"><option value="1970">1970</option><option value="1980">1980</option><option value="1990">1990</option></select><input type="submit" value="注册" form="register" /><hr />默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />URL：<input type="url" name="url" value="" form="register" /><br />DATE:<input type="date" name="riqi" value="" form="register" /><br />TIME：<input type="time" name="shijian" value="" form="register" /><br />Month：<input type="month" name="yue" value="" form="register" /><br />WEEK：<input type="week" name="zhou" value="" form="register" /><br />数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />颜色：<input type="color" name="yanse" value="" form="register" /><br /><hr />自动填充表单<br /><input type="text" name="auto" value="" list="movie" /><datalist id="movie"><option>人在囧途</option><option>车在囧途</option><option>泰囧</option></datalist><hr />输出表单output<br /><form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)"><input type="number" name="no1" value="" /><input type="number" name="no2" value="" /><output name="result"></output></form></body></html>

以上为标签的一些简单例子，通过例子来学习这些表单，挺快的，这里推荐W3CSCHOOL网站:http://www.w3school.com.cn/html5/,结合理论来学习，很不错的。下篇简单小结一下HTML5一些扩展。

2 0