HTML5 - 快速指南

HTML5 - 概述

HTML5 是 HTML 標準的下一個主要修訂版本，取代了 HTML 4.01、XHTML 1.0 和 XHTML 1.1。HTML5 是一個用於在全球資訊網上構建和呈現內容的標準。

HTML5 是全球資訊網聯盟 (W3C) 和 Web 超文字應用技術工作組 (WHATWG) 之間的合作成果。

新標準包含了影片回放和拖放等功能，這些功能以前依賴於第三方瀏覽器外掛，例如 Adobe Flash、Microsoft Silverlight 和 Google Gears。

瀏覽器支援

最新版本的 Apple Safari、Google Chrome、Mozilla Firefox 和 Opera 都支援許多 HTML5 功能，Internet Explorer 9.0 也將支援一些 HTML5 功能。

預裝在 iPhone、iPad 和 Android 手機上的行動網路瀏覽器都對 HTML5 提供了極佳的支援。

新功能

HTML5 引入了一些新的元素和屬性，可以幫助您構建現代網站。以下是一些 HTML5 中引入的最突出功能。

新的語義元素 - 這些元素例如 <header>、<footer> 和 <section>。
表單 2.0 - 對 HTML 網頁表單的改進，其中為 <input> 標籤引入了新的屬性。
持久本地儲存 - 實現持久本地儲存，無需依賴第三方外掛。
WebSocket - 一種用於 Web 應用程式的新一代雙向通訊技術。
伺服器傳送事件 - HTML5 引入了從 Web 伺服器流向 Web 瀏覽器的事件，稱為伺服器傳送事件 (SSE)。
Canvas - 支援一個二維繪圖表面，您可以使用 JavaScript 對其進行程式設計。
音訊和影片 - 您可以將音訊或影片嵌入到網頁中，無需依賴第三方外掛。
地理位置 - 現在，訪問者可以選擇與您的 Web 應用程式共享其物理位置。
微資料 - 這使您可以建立超出 HTML5 的詞彙表，並使用自定義語義擴充套件您的網頁。
拖放 - 將專案從一個位置拖放到同一網頁上的另一個位置。

向後相容性

HTML5 儘可能地設計為向後相容現有的 Web 瀏覽器。其新功能構建在現有功能的基礎上，並允許您為舊版瀏覽器提供回退內容。

建議使用幾行 JavaScript 檢測對各個 HTML5 功能的支援。

如果您不熟悉 HTML 的任何先前版本，建議您在探索 HTML5 功能之前先閱讀我們的HTML 教程。

HTML5 - 語法

HTML 5 語言具有“自定義”HTML 語法，該語法與 Web 上釋出的 HTML 4 和 XHTML1 文件相容，但不相容 HTML 4 的更深奧的 SGML 功能。

HTML 5 的語法規則與 XHTML 不同，在 XHTML 中，我們需要使用小寫標籤名稱，引用我們的屬性，屬性必須具有值，並且必須關閉所有空元素。

HTML5 具有很大的靈活性，它支援以下功能 -

大寫標籤名稱。
屬性的引號是可選的。
屬性值是可選的。
關閉空元素是可選的。

DOCTYPE

在舊版本的 HTML 中，DOCTYPE 更長，因為 HTML 語言基於 SGML，因此需要引用 DTD。

HTML 5 作者將使用簡單的語法指定 DOCTYPE，如下所示 -

<!DOCTYPE html>

以上語法不區分大小寫。

字元編碼

HTML 5 作者可以使用簡單的語法指定字元編碼，如下所示 -

<meta charset = "UTF-8">

以上語法不區分大小寫。

<script> 標籤

通常的做法是在指令碼元素中新增一個型別屬性，其值為“text/javascript”，如下所示 -

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 去除了所需的額外資訊，您可以簡單地使用以下語法 -

<script src = "scriptfile.js"></script>

<link> 標籤

