一、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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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>
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>
結果：
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>
結果：
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>
結果：
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>
結果：
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：點擊菜單項觸發的事件
除了上述的標簽之外還有很多的標簽沒有一一說明，想詳細了解的話，就進這個網站：http://www.w3school.com.cn/html/index.asp