深入理解HTML5：語義、標準與樣式

書本簡介

編輯推薦
本書講解循序漸進，包括詳細的基礎概念和最佳實踐。然後覆蓋了核心HTML5技術，帶你學習多媒體、互動性和改進的語義。每一章都以簡單的內容開始，之後進入逐步複雜的示例。
在本書中，你會學習到：
·用新的語義標籤改善代碼
·不用外掛程式在頁面使用多媒體和互動性
·用HTML5元素和客戶端校驗創建出色的表單
·探索強大的配套API

內容提要

HTML5並不一定適用於所有網站，而是面向未來的網站！本書面向的讀者是致力於創建有更好的多媒體、互動性和語義的網站的開發者和設計師。
本書介紹了HTML5里的新元素和它們的用法，包括不太常用的元素。書中也包含了巧妙的樣式和腳本技巧，可以運用於你的網站。本書完全遵循技術標準和最新網站設計技術。

書本目錄

關於作者 xiv
關於技術審閱人 xv
關於封面設計者 xvi
致謝 xvii
引言 xix

第1章　起步：HTML5的演變

1.1　HTML5 = HTML · HTML5 1
1.1.1　HTML5出現之前 1
1.1.2　為什麼XHTML 2.0消失了，而HTML5流行了 2
1.1.3　WHATWG的理念 2
1.1.4　HTML5的現狀 3
1.2　剖析HTML5文檔4
1.3　HTML術語和概念 5
1.3.1　元素 6
1.3.2　屬性 6
1.3.3　文檔模型 7
1.4　HTML5的新特性 9
1.4.1　向後兼容 9
1.4.2　錯誤處理 9
1.4.3　簡化的doctype10
1.4.4　簡化的字元編碼 11
1.4.5　新的內容模型類別 12
1.4.6　新元素 13
1.4.7　微數據 13
1.4.8　內嵌MathML和SVG13
1.4.9　API 14
1.4.10不再遵循SGML（又一次！）14
1.4.11廢棄的特性 14
1.5　XHTML消失了嗎 17
1.5.1　MIME類型的問題 18
1.6　在HTML和XHTML之間選擇 18
1.7　瀏覽器支持情況 19
1.8　瀏覽器開發工具 20
小結 21

第2章　各司其職的標籤

2.1　全局屬性 23
2.1.1　可訪問性 24
2.1.2　元數據（metadata） 25
2.1.3　唯一標識 26
2.1.4　可編輯性 28
2.1.5　拼寫檢查 28
2.1.6　隱藏元素 28
2.1.7　拖曳 29
2.1.8　樣式 29
2.1.9　文字方向 29
2.1.10自定義數據 30
2.2　內容模型類別 30
2.3　根元素 31
2.3.1　html元素的屬性 33
2.4　文檔元數據和腳本元素 33
2.4.1　網頁信息：title和meta 34
2.4.2　連結、樣式和資源：base、link和style36
2.4.3　增加行為和後備內容：script 和 noscript 38
2.5　文檔區塊元素 40
2.5.1　語義區塊元素 40
2.6　內容分組元素 41
2.6.1　無法避免的段落：p42
2.6.2　打斷內容：hr 43
2.6.3　保持格式：pre 43
2.6.4　引用文字：blockquote 43
2.6.5　列表 43
2.6.6　圖表、照片、圖示：figure和figcaption47
2.6.7　創建分塊：div 47
2.7　文本級語義元素 48
2.8　表格數據元素 49
2.8.1　表格基礎 50
2.8.2　添加表頭 51
2.8.3　增加說明：caption 52
2.8.4　增加結構：thead、tfoot 和 tbody52
2.8.5　添加更多結構：colgroup和 col 54
2.9　表單元素 56
2.10內嵌內容元素 57
2.11互動元素 59
2.11.1　顯示更多：summary 和 details 60
2.11.2　工具條：menu和command 62
小結 62

第3章　認識語義