到目前為止，您一直將 <link> 編寫如下 -

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 去除了所需的額外資訊，您可以簡單地使用以下語法 -

<link rel = "stylesheet" href = "stylefile.css">

HTML5 元素

HTML5 元素使用開始標籤和結束標籤進行標記。標籤使用尖括號分隔，標籤名稱位於尖括號之間。

開始標籤和結束標籤的區別在於，後者在標籤名稱前包含一個斜槓。

以下是一個 HTML5 元素的示例 -

<p>...</p>

HTML5 標籤名稱不區分大小寫，可以全部大寫或混合大小寫，儘管最常見的約定是堅持使用小寫。

大多數元素包含一些內容，例如 <p>...</p> 包含一段文字。但是，有些元素禁止包含任何內容，這些元素稱為空元素。例如，br、hr、link、meta 等。

以下是 HTML5 元素的完整列表。

HTML5 屬性

元素可能包含用於設定元素各種屬性的屬性。

一些屬性是全域性定義的，可以在任何元素上使用，而另一些屬性僅為特定元素定義。所有屬性都有名稱和值，如下面的示例所示。

以下是一個 HTML5 屬性的示例，說明如何使用值為“example”的名為 class 的屬性標記 div 元素 -

<div class = "example">...</div>

屬性只能在開始標籤內指定，絕不能在結束標籤中使用。

HTML5 屬性不區分大小寫，可以全部大寫或混合大小寫，儘管最常見的約定是堅持使用小寫。

以下是 HTML5 屬性的完整列表。

HTML5 文件

以下標籤已引入以實現更好的結構 -

section - 此標籤表示通用文件或應用程式部分。它可以與 h1-h6 一起使用以指示文件結構。
article - 此標籤表示文件的獨立內容部分，例如部落格文章或報紙文章。
aside - 此標籤表示與頁面其餘部分略微相關的部分內容。
header - 此標籤表示部分的標題。
footer - 此標籤表示部分的頁尾，可以包含有關作者、版權資訊等資訊。
nav - 此標籤表示用於導航的文件部分。
dialog - 此標籤可用於標記對話。
figure - 此標籤可用於將標題與某些嵌入內容（例如圖形或影片）關聯起來。

HTML 5 文件的標記如下所示 -

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header>...</header> 
      <nav>...</nav> 
      
      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 
      
      <footer>...</footer> 
   </body> 
</html>

線上演示

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 
  
   <body> 
      <header role = "banner"> 
         <h1>HTML5 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://tutorialspoint.tw/html">HTML Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.tw/css">CSS Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.tw/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.tw/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

它將產生以下結果 -

HTML5 - 屬性

如上一章所述，元素可能包含用於設定元素各種屬性的屬性。

一些屬性是全域性定義的，可以在任何元素上使用，而另一些屬性僅為特定元素定義。所有屬性都有名稱和值，如下面的示例所示。

以下是一個 HTML5 屬性的示例，說明如何使用值為“example”的名為 class 的屬性標記 div 元素 -

<div class = "example">...</div>

屬性只能在開始標籤內指定，絕不能在結束標籤中使用。

HTML5 屬性不區分大小寫，可以全部大寫或混合大小寫，儘管最常見的約定是堅持使用小寫。

標準屬性

以下列出的屬性幾乎所有 HTML 5 標籤都支援。

