HTML5+CSS3網(wǎng)頁設(shè)計基礎(chǔ)教程

目 錄


第1章　Web開發(fā)新時代 1
1.1 HTML5概述 1
1.1.1 HTML5的目標(biāo) 1
1.1.2 HTML5新特性 2
1.1.3 HTML5深受歡迎的原因 3
1.1.4 HTML5的構(gòu)成 4
1.2 HTML5設(shè)計原理 5
1.2.1 HTML的歷史變遷 5
1.2.2 HTML5開發(fā)動力 6
1.3 編寫第一個HTML5頁面 7
1.3.1 搭建上機(jī)練習(xí)環(huán)境 7
1.3.2 檢測瀏覽器是否支持 7
1.3.3 使用HTML5編寫簡單的Web
頁面 8
1.4 HTML5頁面的特征 9
1.4.1 使用HTML5的結(jié)構(gòu)化元素 9
1.4.2 使用CSS美化HTML5文檔 12
1.5 本章小結(jié) 13
1.6 思考和練習(xí) 13
第2章 HTML、XHTML、HTML5 14
2.1 HTML基礎(chǔ) 14
2.1.1 HTML簡介 14
2.1.2 HTML結(jié)構(gòu) 15
2.1.3 HTML語法 15
2.2 XHTML基礎(chǔ) 17
2.2.1 XHTML結(jié)構(gòu) 17
2.2.2 XHTML語法 18
2.2.3 XHTML類型 18
2.2.4 DTD解析 19
2.2.5 命名空間 21
2.3 HTML5基礎(chǔ) 21
2.3.1 HTML5語法 21
2.3.2 HTML5元素 22
2.4 新增和廢除的屬性 25
2.4.1 新增的屬性 25
2.4.2 廢除的屬性 27
2.5 全局屬性 28
2.5.1 contentEditable屬性 28
2.5.2 designMode屬性 29
2.5.3 hidden屬性 29
2.5.4 spellcheck屬性 29
2.5.5 tabindex屬性 29
2.6 新增的事件 29
2.7 本章小結(jié) 30
2.8 思考和練習(xí) 30
第3章 創(chuàng)建HTML5文檔 31
3.1 認(rèn)識HTML5文檔結(jié)構(gòu) 31
3.2 HTML5元素分類 33
3.3 構(gòu)建主體內(nèi)容 34
3.3.1 標(biāo)識文章：article元素 34
3.3.2 給內(nèi)容分塊：section元素 36
3.3.3 設(shè)計導(dǎo)航信息：nav元素 37
3.3.4 設(shè)計輔助信息：aside元素 39
3.3.5 設(shè)計微格式：time元素 40
3.3.6 添加發(fā)布日期：pubdate屬性 41
3.4 添加語義模塊 41
3.4.1 添加標(biāo)題塊：header元素 41
3.4.2 給標(biāo)題分組：hgroup元素 42
3.4.3 添加腳注塊：footer元素 43
3.4.4 添加聯(lián)系信息：address元素 44
3.5 本章小結(jié) 44
3.6 思考和練習(xí) 45
第4章 HTML5表單 46
4.1 新增的表單屬性 46
4.1.1 autocomplete屬性 46
4.1.2 novalidate屬性 47
4.2 新增的表單元素 47
4.2.1 datalist元素 47
4.2.2 keygen元素 48
4.2.3 output元素 49
4.3 新增的輸入類型 49
4.3.1 email類型 50
4.3.2 url類型 51
4.3.3 number類型 51
4.3.4 Date Pickers類型 52
4.3.5 search類型 56
4.3.6 tel類型 57
4.3.7 color類型 57
4.4 新增的輸入屬性 58
4.4.1 form屬性 58
4.4.2 formaction屬性 59
4.4.3 formmethod屬性 59
4.4.4 formenctype屬性 59
4.4.5 formtarget屬性 60
4.4.6 autofocus屬性 60
4.4.7 required屬性 60
4.4.8 labels屬性 61
4.4.9 control屬性 62
4.4.10 placeholder屬性 63
4.4.11 list屬性 63
4.4.12 文本框的pattern屬性 64
4.4.13 selectionDirection屬性 64
4.4.14 復(fù)選框的indeterminate屬性 65
4.4.15 height與width屬性 66
4.4.16 maxlength和wrap屬性 67
4.5 表單驗證 67
4.5.1 自動驗證 67
4.5.2 取消驗證 68
4.5.3 顯式驗證 68
4.6 本章小結(jié) 69
4.7 思考和練習(xí) 69
第5章 圖形/圖像的繪制 70
5.1 canvas元素基礎(chǔ) 70
5.1.1 添加canvas元素 70
5.1.2 檢測瀏覽器是否支持 71
5.1.3 使用canvas元素繪制圖形 71
5.1.4 canvas坐標(biāo)系 73
5.2 繪制簡單圖形 73
5.2.1 繪制直線 73
5.2.2 繪制矩形 74
5.2.3 繪制弧線與圓形 75
5.2.4 繪制三角形 78
5.2.5 清空畫布 78
5.3 繪制貝塞爾曲線 79
5.3.1 二次貝塞爾曲線 79
5.3.2 三次貝塞爾曲線 80
5.4 繪制變形圖形 81
5.4.1 保存與恢復(fù)canvas狀態(tài) 81
5.4.2 移動坐標(biāo)空間 82
5.4.3 旋轉(zhuǎn)坐標(biāo)空間 84
5.4.4 縮放圖形 86
5.4.5 矩陣變換 86
5.5 豐富圖形效果 89
5.5.1 應(yīng)用不同的線型 89
5.5.2 繪制線性漸變 90
5.5.3 繪制徑向漸變 91
5.5.4 繪制圖案 92
5.5.5 設(shè)置圖形的透明度 93
5.5.6 創(chuàng)建陰影 93
5.6 圖像處理 95
5.6.1 裁剪圖像 95
5.6.2 像素處理 96
5.6.3 組合圖形 98
5.6.4 混合圖像 100
5.7 繪制文字 101
5.7.1 繪制填充文字 101
5.7.2 文字相關(guān)屬性 101
5.7.3 繪制輪廓文字 102
5.7.4 獲取文字寬度 102
5.7.5 文字繪制實戰(zhàn) 102
5.8 本章小結(jié) 103
5.9 思考和練習(xí) 103
第6章 音頻與視頻 104
6.1 HTML5多媒體技術(shù)概述 104
6.1.1 關(guān)于編解碼器 105
6.1.2 音頻編解碼器 105
6.1.3 視頻編解碼器 106
6.2 瀏覽器音視頻支持檢測 107
6.3 audio與video元素 109
6.3.1 audio元素 109
6.3.2 video元素 111
6.4 綜合實戰(zhàn) 112
6.4.1 用腳本控制音樂播放 112
6.4.2 用腳本控制視頻播放 114
6.5 為音頻或視頻添加字幕 115
6.5.1 track元素的基礎(chǔ)知識 115
6.5.2 track元素的各種屬性 116
6.5.3 WebVTT文件 117
6.6 本章小結(jié) 120
6.7 思考和練習(xí) 121
第7章 本地存儲 122
7.1 Web存儲 122
7.1.1 Cookie存儲機(jī)制的優(yōu)缺點 122
7.1.2 為什么要用Web存儲 122
7.1.3 Web存儲的優(yōu)缺點 123
7.2 使用Web存儲 123
7.2.1 檢查瀏覽器的支持性 123
7.2.2 設(shè)置和獲取數(shù)據(jù) 124
7.2.3 Web存儲的其他操作 124
7.2.4 監(jiān)測Web存儲事件 125
7.2.5 制作簡單的網(wǎng)頁皮膚 127
7.2.6 網(wǎng)站人氣值和在線人數(shù)統(tǒng)計 128
7.3 本地數(shù)據(jù)庫 129
7.3.1 本地數(shù)據(jù)庫的基本概念 129
7.3.2 用executeSql執(zhí)行查詢 129
7.3.3 創(chuàng)建一個簡單的數(shù)據(jù)庫 131
7.3.4 綜合應(yīng)用——點評功能 132
7.4 本章小結(jié) 138
7.5 思考和練習(xí) 138