第 一部分　HTML5實戰(zhàn) 第 1章　HTML5簡介 3 1.1　HTML、XHTML和HTML5 3 1.1.1　HTML和XHTML 3 1.1.2　HTML5 4 1.2　學前準備 7 1.3　本章練習 8 第 2章　新增元素 9 2.1　結(jié)構(gòu)元素 9 2.1.1　header元素 9 2.1.2　nav元素 12 2.1.3　article元素 13 2.1.4　aside元素 14 2.1.5　section元素 14 2.1.6　footer元素 14 2.2　表單元素 15 2.2.1　新增input元素類型 15 2.2.2　新增其他表單元素 26 2.3　其他新增元素 29 2.3.1　address元素 29 2.3.2　time元素 31 2.3.3　progress元素 32 2.3.4　meter元素 34 2.3.5　figure和figcaption元素 34 2.3.6　fieldset和legend元素 35 2.4　改良后的元素 36 2.4.1　a元素 36 2.4.2　ol元素 37 2.4.3　small元素 38 2.4.4　script元素 39 2.5　本章練習 40 第3章　新增屬性 42 3.1　公共屬性 42 3.1.1　hidden屬性 42 3.1.2　draggable屬性 43 3.1.3　contenteditable屬性 44 3.1.4　data-*屬性 45 3.2　input元素的新增屬性 47 3.2.1　autocomplete屬性 47 3.2.2　autofocus屬性 48 3.2.3　placeholder屬性 49 3.2.4　required屬性 50 3.2.5　pattern屬性 51 3.3　form元素的新增屬性 52 3.4　本章練習 54 第4章　元素拖放 56 4.1　元素拖放簡介 56 4.2　dataTransfer對象 58 4.2.1　dataTransfer對象簡介 58 4.2.2　dataTransfer對象應(yīng)用 59 4.3　本章練習 62 第5章　文件操作 63 5.1　文件操作簡介 63 5.2　File對象 68 5.3　FileReader對象 70 5.4　Blob對象 77 5.5　本章練習 81 第6章　本地存儲 83 6.1　本地存儲簡介 83 6.2　localStorage 84 6.3　sessionStorage 88 6.4　indexedDB 90 6.4.1　操作“數(shù)據(jù)庫” 91 6.4.2　操作“對象倉庫” 94 6.4.3　增刪查改 97 6.5　實戰(zhàn)題：計數(shù)器 107 6.6　本章練習 108 第7章　音頻視頻 109 7.1　視頻音頻簡介 109 7.1.1　Flash時代的逝去 109 7.1.2　HTML5時代的來臨 110 7.2　開發(fā)視頻 110 7.2.1　video元素 110 7.2.2　視頻格式 112 7.2.3　自定義視頻 113 7.3　開發(fā)音頻 122 7.3.1　audio元素 122 7.3.2　音頻格式 123 7.3.3　自定義音頻 124 7.4　本章練習 125 第8章　離線應(yīng)用 126 8.1　搭建服務(wù)器環(huán)境 126 8.2　離線存儲 128 8.3　更新緩存 131 8.4　本章練習 132 第9章　多線程處理 133 9.1　Web Worker簡介 133 9.2　Web Worker應(yīng)用 135 9.3　實戰(zhàn)題：后臺計算 137 9.4　本章練習 138 第 10章　地理位置 139 10.1　地理位置簡介 139 10.1.1　getCurrentPosition()方法 139 10.1.2　watchPosition()方法 143 10.1.3　clearWatch()方法 145 10.2　百度地圖 147 10.2.1　API簡介 147 10.2.2　API應(yīng)用 151 10.3　本章練習 152 第 11章　桌面通知 153 11.1　Notification API簡介 153 11.2　Notification API應(yīng)用 155 11.3　本章練習 157 第 12章　Canvas 158 12.1　Canvas是什么 158 12.1.1　Canvas簡介 158 12.1.2　Canvas與SVG 160 12.2　Canvas元素 160 12.2.1　Canvas元素 161 12.2.2　Canvas對象 162 12.3　直線 164 12.3.1　Canvas坐標系 164 12.3.2　直線的繪制 165 12.4　矩形 170 12.4.1　描邊矩形 170 12.4.2　填充矩形 173 12.4.3　rect()方法 176 12.4.4　清空矩形 178 12.5　多邊形 180 12.5.1　Canvas繪制箭頭 181 12.5.2　Canvas繪制正多邊形 182 12.5.3　Canvas繪制五角星 184 12.6　實戰(zhàn)題：繪制調(diào)色板 186 12.7　本章練習 188 第二部分　CSS3實戰(zhàn) 第 13章　CSS3簡介 191 13.1　CSS3簡介 191 13.2　瀏覽器私有前綴 192 13.3　一個酷炫的CSS3效果 194 13.4　本章練習 197 第 14章　新增選擇器 198 14.1　CSS3選擇器簡介 198 14.2　屬性選擇器 199 14.3　子元素偽類選擇器 201 14.3.1　 :first-child、:last-child、:nth-child(n)、:only-child 201 14.3.2　 :first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type 204 14.4　UI偽類選擇器 205 14.4.1　:focus 205 14.4.2　::selection 206 14.4.3　:checked 209 14.4.4　:enabled和:disabled 210 14.4.5　:read-write和:read-only 211 14.5　其他偽類選擇器 212 14.5.1　:root 212 14.5.2　:empty 213 14.5.3　:target 214 14.5.4　:not() 217 14.6　本章練習 218 第 15章　文本樣式 220 15.1　文本樣式簡介 220 15.2　文本陰影：text-shadow 220 15.2.1　W3C坐標系 220 15.2.2　text-shadow屬性簡介 221 15.2.3　定義多個陰影 224 15.3　文本描邊：text-stroke 224 15.4　文本溢出：text-overflow 226 15.5　強制換行：word-wrap、 word-break 228 15.6　嵌入字體：@font-face 230 15.7　實戰(zhàn)題：火焰字 232 15.8　本章練習 233 第 16章　顏色樣式 234 16.1　顏色樣式簡介 234 16.2　opacity透明度 234 16.3　RGBA顏色 235 16.4　CSS3漸變 239 16.4.1　線性漸變 240 16.4.2　徑向漸變 242 16.5　實戰(zhàn)題：漸變按鈕 248 16.6　實戰(zhàn)題：雞蛋圓 249 16.7　本章練習 250 第 17章　邊框樣式 251 17.1　邊框樣式簡介 251 17.2　圓角效果：border-radius 251 17.2.1　border-radius實現(xiàn)圓角 252 17.2.2　border-radius實現(xiàn)半圓和圓 256 17.2.3　border-radius實現(xiàn)橢圓 258 17.2.4　border-radius的派生子屬性 260 17.3　邊框陰影：box-shadow 260 17.3.1　box-shadow屬性簡介 260 17.3.2　4個方向陰影獨立樣式 265 17.4　多色邊框：border-colors 266 17.5　邊框背景：border-image 269 17.5.1　border-image屬性簡介 269 17.5.2　border-image的派生子屬性 272 17.6　實戰(zhàn)題：3D卡通頭像 273 17.7　本章練習 276 第 18章　背景樣式 279 18.1　背景樣式簡介 279 18.2　背景大�。篵ackground-size 279 18.3　背景位置：background-origin 282 18.4　背景剪切：background-clip 285 18.5　多背景圖片 288 18.6　本章練習 290 第 19章　CSS3變形 291 19.1　CSS3變形簡介 291 19.2　平移：translate() 292 19.3　縮放：scale() 296 19.4　傾斜：skew() 300 19.5　旋轉(zhuǎn)：rotate() 304 19.6　中心原點：transform-origin 305 19.7　實戰(zhàn)題：個性照片墻 307 19.8　本章練習 309 第 20章　CSS3過渡 310 20.1　CSS3過渡簡介 310 20.2　過渡屬性：transition-property 312 20.3　過渡時間：transition-duration 313 20.4　過渡方式：transition- timing-function 315 20.5　延遲時間：transition-delay 317 20.6　深入了解transition屬性 318 20.6.1　transition-property取值為all 318 20.6.2　transition-delay的省略 320 20.6.3　transition屬性的位置 320 20.7　實戰(zhàn)題：鼠標指針移上去顯示內(nèi)容 321 20.8　實戰(zhàn)題：圖片文字介紹滑動效果 323 20.9　實戰(zhàn)題：白光閃過效果 326 20.10　實戰(zhàn)題：脈動效果 327 20.11　實戰(zhàn)題：手風琴效果 328 20.12　本章練習 330 第 21章　CSS3動畫 331 21.1　CSS3動畫簡介 331 21.2　@keyframes 333 21.3　動畫名稱：animation-name 335 21.4　持續(xù)時間：animation-duration 338 21.5　動畫方式：animation- timing-function 340 21.6　延遲時間：animation-delay 342 21.7　播放次數(shù)：animation- iteration-count 343 21.8　播放方向：animation-direction 345 21.9　播放狀態(tài)：animation-play-state 347 21.10　實戰(zhàn)題：脈沖動畫 348 21.11　實戰(zhàn)題：loading效果 350 21.12　本章練習 352 第 22章　多列布局 353 22.1　多列布局 353 22.2　列數(shù)：column-count 354 22.3　列寬：column-width 356 22.4　間距：column-gap 358 22.5　邊框：column-rule 360 22.6　跨列：column-span 362 22.7　實戰(zhàn)題：瀑布流布局 364 22.8　本章練習 366 第 23章　濾鏡效果 367 23.1　濾鏡效果簡介 367 23.2　亮度：brightness() 368 23.3　灰度：grayscale() 369 23.4　復(fù)古：sepia() 370 23.5　反色：invert() 371 23.6　旋轉(zhuǎn)：hue-rotate() 372 23.7　陰影：drop-shadow() 373 23.8　透明度：opacity() 374 23.9　模糊度：blur() 375 23.10　對比度：contrast() 376 23.11　飽和度：saturate() 377 23.12　多種濾鏡 378 23.13　實戰(zhàn)題：鬼屋 379 23.14　本章練習 381 第 24章　彈性盒子模型 382 24.1　彈性盒子模型簡介 382 24.2　放大比例：flex-grow 385 24.3　縮小比例：flex-shrink 387 24.4　元素寬度：flex-basis 389 24.5　復(fù)合屬性：flex 391 24.6　排列方向：flex-direction 392 24.7　多行顯示：flex-wrap 394 24.8　復(fù)合屬性：flex-flow 396 24.9　排列順序：order 397 24.10　水平對齊：justify-content 399 24.11　垂直對齊：align-items 401 24.12　實戰(zhàn)題：水平居中和垂直居中 404 24.13　實戰(zhàn)題：伸縮菜單 405 24.14　本章練習 407 第 25章　其他樣式 408 25.1　outline屬性 408 25.2　initial取值 409 25.3　calc()函數(shù) 410 25.4　overflow-x和overflow-y 413 25.5　pointer-events屬性 417 25.6　本章練習 418 附錄A　HTML5新增元素 420 附錄B　HTML5新增屬性 422 附錄C　CSS3新增選擇器 423 附錄D　CSS3新增屬性 425