一、HTML5特性
1、HTML5 八个特性类别对应的8个Logo
语义化、离线&存储、设备访问、通信
多媒体、图形和特效、性能和集成、呈现（CSS3）
1.1、语义特性（Class：Semantic）：HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的。
1.2、本地存储特性（Class: OFFLINE & STORAGE）：HTML5 APP Cache、本地存储功能、IndexedDB、FileAPI
1.3、设备访问特性 (Class: DEVICE ACCESS)：为移动开发而生。重力感应、全球地理定位、麦克风、摄像头
1.4、连接特性（Class: CONNECTIVITY）：WebSocket、Server-Sent Events实现双向连接，消息推送
1.5、 网页多媒体特性( Class: MULTIMEDIA）：支持网页端的Audio、Video等多媒体功能。
1.6、 三维、图形及特效特性（Class: 3D, Graphics & Effects）：图形增强，SVG，Canvas，WebGL，2D/3D游戏和页面视觉特效。
1.7、 性能与集成特性（Class: Performance & Integration）：没有用户会永远等待你的Loading，HTML5增加WebWorker、XMLHttpRequest2
1.8）、呈现：（CSS3/styling)
二、HTML5优点与缺点
2.1、优点
1、网络标准统一、HTML5本身是由W3C推荐出来的。
2、多设备、跨平台
3、即时更新。
4、提高可用性和改进用户的友好体验；
5、有几个新的标签，这将有助于开发人员定义重要的内容；
6、可以给站点带来更多的多媒体元素(视频和音频)；
7、可以很好的替代Flash和Silverlight；
8、涉及到网站的抓取和索引的时候，对于SEO很友好；
9、被大量应用于移动应用程序和游戏。
2.2、缺点
1)、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
2)、完善性：许多特性各浏览器的支持程度也不一样。
3)、性能：某些平台上的引擎问题导致HTML5性能低下。
4)、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。
三、HTML5 标签
1、<!--...--> ：所有浏览器都支持注释标签。
2、<html>：此元素可告知浏览器其自身是一个 HTML 文档。
3、<head> ：用于定义文档的头部，它是所有头部元素的容器。这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
4、<title>： 定义文档的标题，它是 head 部分中唯一必需的元素。
5、<meta> ：元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
6、<body>：元素定义文档的主体。
7、<script>:链接一个外部脚本文件
8、<style>:用于为 HTML 文档定义样式信息
9、<div>:定义文档中的分区或节（division/section）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
代码
结果：
10、<h1> ~ <h6>：可定义标题，选择恰当的标签层级来构建文档的结构
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>h1~h6</title>
6 </head>
7 <body>
8 <h1>标题一</h1>
9 <h2>标题二</h2>
10 <h3>标题三</h3>
11 <h4>标题四</h4>
12 <h5>标题五</h5>
13 <h6>标题六</h6>
14 </body>
15 </html>
代码
结果：
11、<p>：定义段落
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>p标签</title>
6 </head>
7 <body>
8 内容1
9 内容2
10 <p>内容3</p>
11 <p>内容4</p>
12 <p>内容5</p>
13 </body>
14 </html>
代码
结果：
12、<br />：简单的换行符。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>br：换行</title>
6 </head>
7 <body>
8 内容一
9 内容二
10 内容三
11 <br />
12 内容四
13 <br />
14 内容五
15 内容六
16 </body>
17 </html>
代码
结果：
13、<hr /> :HTML 页面中创建一条水平线
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>hr：水平线</title>
6 </head>
7 <body>
8 内容一
9 内容二
10 内容三
11 <hr />
12 内容四
13 <hr />
14 内容五
15 内容六
16 </body>
17 </html>
View Code
结果：
14、<ul>:标签定义无序列表
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>ul</title>
6 </head>
7 <body>
8 <ul>
9 <li>内容一</li>
10 <li>内容二</li>
11 <li>内容三</li>
12 <li>内容四</li>
13 </ul>
14 </body>
15 </html>
View Code
结果：
15、<ol> :定义有序列表
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>ol</title>
6 </head>
7 <body>
8 <ol>
9 <li>内容一</li>
10 <li>内容二</li>
11 <li>内容三</li>
12 <li>内容四</li>
13 </ol>
14 </body>
15 </html>
View Code
结果：
16、<li> 定义列表项目,用在有序列表 (<ol>) 和无序列表 (<ul>) 中
17、<dl> :定义了定义列表（definition list）。标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>dl</title>
6 </head>
7 <body>
8 <dl>
9 <dt>手机</dt>
10 <dd>移动电话，或称为无线电话，通常称为手机，</dd>
11 <dt>电脑</dt>
12 <dd>是一种利用电子学原理根据一系列指令来对数据进行处理的设备。电脑可以分为两部分：软件系统和硬件系统。</dd>
13 </dl>
14 </body>
15 </html>
View Code
结果：
18、<dt> :定义列表中的项目
19、<dd> :描述列表中的项目
20、<span>:强调（突出文字）
21、<strong>:字体加粗
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>strong</title>
6 </head>
7 <body>
8 内容一
9 <strong>内容二</strong>
10 </body>
11 </html>
View Code
结果：
22、<em> :斜体
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>em</title>
6 <style type="text/css">
7 body{
8 background-color: #0181CC;
9 }
10 </style>
11 </head>
12 <body>
13 内容一
14 <em>内容二</em>
15 </body>
16 </html>
View Code
结果：
23、<mark> :字体高亮显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mark</title>
<style type="text/css">
body{
background-color: #CCCCCC;
}
</style>
</head>
<body>
内容一
<mark>内容二</mark>
</body>
</html>
View Code
结果：
24、<a>：标签定义超链接。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<p>
<a href="https://www.baidu.com/">百度</a>
</p>
<p>
<a href="sms:1319211111">发短信</a>
</p>
<p>
<a href="tel:1319211111">电话</a>
</p>
<p>
<a href="mailto:12345500@qq.com">邮箱</a>
</p>
<p><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=870427500&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:870427500:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</p>
<p><a href="http://map.baidu.com/mobile/webapp/search/search/qt=s&wd=%E7%8F%A0%E6%B5%B7%E6%B8%AF&c=348&searchFlag=bigBox&version=5&exptype=dep/vt=map/?fromhash=1">地图</a>
</p>
<p>
<div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_qzone" data-cmd="qzone"></a><a href="#" class="bds_tsina" data-cmd="tsina"></a><a href="#" class="bds_tqq" data-cmd="tqq"></a><a href="#" class="bds_renren" data-cmd="renren"></a><a href="#" class="bds_weixin" data-cmd="weixin"></a></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
</p>
<p>
<iframe src="https://map.baidu.com" width="1300" height="1000"></iframe>
</p>
<a href="https://map.baidu.com" target="ditu">连接</a>
<p>
<iframe name="ditu" src="" width="1300" height="1000"></iframe>
</p>
</body>
</html>
View Code
结果：
25、<table> ：定义HTML 表格 ，分头<thead>和主体<tboody>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>积分记录表</title>
6 <style type="text/css">
7 td{
8 width: 50px;
9 }
10 </style>
11 </head>
12 <body>
13 <table border="1" cellspacing="0" cellpadding="0" align="center" >
14 <caption style="font-size:30px;font-family:微软雅黑;">《计算机基础》积分记录表</caption>
15
16 <tr align="center" style="font-size:20px;font-family:微软雅黑;">
17 <td ROWSPAN="3" style="width:10px">组序号</td>
18 <td rowspan="3"">姓名</td>
19 <td colspan="5" >第一章</td>
20 <td colspan="4">晚自习9.17-9.21</td>
21 <td colspan="5">第七章</td>
22 <td rowspan="3">扣分</td>
23 <td rowspan="3" width="40">考核分数</td>
24 <td rowspan="3" width="40">个人总分</td>
25 <td rowspan="3" width="60" > 小组 平均分</td>
26 </tr>
27
28 <tr align="center" style="font-family:微软雅黑";>
29 <td>预习</td>
30 <td></td>
31 <td>课堂</td>
32 <td>作业</td>
33 <td>奖励</td>
34 <td>认真学习</td>
35 <td width="50">帮助其他同学</td>
36 <td>游戏</td>
37 <td width="50">与学习无关</td>
38 <td>预习</td>
39 <td></td>
40 <td></td>
41 <td>课堂</td>
42 <td>奖励</td>
43 </tr>
44
45 <tr align="center" style="color:red">
46 <td>0.5</td>
47 <td></td>
48 <td>0.5</td>
49 <td>0.3</td>
50 <td></td>
51 <td>0.1</td>
52 <td>0.1</td>
53 <td>-0.1</td>
54 <td>-0.1</td>
55 <td>0.5</td>
56 <td></td>
57 <td></td>
58 <td>0.5</td>
59 <td></td>
60 </tr>
61
62 <tr>
63 <td rowspan="5">1</td>
64 </tr>
65
66 <tr>
67 <td>小明1</td>
68 <td></td>
69 <td>0.5</td>
70 <td></td>
71 <td></td>
72 <td></td>
73 <td>0.5</td>
74 <td></td>
75 <td></td>
76 <td></td>
77 <td>0.6</td>
78 <td></td>
79 <td>0.4</td>
80 <td></td>
81 <td></td>
82 <td></td>
83 <td></td>
84 <td>4.7</td>
85 <td rowspan="4">3.125</td>
86 </tr>
87 <tr>
88 <td>小明2</td>
89 <td></td>
90 <td>0.5</td>
91 <td></td>
92 <td></td>
93 <td></td>
94 <td>0.5</td>
95 <td></td>
96 <td></td>
97 <td></td>
98 <td>0.6</td>
99 <td></td>
100 <td>0.4</td>
101 <td></td>
102 <td></td>
103 <td></td>
104 <td></td>
105 <td>4.7</td>
106 </tr>
107 <tr>
108 <td>小明3</td>
109 <td></td>
110 <td>0.5</td>
111 <td></td>
112 <td></td>
113 <td></td>
114 <td>0.5</td>
115 <td></td>
116 <td></td>
117 <td></td>
118 <td>0.6</td>
119 <td></td>
120 <td>0.4</td>
121 <td></td>
122 <td></td>
123 <td></td>
124 <td>4.7</td>
125 </tr>
126 <tr>
127 <td>小明4</td>
128 <td></td>
129 <td>0.5</td>
130 <td></td>
131 <td></td>
132 <td></td>
133 <td>0.5</td>
134 <td></td>
135 <td></td>
136 <td></td>
137 <td>0.6</td>
138 <td></td>
139 <td>0.4</td>
140 <td></td>
141 <td></td>
142 <td></td>
143 <td></td>
144 <td>4.7</td>
145 </tr>
146
147
148
149 <tr>
150 <td rowspan="5">2</td>
151 </tr>
152
153 <tr>
154 <td>小明5</td>
155 <td></td>
156 <td>0.5</td>
157 <td></td>
158 <td></td>
159 <td></td>
160 <td>0.5</td>
161 <td></td>
162 <td></td>
163 <td></td>
164 <td>0.6</td>
165 <td></td>
166 <td>0.4</td>
167 <td></td>
168 <td></td>
169 <td></td>
170 <td></td>
171 <td>4.7</td>
172 <td rowspan="4">3.125</td>
173 </tr>
174
175 <tr>
176 <td>小明6</td>
177 <td></td>
178 <td>0.5</td>
179 <td></td>
180 <td></td>
181 <td></td>
182 <td>0.5</td>
183 <td></td>
184 <td></td>
185 <td></td>
186 <td>0.6</td>
187 <td></td>
188 <td>0.4</td>
189 <td></td>
190 <td></td>
191 <td></td>
192 <td></td>
193 <td>4.7</td>
194 </tr>
195 <tr>
196 <td>小明7</td>
197 <td></td>
198 <td>0.5</td>
199 <td></td>
200 <td></td>
201 <td></td>
202 <td>0.5</td>
203 <td></td>
204 <td></td>
205 <td></td>
206 <td>0.6</td>
207 <td></td>
208 <td>0.4</td>
209 <td></td>
210 <td></td>
211 <td></td>
212 <td></td>
213 <td>4.7</td>
214 </tr>
215 <tr>
216 <td>小明8</td>
217 <td></td>
218 <td>0.5</td>
219 <td></td>
220 <td></td>
221 <td></td>
222 <td>0.5</td>
223 <td></td>
224 <td></td>
225 <td></td>
226 <td>0.6</td>
227 <td></td>
228 <td>0.4</td>
229 <td></td>
230 <td></td>
231 <td></td>
232 <td></td>
233 <td>4.7</td>
234 </tr>
235 </table>
236 </body>
237 </html>
View Code
结果：
26、<caption>:表格标题
27、<tr>：定义表格行
28、<th>：定义表格列头
29、<td>：定义表格定义
30、<img/>：定义图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #CCCCCC;
}
</style>
</head>
<body>
<img src="img/2.jpg"/ width="300" height="200">
</body>
</html>
View Code
结果：
31、<meter>：表示特定范围内的数值
<html>
<head>
<meta charset="utf-8" />
<title>进度条</title>
<style type="text/css">
#meter{
width: 400px;
height:50px;
}
div{
width: 550px;
margin:150px auto;
font-size: 50px;
cursor: ne-resize;
}
progress{
width: 400px;
background-color: royalblue;
}
</style>
</head>
<body>
<div>
<meter min="0" max="100" value='0' id='meter'></meter><span></span>
<progress value="0" max="100"></progress><span></span>
</div>
<script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var i=0;
function ds(){
$("#meter").val(i);
$("progress").val(i);
$("span").html(i+"%");
if(i==100){
clearInterval(s);
//alert("加载完成！！！！")
}
i++;
}
var s=setInterval(ds,100)
</script>
</body>
</html>
View Code
结果：
23、<time>:表示时间值，属性datetime强调时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表示时间的标签：time</title>
</head>
<body>
<time id="date"></time>
<br />
我们在每天早上 <time>8:30</time> 开始上课。 我在<time datetime="2017-02-14">情人节</time>有个约会。
<script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function sj(){
var date=new Date();
$("#date").html(date.toLocaleString());
}
setInterval(sj,1000)
</script>
</body>
</html>
View Code
结果：
33、<progress>:进度条
34、<canvas>:图形容器(画布)
35、<video>:视频标签
<video width="800" height="600" controls="controls" poster="content/1.jpg">
<source src="content/iceage4.mp4" type="video/mp4"></source>
<source src="content/iceage4.webm" type="video/webm"></source>
<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
<param name="movie" value="myvideo.swf" />
<param name="flashvars" value="autostart=true&file=myvideo.swf" />
</object>
当前浏览器不支持 video直接播放，点击这里下载视频： <a href="content/iceage4.webm">下载视频</a>
</video>
View Code
结果：
source是视频源，可以有多种，当一种失败时将选择下一种，主要有如下3种：
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
格式支持情况：
标签属性：
source子标签属性：
video API方法
video API属性
video API事件
注意：
<video src="img/iceage4.mp4" controls="controls" poster="img/1.jpg"> 您的浏览器太老了，请升级，视频下载<a href="#">地址</a> </video>
多数的HTML5标签的innerHTML内容是浏览器不支持该标签时显示的内容。
video API的属性与事件示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视频播放</title>
<style type="text/css">
#div1{
margin:50px auto;
width:600px;
height:400px;
}
input{
margin-left: 15px;
}
video{
width:600px;
height:400px;
}
progress{
width:600px;
}
</style>
</head>
<body>
<div id="div1">
<video src="../img/moji.mp4" id="TV" autoplay>
您的浏览器不支持 video 标签。
</video>
<progress value="0" max="100" id="pr"></progress>
<div>
<input type="button" id="play" value="播放" />
<input type="button" id="suspend" value="暂停" />
<input type="button" id="continue" value="继续" />
<input type="button" id="mute" value="静音" />
<input type="button" id="reverse" value="快退-5" />
<input type="button" id="speed" value="快进+5" />
<input type="button" id="volumeadd" value="音量-"/>
<input type="button" id="volumesubtract" value="音量+"/>
<input type="button" id="screen" value="全屏" />
<input type="button" id="jia" value="加速播放" />
<input type="button" id="zhengchang" value="正常播放" />
<input type="button" id="jian" value="减速播放" />
</div>
</div>
<script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//获取视频元素
var TV=document.getElementById("TV");
//获取进度条元素
var pr=document.getElementById("pr");
//修改进度条的最大值
function x(){
pr.max=TV.duration
}
setTimeout(x,0)
//进度条进度
TV.ontimeupdate=function(){
pr.value=TV.currentTime
}
//播放
$("#play").click(function(){
TV.play()
})
//暂停
$("#suspend").click(function(){
TV.pause()
})
//继续
$("#continue").click(function(){
TV.play()
})
//静音
$("#mute").click(function(){
if(TV.muted){
TV.muted=false;
}else{
TV.muted=true;
}
})
//快退-5
$("#reverse").click(function(){
TV.currentTime-=5
})
//快进+5
$("#speed").click(function(){
TV.currentTime+=5
})
//音量-
$("#volumeadd").click(function(){
TV.volume-=1
})
//音量+
$("#volumesubtract").click(function(){
TV.volume+=1
})
//全屏
$("#screen").click(function(){
TV.webkitRequestFullScreen();
})
//加速
$("#jia").click(function(){
TV.playbackRate=3
})
//减速
$("#jian").click(function(){
TV.playbackRate=1/3
})
//正常
$("#zhengchang").click(function(){
TV.playbackRate=1
})
</script>
</body>
</html>
View Code
结果：
36、<audio>:音频标签
audio可以实现播放声音，音乐功能。
<audio src=http://baidu/demo/test.mp3 controls >
您的浏览器不支持audio元素
</autio>
<audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"></audio>
audio标签的属性，很多属性都是与video相同的：
autoplay：true|false，如果是 true，则音频在就绪后马上播放。
controls：true|false 如果是true，则向用户显示控件，比如播放按钮。
end：numeric value 定义播放器在音频流中的何处停止播放。默认地，声音会播放到结尾。
loopend：numeric value 定义在音频流中循环播放停止的位置，默认是 end 属性的值。
loopstart： numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount： numeric value 定义音频片断播放多少次。默认是 1。
src： url 所播放音频的 url。
start : numeric value 定义播放器在音频流中开始播放的位置。默认地，声音在开头进行播放。
source子标签
使用source元素作为多媒体元素的子标签
例:
<audio>
<source src='test.mp3’ type='audio/mpeg'/>
<source src='test.ogg’ type='audio/ogg'/>
<source src='test.spx’ type='audio/ogg'/>
</audio>
使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。
37、<embed>:多媒体
用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多媒体（embed）</title>
</head>
<body>
<!--既可以播放视频，也可以部分音频-->
<embed src="../img/moji.mp4"></embed>
<embed src="../img/Kis-My-Ft2 - PICK IT UP.mp3"></embed>
</body>
</html>
View Code
结果：
38、<iframe>:内嵌框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<a href="https://map.baidu.com" target="ditu">连接</a>
<p>
<iframe name="ditu" src="" width="1300" height="1000"></iframe>
</p>
</body>
</html>
View Code
39、<input>:HTML表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实操题一</title>
<style type="text/css">
#fie{
width: 350px;
}
</style>
</head>
<body>
<fieldset id="fie">
<legend>HTML新表单元素</legend>
<form action="右键菜单(contextmenu).html" method="get">
<p>
<label for="guojia">国家：</label>
<input type="text" id="guojia" name="guojia" required="required"/>
</p>
<p>
<label for="wenjian">文件：</label>
<input type="file" id="wenjian" name="wenjian" multiple="multiple" />
</p>
<p>
<label for="zhengze">正则：</label>
<input type="text" id="zhengze" name="zhengze" placeholder="请输入6-16位的数字字母" pattern="^[0-9a-zA-Z]{6,16}$"/>
</p>
<p>
<label for="youxiang">邮箱：</label>
<input type="email" id="youxiang" name="youxiang" placeholder="请输入邮箱"/>
</p>
<p>
<label for="wangzhi">网址：</label>
<input type="url" id="wangzhi" name="wangzhi" placeholder="请输入网址"/>
</p>
<p>
<label for="riqi">日期：</label>
<input type="date" id="riqi" name="riqi"/>
</p>
<p>
<label for="shuzi">数字：</label>
<input type="number" id="shuzi" name="shuzi" />
</p>
<p>
<label for="huakuai">滑块：</label>
<input type="range" id="huakuai" name=huakuai" />
</p>
<p>
<label for="sosuo">搜索：</label>
<input type="search" id="sosuo" name="sosuo" />
</p>
<p>
<label for="dianhua">电话：</label>
<input type="tel" id="dianhua" name="dianhua" />
</p>
<p>
<label for="yanse">颜色：</label>
<input type="color" id="yanse" name="yanse" />
</p>
<p>
<label for="zhanwei">站位：</label>
<input type="text" id="zhanwei" name="zhanwei" placeholder="请输入用户名"/>
</p>
<input type="submit" value="提交"/>
<input type="button" value="查找" onclick="alert('查找什么？？？')"/>
</form>
</fieldset>
</body>
</html>
View Code
结果：
40、<textarea>:多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #CCCCCC;
}
</style>
</head>
<body>
<p>
<label>编辑：</label>
<textarea cols="10" rows="10"></textarea>
</p>
</body>
</html>
View Code
结果：
41、<select>:创建单选或多选菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #CCCCCC;
}
</style>
</head>
<body>
<select name="">
<option value="">内容一</option>
<option value="">内容二</option>
<option value="">内容三</option>
<option value="">内容四</option>
<option value="">内容五</option>
</select>
</body>
</html>
View Code
结果：
42、<option>:定义下拉列表中的一个选项
43、<form>:用于为用户输入创建 HTML 表单
44、<menu>:定义右键菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1" style="height:900px; background: lightgreen;" contextmenu="menuShare">
</div>
<menu id="menuShare" type="context">
<menuitem label="分享到QQ空间" onclick="alert('QQ');"></menuitem>
<menuitem label="分享到朋友圈" onclick="alert('朋友圈');"></menuitem>
<menuitem label="分享到微博" onclick="alert('微博');"></menuitem>
</menu>
</body>
</html>
View Code
结果：
contextmenu 在Html5中，每个元素新增了一个属性：contextmenu, contextmenu 是上下文菜单，即鼠标右击元素会出现一个菜单。
menu 要实现鼠标右击元素会出现一个菜单，还必须了解HTML5里新增的另一个元素:menu 顾名思义menu是定义菜单的， menu 元素属性： type ：菜单类型属。 有三个值 1）context：上下文； 2）toolbar：工具栏；3）list：列表
<menuitem>
<menu> </menu>内部可以嵌入一个一个菜单项，即<menuitem></menuitem>。
menuitem 属性：
label：菜单项显示的名称
icon：在菜单项左侧显示的图标
onclick：点击菜单项触发的事件
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