屬性	選項	功能
accesskey	使用者定義	指定訪問元素的鍵盤快捷鍵。
align	right, left, center	水平對齊標籤
background	URL	在元素後面放置背景影像
bgcolor	數字、十六進位制、RGB 值	在元素後面放置背景顏色
class	使用者定義	將元素分類以用於級聯樣式表。
contenteditable	true, false	指定使用者是否可以編輯元素的內容。
contextmenu	選單 ID	指定元素的上下文選單。
data-XXXX	使用者定義	自定義屬性。HTML 文件的作者可以定義自己的屬性。必須以“data-”開頭。
draggable	true、false、auto	指定使用者是否允許拖動元素。
height	數值	指定表格、影像或表格單元格的高度。
hidden	hidden	指定元素是否可見。
id	使用者定義	為元素命名，以便與層疊樣式表一起使用。
item	元素列表	用於對元素進行分組。
itemprop	專案列表	用於對專案進行分組。
spellcheck	true, false	指定是否必須檢查元素的拼寫或語法。
style	CSS樣式表	為元素指定內聯樣式。
subject	使用者定義ID	指定元素對應的專案。
tabindex	Tab編號	指定元素的Tab順序。
title	使用者定義	元素的“彈出”標題。
valign	top、middle、bottom	垂直對齊HTML元素內的標籤。
width	數值	指定表格、影像或表格單元格的寬度。

有關HTML5標籤和相關屬性的完整列表，請檢視我們對HTML5標籤的參考。

自定義屬性

HTML 5引入的一項新功能是新增自定義資料屬性。

自定義資料屬性以data-開頭，並根據您的需求命名。以下是一個簡單的示例：

<div class = "example" data-subject = "physics" data-level = "complex">
   ...
</div>

以上程式碼將是完全有效的HTML5，其中包含兩個名為datasubject和data-level的自定義屬性。您可以使用JavaScript API或CSS以與獲取標準屬性類似的方式獲取這些屬性的值。

HTML5 - 事件

當用戶訪問您的網站時，他們會執行各種活動，例如單擊文字、影像和連結、將滑鼠懸停在定義的元素上等。這些是JavaScript稱為事件的示例。

我們可以在Javascript或VBscript中編寫事件處理程式，並且您可以將這些事件處理程式指定為事件標籤屬性的值。HTML5規範定義了各種事件屬性，如下所示：

我們可以使用以下屬性集來觸發任何javascript或vbscript程式碼（作為值給出），當任何HTML5元素髮生任何事件時。

在後續章節中，我們將在詳細討論這些元素時介紹特定於元素的事件。

