HTML5移動開發 HTML5移动开发

Estelle Weyl是一位前端工程師，自從1999年起就開發基於標準的無障礙網站。她寫作的技術博客吸引了數百萬的訪客，並經常在世界各地發表CSS3、HTML5、JavaScript、前端性能和移動Web開發相關的演講。

第1章學習移動HTML5、CSS3和JavaScriptAPI之前的準備工作1 
1.1 CubeDoo：HTML5移動遊戲2 
1.2開發工具4 
1.2.1文本編輯器4 
1.2.2瀏覽器5 
1.2.3調試工具6 
1.2.4桌面式調試器6 
1.2.5遠程調試8 
1.3測試工具14 
1.3.1仿真器和模擬器14 
1.3.2在線工具16 
1.3.3手機16 
1.3.4自動化測試19 

第2章升級至HTML520 
2.1 HTML5語法20 
2.1 .1元素21 
2.1.2屬性22 
2.1.3全局屬性和國際化屬性22 
2.1.4成為HTML5核心的HTML4屬性25 
2.1.5 HTML5新內容：全局可訪問性和交互性屬性27 
2.2 HTML元素／屬性的語法31 
2.2.1自閉合元素33 
2.2.2最佳實踐33 
2.2.3要素35 
2.2.4存在於＜head＞中的元素40 
2.2.5 ＜meta＞：添加元數據41 
2.2.6移動Meta標記42 
2.2.7移動廠商特有的值44
2.2.8網頁的＜base＞ 45 
2.2.9 ＜link＞不僅用於樣式46 

第3章HTML5中的新元素53 
3.1 HTML5中的分節元素53 
3.1.1 ＜section＞ 55 
3.1.2 ＜article＞ 55 
3.1.3 ＜section＞或＜article＞ 56 
3.1.4 ＜nav＞ 57 
3.1.5 ＜aside＞ 57 
3.1.6 ＜header＞ 58 
3.1.7 ＜footer＞ 58 
3.1.8 CubeeDoo的頁頭和頁尾59 
3.1.9不陌生也不常用：＜adderss＞ 59 
3.1.10內容分組：其他新的HTML5元素60 
3.1.11 ＜main＞ 60 
3.1.12 ＜figure＞和＜figcaption＞ 60 
3.1.13 ＜hr＞ 61 
3.1.14 ＜li＞和＜ol＞的屬性被改變61 
3.2 HTML5中新的文本級語義化元素61 
3.2.1 ＜mark＞ 62 
3.2.2 ＜time＞ 63 
3.2.3 ＜rp＞、＜rt ＞和＜ruby＞ 64 
3.2.4 ＜bdi＞ 64 
3.2.5 ＜wbr＞ 64 
3.3改變了的文本級別語義元素65 
3.3.1 ＜a＞ 65
3.3.2 HTML4中文本級元素的改變67 
3.3.3未改變的元素67 
3.4嵌入式元素68 
3.5交互式元素71 
3.5.1 ＜details＞和＜summary＞ 71 
3.5.2 ＜menu＞和＜menuitem＞ 72 
3.5.3所有的XHTML都在HTML5裡面了，除了…… 73 
3.6總結74 

