Web前端開(kāi)發(fā)實(shí)例教程：HTML5+CSS3+JavaScript+jQuery（第2版）

目 錄
第1章 HTML5基礎(chǔ) 1
1.1 Web的基本概念 1
1.1.1 WWW 1
1.1.2 Browser 1
1.1.3 URL 1
1.1.4 HTML 2
1.1.5 HTTP 2
1.2 網(wǎng)站與網(wǎng)頁(yè) 3
1.2.1 網(wǎng)站、網(wǎng)頁(yè)和主頁(yè) 3
1.2.2 靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè) 3
1.3 Web標(biāo)準(zhǔn) 4
1.3.1 Web標(biāo)準(zhǔn)簡(jiǎn)介 4
1.3.2 建立Web標(biāo)準(zhǔn)的優(yōu)點(diǎn) 5
1.3.3 網(wǎng)頁(yè)的表現(xiàn)和結(jié)構(gòu)相分離 5
1.4 認(rèn)識(shí)HTML5 CSS3 JavaScript技術(shù)組合 6
1.4.1 HTML5簡(jiǎn)介 6
1.4.2 CSS3簡(jiǎn)介 7
1.4.3 JavaScript簡(jiǎn)介 8
1.5 HTML5語(yǔ)法基礎(chǔ) 9
1.5.1 HTML5語(yǔ)法結(jié)構(gòu) 9
1.5.2 HTML5文件結(jié)構(gòu) 11
1.5.3 HTML5開(kāi)發(fā)人員編碼規(guī)范 13
1.6 元素的分類 14
1.6.1 元信息元素 14
1.6.2 語(yǔ)義元素 15
1.6.3 無(wú)語(yǔ)義元素 17
1.7 HTML的顏色表示和字符實(shí)體 17
1.7.1 HTML的顏色表示 17
1.7.2 字符實(shí)體 18
1.8 編輯HTML文件 18
1.8.1 常見(jiàn)的網(wǎng)頁(yè)編輯工具 18
1.8.2 HTML文件的創(chuàng)建 19
1.9 注釋 22
1.10 案例—制作鮮品園頁(yè)面摘要和版權(quán)信息 22
習(xí)題1 23
第2章 編輯網(wǎng)頁(yè)元素 24
2.1 文本元素 24
2.1.1 字體樣式元素 24
2.1.2 短語(yǔ)元素 25
2.2 文本層次語(yǔ)義元素 26
2.2.1 mark元素 26
2.2.2 cite元素 27
2.2.3 time元素 27
2.3 基本排版元素 28
2.3.1 標(biāo)題元素hl～h6 28
2.3.2 段落元素p和換行元素br 28
2.3.3 縮排元素blockquote 29
2.3.4 水平線元素hr 30
2.3.5 案例—制作鮮品園服務(wù)指南頁(yè)面 30
2.4 圖像元素img 31
2.5 超鏈接元素a 32
2.5.1 a元素 32
2.5.2 指向其他頁(yè)面的鏈接 33
2.5.3 指向書(shū)簽的鏈接 33
2.5.4 指向下載文件的鏈接 34
2.5.5 指向電子郵件的鏈接 34
2.5.6 JavaScript鏈接 34
2.5.7 用圖像作為超鏈接熱點(diǎn) 34
2.5.8 空鏈接 35
2.5.9 案例—制作鮮品園資料下載頁(yè)面 35
2.6 列表元素 37
2.6.1 無(wú)序列表 37
2.6.2 有序列表 38
2.6.3 定義列表 38
2.6.4 嵌套列表 39
2.6.5 案例—制作鮮品園公司名片頁(yè)面 40
2.7 多媒體元素 41
2.7.1 audio元素 42
2.7.2 video元素 42
習(xí)題2 43
第3章 網(wǎng)頁(yè)的布局與交互 45
3.1 表格元素table 45
3.1.1 表格的結(jié)構(gòu) 45
3.1.2 基本表格 45
3.1.3 跨行跨列表格 46
3.1.4 表格數(shù)據(jù)的分組 47
3.1.5 調(diào)整列的格式 48
3.1.6 案例—使用表格布局鮮品園產(chǎn)品展示頁(yè)面 49
3.2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁(yè)布局 50
3.2.1 section元素 51
3.2.2 nav元素 51
3.2.3 header元素 51
3.2.4 footer元素 51
3.2.5 article元素 51
3.2.6 aside元素 52
3.2.7 分組元素 53
3.2.8 案例—制作鮮品園新品發(fā)布頁(yè)面 54
3.3 頁(yè)面交互元素 56
3.3.1 details元素和summary元素 56
3.3.2 progress元素 56
3.4 分區(qū)元素div 57
3.5 范圍元素span 58
3.6 表單 59
3.6.1 表單元素form 59
3.6.2 輸入元素input 59
3.6.3 標(biāo)簽元素label 61
3.6.4 選擇欄元素select 62
3.6.5 按鈕元素button 63
3.6.6 多行文本元素textarea 64
3.6.7 表單分組 65
3.6.8 使用表格布局表單 66
習(xí)題3 67
第4章 CSS3基礎(chǔ) 69
4.1 CSS3概述 69
4.1.1 CSS3的編寫(xiě)規(guī)范 69
4.1.2 CSS3的工作環(huán)境 70
4.2 在網(wǎng)頁(yè)中引用CSS的方法 71
4.2.1 行內(nèi)樣式 71
4.2.2 內(nèi)部樣式表 72
4.2.3 鏈入外部樣式表 73
4.2.4 導(dǎo)入外部樣式表 74
4.2.5 案例—制作鮮品園業(yè)務(wù)簡(jiǎn)介頁(yè)面 75
4.3 CSS的主要特性 77
4.3.1 繼承 77
4.3.2 層疊 78
4.3.3 優(yōu)先級(jí) 79
4.4 CSS的基本語(yǔ)法 80
4.4.1 基本語(yǔ)法 80
4.4.2 注意事項(xiàng) 80
4.5 CSS的選擇器 81
4.5.1 元素選擇器 81
4.5.2 通配符選擇器 82
4.5.3 派生選擇器 82
4.5.4 兄弟選擇器 85
4.5.5 id選擇器 86
4.5.6 類選擇器 87
4.5.7 偽類選擇器 87
4.5.8 偽元素選擇器 89
4.6 CSS屬性值的寫(xiě)法和單位 91
4.6.1 長(zhǎng)度、百分比單位 91
4.6.2 色彩單位 92
4.7 文件結(jié)構(gòu)與元素類型 93
4.7.1 文件結(jié)構(gòu)的基本概念 93
4.7.2 元素類型 94
4.8 案例—制作鮮品園行業(yè)資訊頁(yè)面 95
習(xí)題4 98
第5章 CSS3的屬性 100
5.1 CSS字體屬性 100
5.1.1 字體類型屬性font-family 100
5.1.2 字體尺寸屬性font-size 100
5.1.3 字體傾斜屬性font-style 101
5.1.4 小寫(xiě)字體屬性font-variant 101
5.1.5 字體粗細(xì)font-weight 101
5.2 CSS文本屬性 102
5.2.1 文本顏色屬性color 102
5.2.2 行高屬性line-height 102
5.2.3 文本水平對(duì)齊方式屬性text-align 103
5.2.4 為文本添加修飾屬性text-decoration 103
5.2.5 段落首行縮進(jìn)屬性text-indent 103
5.2.6 文本的陰影屬性text-shadow 104
5.2.7 元素內(nèi)部的空白屬性white-space 104
5.2.8 文本的截?cái)嘈Ч麑傩詔ext-overflow 104
5.3 CSS背景屬性 106
5.3.1 背景顏色屬性background-color 106
5.3.2 背景圖像屬性background-image 107
5.3.3 重復(fù)背景圖像屬性background-repeat 108
5.3.4 固定背景圖像屬性background-attachment 108
5.3.5 背景圖像位置屬性background-position 109
5.3.6 背景圖像大小屬性background-size 109
5.3.7 背景屬性background 110
5.3.8 背景圖像起點(diǎn)屬性background-origin 110
5.4 CSS尺寸屬性 111
5.4.1 寬度屬性width 112
5.4.2 高度屬性height 112
5.4.3 小寬度屬性min-width 112
5.4.4 寬度屬性max-width 113
5.4.5 小高度屬性min-height 113
5.4.6 高度屬性max-height 113
5.5 CSS列表屬性 114
5.5.1 圖像作為列表項(xiàng)的標(biāo)記屬性list-style-image 114
5.5.2 列表項(xiàng)標(biāo)記的位置屬性list-style-position 115
5.5.3 標(biāo)記的類型屬性list-style-type 115
5.5.4 列表簡(jiǎn)寫(xiě)屬性list-style 116
5.6 CSS表格屬性 118
5.6.1 合并邊框?qū)傩詁order-collapse 118
5.6.2 邊框間隔屬性border-spacing 118
5.6.3 標(biāo)題位置屬性caption-side 118
5.6.4 單元格無(wú)內(nèi)容顯示方式屬性empty-cells 119
5.6.5 案例—使用斑馬線表格制作暢銷商品銷量排行榜 120
5.7 CSS屬性的應(yīng)用 121
5.7.1 設(shè)置圖像樣式 122
5.7.2 設(shè)置表單樣式 125
5.7.3 設(shè)置鏈接 127
5.7.4 創(chuàng)建導(dǎo)航菜單 128
5.8 綜合案例—制作鮮品園夢(mèng)想社區(qū)頁(yè)面 131
5.8.1 頁(yè)面布局規(guī)劃 131
5.8.2 頁(yè)面的制作過(guò)程 132
習(xí)題5 137
第6章 盒模型與頁(yè)面布局 138
6.1 CSS盒模型的組成和大小 138
6.1.1 盒子的組成 138
6.1.2 盒子的大小 139
6.1.3 塊級(jí)元素與行級(jí)元素的寬度和高度 141
6.2 CSS盒模型的屬性 141
6.2.1 CSS內(nèi)邊距屬性padding 141
6.2.2 CSS外邊距屬性margin 144
6.2.3 CSS邊框?qū)傩詁order 146
6.2.4 圓角邊框?qū)傩詁order-radius 149
6.2.5 盒模型的陰影屬性box-shadow 150
6.2.6 調(diào)整大小屬性resize 151
6.3 CSS布局屬性 152
6.3.1 元素的布局方式概述 152
6.3.2 CSS浮動(dòng)屬性float 154
6.3.3 清除浮動(dòng)屬性clear 155
6.3.4 裁剪屬性clip 156
6.3.5 元素顯示方式屬性display 157
6.3.6 元素可見(jiàn)性屬性visibility 158
6.4 CSS盒子定位屬性 159
6.4.1 定位位置屬性top、right、bottom、left 159
6.4.2 定位方式屬性position 160
6.4.3 層疊順序?qū)傩詚-index 165
6.5 CSS3多列屬性 166
6.5.1 列數(shù)屬性column-count 166
6.5.2 列寬屬性column-width 166
6.5.3 列寬屬性column 166
6.5.4 列與列的間隔屬性column-gap 167
6.5.5 是否橫跨所有列屬性column-span 167
6.5.6 列與列的間隔樣式屬性column-rule-style 167
6.5.7 列與列的間隔顏色屬性column-rule-color 167
6.5.8 列與列的寬度屬性column-rule-width 167
6.5.9 列與列的間隔所有屬性column-rule 168
6.6 CSS基本布局樣式 169
6.6.1 CSS布局類型 169
6.6.2 CSS布局樣式 170
6.7 綜合案例—制作鮮品園商務(wù)安全中心頁(yè)面 172
練習(xí)6 177
第7章 JavaScript編程基礎(chǔ) 179
7.1 JavaScript概述 179
7.2 在HTML文件中使用JavaScript 179
7.2.1 在HTML文件中嵌入腳本程序 180
7.2.2 鏈接腳本文件 180
7.2.3 在HTML標(biāo)簽內(nèi)添加腳本 181
7.3 數(shù)據(jù)類型 182
7.3.1 數(shù)據(jù)類型的分類 182
7.3.2 基本數(shù)據(jù)類型 182
7.3.3 數(shù)據(jù)類型的判斷 183
7.3.4 數(shù)據(jù)類型的轉(zhuǎn)換 184
7.4 常量、變量、運(yùn)算符和表達(dá)式 185
7.4.1 常量 185
7.4.2 變量 186
7.4.3 運(yùn)算符和表達(dá)式 186
7.5 流程控制語(yǔ)句 188
7.5.1 順序結(jié)構(gòu)語(yǔ)句 188
7.5.2 條件選擇結(jié)構(gòu)語(yǔ)句 191
7.5.3 循環(huán)結(jié)構(gòu)語(yǔ)句 194
7.6 函數(shù) 196
7.6.1 函數(shù)的聲明 196
7.6.2 函數(shù)的調(diào)用 197
7.6.3 變量的作用域 198
7.6.4 系統(tǒng)函數(shù) 199
7.7 對(duì)象 199
7.7.1 對(duì)象的概念 199
7.7.2 類 200
7.7.3 對(duì)象的實(shí)例化 200
7.7.4 對(duì)象的屬性 201
7.7.5 對(duì)象的方法 202
7.7.6 對(duì)象的事件 203
7.8 JavaScript的內(nèi)置對(duì)象 203
7.8.1 數(shù)組對(duì)象 204
7.8.2 字符串對(duì)象 206
7.8.3 日期對(duì)象 207
習(xí)題7 209
第8章 對(duì)象模型及事8