屬性	值	描述
offline	script	當文件離線時觸發
onabort	script	在中止事件時觸發
onafterprint	script	文件列印後觸發
onbeforeonload	script	文件載入前觸發
onbeforeprint	script	文件列印前觸發
onblur	script	視窗失去焦點時觸發
oncanplay	script	媒體可以開始播放時觸發，但可能需要停止緩衝
oncanplaythrough	script	媒體可以播放到結尾時觸發，無需停止緩衝
onchange	script	元素髮生變化時觸發
onclick	script	滑鼠單擊時觸發
oncontextmenu	script	觸發上下文選單時觸發
ondblclick	script	滑鼠雙擊時觸發
ondrag	script	拖動元素時觸發
ondragend	script	拖動操作結束時觸發
ondragenter	script	將元素拖動到有效放置目標時觸發
ondragleave	script	元素離開有效放置目標時觸發
ondragover	script	將元素拖過有效放置目標時觸發
ondragstart	script	拖動操作開始時觸發
ondrop	script	拖動元素被放下時觸發
ondurationchange	script	媒體長度發生變化時觸發
onemptied	script	媒體資源元素突然變空時觸發。
onended	script	媒體到達結尾時觸發
onerror	script	發生錯誤時觸發
onfocus	script	視窗獲得焦點時觸發
onformchange	script	表單發生變化時觸發
onforminput	script	表單獲得使用者輸入時觸發
onhaschange	script	文件發生變化時觸發
oninput	script	元素獲得使用者輸入時觸發
oninvalid	script	元素無效時觸發
onkeydown	script	按下鍵時觸發
onkeypress	script	按下並釋放鍵時觸發
onkeyup	script	釋放鍵時觸發
onload	script	文件載入時觸發
onloadeddata	script	媒體資料載入時觸發
onloadedmetadata	script	媒體元素的持續時間和其他媒體資料載入時觸發
onloadstart	script	瀏覽器開始載入媒體資料時觸發
onmessage	script	觸發訊息時觸發
onmousedown	script	按下滑鼠按鈕時觸發
onmousemove	script	滑鼠指標移動時觸發
onmouseout	script	滑鼠指標移出元素時觸發
onmouseover	script	滑鼠指標移到元素上時觸發
onmouseup	script	釋放滑鼠按鈕時觸發
onmousewheel	script	旋轉滑鼠滾輪時觸發
onoffline	script	當文件離線時觸發
onoine	script	文件上線時觸發
ononline	script	文件上線時觸發
onpagehide	script	視窗隱藏時觸發
onpageshow	script	視窗可見時觸發
onpause	script	媒體資料暫停時觸發
onplay	script	媒體資料即將開始播放時觸發
onplaying	script	媒體資料開始播放時觸發
onpopstate	script	視窗歷史記錄更改時觸發
onprogress	script	瀏覽器正在獲取媒體資料時觸發
onratechange	script	媒體資料的播放速率發生變化時觸發
onreadystatechange	script	就緒狀態發生變化時觸發
onredo	script	文件執行重做操作時觸發
onresize	script	視窗大小調整時觸發
onscroll	script	滾動元素的捲軸時觸發
onseeked	script	媒體元素的seeking屬性不再為true，並且搜尋已結束時觸發
onseeking	script	媒體元素的seeking屬性為true，並且搜尋已開始時觸發
onselect	script	選擇元素時觸發
onstalled	script	獲取媒體資料時發生錯誤時觸發
onstorage	script	文件載入時觸發
onsubmit	script	提交表單時觸發
onsuspend	script	瀏覽器一直在獲取媒體資料，但在獲取整個媒體檔案之前停止時觸發
ontimeupdate	script	媒體更改其播放位置時觸發
onundo	script	文件執行撤消操作時觸發
onunload	script	使用者離開文件時觸發
onvolumechange	script	媒體更改音量時觸發，將音量設定為“靜音”時也會觸發
onwaiting	script	媒體已停止播放，但預計將恢復時觸發

HTML5 - Web 表單 2.0

Web Forms 2.0是對HTML4中表單功能的擴充套件。HTML5中的表單元素和屬性提供了比HTML4更高的語義標記程度，使我們免於在HTML4中需要的大量繁瑣的指令碼編寫和樣式設定。

HTML4中的<input>元素

HTML4輸入元素使用type屬性指定資料型別。HTML4提供以下型別：

序號	型別&描述
1	text 自由格式文字欄位，通常不包含換行符。
2	password 用於敏感資訊的自由格式文字欄位，通常不包含換行符。
3	checkbox 從預定義列表中選擇零個或多個值。
4	radio 列舉值。
5	submit 自由形式的按鈕，用於啟動表單提交。
6	file 具有MIME型別並可選地具有檔名的任意檔案。
7	image 相對於特定影像大小的座標，其額外語義是它必須是最後一個選定的值並啟動表單提交。
8	hidden 通常不顯示給使用者的任意字串。
9	select 列舉值，類似於radio型別。
10	textarea 自由格式文字欄位，通常沒有換行符限制。
11	button 自由形式的按鈕，可以啟動與按鈕相關的任何事件。

以下是如何使用標籤、單選按鈕和提交按鈕的簡單示例：

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

HTML5中的<input>元素

除了上述屬性外，HTML5輸入元素還為type屬性引入了幾個新值。這些列在下面。

注意：請使用最新版本的Opera瀏覽器嘗試以下所有示例。

序號	型別&描述
1	datetime 日期和時間（年、月、日、時、分、秒、秒的小數部分），根據ISO 8601編碼，時區設定為UTC。
2	datetime-local 日期和時間（年、月、日、時、分、秒、秒的小數部分），根據ISO 8601編碼，不包含時區資訊。
3	date 日期（年、月、日），根據ISO 8601編碼。
4	month 由年和月組成的日期，根據ISO 8601編碼。
5	week 由年和週數組成的日期，根據ISO 8601編碼。
6	time 時間（時、分、秒、秒的小數部分），根據ISO 8601編碼。
7	number 僅接受數值。step屬性指定精度，預設為1。
8	range range型別用於輸入欄位，這些欄位應包含一定範圍內的數值。
9	email 僅接受電子郵件值。此型別用於應包含電子郵件地址的輸入欄位。如果您嘗試提交簡單的文字，它將強制您以email@example.com格式僅輸入電子郵件地址。
10	url 它僅接受 URL 值。此型別用於應包含 URL 地址的輸入欄位。如果您嘗試提交簡單文字，它會強制您僅輸入 http://www.example.com 格式或 http://example.com 格式的 URL 地址。

<output> 元素

HTML5 引入了一個新的元素 <output>，用於表示不同型別輸出的結果，例如指令碼編寫的輸出。

您可以使用 for 屬性來指定輸出元素與文件中影響計算的其他元素（例如，作為輸入或引數）之間的關係。for 屬性的值是其他元素 ID 的空格分隔列表。

線上演示

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

它將產生以下結果 -

佔位符屬性

HTML5 引入了一個名為 placeholder 的新屬性。此屬性在 <input> 和 <textarea> 元素上為使用者提供有關可以在欄位中輸入什麼的提示。佔位符文字不得包含回車符或換行符。

以下是佔位符屬性的簡單語法：

<input type = "text" name = "search" placeholder = "search the web"/>

此屬性僅受最新版本的 Mozilla、Safari 和 Chrome 瀏覽器支援。

線上演示

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "email@example.com"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

這將產生以下結果：

自動聚焦屬性

這是一個簡單的單步模式，在文件載入時使用 JavaScript 輕鬆程式設計，自動聚焦一個特定的表單欄位。

HTML5 引入了一個名為 autofocus 的新屬性，使用方法如下：

<input type = "text" name = "search" autofocus/>

此屬性僅受最新版本的 Mozilla、Safari 和 Chrome 瀏覽器支援。

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

必填屬性

現在您不再需要 JavaScript 進行客戶端驗證，例如空文字框將永遠不會提交，因為 HTML5 引入了一個名為 required 的新屬性，使用方法如下，並且會堅持要求有一個值：

<input type = "text" name = "search" required/>

此屬性僅受最新版本的 Mozilla、Safari 和 Chrome 瀏覽器支援。

線上演示

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

它將產生以下結果 -

HTML5 - SVG

SVG 代表 Scalable Vector Graphics，它是一種使用 XML 描述 2D 圖形和圖形應用程式的語言，然後由 SVG 檢視器呈現 XML。

SVG 主要用於向量型別圖表，例如餅圖、X、Y 座標系中的二維圖形等。

SVG 於 2003 年 1 月 14 日成為 W3C 推薦標準，您可以在 SVG 規範中檢視 SVG 規範的最新版本。

檢視 SVG 檔案

大多數網路瀏覽器可以像顯示 PNG、GIF 和 JPG 一樣顯示 SVG。Internet Explorer 使用者可能需要安裝 Adobe SVG 檢視器才能在瀏覽器中檢視 SVG。

在 HTML5 中嵌入 SVG

HTML5 允許使用 <svg>...</svg> 標籤直接嵌入 SVG，該標籤具有以下簡單語法：

<svg xmlns = "http://www.w3.org/2000/svg">
   ...    
</svg>

Firefox 3.7 還引入了一個配置選項（“about:config”），您可以在其中使用以下步驟啟用 HTML5：

在 Firefox 位址列中輸入 about:config。
單擊出現的警告訊息上的“我保證會小心！”按鈕（並確保您遵守它！）。
在頁面頂部的過濾器欄中輸入 html5.enable。
目前它將被停用，因此單擊它以將值切換為 true。

現在您的 Firefox HTML5 解析器應該已啟用，您應該能夠使用以下示例進行實驗。