3.1　什麼是語義，跟我有什麼關係 63
3.2　用大綱思考 64
3.3　HTML5 大綱算法65
3.4　用標題內容隱性地創建大綱 66
3.5　用區塊內容創建大綱 67
3.5.1　提高大綱的語義 68
3.6　頭和尾 70
3.6.1　使用hgroup 71
3.6.2　格式化有地址的尾部 71
3.6.3　確定頭尾內容 72
3.7　查看HTML5大綱73
3.8　div和span過時了嗎 74
3.9　案例學習：《城市新聞報》74
3.9.1　添加文本級語義 76
3.10其他文本級元素84
3.10.1　作品標題：cite 85
3.10.2　格式化計算機輸入/輸出：code、var、samp、kbd 85
3.10.3　標記文本編輯：ins和del 85
3.10.4　處理外來腳本85
小結 87

第4章　精通表單

4.1　表單元素複習 88
4.1.1　分析表單元素 89
4.1.2　表單元素屬性 90
4.2　獲取輸入 91
4.2.1　最初的輸入類型 93
4.2.2　新輸入類型 98
4.3　校驗和提交表單 102
4.3.1　輸入欄位必填 103
4.3.2　用按鈕和圖片提交表單 103
4.4　其他常用input元素屬性 105
4.4.1　提供占位符文字 105
4.4.2　欄位唯讀 106
4.4.3　autocomplete 和 autofocus 106
4.4.4　使用數據列表 107
4.5　其他表單控制項 108
4.5.1　選單 108
4.5.2　文本塊 111
4.5.3　顯示進度 112
4.5.4　顯示度量 112
4.5.5　顯示計算的輸出 114
4.5.6　密鑰生成器 115
4.6　用fieldset和label添加結構 115
4.7　完整的表單 117
4.7.1　第一頁：收集用戶詳情 117
4.7.2　第二頁：收集評論 121
4.7.3　第三頁：確認信息123
4.8　表單可用性 124
4.8.1　各司其職的輸入類型 124
4.8.2　保持簡潔 124
4.8.3　別讓我思考、別讓我費力、別騙我 125
4.8.4　記住網際網路是全球的 125
4.8.5　需要時提供後備方案 125
小結 126

第5章　多媒體：視頻、音頻和內嵌媒體

5.1　一切的開始：img127
5.2　圖像映射 130
5.3　嵌入其他媒體 132
5.3.1　embed元素 132
5.3.2　object元素133
5.4　嵌入的HTML：iframe135
5.4.1　處理iframe元素里的內容 136
5.4.2　新的iframe元素屬性 137
5.4.3　指向iframe 138
5.5 　視頻 139
5.5.1　視頻格式 139
5.5.2　著作權問題 140
5.5.3　處理視頻源 140
5.5.4　視頻屬性 144
5.6　音頻 146
5.6.1　音頻格式 147
5.7　文字軌 148
5.8　編碼音頻和視頻 149
5.9　最後一個重要元素 150
小結 150

第6章　CSS3

6.1　當前狀態：CSS2.1 151
6.2　CSS3 模組 152
6.3　使用CSS 153
6.3.1　附上樣式表 153
6.3.2　CSS樣式規則 155
6.3.3　基本的CSS選擇器語法 157
6.3.4　高級選擇器 161
6.3.5　高效使用選擇器 175
6.3.6　CSS盒模型176
6.4　背景和框線 180
6.4.1　基本背景色和圖片 180
6.4.2　多重背景 184
6.4.3　圓角 185
6.4.4　陰影 185
6.5　顏色 186
6.5.1　螢幕上的顏色 186
6.5.2　功能符語法 188
6.5.3　色調、飽和度、亮度 188
6.5.4　不透明度 189
6.6　網頁字型的編排設計 190
6.6.1　網頁字型 190
6.6.2　多列 192
6.6.3　文字特效 192
6.6.4　字型的規則 193
小結 194

第7章　用戶互動和HTML5 API

7.1　使用本章的JavaScript195
7.1.1　操作DOM屬性和方法 196
7.1.2　控制台日誌 197
7.1.3　事件 199
7.2　歷史API200
7.2.1　非常簡單的Ajax 201
7.2.2　基於歷史的Ajax 203
7.3　構建自定義視頻控制器 205
7.4　2D Canvas API 編程 208
7.4.1　畫布繪圖 211
7.4.2　畫布狀態 215
7.4.3　畫布的互動 216
7.4.4　畫布動畫 217
7.5　拖曳操作 219
7.5.1　用拖曳排序列表 225
小結 227

