HTML5移動開發
內容描述
《HTML5移動開發》全面講解了使用HTML5和CSS3開發網站和Web應用的技術。
《HTML5移動開發》總共分為14章,其內容包含移動開發環境的設置,HTML5的元素、語法和語義,使用JavaScript來構建表單,探究應用於圖像、音視頻的HTML5媒體API以及AppCache、localStorage和其他API,CSS3選擇器和語法以及更為深入的特性,響應式Web設計的特性,以及針對所有平臺進行性能、用戶體驗和可靠性的設計。
《HTML5移動開發》適合具有一定經驗的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
作者介紹
Estelle Weyl是一位前端工程師,自從1999年起就開發基於標準的無障礙網站。她寫作的技術博客吸引了數百萬的訪客,並經常在世界各地發表CSS3、HTML5、JavaScript、前端性能和移動Web開發相關的演講。