內容介紹
HTML5並不一定適用於所有網站,而是面向未來的網站!本書面向的讀者是致力於創建有更好的多媒體、互動性和語義的網站的開發者和設計師。本書介紹了HTML5里的新元素和它們的用法,包括不太常用的元素。書中也包含了巧妙的樣式和腳本技巧,可以運用於你的網站。本書完全遵循技術標準和最新網站設計技術。
作者介紹
關於作者Anselm Bradford 是紐西蘭奧克蘭大學(AUT)的數字媒體講師。他的研究領域是互動性媒體、網頁媒體和視覺溝通。他從1996年開始從事網際網路相關的開發工作,當時他手寫了自己的第一個網站。他的Twitter賬號是@anselmbradford,偶爾也會在AnselmBradford.com發表部落格文章。
Paul Haine是一個在倫敦工作的網頁設計師,他的個人部落格是 joeblade.com。
關於技術審閱人
Jeffrey Sambells 從事他喜愛的工作。他是個父親、設計師、開發者、作家和企業家,還有更多其他的頭銜。十多年前他開始在網際網路上發表各種想法,並且這成為他熱愛的事情——不斷發現更多的可能性。他有創建流程用戶體驗的專業技能,總是站在技術(特別是移動設備)尖端。
你可以在這裡找到他的有趣作品:http://jeffreysambells. com,或者在Twitter @iamamused上發現他正在進行的秘密作品。
關於封面設計者
Corné van Dooren 設計了本書的封面。在離開ED的朋友,進行Foundation系列的新設計後,他從事結合技術和有機體形式的設計工作,本書的封面就是其成果。
Corné小時候在任何東西上畫畫,然後開始探索多媒體世界,他並不止步於此。他的信念是“多媒體的極限是人的想像力”,這也促使他不斷進步。
Corné為很多國際客戶工作,為多媒體雜誌編寫評論,測試軟體,從事多媒體研究,並且參與很多其他ED叢書的工作。可以通過他的網站聯繫他,或更多了解他:www.cornevandooren.com。
作品目錄
關於作者 xiv關於技術審閱人 xv
關於封面設計者 xvi
致謝 xvii
引言 xix
第1章 起步:HTML5的演變 1
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 簡化的doctype 10
1.4.4 簡化的字元編碼 11
1.4.5 新的內容模型類別 12
1.4.6 新元素 13
1.4.7 微數據 13
1.4.8 內嵌MathML和SVG 13
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章 各司其職的標籤 22
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和style 36
2.4.3 增加行為和後備內容:script 和 noscript 38
2.5 文檔區塊元素 40
2.5.1 語義區塊元素 40
2.6 內容分組元素 41
2.6.1 無法避免的段落:p 42
2.6.2 打斷內容:hr 43
2.6.3 保持格式:pre 43
2.6.4 引用文字:blockquote 43
2.6.5 列表 43
2.6.6 圖表、照片、圖示:figure和figcaption 47
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 和 tbody 52
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章 認識語義 63
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章 精通表單 88
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章 多媒體:視頻、音頻和內嵌媒體 127
5.1 一切的開始:img 127
5.2 圖像映射 130
5.3 嵌入其他媒體 132
5.3.1 embed元素 132
5.3.2 object元素 133
5.4 嵌入的HTML:iframe 135
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 151
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 195
7.1 使用本章的JavaScript 195
7.1.1 操作DOM屬性和方法 196
7.1.2 控制台日誌 197
7.1.3 事件 199
7.2 歷史API 200
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章 前方的路 228
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 撤銷管理器API 236
8.4.3 即將到來的CSS技術 236
小結 237
附錄A 相關技術 239
索引 251