HTML5新手教程

[/url]
HTML5教程
HTML 5 簡(jiǎn)介
HTML5 是下一代的HTML。
什么是HTML5？
HTML5 將成為HTML、XHTML 以及HTML DOM 的新標(biāo)準(zhǔn)。
HTML 的上一個(gè)版本誕生于1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。
HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些HTML5 支持。
HTML5 是如何起步的？
HTML5 是W3C 與WHATWG 合作的結(jié)果。
編者注：W3C 指World Wide Web Consortium，萬維網(wǎng)聯(lián)盟。
編者注：WHATWG 指Web Hypertext Application Technology Working Group。
WHATWG 致力于web 表單和應(yīng)用程序，而W3C 專注于XHTML 2.0。在2006 年，雙
方?jīng)Q定進(jìn)行合作，來創(chuàng)建一個(gè)新版本的HTML。
為HTML5 建立的一些規(guī)則：
• 新特性應(yīng)該基于HTML、CSS、DOM 以及JavaScript。
• 減少對(duì)外部插件的需求（比如Flash）
• 更優(yōu)秀的錯(cuò)誤處理
• 更多取代腳本的標(biāo)記
• HTML5 應(yīng)該獨(dú)立于設(shè)備
• 開發(fā)進(jìn)程應(yīng)對(duì)公眾透明
新特性
HTML5 中的一些有趣的新特性：
• 用于繪畫的canvas 元素
• 用于媒介回放的video 和audio 元素
• 對(duì)本地離線存儲(chǔ)的更好的支持
• 新的特殊內(nèi)容元素，比如article、footer、header、nav、section
• 新的表單控件，比如calendar、date、time、email、url、search
瀏覽器支持
最新版本的Safari、Chrome、Firefox 以及Opera 支持某些HTML5 特性。Internet Explorer
9 將支持某些HTML5 特性。
HTML 5 視頻
許多時(shí)髦的網(wǎng)站都提供視頻。HTML5 提供了展示視頻的標(biāo)準(zhǔn)。
Web 上的視頻
直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)。
今天，大多數(shù)視頻是通過插件（比如Flash）來顯示的。然而，并非所有瀏覽器都擁有同樣
的插件。
HTML5 規(guī)定了一種通過video 元素來包含視頻的標(biāo)準(zhǔn)方法。
視頻格式
當(dāng)前，video 元素支持兩種視頻格式：
Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg X X X
MPEG 4 X X
Ogg = 帶有Thedora 視頻編碼和Vorbis 音頻編碼的Ogg 文件
MPEG4 = 帶有H.264 視頻編碼和AAC 音頻編碼的MPEG 4 文件
如何工作
如需在HTML5 中顯示視頻，您所有需要的是：
<video src="movie.ogg" controls="controls">
</video>
control 屬性供添加播放、暫停和音量控件。
包含寬度和高度屬性也是不錯(cuò)的主意。
<video> 與</video> 之間插入的內(nèi)容是供不支持video 元素的瀏覽器顯示的：
實(shí)例
<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>
上面的例子使用一個(gè)Ogg 文件，適用于Firefox、Opera 以及Chrome 瀏覽器。
要確保適用于Safari 瀏覽器，視頻文件必須是MPEG4 類型。
video 元素允許多個(gè)source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第
一個(gè)可識(shí)別的格式：
實(shí)例
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Internet Explorer
Internet Explorer 8 不支持video 元素。在IE 9 中，將提供對(duì)使用MPEG4 的video 元素
的支持。
<video> 標(biāo)簽的屬性
屬性值描述
autoplay autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
height pixels 設(shè)置視頻播放器的高度。
loop loop 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。
preload preload
如果出現(xiàn)該屬性，則視頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。
如果使用"autoplay"，則忽略該屬性。
src url 要播放的視頻的URL。
width pixels 設(shè)置視頻播放器的寬度。
HTML 5 音頻
HTML5 提供了播放音頻的標(biāo)準(zhǔn)。
Web 上的音頻
直到現(xiàn)在，仍然不存在一項(xiàng)旨在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)。
今天，大多數(shù)音頻是通過插件（比如Flash）來播放的。然而，并非所有瀏覽器都擁有同樣
的插件。
HTML5 規(guī)定了一種通過audio 元素來包含音頻的標(biāo)準(zhǔn)方法。
audio 元素能夠播放聲音文件或者音頻流。
視頻格式
當(dāng)前，audio 元素支持三種音頻格式：
Internet Explorer Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis X X X
MP3 X X
Wav X X X
如何工作
如需在HTML5 中播放音頻，您所有需要的是：
<audio src="song.ogg" controls="controls">
</audio>
control 屬性供添加播放、暫停和音量控件。
<audio> 與</audio> 之間插入的內(nèi)容是供不支持audio 元素的瀏覽器顯示的：
實(shí)例
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
上面的例子使用一個(gè)Ogg 文件，適用于Firefox、Opera 以及Chrome 瀏覽器。
要確保適用于Safari 瀏覽器，音頻文件必須是MP3 或Wav 類型。
audio 元素允許多個(gè)source 元素。source 元素可以鏈接不同的音頻文件。瀏覽器將使用第
一個(gè)可識(shí)別的格式：
實(shí)例
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Internet Explorer
Internet Explorer 8 不支持audio 元素。在IE 9 中，將提供對(duì)audio 元素的支持。
<audio> 標(biāo)簽的屬性
屬性值描述
autoplay autoplay 如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
controls controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
preload preload
如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。
如果使用"autoplay"，則忽略該屬性。
src url 要播放的音頻的URL。
HTML 5 Canvas
canvas 元素用于在網(wǎng)頁上繪制圖形。
什么是Canvas？
HTML5 的canvas 元素使用JavaScript 在網(wǎng)頁上繪制圖像。
畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。
canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
創(chuàng)建Canvas 元素
向HTML5 頁面添加canvas 元素。
規(guī)定元素的id、寬度和高度：
<canvas id="myCanvas" width="200" height="100"></canvas>
通過JavaScript 來繪制
canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在JavaScript 內(nèi)部完成：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用id 來尋找canvas 元素：
var c=document.getElementById("myCanvas");
然后，創(chuàng)建context 對(duì)象：
var cxt=c.getContext("2d");
getContext("2d") 對(duì)象是內(nèi)建的HTML5 對(duì)象，擁有多種繪制路徑、矩形、圓形、字符以及
添加圖像的方法。
下面的兩行代碼繪制一個(gè)紅色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法將其染成紅色，fillRect 方法規(guī)定了形狀、位置和尺寸。
理解坐標(biāo)
上面的fillRect 方法擁有參數(shù)(0,0,150,75)。
意思是：在畫布上繪制150x75 的矩形，從左上角開始(0,0)。
如下圖所示，畫布的X 和Y 坐標(biāo)用于在畫布上對(duì)繪畫進(jìn)行定位。
實(shí)例：把鼠標(biāo)懸停在矩形上可以看到坐標(biāo)
更多Canvas 實(shí)例
下面的在canvas 元素上進(jìn)行繪畫的更多實(shí)例：
實(shí)例- 線條
通過指定從何處開始，在何處結(jié)束，來繪制一條線：
JavaScript 代碼：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
親自試一試
實(shí)例- 圓形
通過規(guī)定尺寸、顏色和位置，來繪制一個(gè)圓：
JavaScript 代碼：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
親自試一試
實(shí)例- 漸變
使用您指定的顏色來繪制漸變背景：
JavaScript 代碼：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
親自試一試
實(shí)例- 圖像
把一幅圖像放置到畫布上：
JavaScript 代碼：
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
canvas 元素：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
HTML 5 Web 存儲(chǔ)
在客戶端存儲(chǔ)數(shù)據(jù)
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：
localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage - 針對(duì)一個(gè)session 的數(shù)據(jù)存儲(chǔ)
之前，這些都是由cookie 完成的。但是cookie 不適合大量數(shù)據(jù)的存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)
對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得cookie 速度很慢而且效率也不高。
在HTML5 中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在
不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。
對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。
HTML5 使用JavaScript 來存儲(chǔ)和訪問數(shù)據(jù)。
localStorage 方法
localStorage 方法存儲(chǔ)的數(shù)據(jù)沒有時(shí)間限制。第二天、第二周或下一年之后，數(shù)據(jù)依然可用。
如何創(chuàng)建和訪問localStorage：
實(shí)例
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
下面的例子對(duì)用戶訪問頁面的次數(shù)進(jìn)行計(jì)數(shù)：
實(shí)例
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
sessionStorage 方法
sessionStorage 方法針對(duì)一個(gè)session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被
刪除。
如何創(chuàng)建并訪問一個(gè)sessionStorage：
實(shí)例
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
下面的例子對(duì)用戶在當(dāng)前session 中訪問頁面的次數(shù)進(jìn)行計(jì)數(shù)：
實(shí)例
<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>
HTML5 Input 類型
HTML5 新的Input 類型
HTML5 擁有多個(gè)新的表單輸入類型。這些新特性提供了更好的輸入控制和驗(yàn)證。
本章全面介紹這些新的輸入類型：
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color
瀏覽器支持
Input type IE Firefox Opera Chrome Safari
email No No 9.0 No No
url No No 9.0 No No
number No No 9.0 No No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 No No
search No No No No No
color No No No No No
注釋：Opera 對(duì)新的輸入類型的支持最好。不過您已經(jīng)可以在所有主流的瀏覽器中使用它們
了。即使不被支持，仍然可以顯示為常規(guī)的文本域。
Input 類型- email
email 類型用于應(yīng)該包含e-mail 地址的輸入域。
在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證email 域的值。
實(shí)例
E-mail: <input type="email" name="user_email" />
提示：iPhone 中的Safari 瀏覽器支持email 輸入類型，并通過改變觸摸屏鍵盤來配合它（添
加@ 和.com 選項(xiàng)）。
Input 類型- url
url 類型用于應(yīng)該包含URL 地址的輸入域。
在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證url 域的值。
實(shí)例
Homepage: <input type="url" name="user_url" />
提示：iPhone 中的Safari 瀏覽器支持url 輸入類型，并通過改變觸摸屏鍵盤來配合它（添
加.com 選項(xiàng)）。
Input 類型- number
number 類型用于應(yīng)該包含數(shù)值的輸入域。
您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：
實(shí)例
Points: <input type="number" name="points" min="1" max="10" />
請(qǐng)使用下面的屬性來規(guī)定對(duì)數(shù)字類型的限定：
屬性值描述
max number 規(guī)定允許的最大值
min number 規(guī)定允許的最小值
step number 規(guī)定合法的數(shù)字間隔（如果step="3"，則合法的數(shù)是-3,0,3,6 等）
value number 規(guī)定默認(rèn)值
提示：iPhone 中的Safari 瀏覽器支持number 輸入類型，并通過改變觸摸屏鍵盤來配合它
（顯示數(shù)字）。
Input 類型- range
range 類型用于應(yīng)該包含一定范圍內(nèi)數(shù)字值的輸入域。
range 類型顯示為滑動(dòng)條。
您還能夠設(shè)定對(duì)所接受的數(shù)字的限定：
實(shí)例
<input type="range" name="points" min="1" max="10" />
請(qǐng)使用下面的屬性來規(guī)定對(duì)數(shù)字類型的限定：
屬性值描述
max number 規(guī)定允許的最大值
min number 規(guī)定允許的最小值
step number 規(guī)定合法的數(shù)字間隔（如果step="3"，則合法的數(shù)是-3,0,3,6 等）
value number 規(guī)定默認(rèn)值
Input 類型- Date Pickers（數(shù)據(jù)檢出器）
HTML5 擁有多個(gè)可供選取日期和時(shí)間的新輸入類型：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時(shí)間（小時(shí)和分鐘）
datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）
datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）
下面的例子允許您從日歷中選取一個(gè)日期：
實(shí)例
Date: <input type="date" name="user_date" />
輸入類型"month":
輸入類型"week":
輸入類型"time":
輸入類型"datetime":
輸入類型"datetime-local":
Input 類型- search
search 類型用于搜索域，比如站點(diǎn)搜索或Google 搜索。
search 域顯示為常規(guī)的文本域。
HTML5 表單元素
HTML5 的新的表單元素：
HTML5 擁有若干涉及表單的元素和屬性。
本章介紹以下新的表單元素：
datalist
keygen
output
瀏覽器支持
Input type IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No
datalist 元素
datalist 元素規(guī)定輸入域的選項(xiàng)列表。
列表是通過datalist 內(nèi)的option 元素創(chuàng)建的。
如需把datalist 綁定到輸入域，請(qǐng)用輸入域的list 屬性引用datalist 的id：
實(shí)例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
提示：option 元素永遠(yuǎn)都要設(shè)置value 屬性。
keygen 元素
keygen 元素的作用是提供一種驗(yàn)證用戶的可靠方法。
keygen 元素是密鑰對(duì)生成器（key-pair generator）。當(dāng)提交表單時(shí)，會(huì)生成兩個(gè)鍵，一個(gè)是
私鑰，一個(gè)公鑰。
私鑰（private key）存儲(chǔ)于客戶端，公鑰（public key）則被發(fā)送到服務(wù)器。公鑰可用于之后
驗(yàn)證用戶的客戶端證書（client certificate）。
目前，瀏覽器對(duì)此元素的糟糕的支持度不足以使其成為一種有用的安全標(biāo)準(zhǔn)。
實(shí)例
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
output 元素
output 元素用于不同類型的輸出，比如計(jì)算或腳本輸出：
實(shí)例
<output id="result"></output>
HTML5 表單屬性
HTML5 的新的表單屬性
本章講解涉及<form> 和<input> 元素的新屬性。
新的form 屬性：
• autocomplete
• novalidate
新的input 屬性：
• autocomplete
• autofocus
• form
• form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
• height 和width
• list
• min, max 和step
• multiple
• pattern (regexp)
• placeholder
• required
瀏覽器支持
Input type IE Firefox Opera Chrome Safari
autocomplete 8.0 3.5 9.5 3.0 4.0
autofocus No No 10.0 3.0 4.0
form No No 9.5 No No
form overrides No No 10.5 No No
height and width 8.0 3.5 9.5 3.0 4.0
list No No 9.5 No No
min, max and step No No 9.5 3.0 No
multiple No 3.5 No 3.0 4.0
novalidate No No No No No
pattern No No 9.5 3.0 No
placeholder No No No 3.0 3.0
required No No 9.5 3.0 No
autocomplete 屬性
autocomplete 屬性規(guī)定form 或input 域應(yīng)該擁有自動(dòng)完成功能。
注釋：autocomplete 適用于<form> 標(biāo)簽，以及以下類型的<input> 標(biāo)簽：text, search, url,
telephone, email, password, datepickers, range 以及color。
當(dāng)用戶在自動(dòng)完成域中開始輸入時(shí)，瀏覽器應(yīng)該在該域中顯示填寫的選項(xiàng)：
實(shí)例
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
注釋：在某些瀏覽器中，您可能需要啟用自動(dòng)完成功能，以使該屬性生效。
autofocus 屬性
autofocus 屬性規(guī)定在頁面加載時(shí)，域自動(dòng)地獲得焦點(diǎn)。
注釋：autofocus 屬性適用于所有<input> 標(biāo)簽的類型。
實(shí)例
User name: <input type="text" name="user_name" autofocus="autofocus" />
form 屬性
form 屬性規(guī)定輸入域所屬的一個(gè)或多個(gè)表單。
注釋：form 屬性適用于所有<input> 標(biāo)簽的類型。
form 屬性必須引用所屬表單的id：
實(shí)例
<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />
注釋：如需引用一個(gè)以上的表單，請(qǐng)使用空格分隔的列表。
表單重寫屬性
表單重寫屬性（form override attributes）允許您重寫form 元素的某些屬性設(shè)定。
表單重寫屬性有：
formaction - 重寫表單的action 屬性
formenctype - 重寫表單的enctype 屬性
formmethod - 重寫表單的method 屬性
formnovalidate - 重寫表單的novalidate 屬性
formtarget - 重寫表單的target 屬性
注釋：表單重寫屬性適用于以下類型的<input> 標(biāo)簽：submit 和p_w_picpath。
實(shí)例
<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>
注釋：這些屬性對(duì)于創(chuàng)建不同的提交按鈕很有幫助。
height 和width 屬性
height 和width 屬性規(guī)定用于p_w_picpath 類型的input 標(biāo)簽的圖像高度和寬度。
注釋：height 和width 屬性只適用于p_w_picpath 類型的<input> 標(biāo)簽。
實(shí)例
<input type="p_w_picpath" src="img_submit.gif" width="99" height="99" />
list 屬性
list 屬性規(guī)定輸入域的datalist。datalist 是輸入域的選項(xiàng)列表。
注釋：list 屬性適用于以下類型的<input> 標(biāo)簽：text, search, url, telephone, email, date pickers,
number, range 以及color。
實(shí)例
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
min、max 和step 屬性
min、max 和step 屬性用于為包含數(shù)字或日期的input 類型規(guī)定限定（約束）。
max 屬性規(guī)定輸入域所允許的最大值。
min 屬性規(guī)定輸入域所允許的最小值。
step 屬性為輸入域規(guī)定合法的數(shù)字間隔（如果step="3"，則合法的數(shù)是-3,0,3,6 等）。
注釋：min、max 和step 屬性適用于以下類型的<input> 標(biāo)簽：date pickers、number 以及
range。
下面的例子顯示一個(gè)數(shù)字域，該域接受介于0 到10 之間的值，且步進(jìn)為3（即合法的值
為0、3、6 和9）：
實(shí)例
Points: <input type="number" name="points" min="0" max="10" step="3" />
multiple 屬性
multiple 屬性規(guī)定輸入域中可選擇多個(gè)值。
注釋：multiple 屬性適用于以下類型的<input> 標(biāo)簽：email 和file。
實(shí)例
Select p_w_picpaths: <input type="file" name="img" multiple="multiple" />
novalidate 屬性
novalidate 屬性規(guī)定在提交表單時(shí)不應(yīng)該驗(yàn)證form 或input 域。
注釋：novalidate 屬性適用于<form> 以及以下類型的<input> 標(biāo)簽：text, search, url,
telephone, email, password, date pickers, range 以及color.
實(shí)例
<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>
pattern 屬性
pattern 屬性規(guī)定用于驗(yàn)證input 域的模式（pattern）。
模式（pattern） 是正則表達(dá)式。您可以在我們的JavaScript 教程中學(xué)習(xí)到有關(guān)正則表達(dá)式
的內(nèi)容。
注釋：pattern 屬性適用于以下類型的<input> 標(biāo)簽：text, search, url, telephone, email 以及
password。
下面的例子顯示了一個(gè)只能包含三個(gè)字母的文本域（不含數(shù)字及特殊字符）：
實(shí)例
Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />
placeholder 屬性
placeholder 屬性提供一種提示（hint），描述輸入域所期待的值。
注釋：placeholder 屬性適用于以下類型的<input> 標(biāo)簽：text, search, url, telephone, email 以
及password。
提示（hint）會(huì)在輸入域?yàn)榭諘r(shí)顯示出現(xiàn)，會(huì)在輸入域獲得焦點(diǎn)時(shí)消失：
實(shí)例
<input type="search" name="user_search" placeholder="Search W3School" />
required 屬性
required 屬性規(guī)定必須在提交之前填寫輸入域（不能為空）。
注釋：required 屬性適用于以下類型的<input> 標(biāo)簽：text, search, url, telephone, email,
password, date pickers, number, checkbox, radio 以及file。
實(shí)例
Name: <input type="text" name="usr_name" required="required" />
HTML 5 參考手冊(cè)
W3C 在1 月22 日發(fā)布了最新的HTML 5 工作草案。HTML 5 工作組包括AOL, Apple,
Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及數(shù)百個(gè)其他的開發(fā)商。HTML 5 中的一些
新特性：嵌入音頻、視頻、圖片的函數(shù)、客戶端數(shù)據(jù)存儲(chǔ)，以及交互式文檔。其他特性包
括新的頁面元素，比如<header>, <section>, <footer>, 以及<figure>。
通過制定如何處理所有HTML 元素以及如何從錯(cuò)誤中恢復(fù)的精確規(guī)則，HTML 5 改進(jìn)了互
操作性，并減少了開發(fā)成本。
按字母順序排列
• 4: 指示在HTML 4.01 中是否定義了該元素
• 5: 指示在HTML 5 中是否定義了該元素
標(biāo)簽描述4 5
<!--...--> 定義注釋。4 5
<!DOCTYPE> 定義文檔類型。4 5
<a> 定義超鏈接。4 5
<abbr> 定義縮寫。4 5
<acronym> HTML 5 中不支持。定義首字母縮寫。4
<address> 定義地址元素。4 5
<applet> HTML 5 中不支持。定義applet。4
<area> 定義圖像映射中的區(qū)域。4 5
<article> 定義article。5
<aside> 定義頁面內(nèi)容之外的內(nèi)容。5
<audio> 定義聲音內(nèi)容。5
<b> 定義粗體文本。4 5
<base> 定義頁面中所有鏈接的基準(zhǔn)URL。4 5
<basefont> HTML 5 中不支持。請(qǐng)使用CSS 代替。4
<bdo> 定義文本顯示的方向。4 5
<big> HTML 5 中不支持。定義大號(hào)文本。4
<blockquote> 定義長(zhǎng)的引用。4 5
<body> 定義body 元素。4 5
<br> 插入換行符。4 5
<button> 定義按鈕。4 5
<canvas> 定義圖形。5
<caption> 定義表格標(biāo)題。4 5
<center> HTML 5 中不支持。定義居中的文本。4
<cite> 定義引用。4 5
<code> 定義計(jì)算機(jī)代碼文本。4 5
<col> 定義表格列的屬性。4 5
<colgroup> 定義表格列的分組。4 5
<command> 定義命令按鈕。5
<datalist> 定義下拉列表。5
<dd> 定義定義的描述。4 5
<del> 定義刪除文本。4 5
<details> 定義元素的細(xì)節(jié)。5
<dfn> 定義定義項(xiàng)目。4 5
<dir> HTML 5 中不支持。定義目錄列表。4
<div> 定義文檔中的一個(gè)部分。4 5
<dl> 定義定義列表。4 5
<dt> 定義定義的項(xiàng)目。4 5
<em> 定義強(qiáng)調(diào)文本。4 5
<embed> 定義外部交互內(nèi)容或插件。5
<fieldset> 定義fieldset。4 5
<figcaption> 定義figure 元素的標(biāo)題。5
<figure> 定義媒介內(nèi)容的分組，以及它們的標(biāo)題。5
<font> HTML 5 中不支持。4
<footer> 定義section 或page 的頁腳。5
<form> 定義表單。4 5
<frame> HTML 5 中不支持。定義子窗口（框架）。4
<frameset> HTML 5 中不支持。定義框架的集。4
<h2> to <h7> 定義標(biāo)題1 到標(biāo)題6。4 5
<head> 定義關(guān)于文檔的信息。4 5
<header> 定義section 或page 的頁眉。5
<hgroup> 定義有關(guān)文檔中的section 的信息。5
<hr> 定義水平線。4 5
<html> 定義html 文檔。4 5
<i> 定義斜體文本。4 5
<iframe> 定義行內(nèi)的子窗口（框架）。4 5
<img> 定義圖像。4 5
<input> 定義輸入域。4 5
<ins> 定義插入文本。4 5
<keygen> 定義生成密鑰。5
<isindex> HTML 5 中不支持。定義單行的輸入域。4
<kbd> 定義鍵盤文本。4 5
<label> 定義表單控件的標(biāo)注。4 5
<legend> 定義fieldset 中的標(biāo)題。4 5
<li> 定義列表的項(xiàng)目。4 5
<link> 定義資源引用。4 5
<map> 定義圖像映射。4 5
<mark> 定義有記號(hào)的文本。5
<menu> 定義菜單列表。4 5
<meta> 定義元信息。4 5
<meter> 定義預(yù)定義范圍內(nèi)的度量。5
<nav> 定義導(dǎo)航鏈接。5
<noframes> HTML 5 中不支持。定義noframe 部分。4
<noscript> 定義noscript 部分。4 5
<object> 定義嵌入對(duì)象。4 5
<ol> 定義有序列表。4 5
<optgroup> 定義選項(xiàng)組。4 5
<option> 定義下拉列表中的選項(xiàng)。4 5
<output> 定義輸出的一些類型。5
<p> 定義段落。4 5
<param> 為對(duì)象定義參數(shù)。4 5
<pre> 定義預(yù)格式化文本。4 5
<progress> 定義任何類型的任務(wù)的進(jìn)度。5
<q> 定義短的引用。4 5
<rp> 定義若瀏覽器不支持ruby 元素顯示的內(nèi)容。5
<rt> 定義ruby 注釋的解釋。5
<ruby> 定義ruby 注釋。5
<s> HTML 5 中不支持。定義加刪除線的文本。4
<samp> 定義樣本計(jì)算機(jī)代碼。4 5
<script> 定義腳本。4 5
<section> 定義section。5
<select> 定義可選列表。4 5
<small> 定義小號(hào)文本。4 5
<source> 定義媒介源。5
<span> 定義文檔中的section。4 5
<strike> HTML 5 中不支持。定義加刪除線的文本。4
<strong> 定義強(qiáng)調(diào)文本。4 5
<style> 定義樣式定義。4 5
<sub> 定義下標(biāo)文本。4 5
<summary> 定義details 元素的標(biāo)題。5
<sup> 定義上標(biāo)文本。4 5
<table> 定義表格。4 5
<tbody> 定義表格的主體。4 5
<td> 定義表格單元。4 5
<textarea> 定義textarea。4 5
<tfoot> 定義表格的腳注。4 5
<th> 定義表頭。4 5
<thead> 定義表頭。4 5
<time> 定義日期/時(shí)間。5
<title> 定義文檔的標(biāo)題。4 5
<tr> 定義表格行。4 5
<tt> HTML 5 中不支持。定義打字機(jī)文本。4
<u> HTML 5 中不支持。定義下劃線文本。4
<ul> 定義無序列表。4 5
<var> 定義變量。4 5
<video> 定義視頻。5
<xmp> HTML 5 中不支持。定義預(yù)格式文本。4
HTML 5 標(biāo)準(zhǔn)屬性
所有HTML 5 標(biāo)簽均支持下面列出的屬性，僅有少數(shù)例外。
HTML 5 標(biāo)準(zhǔn)屬性
NEW：HTML 5 中新的標(biāo)準(zhǔn)屬性。
注釋：HTML 4.01 不再支持accesskey 屬性：
屬性值描述
accesskey character 規(guī)定訪問元素的鍵盤快捷鍵
class classname 規(guī)定元素的類名（用于規(guī)定樣式表中的類）。
contenteditabl
e
• true
• false 規(guī)定是否允許用戶編輯內(nèi)容。
contextmenu menu_id 規(guī)定元素的上下文菜單。
data-yourvalue value
創(chuàng)作者定義的屬性。
HTML 文檔的創(chuàng)作者可以定義他們自己的屬性。
必須以"data-" 開頭。
dir
• ltr
• rtl 規(guī)定元素中內(nèi)容的文本方向。
draggable
• true
• false
• auto 規(guī)定是否允許用戶拖動(dòng)元素。
hidden hidden 規(guī)定該元素是無關(guān)的。被隱藏的元素不會(huì)顯示。
id id 規(guī)定元素的唯一ID。
item
• empty
• url 用于組合元素。
itemprop
• url
• group
value 用于組合項(xiàng)目。
lang language_code 規(guī)定元素中內(nèi)容的語言代碼。語言代碼參考手冊(cè)。
spellcheck
• true
• false 規(guī)定是否必須對(duì)元素進(jìn)行拼寫或語法檢查。
style style_definition 規(guī)定元素的行內(nèi)樣式。
subject id 規(guī)定元素對(duì)應(yīng)的項(xiàng)目。
tabindex number 規(guī)定元素的tab 鍵控制次序。
title text 規(guī)定有關(guān)元素的額外信息。
HTML 5 事件屬性
標(biāo)準(zhǔn)事件屬性
HTML 4 增加了通過事件觸發(fā)瀏覽器中行為的能力，比如當(dāng)用戶點(diǎn)擊某個(gè)元素時(shí)啟動(dòng)一段
JavaScript。
下面的表格列出了可插入HTML 5 元素中以定義事件行為的標(biāo)準(zhǔn)事件屬性。
Window 事件屬性
window 對(duì)象觸發(fā)的事件。
適用于<body> 標(biāo)簽：
屬性值描述
onafterprint script 在打印文檔之后運(yùn)行腳本
onbeforeprint script 在文檔打印之前運(yùn)行腳本
onbeforeonload script 在文檔加載之前運(yùn)行腳本
onblur script 當(dāng)窗口失去焦點(diǎn)時(shí)運(yùn)行腳本
onerror script 當(dāng)錯(cuò)誤發(fā)生時(shí)運(yùn)行腳本
onfocus script 當(dāng)窗口獲得焦點(diǎn)時(shí)運(yùn)行腳本
onhaschange script 當(dāng)文檔改變時(shí)運(yùn)行腳本
onload script 當(dāng)文檔加載時(shí)運(yùn)行腳本
onmessage script 當(dāng)觸發(fā)消息時(shí)運(yùn)行腳本
onoffline script 當(dāng)文檔離線時(shí)運(yùn)行腳本
ononline script 當(dāng)文檔上線時(shí)運(yùn)行腳本
onpagehide script 當(dāng)窗口隱藏時(shí)運(yùn)行腳本
onpageshow script 當(dāng)窗口可見時(shí)運(yùn)行腳本
onpopstate script 當(dāng)窗口歷史記錄改變時(shí)運(yùn)行腳本
onredo script 當(dāng)文檔執(zhí)行再執(zhí)行操作（redo）時(shí)運(yùn)行腳本
onresize script 當(dāng)調(diào)整窗口大小時(shí)運(yùn)行腳本
onstorage script 當(dāng)文檔加載加載時(shí)運(yùn)行腳本
onundo script 當(dāng)文檔執(zhí)行撤銷操作時(shí)運(yùn)行腳本
onunload script 當(dāng)用戶離開文檔時(shí)運(yùn)行腳本
表單事件
由HTML 表單內(nèi)部的動(dòng)作觸發(fā)的事件。
適用于所有HTML 5 元素，不過最常用于表單元素中：
屬性值描述
onblur script 當(dāng)元素失去焦點(diǎn)時(shí)運(yùn)行腳本
onchange script 當(dāng)元素改變時(shí)運(yùn)行腳本
oncontextmenu script 當(dāng)觸發(fā)上下文菜單時(shí)運(yùn)行腳本
onfocus script 當(dāng)元素獲得焦點(diǎn)時(shí)運(yùn)行腳本
onformchange script 當(dāng)表單改變時(shí)運(yùn)行腳本
onforminput script 當(dāng)表單獲得用戶輸入時(shí)運(yùn)行腳本
oninput script 當(dāng)元素獲得用戶輸入時(shí)運(yùn)行腳本
oninvalid script 當(dāng)元素?zé)o效時(shí)運(yùn)行腳本
onreset script 當(dāng)表單重置時(shí)運(yùn)行腳本。HTML 5 不支持。
onselect script 當(dāng)選取元素時(shí)運(yùn)行腳本
onsubmit script 當(dāng)提交表單時(shí)運(yùn)行腳本
鍵盤事件
由鍵盤觸發(fā)的事件。
適用于所有HTML 5 元素：
屬性值描述
onkeydown script 當(dāng)按下按鍵時(shí)運(yùn)行腳本
onkeypress script 當(dāng)按下并松開按鍵時(shí)運(yùn)行腳本
onkeyup script 當(dāng)松開按鍵時(shí)運(yùn)行腳本
鼠標(biāo)事件
由鼠標(biāo)貨相似的用戶動(dòng)作觸發(fā)的事件。
適用于所有HTML 5 元素：
屬性值描述
onclick script 當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本
ondblclick script 當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本
ondrag script 當(dāng)拖動(dòng)元素時(shí)運(yùn)行腳本
ondragend script 當(dāng)拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本
ondragenter script 當(dāng)元素被拖動(dòng)至有效的拖放目標(biāo)時(shí)運(yùn)行腳本
ondragleave script 當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)行腳本
ondragover script 當(dāng)元素被拖動(dòng)至有效拖放目標(biāo)上方時(shí)運(yùn)行腳本
ondragstart script 當(dāng)拖動(dòng)操作開始時(shí)運(yùn)行腳本
ondrop script 當(dāng)被拖動(dòng)元素正在被拖放時(shí)運(yùn)行腳本
script 當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本
script 當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本
script 當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本
script 當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本
script 當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本
script 當(dāng)轉(zhuǎn)動(dòng)鼠標(biāo)滾輪時(shí)運(yùn)行腳本
onscroll script 當(dāng)滾動(dòng)元素滾動(dòng)元素的滾動(dòng)條時(shí)運(yùn)行腳本
媒介事件
由視頻、圖像以及音頻等媒介觸發(fā)的事件。
適用于所有HTML 5 元素，不過在媒介元素（諸如audio、embed、img、object 以及video）
中最常用：
屬性值描述
onabort
scri
pt
當(dāng)發(fā)生中指事件時(shí)運(yùn)行腳本
oncanplay
scri
pt
當(dāng)媒介能夠開始播放但可能因緩沖而需要停止時(shí)運(yùn)行腳本
oncanplaythroug
h
scri
pt
當(dāng)媒介能夠無需因緩沖而停止即可播放至結(jié)尾時(shí)運(yùn)行腳本
ondurationchang
e
scri
pt
當(dāng)媒介長(zhǎng)度改變時(shí)運(yùn)行腳本
onemptied
scri
pt
當(dāng)媒介資源元素突然為空時(shí)（網(wǎng)絡(luò)錯(cuò)誤、加載錯(cuò)誤等）運(yùn)行腳本
onended
scri
pt
當(dāng)媒介已抵達(dá)結(jié)尾時(shí)運(yùn)行腳本
onerror
scri
pt
當(dāng)在元素加載期間發(fā)生錯(cuò)誤時(shí)運(yùn)行腳本
onloadeddata
scri
pt
當(dāng)加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onloadedmetadat
a
scri
pt
當(dāng)媒介元素的持續(xù)時(shí)間以及其他媒介數(shù)據(jù)已加載時(shí)運(yùn)行腳本
onloadstart
scri
pt
當(dāng)瀏覽器開始加載媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onpause
scri
pt
當(dāng)媒介數(shù)據(jù)暫停時(shí)運(yùn)行腳本
onplay
scri
pt
當(dāng)媒介數(shù)據(jù)將要開始播放時(shí)運(yùn)行腳本
onplaying
scri
pt
當(dāng)媒介數(shù)據(jù)已開始播放時(shí)運(yùn)行腳本
onprogress
scri
pt
當(dāng)瀏覽器正在取媒介數(shù)據(jù)時(shí)運(yùn)行腳本
onratechange
scri
pt
當(dāng)媒介數(shù)據(jù)的播放速率改變時(shí)運(yùn)行腳本
onreadystatecha
nge
scri
pt
當(dāng)就緒狀態(tài)（ready-state）改變時(shí)運(yùn)行腳本
onseeked
scri
pt
當(dāng)媒介元素的定位屬性[1] 不再為真且定位已結(jié)束時(shí)運(yùn)行腳本
onseeking
scri
pt
當(dāng)媒介元素的定位屬性為真且定位已開始時(shí)運(yùn)行腳本
onstalled
scri
pt
當(dāng)取回媒介數(shù)據(jù)過程中（延遲）存在錯(cuò)誤時(shí)運(yùn)行腳本
onsuspend
scri
pt
當(dāng)瀏覽器已在取媒介數(shù)據(jù)但在取回整個(gè)媒介文件之前停止時(shí)運(yùn)行腳
本
ontimeupdate
scri
pt
當(dāng)媒介改變其播放位置時(shí)運(yùn)行腳本
onvolumechange
scri
pt
當(dāng)媒介改變音量亦或當(dāng)音量被設(shè)置為靜音時(shí)運(yùn)行腳本
onwaiting
scri
pt
當(dāng)媒介已停止播放但打算繼續(xù)播放時(shí)運(yùn)行腳本
[1]：定位屬性的英文譯文是：seeking attribute。