第8章　前方的路

8.1　移動網際網路的挑戰 228
8.2　回響式設計 229
8.2.1　viewport 229
8.2.2　媒體查詢 231
8.3　離線套用快取 233
8.4　其他HTML5技術234
8.4.1　微數據 234
8.4.2　撤銷管理器API236
8.4.3　即將到來的CSS技術 236
小結 237
附錄A　相關技術239
索引 251

精彩節摘

譯者序
網際網路從誕生到繁榮的每個階段，HTML這個簡單而強大的標記語言都發揮著舉足輕重的作用。從簡單的新聞列表展示到複雜的線上表格套用，結合JavaScript、CSS，前端工程師用這些簡單的標記創建出一個個改變人們生活的套用。
但遺憾的是，雖然套用廣泛，很久以來HTML的很多特性並沒有被正確地運用，技術細節和最佳實踐也沒有得到足夠重視。網際網路上充斥著大量劣質編碼的HTML頁面。這很大程度上是因為即使未經專業的學習，也可以很快地寫出簡單的HTML頁面。如果長此以往使用不規範甚至錯誤的編碼方式，最終甚至會影響網際網路的發展。和其他程式語言一樣，HTML也需要紮實的基本功才能駕馭。
本書作者深諳基礎的重要，用了大量篇幅講解一個個看似簡單的概念，很多內容都給出了來龍去脈，有助於讀者理解技術和標準產生的背景，並加入了翔實的參考引用。
現在使用最廣泛的HTML 4.0.1標準已經十餘年沒有重要更新，對於構建複雜的網頁套用也越來越顯得力不從心。業界早已開始醞釀下一個HTML版本。HTML5標準最早在2004年就由WHATWG提出，經過多年的演變以及各個瀏覽器陣營的磨合，主流瀏覽器製造商都已經實現了主要的HTML5核心。移動網際網路的興起，給HTML5的普及帶來了更有利的設備環境和難得的商業契機。
相信本書能幫助網頁設計師和開發者打下一個HTML5的良好基礎，但正如作者在最後一部分說的那樣，雖然這裡覆蓋了很多必要的知識點，然而HTML5仍在不斷發展中，現代瀏覽器也在飛速升級，移動網際網路日新月異，只有緊跟這些變化，輔以紮實的基礎，才是精通HTML5之道。
獻給我的父母Harda 和 Stuart，是你們告訴我同樣的暴風雨可能是由龍捲風，也可能是由疾風造成的。
—Anselm Bradford

作者簡介

關於作者

Anselm Bradford 是紐西蘭奧克蘭大學（AUT）的數字媒體講師。他的研究領域是互動性媒體、網頁媒體和視覺溝通。他從1996年開始從事網際網路相關的開發工作，當時他手寫了自己的第一個網站。他的Twitter賬號是@anselmbradford。
Paul Haine是一個在倫敦工作的網頁設計師。

關於技術審閱人

Jeffrey Sambells 從事他喜愛的工作。他是個父親、設計師、開發者、作家和企業家，還有更多其他的頭銜。十多年前他開始在網際網路上發表各種想法，並且這成為他熱愛的事情——不斷發現更多的可能性。他有創建流程用戶體驗的專業技能，總是站在技術（特別是移動設備）尖端。

關於封面設計者

Corné van Dooren 設計了本書的封面。在離開ED的朋友，進行Foundation系列的新設計後，他從事結合技術和有機體形式的設計工作，本書的封面就是其成果。
Corné小時候在任何東西上畫畫，然後開始探索多媒體世界，他並不止步於此。他的信念是“多媒體的極限是人的想像力”，這也促使他不斷進步。
Corné為很多國際客戶工作，為多媒體雜誌編寫評論，測試軟體，從事多媒體研究，並且參與很多其他ED叢書的工作。

媒體評論

