HTML5新手教程

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