Last active
December 19, 2015 04:19
-
-
Save Rplus/5896233 to your computer and use it in GitHub Desktop.
HTML5 Cookbook 書摘
author: Kuro Hsu @ Facebook
original llnk: https://www.facebook.com/notes/kuro-hsu/html5-cookbook-%E6%9B%B8%E6%91%98/4428690773834
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment