watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1amlhaGFuNjI5NjI5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

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

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

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

  1. <!doctype html>
  2. <html>
  3. 	<head>
  4. 		<style>
  5. 			/*
  6. 			*{border:1px solid red;height:20px}
  7. 			全部的HTML5结构标签本质上来说就是一个div标签。仅仅只是有意义
  8. 			*/
  9. 			/*页面头部 header*/
  10. 			header{height:150px;background:#ABCDEF}
  11. 			nav{height:30px;background:#ff9900;margin-top:100px}
  12. 			nav ul li{width:100px;height:30px;float:left;line-height:30px}
  13. 			/*页面中间 div */
  14. 			div{margin-top:10px;height:1000px;}
  15. 			section{height:1000px;background:#ABCDEF;width:70%;float:left}
  16. 			article{background:#F90;width:500px;margin:0 auto;text-align:center}
  17.  
  18. 			aside{height:1000px;background:#ABCDEF;width:28%;float:right}
  19. 			/*页面底部 footer*/
  20. 			footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}
  21. 		</style>
  22. 	</head>
  23. 	<body>
  24. 		<header>
  25. 			<p>这是一个header标签</p>
  26. 			<nav>
  27. 				<ul>
  28. 					<li>首页</li>
  29. 					<li>起夜</li>
  30. 					<li>论坛</li>
  31. 					<li>商城</li>
  32. 					<li>社区</li>
  33. 				</ul>
  34. 			</nav>
  35. 		</header>
  36. 		<div>
  37. 			<section>
  38. 				<p>这是一个section标签</p>
  39. 				<article>
  40. 					<h2>春晓</h2>
  41. 					<p>
  42. 					春眠不觉晓，<br />
  43. 					处处蚊子咬，<br />
  44. 					打上敌敌畏，<br />
  45. 					不至死多少。<br />
  46. 					</p>
  47.  
  48. 				</article>
  49. 				<hr />
  50. 				<article>
  51. 					<h2>上学歌</h2>
  52. 					<p>
  53. 					太阳当空照。<br />
  54. 					花儿对我笑。<br />
  55. 					小鸟说早早早，你为什么背上小书包?<br />
  56. 					我要炸学校老师不知道，一拉线，赶快跑，<br />
  57. 					轰的一声。学校炸没了。
  58.  
  59. <br />
  60. 					</p>
  61.  
  62. 				</article>
  63. 				<hr />
  64. 				<figure>
  65. 					<figcaption>UFO</figcaption>
  66. 					<p>不明飞行物 Unknown Flying Object</p>
  67. 				</figure>
  68. 				<figure>
  69. 				     <dt>DDS</dt>
  70. 					 <dd>nihaome </dd>
  71. 				</figure>
  72. 				<hr />
  73. 				<dialog>
  74. 					<dt>唐僧:悟空，你又调皮了，观音姐姐的月光宝盒怎么能乱扔呢？</dt>
  75. 					<dd>悟空:...(看着)</dd>
  76. 					<dt>唐僧:乱扔是不正确的。砸到小朋友怎么办？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>
  77. 					<dd>悟空:...(纠结)</dd>
  78. 					<dt>唐僧:悟空你想要么？想要你就告诉我呀。你不告诉我怎么知道你想要呢？。
  79.  
  80. 。。
  81.  
  82. 。</dt>
  83. 					<dd>悟空:我靠!(一棍子抡上去！
  84.  
  85. )</dd>
  86. 				</dialog>
  87. 				<hr />
  88. 				<menu>
  89. 					<li>点击</li>
  90. 					<li>右键单击</li>
  91. 				</menu>
  92. 				<hr />
  93. 				<span contextmenu="candan">右键单击我试试</span>
  94. 				<menu type="context" id="candan">
  95. 					<menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem>
  96. 				</menu>
  97. 				<hr />
  98. 				<meter min="0" max="10" value="5" low="3" high="7" ></meter>
  99. 				<progress max="100" value="0" id="pro"></progress>
  100. 				<script>
  101. 					var pro =document.getElementById('pro');
  102. 					setInterval(function(){
  103. 						pro.value+=1;
  104. 					},100);
  105. 				</script>
  106. 				<hr />
  107. 				<details>
  108. 					<dt>这是一个问题？</dt>
  109. 					<dd>to be or not to be</dd>
  110. 					<dt>这是一个问题？</dt>
  111. 					<dd>to be or not to be</dd>
  112.  
  113. 				</details>
  114. 				<hr />
  115. 				<ruby>翰<rp>(</rp><rt>han</rt><rp>)</rp></ruby>
  116. 				<hr />
  117. 				女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。
  118.  
  119. 。吃零食，偶尔还会呜呜的哭，
  120. 				于是总结了下女人:逛吃逛吃逛吃逛吃。。
  121.  
  122. 。呜呜呜~·
  123. 			</section>
  124. 			<aside>
  125. 				<p>这是一个aside标签</p>
  126. 				<hgroup>
  127. 					<h3>大家好才是真的好</h3>
  128. 					<h3>大家好才是真的好</h3>
  129. 					<h3>大家好才是真的好</h3>
  130. 					<h3>大家好才是真的好</h3>
  131. 				</hgroup>
  132. 			</aside>
  133. 		</div>
  134. 		<footer>
  135. 			<p>这是一个footer标签</p>
  136. 			<hr />
  137. 			<small>法律条文</small>
  138. 			<small>联系我们</small>
  139. 			<small>客户意见</small>
  140. 			<small>商户合作</small>
  141. 		</footer>
  142. 	</body>
  143.  
  144. </html>

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

a，画直线：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>Learning the basic of canvas</title>
  5. 		<meta charset="utf-8" />
  6. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  7. 		<script type="text/javascript" charset="utf-8">
  8. 			$(document).ready(function(){
  9. 				var canvas =$("#myCanvas");
  10. 				var context =canvas.get(0).getContext("2d");
  11. 				context.beginPath();
  12. 				context.moveTo(40,40);
  13. 				context.lineTo(340,340);
  14. 				context.closePath();
  15. 				context.stroke();
  16.  
  17. 			});
  18. 		</script>
  19. 	</head>
  20. 	<body>
  21. 		<canvas id="myCanvas" width="500" height="500">
  22. 			该浏览器不支持HTML5
  23. 		</canvas>
  24. 	</body>
  25. </html>

b，画矩形； 

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>Learning the basic of canvas</title>
  5. 		<meta charset="utf-8" />
  6. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  7. 		<script type="text/javascript" charset="utf-8">
  8. 			$(document).ready(function(){
  9. 				var canvas =$("#myCanvas");
  10. 				var context =canvas.get(0).getContext("2d");
  11. 				context.fillRect(40,40,100,100);
  12. 				context.strokeRect(100,100,120,120);
  13.  
  14. 			});
  15. 		</script>
  16. 	</head>
  17. 	<body>
  18. 		<canvas id="myCanvas" width="500" height="500">
  19. 			该浏览器不支持HTML5
  20. 		</canvas>
  21. 	</body>
  22. </html>

c,画圆（弧等）：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>Learning the basic of canvas</title>
  5. 		<meta charset="utf-8" />
  6. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  7. 		<script type="text/javascript" charset="utf-8">
  8. 			$(document).ready(function(){
  9. 				var canvas =$("#myCanvas");
  10. 				var context =canvas.get(0).getContext("2d");
  11. 				context.beginPath();
  12. 				var degrees=10;
  13. 				var radians=degrees*(Math.PI/180);
  14. 				//context.arc(230,90,50,0,Math.PI*2,false);
  15. 				context.arc(230,90,50,0,Math.PI*0.5,false);
  16. 				context.closePath();
  17. 				//context.fillStyle="rgb(255,255,0)";
  18. 				//context.fill();
  19. 				context.strokeStyle="rgb(255,0,255)";
  20. 				context.stroke();
  21. 			});
  22. 		</script>
  23. 	</head>
  24. 	<body>
  25. 		<canvas id="myCanvas" width="500" height="500">
  26. 			该浏览器不支持HTML5
  27. 		</canvas>
  28. 	</body>
  29. </html>

d，对文字样式的设置：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<title>Learning the basic of canvas</title>
  5. 		<meta charset="utf-8" />
  6. 		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  7. 		<script type="text/javascript" charset="utf-8">
  8. 			$(document).ready(function(){
  9. 				var canvas =$("#myCanvas");
  10. 				var context =canvas.get(0).getContext("2d");
  11. 				var text="Hello,World";
  12. 				context.font="italic 30px serif";
  13. 				context.fillText(text,40,40);
  14. 			});
  15. 		</script>
  16. 	</head>
  17. 	<body>
  18. 		<canvas id="myCanvas" width="500" height="500">
  19. 			该浏览器不支持HTML5
  20. 		</canvas>
  21. 	</body>
  22. </html>

3,Video/Audio使用

  1. <!doctype html>
  2. <html>
  3. 	<head></head>
  4. 	<body>
  5. 	<!--
  6. 		 <video src="movie.webm" controls="controls">
  7. 			您的破浏览器都是古董早该换了。不然休想看我们的激情小电影。
  8. 		</video>
  9. 		-->
  10. 		<hr />多资源的视频播放
  11. 		<video  width="1000" height="1000"  poster="PLMM.jpg"></video>
  12. 		<video controls="controls" width="1000" height="1000" autoplay="autoplay" loop="loop" poster="PLMM.jpg">
  13. 			<source src="movie.webm" type="video/webm" />
  14. 			<source src="movie.ogg" type="video/ogg" />
  15.  
  16. 			您的浏览器不支持视频标签，还不赶快升级。
  17. 		</video>
  18. 		 <hr />
  19. 		使用下面VIDEO标签的API<br />
  20. 		<video src="movie.ogg" controls="controls" id="video">
  21. 			您的破浏览器都是古董早该换了。不然休想看我们的激情小电影。
  22. 		</video>
  23.  
  24. 		<br />
  25. 		<button onclick="bofang()">播放</button>
  26. 		<button onclick="zanting()">暂停</button>
  27. 		<button onclick="kuaijin()">快进10秒</button>
  28. 		<button onclick="kuaitui()">快退10秒</button>
  29. 		<button onclick="shutup(this)">闭嘴</button>
  30. 		<button onclick="soso()">加速播放</button>
  31. 		<button onclick="yu()">减速播放</button>
  32. 		<button onclick="normal()">正常播放</button>
  33. 		<button onclick="upper()">提高嗓门</button>
  34. 		<button onclick="lower()">减少嗓门</button>
  35. 		<script>
  36. 			//获取相应的video标签
  37. 			var video=document.getElementById('video');
  38. 			//播放方法
  39. 			function bofang(){
  40. 				video.play();
  41. 			}
  42. 			//暂停方法
  43. 			function zanting(){
  44. 				video.pause();
  45. 			}
  46. 			//快进10秒
  47. 			function kuaijin(){
  48. 				video.currentTime+=10;//相当于video.currentTime=video.currentTime+10
  49. 			}
  50. 			//快退10秒
  51. 			function kuaitui(){
  52. 				video.currentTime-=10;
  53. 			}
  54. 			//静音按钮
  55. 			function shutup(obj){
  56. 				if(video.muted){
  57. 					obj.innerHTML="闭嘴";
  58. 					video.muted=false;
  59. 				}else{
  60. 					obj.innerHTML="张嘴";
  61. 					video.muted=true;
  62. 				}
  63. 			}
  64. 			//加速播放(3倍速度)
  65. 			function soso(){
  66. 				video.playbackRate=3;
  67. 			}
  68. 			//慢速播放(慢三倍)
  69. 			function yu(){
  70. 				video.playbackRate=1/3;
  71. 			}
  72. 			//正常倍速
  73. 			function normal(){
  74. 				video.playbackRate=1;//默认的播放倍速是1
  75. 			}
  76. 			//调高声音
  77. 			function upper(){
  78. 				video.volume+=0.2;//声音值的范围是0-1
  79. 			}
  80. 			//调低声音
  81. 			function lower(){
  82. 				video.volume-=0.2;
  83. 			}
  84. 		</script>
  85. 		<hr />
  86. 		音频标签的使用<br />
  87. 		<audio src="a.mp3" controls="controls">
  88. 			您的老牛已经拉不动破车了，赶紧换了吧。想听中国好声音么？
  89. 		</audio>
  90.  
  91. 		<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
  92. 		Your browser does not support the canvas element.
  93. 		</canvas>
  94. 		<script type="text/javascript">
  95.  
  96. 			var c=document.getElementById("myCanvas");
  97. 			var cxt=c.getContext("2d");
  98. 			var img=new Image();
  99. 			img.src="PLMM.jpg";
  100. 			cxt.drawImage(img,0,0);
  101.  
  102. 		</script>
  103. 	</body>
  104. </html>

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

  1. <!doctype html>
  2. <html>
  3. 	<head></head>
  4. 	<body>
  5. 		<form action="http://localhost/test.php" method="post" id="register"></form>
  6.  
  7. 		<input type="text" name="user" value="" form="register" />
  8. 		<input type="password" name="pwd" value="" form="register" />
  9. 		<select name="year" form="register">
  10. 			<option value="1970">1970</option>
  11. 			<option value="1980">1980</option>
  12. 			<option value="1990">1990</option>
  13. 		</select>
  14.  
  15. 		<input type="submit" value="注冊" form="register" />
  16.  
  17. 		<hr />
  18. 		默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />
  19. 		邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
  20. 		URL：<input type="url" name="url" value="" form="register" /><br />
  21. 		DATE:<input type="date" name="riqi" value="" form="register" /><br />
  22. 		TIME：<input type="time" name="shijian" value="" form="register" /><br />
  23. 		Month：<input type="month" name="yue" value="" form="register" /><br />
  24. 		WEEK：<input type="week" name="zhou" value="" form="register" /><br />
  25.  
  26. 		数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
  27. 		滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
  28. 		搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />
  29. 		颜色：<input type="color" name="yanse" value="" form="register" /><br />
  30. 		<hr />
  31. 		自己主动填充表单<br />
  32. 		<input type="text" name="auto" value="" list="movie" />
  33. 		<datalist id="movie">
  34. 			<option>人在囧途</option>
  35. 			<option>车在囧途</option>
  36. 			<option>泰囧</option>
  37. 		</datalist>
  38. 		<hr />
  39. 		输出表单output<br />
  40. 		<form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
  41. 			<input type="number" name="no1" value="" />
  42. 			<input type="number" name="no2" value="" />
  43. 			<output name="result"></output>
  44. 		</form>
  45.  
  46. 	</body>
  47. </html>

以上为标签的一些简单样例，通过样例来学习这些表单，挺快的，这里推荐W3CSCHOOL站点:http://www.w3school.com.cn/html5/,结合理论来学习。非常不错的。

下篇简单小结一下HTML5一些扩展。

HTML5基础小结（二）——标签小例的更多相关文章

  1. Oracle 数据库基础学习 (二) 学习小例子：创建一个表，记录商品买卖的情况

      运行环境:Oracle database 11g + PL/SQL Developer ex: --创建一个表 create table plspl_test_product( --加入not n ...

  2. web 基础（二） HTML5

    web 基础(二) HTML5 一.HTML5 HTML5 是最新的 HTML 标准.是专门为承载丰富的 web 内容而设计的,并且无需额外插件.它拥有新的语义.图形以及多媒体元素.并提供的新元素和新 ...

  3. HTML5基础知识（一）---标签

    在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分 ...

  4. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  5. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  6. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  7. HTML5 基础

    1.HTML5 简介 HTML5 是最新的 HTML 标准,他是万维网的核心语言.标准通用标记语言下的一个应用“超文本标记语言”. HTML 的上一个标准 HTML4.01 诞生于 1999年,他的第 ...

  8. Java 基础--小结

    Java  基础--小结 java基础 Java源程序(.java文件)——>java字节码文件(.class文件)——>由解释执行器(java.exe)将字节码文件加载到java虚拟机( ...

  9. 实时视频直播客户端技术盘点：Native、HTML5、WebRTC、微信小程序

    1.前言 2017 年 12 月,微信小程序向开发者开放了实时音视频能力,给业内带来广阔的想象空间.连麦互动视频直播技术在 2016 年直播风口中成为视频直播的标配,然而只有在原生的 APP 上才能保 ...

随机推荐

  1. requests用法

    # -*- coding: cp936 -*- #xiaodeng #python 27 #requests用法 #获取http://www.weather.com.cn/data/sk/101010 ...

  2. php Socket模拟表单上传文件函数_学习

    模拟上传文件的php代码 里面访问地址.主机.上传文件名.内容.分隔符可以修改   function postFile($file) {     $clf = "\r\n";   ...

  3. Spring 3整合Quartz 2实现定时任务三：动态暂停 恢复 修改和删除任务

    前面我们已经完成了spring 3和quartz 2的整合以及动态添加定时任务,我们接着来完善它,使之能支持更多的操作,例如暂停.恢复.修改等. 在动态添加定时任务中其实已经涉及到了其中的一些代码,这 ...

  4. 【C#入门经典视频教程】-第001课-C#入门-认识C#

    C#入门-认识C# C ---> C++ --> C# (C++++) j++ j++ 有一门可能比这个C#更流行的语言 java 使用的教程:c#入门经典第五版 操作系统:windows ...

  5. Javascript调试利器console的使用

    一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次 ...

  6. shell脚本逐个杀死k8s中某个应用的pod

    #!/bin/bash pod01=`kubectl get pod -o wide -n weifeng-system|grep official-ui-node-prod|awk -F : 'NR ...

  7. 利用LD_PRELOAD hook代码

    loader在进行动态链接的时候,会将有相同符号名的符号覆盖成LD_PRELOAD指定的so文件中的符号.换句话说,可以用我们自己的so库中的函数替换原来库里有的函数,从而达到hook的目的.这和Wi ...

  8. 修改主键id为自增

    详见:sqlserver修改主键为自增 先删除id字段, 执行下面sql即可: alter table sms_rec add id int IDENTITY (1,1) PRIMARY KEY

  9. 关于easyui的问答(来自百度问答)

    求教大神,jquery easyui中$('#table').datagrid('options').queryParams是什么意思 https://zhidao.baidu.com/questio ...

  10. Linux按照CPU、内存、磁盘IO、网络性能监测【转载】

    本文转载地址:https://my.oschina.net/chape/blog/159640 系统优化是一项复杂.繁琐.长期的工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采集.评估.监 ...