Rplus/html5.txt

## html5.txt
HTML5 Cookbook 書摘


|||  HTML5 Cookbook 書摘
|||  author: Kuro Hsu @ Facebook (that is NOT me)
|||  original llnk: https://www.facebook.com/notes/kuro-hsu/html5-cookbook-%E6%9B%B8%E6%91%98/4428690773834


- 基本語法 & 語意


  * DOCTYPE, 不分大小寫。 如: <!doctype html>


  * 用 lang 屬性指定語言  如: <html lang="en">


  * 設定 charset  如: <meta charset="UTF-8">


  * script 及 link 無須再加上 type 屬性。


  * 以 HTML5 的新元素增添文件結構語意:


    header  - 網頁或區塊的首部, 通常包含標題、補充資訊等。

    footer  - 網頁或區塊的底部, 通常包含作者、相關資訊連結及版權聲明等資料。

    nav     - 包含網頁的 "主要" 導覽連結。

    aside   - 包含與周圍內容 "有關" 但又彼此 "獨立" 的內容。如側邊欄。

    section - 通用結構元素，包含可按主題分組的內容及其相關內容。 需要標題。

    article - 獨立完整的文章篇幅，如部落格文章等。需要標題。


  * em, i, b :

    HTML5 重新定義了 em, i, b 等 tag 的語意。

    詳見 http://html5doctor.com/i-b-em-strong-element/


  * 凸顯參考文字: mark

    如: <p>Your search for <mark>something</mark> resulted in 123 entries: ...</p>


  * 小字體標記文字，如版權宣告等資訊： small


  * 縮寫 abbr，需要搭配 title 屬性說明原文。


  * 插圖及圖片說明： figure, figcaption。


  * 日期與時間: time，並搭配 datatime 屬性指定 "機器可讀" 的資訊。

    如: <time datatime="2011-01-15">January 15, 2011</time>


    不能用於不精確的日期，如: August 2011，至少要包含年月日。


  * 控制 list 的起始編號： start 屬性 (限定數字)。

    <ol start="3">

      <li>...</li>

      <li>...</li>

      <li>...</li>

    </ol>


  * 強制定義 list 的數字： value 屬性 (限定數字)。

    <ol>

      <li value="1">...</li>

      <li value="1">...</li>

      <li value="2">...</li>

    </ol>


  * 將網頁的某區塊設為可編輯： contenteditable。

    如: <div contenteditable>...</div>


  * 舊瀏覽器支援: html5shiv http://code.google.com/p/html5shiv/


  * 檢查文件大綱: HTML5 Outliner。


- 進階標記與技術:


  * 使用語意標記來編寫內容，而非樣式。

    已過時 HTML 標記：http://www.w3.org/TR/html5/obsolete.html#obsolete


  * 檢測 HTML5 功能支援: Modernizr / feature detection


  * HTML5 樣版： HTML5 Boilerplate


  * 驗證 HTML5：

    - W3C Unicorn: http://validator.w3.org/unicorn/

    - Validator.nu (X)HTML5 Validator ： http://html5.validator.nu/


- HTML5 新表單欄位：


  * 搜尋欄位: <input type="search">


  * E-mail: <input type="email">


  * Url: <input type="url">


  * 電話: <input type="tel">


  * 時間/日期: <input type="datetime">


  * 數字: <input type="number">，可搭配 max, min 屬性指定區間；step 屬性指定遞增/減數量。


  * 範圍: <input type="range">，可搭配 max, min 屬性指定區間；step 屬性指定遞增/減數量。


  * 顏色選取: <input type="color">


  * 可編輯的下拉選單 (combo box)：


    <datalist>

      <option value="aaa">AAA</option>

      <option value="bbb">BBB</option>

      <option value="ccc">CCC</option>

    </datalist>


    http://www.w3.org/TR/html-markup/datalist.html#datalist

    http://www.w3schools.com/tags/tag_datalist.asp


  * 表單欄位必填： required 屬性。

    ex: <input type="text" required>


  * 自動聚焦欄位： autofocus 屬性。

    ex: <input type="text" autofocus>


  * 欄位提示文字： placeholder 屬性。

    ex: <input type="search" placeholder="Search">


  * 限制欄位輸入格式： pattern 屬性 + 正規表示式(RegExp)。

    ex: <input type="text" pattern="[0-9]{10}" >


  * 取消欄位自動完成：將 autocomplete 屬性設定為 off 。


- 原生音訊 (Audio): 略

  http://www.w3.org/TR/html-markup/audio.html#audio


- 原生視訊 (Viedo): 略

  http://www.w3.org/TR/html-markup/video.html#video


