HTML5CSS3笔记：响应式设计中的 HTML5
所有現代瀏覽器都能夠正確理解常見的 HTML5 新特性(新的結構元素、視頻和音頻標簽)， 而對老版本的 IE 則可以使用膩子腳本來彌補我所遇到過的所有缺陷。
什么是膩子腳本? 膩子腳本(polyfill)這個詞由 Remy Sharp 提出，意指使用膩子來補平老版本瀏覽器的缺陷。因此，膩子腳本具體指的是一段能給老版本瀏覽器帶來新特性的 JavaScript 代碼。值得注意的是，膩子腳本會給你的代碼里追加多余的代碼。因此，就算你添加3個膩子腳本可以讓 Internet Explorer 6 中網站的渲染效果與其他瀏覽器一模一樣，也并不意味著你一定要這么做!通常，老版本的 Internet Explorer(IE9 以前的版本)并不識別 HTML5 的任何新語義元素。 但是，Sjoerd Visscher 發現如果先使用 JavaScript 創建這些元素，那 Internet Explorer 就能識別這些元素并可為其設置樣式。基于這一發現，JavaScript 專家 Remy Sharp 開發了 一 個 輕 量 級 的 增 強 腳 本 ：
( http://remysharp.com/2009/01/07/html5-enabling-script/ )
在 HTML5 網頁中引入該文件后，就能神奇地讓老版本 IE 支持新 HTML 元素。長期以來， HTML5 的先驅們都會在頁面中嵌入該腳本，以便讓使用 IE 6、7 的用戶享受和現代瀏覽器一樣的體驗。
之后，這個領域上又出現了一個新丁，它能做到比剛才說的更多 的事情。它的名字叫：
Modernizr(http://www.modernizr.com)，如果你正在編寫 HTML5 頁面，它很值得你去關注。除了能讓 IE 支持 HTML5 新元素之外，它還能夠基于一系列特性測試來有條件地加載更高級的膩子腳本(polyfill)、CSS 文件以及額外的 JavaScript 文件。
html5:
<!DOCTYPE html> <html lang="en"> <!--或者lang="zh-CN"--> <head> <meta charset=utf-8>HTML5 中一個真正便利的精簡之處，是我們可以在標簽中嵌入多個元素。以前，如果你想讓代碼通過驗證，必須將每個元素單獨使用標簽來包裹。
HTML5 的全新語義化元素
section
section元素用來定義文檔或應用程序中的區域(或節)。例如，可以用它組織你的個人信息，一個section用于聯系信息，另一個用于新聞動態。需要重點理解的是用它的目的不是為了美化樣式。如果你只想將某個元素包裹起來以便設置樣式，那應該和以前一樣繼續使用div。
需要謹記的是，使用section的目的不是為了美化樣式，而是為了標識一個鮮明獨立的內容塊。一個內容塊(section)一般都應該帶有標題，這恰好符合我們的需求(用于獨立標識)。
nav
nav元素用來定義文檔的主導航區域，其中的鏈接指向其他頁面或當前頁面的某些區域。因為nav用于主導航區域，所以嚴格來講它不是為頁腳或其他經常會包含一組鏈接的區塊而設計的(雖然將它用在這些區塊里包含鏈接也沒問題)。
article
article元素與section元素很容易混淆。在完全理解之前我只得一遍又一遍地閱讀它們的標準定義。article元素用來包裹獨立的內容片段。當搭建一個頁面時，想 想你準備放入article標簽的內容能否作為一個整塊而被復制粘貼到另外一個完全不 同的網站且能保持完整的意義？另一種辦法是，想想包裹在article中的內容能否在 RSS 訂閱源中獨立成為一篇文章?應該使用article標簽包裹的內容，最明顯的例子就是博客正文。注意，如果出現嵌套的article元素，那內層的article元素內容 應該和外層文章內容直接有關。
aside
aside元素用來表示與頁面主內容松散相關的內容。在實踐中，我經常將其用作側邊欄(當它包含合適的內容時)。另外，引文、廣告以及導航元素(如友情鏈接等)也可以使用它。
hgroup
如果頁面中有一組使用h1、h2、h3等標簽的標題、標語和副標題，則可以考慮使用hgroup將它們包裹起來。這樣在 HTML5 的大綱結構算法中就會隱藏次級標題元 素，從而只讓hgroup中的第一個標題元素進入文檔大綱。
header
由于header元素不計入大綱結構，所以不能用它來劃分內容結構，而是應該用它來包含對區域內容的介紹說明。實際使用中，header可用作網站頭部的“刊頭”區域，也可用作對其他內容如article元素的簡要介紹。
footer
和header一樣，footer元素也不計入大綱結構，所以也不能用于劃分內容結構。 應該用它來包含其所在區域的輔助信息。例如可以用它包含一組指向其他頁面的超鏈接， 或者用它包含版權信息。和header一樣，它也可以視情況在同一個頁面上多次出現。 例如博客網站的頁腳可以用它，同時博客正文article元素內的文腳也可以用它。不過規范指出，博文作者的聯系信息應該使用address元素來包裹。
address
address元素用于明確地標注離其最近的article或body祖先元素的聯系信息。 為避免產生混淆，請記住address中一般不放具體的郵政地址，除非相應內容確實需要聯系地址。而郵政地址和其他可能會改變的聯系信息應該使用p標簽來包裹。
HTML5 的文本級語義元素
除了前面講過的結構元素，HTML5 還修訂了一些被稱之為行內元素的標簽。HTML5 標 準中稱這些標簽為文本級語義元素。我們來看幾個常用的例子。
b
過去，人們通常利用b元素為文本添加樣式，但它的實際用途其實是“給文本加粗”。 不過現在你可以正式地將其僅用作樣式鉤子了，因為現在 HTML5 標準對b的定義是：
......一小段文本，純粹為了吸引人的注意，除此之外不傳達任何重要性，也不暗示其他語態或語氣，如文檔摘要中的關鍵詞、評論中的產品名稱、交互式文本軟件中的可操作單詞，或者文章的導語。em
在 HTML5 中它的語義是：
......強調內容中的重點。因此，除非你確實想強調標簽中的內容，否則的話可以考慮使用b標簽或者可以的話使用i標簽。
i
HTML5 標準中對i的描述如下：
......一小段有不同語態或語氣的文字，或者是樣子上與普通文章有所差異以便標明不同特點的文字。簡單地說，它不僅僅是用來給某些文字加斜體效果的。
遵循 WAI-ARIA 實現無障礙站點
WAI-ARIA 是 Web Accessibility Initiative - Accessible Rich Internet Applications 的縮寫，指無障礙網頁應用技術，它主要解決一個問題，讓殘障人士能無障礙地訪問網頁上的動態內容。
這種技術提供了一種描述自定義組件(網頁應用中的動態片段)的角色、狀態和屬性的方法，這樣這些組件就可以被依賴輔助技術的用戶找到并加以利用。
如果你接了一個為客戶制作網站的任務，除了基本要求之外通常不會給你專門的時間/經費來增加無障礙支持(悲劇的是，無障礙性經常被完全拋諸腦后)。但我們還是可以使用無障礙網頁應用技術中的地標角色(landmark role)來修正 HTML 語義元素的一些明顯的不足，從而使支持無障礙網頁應用技術的屏幕閱讀器可以在不同的頁面區塊之間輕松跳轉。
ARIA 的地標角色
在響應式網頁設計中實現 ARIA 的地標角色，跟響應式設計沒有什么關系。可是，在某種程度上支持它一下又非常簡單(而且不必作任何修改就保證通過 HTML5 驗證)。
新的 HTML5 導航區域結構如下：
<nav> <ul><li><a href="#">Why?</a></li><li><a href="#">Synopsis</a></li><li><a href="#">Stills/Photos</a></li><li><a href="#">Videos/clips</a></li><li><a href="#">Quotes</a></li><li><a href="#">Quiz</a></li></ul> </nav>我們可以讓導航區域在支持無障礙網頁應用技術的屏幕閱讀器上輕松地定位，只需為其追加一個地標角色屬性 role 即可，如下面的代碼片段所示：
<nav role="navigation"><ul><li><a href="#">Why?</a></li><li><a href="#">Synopsis</a></li><li><a href="#">Stills/Photos</a></li><li><a href="#">Videos/clips</a></li><li><a href="#">Quotes</a></li><li><a href="#">Quiz</a></li></ul> </nav>夠簡單吧？針對文檔結構的各部分分別有如下的地標角色。
application:用來定義用作網頁應用的區域。 banner:用來定義一個站點級別(而不是某個特定文檔的)的區域。如網站的頭部和logo。 complementary:用來定義一個對頁面主要區域進行補充說明的區域。 contentinfo:用來定義與頁面主要內容相關的信息區域。例如頁腳的網站版權信息區域。 form:你猜都能猜到，定義表單!但注意，如果表單用于搜索，則請使用 search 來替代。 main:定義頁面的主體內容。 navigation:用來定義鏈向當前文檔或相關文檔的導航鏈接。 search:用來定義一個用于搜索的區域。無障礙網頁應用技術并非只有地標角色。想要做進階應用，請參閱完整的角色列表及其簡要使用說明：http://www.w3.org/TR/wai-aria/roles#role_definitions。
在 HTML5 中嵌入媒體
IE8 及更低版本都不支持 HTML5 視頻和音頻。不過給微軟的“先天不足”的瀏覽器提供備用解決方案也很簡單，稍后我們會討論這個問題。其他現代瀏覽器 (Firefox 3.5+、Chrome 4+、 Safari 4、 Opera 10.5+、Internet Explorer 9+、 iOS 3.2+、Opera 6、Mobile 11+、Android 2.3+)都沒問題。
用 HTML5 的方法為頁面添加視頻或音頻
添加多媒體的語法和添加圖片類似：
<video src="myVideo.ogg"></video>在 HTML5 中只需要一個<video></video>標簽(音頻使用<audio></audio>標簽)就能搞定。
還可以在開始標簽和結束標簽之間插入文字用以告知那些使用不兼容 HTML5 瀏覽器的用戶，此外還支持你一般都會追加的附加屬性如 height 和 width。我們把這些都加上：
<video src="video/myVideo.mp4" width="640" height="480">What, do you mean you don't understand HTML5?</video>現在將上面這段代碼插入我們的網頁然后在 Safari 中查看，視頻就會出現但沒有播放控制欄。想要顯示默認的播放控制欄則需要追加 controls 屬性。我們還可以追加 autoplay 屬性(不建議——因為大家都討厭自動播放的視頻，這是常識)。
其余的屬性還包括用來控制媒體預加載的 preload(HTML5 的早期嘗鮮者應該注意 preload 替代了原先的 autobuffer)，用來重復播放視頻的 loop，以及用來定義視頻縮略圖的 poster(這個屬性在視頻播放延遲時非常有用)。要使用某個屬性，將其追加到標簽中即可。下面的例子包含了剛才提到的所有屬性：
<video src="video/myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg">What, do you mean you don't understand HTML5?</video>提供備用的媒體源文件
最初的 HTML5 規范呼吁所有瀏覽器內置支持使用 Ogg 格式直接播放視頻或音頻(無需插件)。但是由于 HTML5 工作組的內部爭議，曾經作為基線標準的支持 Ogg(包括 Theora video 和 Vorbis audio)的主張在最近更新的 HTML5 規范中被放棄。
因此目前的情況是， 一些瀏覽器支持某一套視頻和音頻文件格式，而另一些瀏覽器則支持其他格式。例如 Safari 只允許在video和audio元素中使用 MP4/H.264/AAC 媒體文件，而 Firefox 和 Opera 則只支持 Ogg 和 WebM。
謝天謝地，有一種方法能在一個標簽內支持多種媒體格式。但是這種方法并不能免除我們為一個媒體文件創建多種版本。我們都期望這個問題在將來某個適當的時刻會自行解 決，此時我們手握多種格式的媒體文件，則可以這樣編寫視頻標簽：
<video width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.jpg"><source src="video/myVideo.ogv" type="video/ogg"><source src="video/myVideo.mp4" type="video/mp4">What, do you mean you don't understand HTML5? </video>如果瀏覽器支持 Ogg 格式，則使用第一個文件；否則它會繼續往下解析下一個<source>標簽。
針對老版本瀏覽器的備用方案
照這種方式使用source標簽，我們就能根據需要提供一系列備用方案。例如在提供了 MP4 和 Ogg 格式之后，如果我們還想給 IE8 及更低版本提供一個優雅的備用方案，則可以追加一個 Flash。更進一步，如果用戶的瀏覽器沒有任何合適的媒體播放技術，我們還可以為其提供媒體文件的下載鏈接：
<video width="640" height="480" controls autoplay preload="auto" loop poster= "myVideoPoster.jpg"><source src="video/myVideo.mp4" type="video/mp4"><source src="video/myVideo.ogv" type="video/ogg"><object width="640" height="480" type="application/x-shockwave-flash" data="myFlashVideo.SWF"><param name="movie" value="myFlashVideo.swf" /><param name="flashvars" value="controlbar=over&image=myVideoPoster.jpg& file=video/myVideo.mp4" /><img src="myVideoPoster.jpg" width="640" height="480" alt="__TITLE__" title="No video playback capabilities, please download the video below" /></object><p> <b>Download Video:</b>MP4 Format: <a href="myVideo.mp4">"MP4"</a>Ogg Format: <a href="myVideo.ogv">"Ogg"</a></p> </video>響應式視頻
對于 HTML5 式嵌入視頻，修正方法很簡單。只需刪除視頻標簽中的 height 和 width 屬性(如刪除 width=”640” height=”480”)，然后在 CSS 中追加如下代碼 video { max-width: 100%; height: auto; }
這種方法對本頁面中的視頻文件很有用，但它不能解決使用 iframe 嵌入的視頻的響應問題。很有多方法可以解決這個問題，一個簡單的辦法是使用一個名為 FitVids 的 jQuery 小插件。（網址：http://fitvidsjs.com/）
離線 Web 應用
肯定會有越來越多的移動設備用戶訪問網站，為他們提供一種不需要網絡連接仍可訪問網站內容的途徑如何？HTML5 的離線 Web 應用特性將其變成了可能。
假設有一個在線筆記應用，當用戶的手機網絡斷開時，他可能正在編輯一則筆記。使用 HTML5 的離線 Web 應用，他就可以繼續離線編輯筆記，然后等到網絡再次連接時將本地數據發送到服務器。
HTML5 離線 Web 應用的最美妙之處在于它的設置和使用都超級簡單。
離線 Web 應用概述
離線 Web 應用的運行機制是每個需要離線使用的網頁都指定一個后綴名為.manifest 的文本文件。這個文本文件羅列了該網頁離線使用時所需的所有資源文件(HTML、圖片 JavaScript 等等)。支持離線 Web 應用的瀏覽器會自動讀取.manifest 文件，下載文件中所羅列的資源文件，并將其緩存在本地以備網絡斷開時使用。
讓網頁可離線使用
在 HTML 的開始標簽中，我們指定一個.manifest 文件:
<html lang="en" manifest="/offline.manifest"該文件的文件名隨意，但后綴名建議使用.manifest。同時，你必須在每一個準備離線使用的頁面的 HTML 標簽中都追加 manifest= “/offline.manifest”屬性。
如果使用的是 Apache 服務器，你可能還需要修改一下.htaccess 文件，追加一行代碼：
AddType text/cache-manifest .manifest這樣就保證了.manifest 文件擁有正確的 MIME 類型，即 text/cache-manifest。
在.htaccess 文件中還可以加入以下代碼：
添加上面這幾行代碼，可以阻止瀏覽器緩存緩存文件。因為 offline.manifest 是一個靜態文件，瀏覽器默認就會緩存 offline.manifest 文件。所以上面這幾行代碼 就是讓服務器告訴瀏覽器不要這么干。
現在我們需要給 offline.manifest 填充內容。即通知瀏覽器那些文件是用作離線存儲的。
例如：
CACHE MANIFEST #v1CACHE: basic_page_layout_ch4.html css/main.css img/atwiNavBg.png img/kingHong.jpg img/midnightRun.jpg img/moulinRouge.jpg img/oscar.png img/wyattEarp.jpg img/buntingSlice3Invert.png img/buntingSlice3.pngNETWORK: *FALLBACK: //offline.html理解 manifest 文件
manifest 文件必須以 CACHE MANIFEST 開頭。第二行就是一句注釋，注明了 manifest 文件的版本號。這句注釋的用途稍后詳細介紹。
CACHE:部分羅列了所有離線使用所需的文件。這些文件的路徑都是相對 offline.manifest 而言的，所以文件路徑可能需要根據情況稍作修改。使用絕對路徑也是可以的。
NETWORK:部分羅列了所有不需要被緩存的文件。你可以將其看成是一個“在線白名單”。 此處羅列的文件在網絡暢通的情況下都會直接跳過緩存。如果你想網站內容在網絡暢通的情況下及時更新(而不是僅在離線緩存中查找)，可以在此處使用*。星號被稱為在線白名單通配符。
FALLBACK:部分使用/字符定義了一個 URL 模板。它的作用是訪問每個頁面時都會問“緩存中有這個頁面嗎?”，如果有則顯示緩存頁面，如果沒有則顯示指定的 offline.html 文件。
頁面被自動加載到離線緩存
根據實際情況，還有一種更簡單的辦法來設置 offline.manifest 文件。任何指定了離線 manifest 文件的頁面(就是在標簽中追加了 manifest=”/offline.manifest”的頁面)在被用戶訪問時都會被自動加入到本地緩存。瀏覽器會緩存用戶訪問過的每一個網頁以確保這些網頁在離線狀態下仍可訪問。簡化的 manifest 文件如下:
CACHE MANIFEST # Cache Manifest v1 FALLBACK: //offline.html NETWORK: *選擇使用這個方法時有一點需要注意，這種方法只會下載和緩存用戶訪問的 HTML 頁面， 不會緩存頁面內引入的圖片、JavaScript 或者其他資源文件。如果這些資源文件是必需的， 那么請按照上節中的方法在 CACHE:部分專門聲明這類文件。
版本注釋的用途
對網站內容或任何資源文件做了修改之后，你必須得對 offline.manifest 文件也做點修改并將其重新上傳服務器。這樣就能讓服務器為瀏覽器提供新版本文件，而瀏覽器則會下載該新版本文件并再次觸發離線存儲進程。
更詳細的說明：如果開發者對網站內容或資源做了修改，那么也得通知瀏覽器更新緩存文 件，否則瀏覽器仍然會使用之前已有的緩存文件。而通知瀏覽器更新緩存文件的方式通常是更新 manifest 文件， 瀏覽器如果發現 manifest 文件發生了變化，就會更新緩存文件。大多數情況下 manifest 中的緩存文件清單不會發生變化，那我們就通過修改注釋的方式來改變 manifest 文件，注釋中的版本號，既能觸發文件變化，又能指明當前版本，一舉兩得。其實注釋中還可以加入更新時間等更詳細信息，有助于維護。
離線 Web 應用的故障診斷
當網站在離線狀態下出現問題導致無法正常運行時，可以使用 Chrome 來做故障診 斷。Chrome 內置的開發人員工具有一個非常好用的 Console 控制臺(點擊地址欄右側的扳手圖標，然后找到工具 | 開發者工具，之后切換到 Console 面板;或者直接按 F12)， 從中可以看出哪些文件緩存成功，那些緩存失敗，以及你做錯了什么。通常是文件路徑出現問題，例如緩存頁面相對于 manifest 文件的路徑不正確。
離線 Web 應用的完整規范，請見如下網址: http://dev.w3.org/html5/spec/Overview.html#offline
總結
以上是生活随笔為你收集整理的HTML5CSS3笔记：响应式设计中的 HTML5的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue3.0源码解读 - 响应式系统
- 下一篇： 响应式布局的方式