不要滿足於一般的HTML。做個HTML5大師吧！本書將讓你的標記語言更進一步。本書將幫助你成為熟練掌握最新標準方向的開發者。這裡有巧妙的技巧，可以用於你的網站。
書中介紹了HTML5的新元素，包括不常用的元素，告訴你使用它們的場合和方法。本書結合大量的實際建議和例子，提供讓你成為HTML5大師所需的知識——
·HTML5立即上手
·使用正確的標籤
·精通HTML5表單
·控制HTML5的音頻和視頻
·創建最佳品質的用戶互動
·結合CSS3和HTML5，掌握最新標準

前言

致謝
就像生活中的所有事情一樣，這本書的準備工作在出版之前很久就開始了。回顧過去，我想我是從兩條道路走向了這本書的寫作。首先是知識的積累，然後是跟出版社溝通的過程到最終形成本書。
在第一條道路上，我得益於自己生命歷程中的很多人，他們讓我可以發展自己的網頁開發技能。雖然還可以追溯到更久以前，但是我對網際網路的興趣首先是在Vermont的少年時期開始的。1996年，我為Rainbow Organic Fiber Mill，在North Bennington的一個由Bryant Rayngay創立的有機棉面料公司開發了一個網站。雖然一直沒有上線，但這是我第一次從頭手寫一個網站，我的興趣從此埋下了種子。在以後的幾年裡，我的技能得到了提高（特別是在Atlantic大學的網路管理員Sean Murphy的幫助下）。我非常感謝Sean，他讓我在大學期間有很多機會，並自由地作為網站的助理管理員學習和發展技能，並最終能夠在很多年裡負責設計和開發這個網站。還要感謝Jared Vorkavich 和 Taeil Kim，他們給了我在研究生階段發展視覺設計、互動和網頁開發技能的空間。還有更多直接和間接的人，為我創造了學習的道路，使我積累了今天的知識。
通往這本書的另一條道路開始於我失去了一本書的技術編輯工作機會。我和我的朋友Eric Kramer都申請了這份工作，但他得到了這個職位。而當這個項目開始後，又需要另一名編輯，然後Eric推薦我加入項目。這是Rich Shupe為O’Reilly Media寫的一本書，從那本書後，我又編輯了兩本Rich的書，他要求我作為審閱者。感謝Eric 和 Rich，因為沒有他們的話，我可能不會那么多地參與出版工作。通過仔細地審閱技術書籍和觀察一本書的製作過程，我相信自己也可以寫作。這些項目給我帶來了Peachpit Press 的書籍編輯工作，最後得到了對我很重要的Apress的工作機會。
感謝ED的朋友Ben Renow-Clarke，是他啟動了這本書，還有Jennifer Blackwell和其他Apress團隊人員的耐心和對本書的指導。感謝我的技術審閱員Jeffrey Sambells，你的查錯能力給了我驚喜。還要感謝Paul Haine的著作HTML Mastery為本書奠定了基礎。
感謝我在AUT大學的同事，他們為我創造了提高網頁技術和寫作的機會。特別感謝Gudrun Frommherz幫我調整了課程表，使我有更多時間寫作，還有Abhi Kala，在我寫作的很多夜晚都管理著數字媒體部門（也感謝Abhi為我拍了本書的作者照）。還要感謝 WHATWG IRC頻道的人員，感謝他們在我對HTML標準的一些內容產生疑惑時給予幫助。
特別感謝 Whitney Traylor 在我開始寫書後忍受我分散的注意力和精力。最後感謝我的弟弟Orson，他總是對談論和分享網頁開發知識充滿熱情和興趣。
Anselm Bradford

引言

除非你一直離開這個數字時代外出度假，否則肯定聽到過很多關於HTML5的議論。作為一個網際網路從業人員，很顯然理解HTML5已經不是加分技能，而是必備技能了。過去幾年來網際網路的課程從XHTML到HTML5發生了根本性的變化，這帶來了新的概念需要學習，也要摒棄過時的編程實踐。
有時HTML5涵蓋的內容可能看起來神秘又模糊，分解HTML5的定義可能會有很多方向。本書會詳細地覆蓋HTML5的狀況，並讓你在技術上打下一個堅實的基礎。在深入細節之前會簡要介紹基礎概念，重點在於打下HTML的基礎。例如在表單、多媒體和提升了的網站語義化方面有很多新元素和屬性。同時也有很多元素和屬性被廢棄了，作為一個專業的開發者，你應該絕對不再使用它們了（是吧？）。我們用清晰簡單的摘要來展示當前HTML元素的正確用法。CSS和JavaScript這兩個主題，會通過它們各自和HTML的關係來討論和研究。
另外，為了介紹更進一步的理論和實踐知識，數字顏色值、媒體格式、回響式設計，甚至是三角學這些內容都會介紹。
雖然HTML5還要經過多年才能成熟，但你會發現它已經為很多下一代網頁套用打下了基礎——可能就是你開發的網頁套用呢！

