Web前端開發(fā)實例教程：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)頁 3
1.2.1 網(wǎng)站、網(wǎng)頁和主頁 3
1.2.2 靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁 3
1.3 Web標(biāo)準(zhǔn) 4
1.3.1 Web標(biāo)準(zhǔn)簡介 4
1.3.2 建立Web標(biāo)準(zhǔn)的優(yōu)點 5
1.3.3 網(wǎng)頁的表現(xiàn)和結(jié)構(gòu)相分離 5
1.4 認(rèn)識HTML5 CSS3 JavaScript技術(shù)組合 6
1.4.1 HTML5簡介 6
1.4.2 CSS3簡介 7
1.4.3 JavaScript簡介 8
1.5 HTML5語法基礎(chǔ) 9
1.5.1 HTML5語法結(jié)構(gòu) 9
1.5.2 HTML5文件結(jié)構(gòu) 11
1.5.3 HTML5開發(fā)人員編碼規(guī)范 13
1.6 元素的分類 14
1.6.1 元信息元素 14
1.6.2 語義元素 15
1.6.3 無語義元素 17
1.7 HTML的顏色表示和字符實體 17
1.7.1 HTML的顏色表示 17
1.7.2 字符實體 18
1.8 編輯HTML文件 18
1.8.1 常見的網(wǎng)頁編輯工具 18
1.8.2 HTML文件的創(chuàng)建 19
1.9 注釋 22
1.10 案例—制作鮮品園頁面摘要和版權(quán)信息 22
習(xí)題1 23
第2章 編輯網(wǎng)頁元素 24
2.1 文本元素 24
2.1.1 字體樣式元素 24
2.1.2 短語元素 25
2.2 文本層次語義元素 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ù)指南頁面 30
2.4 圖像元素img 31
2.5 超鏈接元素a 32
2.5.1 a元素 32
2.5.2 指向其他頁面的鏈接 33
2.5.3 指向書簽的鏈接 33
2.5.4 指向下載文件的鏈接 34
2.5.5 指向電子郵件的鏈接 34
2.5.6 JavaScript鏈接 34
2.5.7 用圖像作為超鏈接熱點 34
2.5.8 空鏈接 35
2.5.9 案例—制作鮮品園資料下載頁面 35
2.6 列表元素 37
2.6.1 無序列表 37
2.6.2 有序列表 38
2.6.3 定義列表 38
2.6.4 嵌套列表 39
2.6.5 案例—制作鮮品園公司名片頁面 40
2.7 多媒體元素 41
2.7.1 audio元素 42
2.7.2 video元素 42
習(xí)題2 43
第3章 網(wǎng)頁的布局與交互 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)品展示頁面 49
3.2 使用結(jié)構(gòu)元素構(gòu)建網(wǎng)頁布局 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ā)布頁面 54
3.3 頁面交互元素 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的編寫規(guī)范 69
4.1.2 CSS3的工作環(huán)境 70
4.2 在網(wǎng)頁中引用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ù)簡介頁面 75
4.3 CSS的主要特性 77
4.3.1 繼承 77
4.3.2 層疊 78
4.3.3 優(yōu)先級 79
4.4 CSS的基本語法 80
4.4.1 基本語法 80
4.4.2 注意事項 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屬性值的寫法和單位 91
4.6.1 長度、百分比單位 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è)資訊頁面 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 小寫字體屬性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 文本水平對齊方式屬性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 文本的截斷效果屬性text-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 背景圖像起點屬性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 圖像作為列表項的標(biāo)記屬性list-style-image 114
5.5.2 列表項標(biāo)記的位置屬性list-style-position 115
5.5.3 標(biāo)記的類型屬性list-style-type 115
5.5.4 列表簡寫屬性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 單元格無內(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 綜合案例—制作鮮品園夢想社區(qū)頁面 131
5.8.1 頁面布局規(guī)劃 131
5.8.2 頁面的制作過程 132
習(xí)題5 137
第6章 盒模型與頁面布局 138
6.1 CSS盒模型的組成和大小 138
6.1.1 盒子的組成 138
6.1.2 盒子的大小 139
6.1.3 塊級元素與行級元素的寬度和高度 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浮動屬性float 154
6.3.3 清除浮動屬性clear 155
6.3.4 裁剪屬性clip 156
6.3.5 元素顯示方式屬性display 157
6.3.6 元素可見性屬性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ù)安全中心頁面 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 流程控制語句 188
7.5.1 順序結(jié)構(gòu)語句 188
7.5.2 條件選擇結(jié)構(gòu)語句 191
7.5.3 循環(huán)結(jié)構(gòu)語句 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 對象 199
7.7.1 對象的概念 199
7.7.2 類 200
7.7.3 對象的實例化 200
7.7.4 對象的屬性 201
7.7.5 對象的方法 202
7.7.6 對象的事件 203
7.8 JavaScript的內(nèi)置對象 203
7.8.1 數(shù)組對象 204
7.8.2 字符串對象 206
7.8.3 日期對象 207
習(xí)題7 209
第8章 對象模型及事8