第4章HTML5Web表單75 
4.1 ＜input＞的屬性（以及其他表單元素） 76 
4.1.1 type屬性77 
4.1.2 required屬性77 
4.1.3最小和最大值：min和max屬性78 
4.1.4 step屬性78 
4.1.5 placeholder屬性79 
4.1.6 pattern屬性80 
4.1.7 readonly屬性82 
4.1.8 disabled屬性82 
4.1.9 maxlength屬性83 
4.1.10 size屬性83 
4.1.11 form屬性83 
4.1.12 autocomplete屬性84 
4.1.13 autofocus屬性85 
4.2 ＜input＞類型和屬性85 
4.2.1重新介紹你認為已經了解的input類型86
4.2.2文本框：＜inputtype=“text”＞ 86 
4.2.3密碼欄：＜inputtype=“password”＞ 87 
4.2.4複選框：＜inputtype=“checkbox”＞ 88 
4.2.5單選按鈕： ＜inputtype=“radio”＞ 88 
4.2.6提交按鈕：＜inputtype=“submit”＞ 89 
4.2.7重置按鈕：＜inputtype=“reset”＞ 90 
4.2.8選擇文件按鈕：＜inputtype=“file” ＞ 91 
4.2.9隱藏：＜inputtype=“hidden”＞ 92 
4.2.10圖片：＜inputtype=“image”＞ 92 
4.2.11按鈕：＜inputtype=“button”＞ 92 
4.2.12設計輸入類型的樣式93 
4.3 ＜input＞類型新增的值93 
4.3.1電子郵件：＜inputtype=“email”＞ 94 
4.3.2 URL：＜inputtype=“url”＞ 95 
4.3.3電話：＜inputtype=“tel”＞ 96 
4.3.4數字：＜inputtype=“number”＞ 98 
4.3.5滑動條：＜inputtype=“range”＞ 100 
4.3.6搜索欄：＜inputtype=“search”＞ 100 
4.3.7拾色器：＜inputtype =“color”＞ 101
4.4日期和時間輸入類型102 
4.4.1日期選擇器：＜inputtype=“date”＞ 102 
4.4.2 UTC日期和時間：＜inputtype=“datetime”＞ 104 
4.4.3本地日期和時間：＜inputtype=“ datetime—local”＞ 104 
4.4.4月份：＜inputtype=“month”＞ 104 
4.4.5時間：＜inputtype=“time”＞ 104 
4.4.6週曆：＜inputtype=“week”＞ 105 
4.5表單驗證106 
4.6新的表單元素111 
4.6.1 ＜datalist＞元素及list屬性111 
4.6.2 ＜output＞元素114 
4.6.3 ＜meter＞ 115 
4.6.4 ＜progress＞ 116 
4.6.5 ＜keygen＞ 117 
4.7其他表單元素117 
4.7.1 ＜form＞元素117 
4.7.2 ＜fieldset＞和＜legend＞ 117 
4.7.3 ＜select＞、＜option＞和＜optgroup＞ 118 
4.7.4 ＜textarea＞ 118 
4.7.5 ＜button＞ 118 
4.7 .6 ＜label＞元素118 
4.8小結119
 
第5章SVG、Canvas、Audio和Video 120
5.1 HTML5媒體API 120 
5.1.1 SVG 120 
5.1.2在文檔中引入SVG 123 
5.1.3 “小丑汽車”技術：用於響應式前景圖像的SVG 123 
5.1.4學習SVG 125 
5.1.5 CubeeDooSVG 125 
5.1. 6 Canvas 128 
5.1.7 Canvas與SVG 132 
5.2 Audio／Video 133 
5.2.1媒體類型133 
5.2.2把＜video＞添加到網站135 
5.2.3 ＜video＞和＜audio＞的屬性135 
5.2.4視頻、音頻和JavaScript 140 
5.2.5為視頻設計樣式142 

第6章其他HTML5API 144 
6.1離線Web應用144 
6.1.1我是否已經連接上網144 
6.1.2應用緩存145 
6.1.3本地（Local）和會話（Session）存儲149 
6.1.4 SQL／Database存儲159 
6.2增強的用戶體驗164 
6.2.1地理位置服務164 
6.2.2 WebWorker 167 
6.2.3微數據169 
6.2.4跨文檔消息172 
6.3無障礙富Internet應用（ARIA） 173
6.4小結175 

第7章升級到CSS3176 
7.1 CSS：定義和語法177 
7.1.1 CSS語法178 
7.1.2使用外部樣式表：重溫＜link＞ 179 
7.1.3媒體查詢181 
7.1.4 CSS最佳實踐184 
7.2 CSS選擇器189 
7.3更多的CSS3選擇器192 
7.3.1常規選擇器193 
7.3.2使用選擇器194 
7.3.3關係選擇器：基於代碼順序的規則195 
7.3.4屬性選擇器198 
7.3.5偽類204 
7.3.6狀態偽類207 
7.3.7結構上的偽類208 
7.3.8 nth類型的公式208 
7.3.9更多的偽類212 
7.3.10偽元素215 
7.4其他選擇器：ShadowDOM 217 
7.5小結219 

