Web前端開發(fā)與應(yīng)用教程：HTML5+CSS3+JavaScript（第2版）

目 錄
前言

第1章 Web前端開發(fā)概述1
1.1 Web前端開發(fā)相關(guān)概念1
1.1.1 瀏覽器1
1.1.2 URL1
1.1.3 WWW2
1.1.4 網(wǎng)站2
1.1.5 Web標(biāo)準(zhǔn)2
1.2 Web前端開發(fā)相關(guān)技術(shù)2
1.2.1 HTML3
1.2.2 CSS3
1.2.3 JavaScript4
1.3 Web前端開發(fā)工具4
1.3.1 NotePad4
1.3.2 TextPad4
1.3.3 WebStorm5
1.3.4 Dreamweaver5
1.4 Web服務(wù)器6
1.4.1 概念6
1.4.2 類型6
1.4.3 配置6
1.4.4 建站過程7
1.5 練習(xí)8
第2章 HTML5基礎(chǔ)9
2.1 HTML語(yǔ)法基礎(chǔ)9
2.1.1 HTML文檔結(jié)構(gòu)9
2.1.2 HTML標(biāo)簽10
2.1.3 標(biāo)簽的屬性11
2.1.4 HTML字符集12
2.2 文本控制標(biāo)簽12
2.2.1 標(biāo)題段落標(biāo)簽12
2.2.2 文本格式化標(biāo)簽14
2.2.3 特殊字符標(biāo)簽16
2.3 圖片標(biāo)簽16
2.3.1 圖片的格式與分辨率17
2.3.2 嵌入圖片17
2.3.3 路徑的表示方法18
2.4 超鏈接標(biāo)簽19
2.4.1 超鏈接19
2.4.2 圖片鏈接20
2.4.3 電子郵件鏈接21
2.4.4 下載鏈接22
2.4.5 錨點(diǎn)鏈接22
2.5 表格標(biāo)簽24
2.5.1 創(chuàng)建表格24
2.5.2 設(shè)置屬性25
2.6 元標(biāo)簽27
2.7 link標(biāo)簽27
2.8 練習(xí)28
第3章 頁(yè)面元素和屬性30
3.1 結(jié)構(gòu)元素30
3.1.1 header元素31
3.1.2 article元素32
3.1.3 aside元素32
3.1.4 footer元素33
3.1.5 和元素34
3.2 頁(yè)面節(jié)點(diǎn)35
3.2.1 section元素35
3.2.2 nav元素35
3.2.3 address元素36
3.3 交互元素36
3.3.1 progress元素37
3.3.2 meter元素37
3.3.3 details元素和summary元素38
3.3.4 menu元素39
3.3.5 command元素40
3.4 文本層次語(yǔ)義元素40
3.4.1 cite元素41
3.4.2 mark元素41
3.4.3 time元素41
3.5 分組元素42
3.5.1 ul元素42
3.5.2 ol元素44
3.5.3 dl元素44
3.6 全局屬性44
3.6.1 hidden屬性45
3.6.2 spellcheck屬性45
3.6.3 contenteditable屬性46
3.6.4 contextmenu 屬性46
3.6.5 dir屬性46
3.6.6 draggable 屬性47
3.7 練習(xí)47
第4章 Web表單49
4.1 HTML5對(duì)表單的改進(jìn)49
4.2 表單的結(jié)構(gòu)53
4.3 表單控件53
4.3.1 文本框54
4.3.2 密碼框54
4.3.3 單選按鈕55
4.3.4 復(fù)選框55
4.3.5 文本區(qū)域56
4.3.6 選擇框56
4.3.7 隱藏字段57
4.3.8 按鈕58
4.4 處理表單59
4.4.1 對(duì)表單元素進(jìn)行組織59
4.4.2 對(duì)表單進(jìn)行驗(yàn)證60
4.4.3 為表單組件添加說明標(biāo)簽61
4.4.4 表單提交方式的選擇61
4.5 表單綜合實(shí)例61
4.6 練習(xí)63
第5章 音頻與視頻65
5.1 編解碼器65
5.1.1 音頻編解碼器65
5.1.2 視頻編解碼器65
5.2 在HTML5中播放音頻65
5.2.1 認(rèn)識(shí)audio元素66
5.2.2 播放音頻66
5.3 在HTML5中播放視頻67
5.3.1 認(rèn)識(shí)video元素67
5.3.2 播放視頻68
5.4 音頻與視頻相關(guān)屬性、方法
與事件68
5.5 HTML5部分綜合案例—茶文化
網(wǎng)站的制作71
5.5.1 設(shè)計(jì)分析71
5.5.2 模塊組成72
5.5.3 Logo與導(dǎo)航菜單72
5.5.4 主體區(qū)73
5.5.5 底部區(qū)76
5.5.6 注冊(cè)頁(yè)面的實(shí)現(xiàn)76
5.6 練習(xí)79
第6章 CSS3概述80
6.1 CSS簡(jiǎn)介80
6.1.1 CSS層疊樣式表80
6.1.2 CSS與DIV之緣80
6.2 CSS的發(fā)展81
6.2.1 CSS1.0和CSS2.0概述81
6.2.2 CSS3的出現(xiàn)83
6.3 CCS3的前景展望83
6.3.1 CSS3的應(yīng)用范圍83
6.3.2 當(dāng)前支持CSS3的瀏覽器84
6.4 練習(xí)85
第7章 CSS3語(yǔ)法86
7.1 CSS3的語(yǔ)法基礎(chǔ)86
7.1.1 構(gòu)造CSS3樣式規(guī)則86
7.1.2 為樣式規(guī)則添加注釋88
7.2 CSS3選擇器88
7.2.1 通用選擇器88
7.2.2 標(biāo)簽選擇器89
7.2.3 類選擇器89
7.2.4 id選擇器90
7.2.5 偽類選擇器90
7.2.6 群組選擇器91
7.2.7 派生選擇器91
7.2.8 屬性選擇器92
7.2.9 組合選擇器94
7.3 在網(wǎng)頁(yè)中應(yīng)用CSS的4種方式94
7.3.1 內(nèi)聯(lián)CSS樣式94
7.3.2 嵌入CSS樣式95
7.3.3 鏈入外部CSS樣式表95
7.3.4 導(dǎo)入外部CSS樣式表97
7.4 CSS樣式的特性97
7.4.1 CSS樣式的繼承性97
7.4.2 CSS樣式的特殊性99
7.4.3 CSS樣式的層疊性100
7.4.4 CSS樣式的重要性100
7.5 CSS3常用樣式屬性100
7.5.1 字體文本樣式100
7.5.2 背景樣式102
7.5.3 邊框樣式102
7.5.4 列表樣式103
7.6 練習(xí)103
第8章 CSS3頁(yè)面布局105
8.1 網(wǎng)頁(yè)布局的類型105
8.1.1 固定寬度網(wǎng)頁(yè)布局105
8.1.2 流式網(wǎng)頁(yè)布局106
8.1.3 響應(yīng)式網(wǎng)頁(yè)布局106
8.2 DIV+CSS網(wǎng)頁(yè)布局106
8.2.1 創(chuàng)建DIV106
8.2.2 CSS盒模型107
8.2.3 網(wǎng)頁(yè)元素的定位110
8.2.4 CSS頁(yè)面布局實(shí)例114
8.3 設(shè)計(jì)多列布局118
8.3.1 設(shè)置多列顯示樣式118
8.3.2 定義列間距118
8.3.3 定義列邊框樣式118
8.3.4 定義跨列顯示119
8.4 CSS3的彈性盒布局120
8.5 設(shè)計(jì)導(dǎo)航欄124
8.6 練習(xí)126
第9章 CSS3高級(jí)應(yīng)用127
9.1 濾鏡屬性filter127
9.2 漸變gradient129
9.3 2D和3D轉(zhuǎn)換transform131
9.3.1 2D轉(zhuǎn)換131
9.3.2 3D轉(zhuǎn)換133
9.4 過渡transition134
9.5 動(dòng)畫 animation135
9.6 用戶界面相關(guān)屬性137
9.7 CSS3綜合實(shí)例—茶文化
網(wǎng)站的CSS樣式138
9.7.1 茶文化網(wǎng)站的網(wǎng)頁(yè)布局C