html5 基本內容 摘自W3C

 

HTML5 教程（摘錄自 W3C School）

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

 

HTML 5 視頻

Web 上的視頻

直到如今，仍然不存在一項旨在網頁上顯示視頻的標準。今天，大多數視頻是經過插件（好比 Flash）來顯示的。然而，並不是全部瀏覽器都擁有一樣的插件。HTML5 規定了一種經過 video 元素來包含視頻的標準方法。

 

視頻格式（當前，video 元素支持兩種視頻格式）

Ogg = 帶有 Thedora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

 

如何工做

control 屬性供添加播放、暫停和音量控件。包含寬度和高度屬性也是不錯的主意。<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的：

上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式：

 

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。

 

<video> 標籤的屬性

 

HTML 5 音頻

Web 上的音頻

直到如今，仍然不存在一項旨在網頁上播放音頻的標準。今天，大多數音頻是經過插件（好比 Flash）來播放的。然而，並不是全部瀏覽器都擁有一樣的插件。HTML5 規定了一種經過 audio 元素來包含音頻的標準方法。audio 元素可以播放聲音文件或者音頻流。

 

視頻格式（當前，audio 元素支持三種音頻格式）

 

如何工做

與視頻播放的 code 很是相似：

 

Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中，將提供對 audio 元素的支持。

 

<audio> 標籤的屬性

 

HTML 5 Canvas

什麼是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。畫布是一個矩形區域，您能夠控制其每一像素。canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

 

建立 Canvas 元素

向 HTML5 頁面添加 canvas 元素。規定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

經過 JavaScript 來繪製

canvas 元素自己是沒有繪圖能力的。全部的繪製工做必須在 JavaScript 內部完成：

理解座標

上面的 fillRect 方法擁有參數 (0,0,150,75)。意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。以下圖所示，畫布的 X 和 Y 座標用於在畫布上對繪畫進行定位。

 

更多 Canvas 實例

下面的在 canvas 元素上進行繪畫的更多實例：

實例 - 線條

經過指定從何處開始，在何處結束，來繪製一條線：

 

實例 - 圓形

經過規定尺寸、顏色和位置，來繪製一個圓：

 

實例 - 漸變

使用您指定的顏色來繪製漸變背景：

 

實例 - 圖像

把一幅圖像放置到畫布上：

 

 

HTML 5 Web 存儲

在客戶端存儲數據

HTML5 提供了兩種在客戶端存儲數據的新方法：

• localStorage - 沒有時間限制的數據存儲
• sessionStorage - 針對一個 session 的數據存儲

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。

在 HTML5 中，數據不是由每一個服務器請求傳遞的，而是隻有在請求時使用數據。它使在不影響網站性能的狀況下存儲大量數據成爲可能。

對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。

HTML5 使用 JavaScript 來存儲和訪問數據。

 

localStorage 方法

localStorage 方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。

下面的例子對用戶訪問頁面的次數進行計數：

 

sessionStorage 方法

sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

如何建立並訪問一個 sessionStorage：

下面的例子對用戶在當前 session 中訪問頁面的次數進行計數：

 

HTML5 Input 類型

HTML5 新的 Input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。本章全面介紹這些新的輸入類型：

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

瀏覽器支持

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" />

提示：iPhone 中的 Safari 瀏覽器支持 number 輸入類型，並經過改變觸摸屏鍵盤來配合它（顯示數字）。

請使用下面的屬性來規定對數字類型的限定：

 

Input 類型 - range

range 類型用於應該包含必定範圍內數字值的輸入域。range 類型顯示爲滑動條。您還可以設定對所接受的數字的限定：

<input type="range" name="points" min="1" max="10" />

 

Input 類型 - Date Pickers（數據檢出器）

HTML5 擁有多個可供選取日期和時間的新輸入類型：

• date - 選取日、月、年
• month - 選取月、年
• week - 選取周和年
• time - 選取時間（小時和分鐘）
• datetime - 選取時間、日、月、年（UTC 時間）
• datetime-local - 選取時間、日、月、年（本地時間）

下面的例子容許您從日曆中選取一個日期：

Date: <input type="date" name="user_date" />

 

Input 類型 - search

search 類型用於搜索域，好比站點搜索或 Google 搜索。search 域顯示爲常規的文本域。

 

HTML5 表單元素

HTML5 的新的表單元素：

HTML5 擁有若干涉及表單的元素和屬性。本章介紹如下新的表單元素：

• datalist
• keygen
• output

瀏覽器支持

 

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" onforminput="resCalc()"></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

瀏覽器支持

 

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 和 image。

<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 屬性規定用於 image 類型的 input 標籤的圖像高度和寬度。height 和 width 屬性只適用於 image 類型的 <input> 標籤。

<input type="image" 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、三、6 和 9）：

Points: <input type="number" name="points" min="0" max="10" step="3" />

 

multiple 屬性

multiple 屬性規定輸入域中可選擇多個值。

註釋：multiple 屬性適用於如下類型的 <input> 標籤：email 和 file。

Select images: <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） 是正則表達式。

註釋：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 標籤

標籤的版本支持度、新舊廢棄狀況請查閱 HTML5 幫助手冊。

 

HTML 5 標準屬性

NEW：HTML 5 中新的標準屬性。

註釋：HTML 4.01 再也不支持 accesskey 屬性。

 

HTML 5 事件屬性

標準事件屬性

HTML 4 增長了經過事件觸發瀏覽器中行爲的能力，好比當用戶點擊某個元素時啓動一段 JavaScript。下面的表格列出了可插入 HTML 5 元素中以定義事件行爲的標準事件屬性。

 

Window 事件屬性

window 對象觸發的事件，適用於 <body> 標籤：

 

表單事件

由 HTML 表單內部的動做觸發的事件。適用於全部 HTML 5 元素，不過最經常使用於表單元素中：

 

鍵盤事件

由鍵盤觸發的事件。適用於全部 HTML 5 元素：

 

鼠標事件

由鼠標貨類似的用戶動做觸發的事件。適用於全部 HTML 5 元素：

 

媒介事件

由視頻、圖像以及音頻等媒介觸發的事件。適用於全部 HTML 5 元素，不過在媒介元素（諸如 audio、embed、img、object 以及 video）中最經常使用：