第8章CSS3值的擴展選項220 
8.1 CSS顏色值220 
8.1.1十六進制值221 
8.1.2 rgb（）句法222 
8.1.3使用RGBA添加透明度功能223 
8.1.4色調、飽和度和亮度：HSL（） 224 
8.1.5 CMYK 225 
8.1.6顏色名225
8.1.7當前色226 
8.1.8瀏覽器顏色的值226 
8.2 CSS的度量單位230 
8.2.1 CSS的長度值230 
8.2.2角度、時間和頻率233 
8.2.3 CSS的角度度量234 
8.2.4時間（Times） 235 
8.2.5頻率（Frequencies） 235 
8.3避免TRouBLe：屬性的簡寫和值的聲明236 
8.4小結238 

第9章CSS3：模塊、模型和圖像239 
9.1 CSS盒模型屬性240 
9.1.1 border 241 
9.1 .2 border—style 242 
9.1.3 border—color 242 
9.1.4 border—width 243 
9.1.5 CSS盒模型244 
9.1.6 box—sizing 245 
9.2學習CSS3246 
9.3 CSS漸變250 
9.3.1漸變類型：線性漸變或徑向漸變251 
9.3.2徑向漸變251 
9.3.3線性漸變251 
9.3.4 ackground—size 260 
9.3.5條紋漸變263 
9.3.6重複線性漸變265 
9.3.7用於漸變的工具268 
9.4陰影268
9.4.1文本陰影270 
9.4.2用寬度、溢出和文本溢出來設置文本272 
9.4.3盒子陰影273 
9.4.4整合後的結果：CubeeDoo 276 

第10章CSS3：變換、漸變和動畫280 
10.1 CSS漸變281 
10.1.1 transition—property屬性282 
10.1.2 transition—duration屬性285 
10.1.3 transition—timing—function屬性285 
10.1.4 transition—delay屬性287 
10.1.5簡寫的transition屬性287 
10.1.6多種漸變288 
10.2 CSS3變換290 
10.2.1 transform—origin屬性290 
10.2.2 transform屬性291 
10.2.3多種變換295 
10.2.4漸變變換296 
10.2.53D變換函數297 
10.2.6其他3D變換屬性299 
10.2.7綜合應用300 
10.3 CSS3動畫303 
10.3.1關鍵幀305 
10.3.2漸變、動畫和性能311 

第11章響應性Web設計中的CSS特性313 
11.1媒體查詢、斷點和流式佈局313
11.2多欄314 
11.3邊框圖像316 
11.4 flexbox 322 
11.4.1 flex屬性325 
11.4.2利用@supports進行特性檢測327 
11.5響應性媒體328 
11.5.1提供圖像329 
11.5.2 CSS遮罩：創建透明的JPEG 334 
11.5.3客戶提示335 

第12章設計移動應用程序336 
12.1開始前的考慮事項337 
12.2設計考慮事項338 
12.2.1工具：生產率應用程序339 
12.2.2娛樂：沉浸式應用程序340 
12.2.3實用程序341 
12.2.4什麼適合你341 
12.3移動平台：豐富的可能性342 
12.3.1小型屏幕342 
12.3.2較少的內存343 
12.3.3一次一個窗口、一個應用程序344 
12.3.4最小的文檔345 
12.3 .5開發考慮事項345 
12.4針對移動WebKit 346 
12.4.1狀態欄346 
12.4.2導航欄347 
12.4.3開機圖像349 
12.4.4主屏幕圖標350 
12.5最少化鍵盤輸入351
12.6保持簡明351 
12.6.1使之明顯351 
12.6.2最少化必需的輸入351 
12.6.3最少化文本351 
12.7其他用戶體驗考慮事項352 

第13章把移動設備和触摸作為目標353 
13.1縮小尺寸353 
13.2觸摸我354 
13.2.1觸摸區域355 
13.2.2鼠標事件、觸摸事件355 
13.2.3偽單擊事件358 
13.3硬件訪問361 
13.3.1手機移動和方向361 
13.3.2設備狀態362 
13.3.3本機Web應用程序、打包的應用程序和混合應用程序363 
13.4測試365 

第14章移動性能367 
14.1電池壽命367 
14.1.1使用暗色調368 
14.1.2使用JPEG 368 
14.1.3減少JavaScript 369 
14.1.4消除網絡請求370 
14.1.5硬件加速371 
14.2延時373 
14.2.1減少HTTP請求的數量374 
14.2.2減小請求的尺寸377 
14.2.3內存380 
14.2.4優化圖像381 
14.3 UI響應性386
14.3.1觸摸事件386 
14.3.2動畫387 
14.4小結387 
附錄A CSS選擇器和特徵值388