本書讀者

本書面向任何熟悉HTML、CSS和JavaScript，並有興趣深入理解這些標準的讀者。HTML5標準非常龐大。本書的介紹將帶你快速入門，是你學習更高級HTML知識的“跳板”。
雖然HTML、CSS和JavaScript看似熟悉、簡單，但是你一定會發現帶來驚喜的新內容。學習這些細節知識對於掌握HTML5有莫大作用。讀完本書後，你會擁有基礎知識和能力去探索更加高級的現代網頁開發技術。

本書結構

本書首先討論讓HTML5變成今天最炙手可熱的開發技術的出奇複雜的歷史。針對新接觸HTML的讀者，在進入HTML5的亮點和自HTML 4.0.1之後的變化之前，我們會先介紹HTML5的基本術語。在HTML5狀況的概要之後，接下來的章節深入到具體的領域，詳細地介紹HTML元素和相關技術。
本書的前三分之一部分會幫你了解HTML5的特性，打下紮實的基礎，有助你為今天的網際網路組織、開發更好的網頁。在第2章，你會學到所有元素都擁有的全局屬性和HTML5的新內容模型類別，它用於將HTML元素分為一系列重疊的分組。有兩章內容用來深入討論這些元素。語義化地構建頁面給予了特別的關注。在廣泛理解了所有HTML元素後，本書的第二個三分之一部分深入網頁表單元素，在它之後是內嵌媒體。
本書最後的三分之一部分包括跟HTML緊密結合使用但是跟HTML元素分離的概念。從第6章開始，討論HTML和CSS3的關係。會介紹CSS的基本概念，並通過實例展示CSS3的主要特性。之後介紹HTML5 JavaScript API的概念。我們會創建一個簡單模板來研究JavaScript，並結合例子演示。本書以移動設備網頁開發收尾，最後是正在發展的HTML5技術的摘要。並且全書的最後是通常跟HTML5一起使用（比如地理位置API），但並不屬於HTML5的技術概要。
本書可以從頭到尾閱讀，或者放在你的計算機旁作為元素和概念的參考手冊。要充分利用本書，我推薦（WHATWG）HTML標準的要訣，在談到應該怎樣閱讀文檔才最有效時，是這樣說的：
“應該從頭到尾讀多遍。然後，至少從後往前讀一遍。之後從目錄隨機選取，並按照交叉引用閱讀。”

本書約定

本書有一些約定值得注意：
? 除非註明，否則HTML5和HTML指HTML語言最新的實現。
? 現代瀏覽器指 Google Chrome 11、Mozilla Firefox 4、Safari 5、Opera 11、Microsoft Internet Explorer 9 或者它們更新的版本。
? 說到單獨的HTML元素時，可以加上“元素”，也可以不加，例如pre和pre元素，都指HTML代碼的<pre>。
? 除非註明或暗指，否則假設本書所有的HTML例子都包含在合法HTML5文檔的body里。
? 除非註明或暗指，任何CSS和JavaScript代碼都假設在一個外部樣式表或腳本檔案里。
? 包含在更大的代碼段里的片段可能會包括省略號（...），代表在片段前後有未顯示內容。例如：
? 最後，需要注意的是JavaScript示例里創建的全局變數和函式是為了代碼的簡化和清晰。大部分情況下這是可行的，但是對於專業的最佳實踐，JavaScript變數和函式的作用範圍經常需要處於一個自定義對象里，以避免不同腳本間的命名衝突。
結束了這些例行介紹，讓我們開始HTML5之旅吧。