響應式網頁設計中的 HTML5
響應式設計的“移動優先”（mobile first）思想使它很適宜採納 HTML5 中最簡潔、最有效和最具語義的代碼。
1. 膩子腳本
膩子腳本（polyfill）這個詞由Remy Sharp提出，意指使用膩子來補平老版本瀏覽器的缺陷。因此，膩子腳本具體指的是一段能給老版本瀏覽器帶來新特性的JavaScript代碼。
IE9以前的老的瀏覽器不支持 HTML5 中提出的新特性。因此，JavaScript 專家 Remy Sharp 開發了一個輕量級的增強腳本，在HTML5網頁中引入該文件後，就能神奇地讓老版本IE支持新HTML元素。
更進一步地，Modernizr 出現了。除了能讓IE支持HTML5新元素之外，它還能夠基於一系列特性測試來有條件地加載更高級的膩子腳本（polyfill）、CSS 文件以及額外的 JavaScript 文件。
2. HTML5 的全新語義化元素
1. 結構級語義元素
- <section>: 用來定義文檔或應用程序中的區域（或節）。
- <nav>: 用來定義文檔的主導航區域，其中的鏈接指向其他頁面或當前頁面的某些區域。
- <article>: 用來包裹獨立的內容片段。
- <aside>: 用來表示與頁面主內容鬆散相關的內容。
- <hgroup>: 如果頁面中有一組使用 <h1> 、<h2> 、<h3> 等標籤的標題、標語和副標題，則可以考慮使用 <hgroup> 將它們包裹起來。這樣在HTML5的大綱結構算法中就會隱藏次級標題元素，從而只讓 <hgroup> 中的第一個標題元素進入文檔大綱。
- <header>: 用來包含對區域內容的介紹說明。
- <footer>: 用來包含其所在區域的輔助信息。
- <address>: 用來明確地標註離其最近的 <article> 或 <body> 祖先元素的聯繫信息。
2. 文本級語義元素
- <b>: 用來給文本加粗，不傳達或暗示任何語態或語氣。
- <em>: 用來給文本加粗，強調內容中的重點。
- <i>: 用來給文本添加斜體效果，帶有不同的語態或預期。
3. WAI-ARIA（無障礙網頁應用技術）
WAI-ARIA 是 Web Accessibility Initiative - Accessible Rich Internet Applications 的縮寫，它主要解決一個問題：讓殘障人士能無障礙地訪問網頁上的動態內容。這項技術包含了很多方面的知識，感興趣可以查看更多細節。
1. ARIA的地標角色
地標角色（landmark role）可以使支持無障礙網頁應用技術的屏幕閱讀器可以在不同的頁面區塊之間輕鬆跳轉。
下面來看一個代碼例子：
<nav role="navigation">
<ul>
<li>導航1</li>
<li>導航2</li>
<li>導航3</li>
</ul>
</nav>
role=“navigation” 就給 nav 這一個內容區塊定義了一個地標角色，十分簡單。
針對文檔結構的各部分分別有如下的地標角色：
- application: 用來定義用作網頁應用的區域。
- banner: 用來定義一個站點級別（而不是某個特定文檔的）的區域。如網站的頭部和logo。
- complementary: 用來定義一個對頁面主要區域進行補充說明的區域。
- contentinfo: 用來定義與頁面主要內容相關的信息區域。
- form: 用來定義表單。
- main: 定義頁面的主體內容。
- navigation: 用來定義鏈向當前文檔或相關文檔的導航鏈接。
- search: 用來定義一個用於搜索的區域。
4. HTML5 中的 video
1. 添加視頻
使用 HTML5 向網頁中添加視頻，是一件很容易的事。
<video src="hello.mp4" width="960" height="720" controls>
你的瀏覽器不支持 video 標籤！
</video>
上面 3 行簡單的代碼，就能向頁面中插入一個帶有默認播出控制條的視頻元素了。
2. 提供備用的媒體源文件
在此基礎上，可以提供備用的媒體源文件，以防瀏覽器不支持某一類型格式的文件。改造起來也很 easy 。
<video width="960" height="720" controls>
<source src="hello.mp4" type="video/mp4"></source>
<source src="hello.ogg" type="video/ogg"></source>
你的瀏覽器不支持 video 標籤！
</video>
這樣子的話，如果瀏覽器支持 mp4 格式，就會使用第一個文件；否則，它會繼續往下解析下一個 <source> 標籤。
3. 爲視頻添加響應式
如果頁面上的視頻是通過 <video> 標籤來插入的，那麼，爲它添加響應式也是很容易的，要用到強大了 max-width 屬性了。
video {
max-width: 100%;
height: auto;
}
但是，除了上面這種插入視頻的方式以外，還有通過 <iframe> 嵌入視頻的方式。
<iframe width="960" height="720" src="http://www.youtube.com/embed/B1_N28DA3gY" frameborder="0" allowfullscreen>
</iframe>
以 <iframe> 嵌入視頻，使用 max-width 屬性就不能起到預期的效果了。這時候，可以使用一個名爲 FitVids 的 jQuery 小插件。
5. 離線 WEB 應用
這有一個很棒很詳細的《使用 HTML 開發離線應用》的例子。
其中，主要涉及了以下三個方面：
- 離線資源緩存
- 在線狀態檢測
- 本地數據存儲