- Microdata 及自訂資料：


  * 從前 XFN (XHTML Friends Network - http://gmpg.org/xfn/ )

    與 microformat 利用 class 及 ref 屬性來表示額外的語意，

    但由於這些屬性有其更適當的用途，部分專家認為此做法並不恰當。


    W3C XHTML 2 Working Group 以 Resource Description Framework 發展出了 RDFa 規格，

    重複使用既有的 XHTML 屬性且新增了部分屬性來支援結構化的機器可讀資料。


  * 在標記中加入 Microdata: itemscope, itemtype, itemprop 屬性。


    itemscope: 表示其結構範圍。

    itemtype: 屬性類別，由 http://schema.org 制定。

    itemprop: 屬性名稱。


    ex 1:

    <p itemscope>

      <span itemprop="inventor">Tim Berners-Lee</span> created the

      <span itemprop="invention">World Wide Web</span>.

    </p>


    ex 2:

    <section itemscope itemtype="http://schema.org/Person">

      <h1 itemprop="name">Kuro</h1>

      <img itemprop="image" src="kuro.jpg" alt="Kuro">

      <p>

        <span itemprop="jobTitle">Front End Engineer</span>

        <a itemprop="url" href="http://kuro.tw">http://kuro.tw</a>

      </p>


      <p itemscope itemtype="http://schema.org/PostalAddress">

        <span itemprop="addressLocality">Taipei</span>,

        <span itemprop="addressCountry">Taiwan</span>

      </p>

    </section>


  * 屬性類別 & 名稱請參照: http://schema.org/docs/schemas.html


  * 結構化資料測試工具: http://www.google.com/webmasters/tools/richsnippets


  * 在標記內加入自訂屬性: data-* 。

    可利用 jquery 的 data API 或是 dataset API 存取自訂資料。


- 協助工具 (Accessibility)


  * WCAG (W3C Web Content Accessibility Guidelines, W3C Web 內容協助工具準則) 2.0

    使用 POUR 四項原則來總結 Web Accessibility.


    - P, Perceivable, 可感知.

        內容可被接受，透過聽覺或視覺。如圖片的替代文字，音訊或視訊的字幕等。


    - O, Operable, 可操作.

        確保使用者可以使用或與網站互動，包含導覽、內容、表單等控制項。


    - U, Understandable, 可理解.

        文字是清晰的，且採用一致並可預測的方式來呈現網站。


    - R, Robust, 強健.

        可在各種使用者代理程式或輔助技術/器具上使用網頁的標記與編碼。


  * 加入圖片的替代文字： alt 屬性。


  * 參考多個文字替代來源：ARIA aria-labelledby、aria-describedby。


    ex 1:

    <h1 id="johnny1">Johnny throwing cake at his Mom while Dad ducks behind her</h1>

    <p id="johnny2">Johnny's poor Mom is smeared with cake.</p>

    <img src="johnny_1st_bd.jpg" alt="Johnny's first birthday party" aria-describedby="johnny1 johnny2">


    ex 2:

    <figure>

      <img src="ceremony_photo.jpg" aria-labelledby="figcaption123">

      <figcaption id="figcaption123">

        Opening Ceremony for the new library building at the state university.

      </figcaption>

    </figure>


  * 使用 ARIA role 來區分網頁區域，如:


  <header role="banner"></header>

  <nav role="navigation"></nav>

  <article role="main"></article>

  <section role="region"></section>

  <footer role="contentinfo"></footer>


  * 利用 fieldset 及 legend 將表單欄位分組


- Geolocation： 略


- Canvas： 略


- 其他 HTML APIs：


  * localStorage / sessionStorage


  * Offline Cache


  * Drag & Drop


  * Web Workers


  * Web Sockets


  * History API


  * FileReader API


- HTML5 資源:


  * Comparison of layout engines (HTML5):

    http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29


  * Comparison of JavaScript frameworks

    http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks


  * Dive Into HTML5

    http://diveintohtml5.info/


  * HTML5 Boilerplate

    http://html5boilerplate.com/


  * HTML5 id/class name cheatsheet

    http://oli.jp/2008/html5-class-cheatsheet/


  * Implementations in Web browsers

    http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers


  * HTML5 Demos

    http://html5demos.com/


  * HTML5 Doctors

    http://www.html5doctor.com/


  * HTML5 Reset

    http://html5reset.org/


  * HTML5 Rocks

    http://www.html5rocks.com/en/

    http://www.html5rocks.com/zh/ (簡體中文)


  * W3 HTML5 規格首頁 - HTML: The Markup Language (an HTML language reference)

    http://dev.w3.org/html5/markup/spec.html


  * Modernizr

    http://modernizr.com/


  * When Can I use?

    http://caniuse.com/
	HTML5 Cookbook 書摘


	\|\|\| HTML5 Cookbook 書摘
	\|\|\| author: Kuro Hsu @ Facebook (that is NOT me)
	\|\|\| original llnk: https://www.facebook.com/notes/kuro-hsu/html5-cookbook-%E6%9B%B8%E6%91%98/4428690773834


	- 基本語法 & 語意



	* DOCTYPE, 不分大小寫。如: <!doctype html>



	* 用 lang 屬性指定語言如: <html lang="en">



	* 設定 charset 如: <meta charset="UTF-8">



	* script 及 link 無須再加上 type 屬性。



	* 以 HTML5 的新元素增添文件結構語意:



	header - 網頁或區塊的首部, 通常包含標題、補充資訊等。

	footer - 網頁或區塊的底部, 通常包含作者、相關資訊連結及版權聲明等資料。

	nav - 包含網頁的 "主要" 導覽連結。

	aside - 包含與周圍內容 "有關" 但又彼此 "獨立" 的內容。如側邊欄。

	section - 通用結構元素，包含可按主題分組的內容及其相關內容。需要標題。

	article - 獨立完整的文章篇幅，如部落格文章等。需要標題。



	* em, i, b :

	HTML5 重新定義了 em, i, b 等 tag 的語意。

	詳見 http://html5doctor.com/i-b-em-strong-element/



	* 凸顯參考文字: mark

	如: <p>Your search for <mark>something</mark> resulted in 123 entries: ...</p>



	* 小字體標記文字，如版權宣告等資訊： small



	* 縮寫 abbr，需要搭配 title 屬性說明原文。



	* 插圖及圖片說明： figure, figcaption。



	* 日期與時間: time，並搭配 datatime 屬性指定 "機器可讀" 的資訊。

	如: <time datatime="2011-01-15">January 15, 2011</time>



	不能用於不精確的日期，如: August 2011，至少要包含年月日。



	* 控制 list 的起始編號： start 屬性 (限定數字)。

	<ol start="3">

	<li>...</li>

	<li>...</li>

	<li>...</li>

	</ol>



	* 強制定義 list 的數字： value 屬性 (限定數字)。

	<ol>

	<li value="1">...</li>

	<li value="1">...</li>

	<li value="2">...</li>

	</ol>



	* 將網頁的某區塊設為可編輯： contenteditable。

	如: <div contenteditable>...</div>



	* 舊瀏覽器支援: html5shiv http://code.google.com/p/html5shiv/



	* 檢查文件大綱: HTML5 Outliner。





	- 進階標記與技術:



	* 使用語意標記來編寫內容，而非樣式。

	已過時 HTML 標記：http://www.w3.org/TR/html5/obsolete.html#obsolete



	* 檢測 HTML5 功能支援: Modernizr / feature detection



	* HTML5 樣版： HTML5 Boilerplate



	* 驗證 HTML5：

	- W3C Unicorn: http://validator.w3.org/unicorn/

	- Validator.nu (X)HTML5 Validator ： http://html5.validator.nu/





	- HTML5 新表單欄位：



	* 搜尋欄位: <input type="search">



	* E-mail: <input type="email">



	* Url: <input type="url">



	* 電話: <input type="tel">



	* 時間/日期: <input type="datetime">



	* 數字: <input type="number">，可搭配 max, min 屬性指定區間；step 屬性指定遞增/減數量。



	* 範圍: <input type="range">，可搭配 max, min 屬性指定區間；step 屬性指定遞增/減數量。



	* 顏色選取: <input type="color">



	* 可編輯的下拉選單 (combo box)：



	<datalist>

	<option value="aaa">AAA</option>

	<option value="bbb">BBB</option>

	<option value="ccc">CCC</option>

	</datalist>



	http://www.w3.org/TR/html-markup/datalist.html#datalist

	http://www.w3schools.com/tags/tag_datalist.asp



	* 表單欄位必填： required 屬性。

	ex: <input type="text" required>



	* 自動聚焦欄位： autofocus 屬性。

	ex: <input type="text" autofocus>



	* 欄位提示文字： placeholder 屬性。

	ex: <input type="search" placeholder="Search">



	* 限制欄位輸入格式： pattern 屬性 + 正規表示式(RegExp)。

	ex: <input type="text" pattern="[0-9]{10}" >



	* 取消欄位自動完成：將 autocomplete 屬性設定為 off 。





	- 原生音訊 (Audio): 略

	http://www.w3.org/TR/html-markup/audio.html#audio



	- 原生視訊 (Viedo): 略

	http://www.w3.org/TR/html-markup/video.html#video





	- Microdata 及自訂資料：



	* 從前 XFN (XHTML Friends Network - http://gmpg.org/xfn/ )

	與 microformat 利用 class 及 ref 屬性來表示額外的語意，

	但由於這些屬性有其更適當的用途，部分專家認為此做法並不恰當。



	W3C XHTML 2 Working Group 以 Resource Description Framework 發展出了 RDFa 規格，

	重複使用既有的 XHTML 屬性且新增了部分屬性來支援結構化的機器可讀資料。



	* 在標記中加入 Microdata: itemscope, itemtype, itemprop 屬性。



	itemscope: 表示其結構範圍。

	itemtype: 屬性類別，由 http://schema.org 制定。

	itemprop: 屬性名稱。



	ex 1:

	<p itemscope>

	<span itemprop="inventor">Tim Berners-Lee</span> created the

	<span itemprop="invention">World Wide Web</span>.

	</p>



	ex 2:

	<section itemscope itemtype="http://schema.org/Person">

	<h1 itemprop="name">Kuro</h1>

	<img itemprop="image" src="kuro.jpg" alt="Kuro">

	<p>

	<span itemprop="jobTitle">Front End Engineer</span>

	<a itemprop="url" href="http://kuro.tw">http://kuro.tw</a>

	</p>



	<p itemscope itemtype="http://schema.org/PostalAddress">

	<span itemprop="addressLocality">Taipei</span>,

	<span itemprop="addressCountry">Taiwan</span>

	</p>

	</section>



	* 屬性類別 & 名稱請參照: http://schema.org/docs/schemas.html



	* 結構化資料測試工具: http://www.google.com/webmasters/tools/richsnippets



	* 在標記內加入自訂屬性: data-* 。

	可利用 jquery 的 data API 或是 dataset API 存取自訂資料。





	- 協助工具 (Accessibility)



	* WCAG (W3C Web Content Accessibility Guidelines, W3C Web 內容協助工具準則) 2.0

	使用 POUR 四項原則來總結 Web Accessibility.



	- P, Perceivable, 可感知.

	內容可被接受，透過聽覺或視覺。如圖片的替代文字，音訊或視訊的字幕等。



	- O, Operable, 可操作.

	確保使用者可以使用或與網站互動，包含導覽、內容、表單等控制項。



	- U, Understandable, 可理解.

	文字是清晰的，且採用一致並可預測的方式來呈現網站。



	- R, Robust, 強健.

	可在各種使用者代理程式或輔助技術/器具上使用網頁的標記與編碼。





	* 加入圖片的替代文字： alt 屬性。



	* 參考多個文字替代來源：ARIA aria-labelledby、aria-describedby。



	ex 1:

	<h1 id="johnny1">Johnny throwing cake at his Mom while Dad ducks behind her</h1>

	<p id="johnny2">Johnny's poor Mom is smeared with cake.</p>

	<img src="johnny_1st_bd.jpg" alt="Johnny's first birthday party" aria-describedby="johnny1 johnny2">



	ex 2:

	<figure>

	<img src="ceremony_photo.jpg" aria-labelledby="figcaption123">

	<figcaption id="figcaption123">

	Opening Ceremony for the new library building at the state university.

	</figcaption>

	</figure>





	* 使用 ARIA role 來區分網頁區域，如:



	<header role="banner"></header>

	<nav role="navigation"></nav>

	<article role="main"></article>

	<section role="region"></section>

	<footer role="contentinfo"></footer>



	* 利用 fieldset 及 legend 將表單欄位分組





	- Geolocation：略



	- Canvas：略





	- 其他 HTML APIs：



	* localStorage / sessionStorage



	* Offline Cache



	* Drag & Drop



	* Web Workers



	* Web Sockets



	* History API



	* FileReader API





	- HTML5 資源:



	* Comparison of layout engines (HTML5):

	http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28HTML5%29



	* Comparison of JavaScript frameworks

	http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks



	* Dive Into HTML5

	http://diveintohtml5.info/



	* HTML5 Boilerplate

	http://html5boilerplate.com/



	* HTML5 id/class name cheatsheet

	http://oli.jp/2008/html5-class-cheatsheet/



	* Implementations in Web browsers

	http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers



	* HTML5 Demos

	http://html5demos.com/



	* HTML5 Doctors

	http://www.html5doctor.com/



	* HTML5 Reset

	http://html5reset.org/



	* HTML5 Rocks

	http://www.html5rocks.com/en/

	http://www.html5rocks.com/zh/ (簡體中文)



	* W3 HTML5 規格首頁 - HTML: The Markup Language (an HTML language reference)

	http://dev.w3.org/html5/markup/spec.html



	* Modernizr

	http://modernizr.com/



	* When Can I use?

	http://caniuse.com/