本教材共分18課（章），每課根據(jù)實(shí)際情況需要3～8個(gè)學(xué)時(shí)，第1課到第10課，主要介紹了HTML基本框架，標(biāo)簽與屬性，CSS樣式基礎(chǔ)，教會(huì)讀者利用盒子模型，結(jié)合HTML5結(jié)構(gòu)化標(biāo)簽，建立基本的頁面框架，以及固定寬度布局的模板網(wǎng)頁，第11～16課介紹了JavaScript特效應(yīng)用、表單、響應(yīng)式設(shè)計(jì)、彈性圖像與彈性布局、flexbox伸縮盒等實(shí)際Web前端開發(fā)必備的知識(shí)點(diǎn)，并輔助以若干個(gè)對(duì)應(yīng)知識(shí)點(diǎn)的網(wǎng)頁實(shí)例；第17課~18課則介紹了網(wǎng)站建設(shè)的基本規(guī)范、API工具等，便于讀者后續(xù)的學(xué)習(xí)與實(shí)踐。讀者在學(xué)習(xí)了第1～10課后，將初步掌握Web頁面制作基礎(chǔ)，然后繼續(xù)學(xué)習(xí)后續(xù)的課程章節(jié)，學(xué)習(xí)實(shí)際Web前端開發(fā)應(yīng)用必備的知識(shí)，通過涵蓋各個(gè)知識(shí)點(diǎn)的案例進(jìn)行實(shí)踐，快速、高效地掌握實(shí)用網(wǎng)頁制作的基本方法。另外，將另外提供教材中涉及的全部網(wǎng)頁源代碼網(wǎng)絡(luò)資源，方便社會(huì)讀者自學(xué)。
張怡芳，浙江機(jī)電職業(yè)技術(shù)學(xué)院副教授。曾主持建筑結(jié)構(gòu)智能化設(shè)計(jì)及其技術(shù)規(guī)范研究（浙江省教育廳，2002.06-2004.06）、建筑CAD圖形智能識(shí)別技術(shù)研究（浙江萬里學(xué)院重點(diǎn)，2002.04-2005.04）等科研項(xiàng)目，以及信管專業(yè)"WEB前端設(shè)計(jì)”漸進(jìn)式課程教學(xué)改革探索（機(jī)電學(xué)院重點(diǎn)項(xiàng)目，2015.06）等教改項(xiàng)目。所參與的"漸進(jìn)式‘Web前端設(shè)計(jì)’與成長型思維訓(xùn)練教學(xué)探索”榮獲浙江省計(jì)算機(jī)應(yīng)用與教育學(xué)會(huì)教育委員會(huì)第20屆年會(huì)優(yōu)秀論文。曾出版《計(jì)算機(jī)圖形學(xué)基礎(chǔ)及應(yīng)用教程》等。
第1 課 Web 前端簡介 1
1.1 Web 前端與HTML ............................2
1.1.1 什么是Web 前端 ..........................2
1.1.2 Web 是如何工作的 .......................2
1.1.3 網(wǎng)站與HTML 網(wǎng)頁 ......................3
1.1.4 網(wǎng)站類型 ........................................3
1.2 HTML 文件結(jié)構(gòu) ................................5
1.3 網(wǎng)頁三要素：結(jié)構(gòu)、表現(xiàn)、行為 ....6
1.4 網(wǎng)頁編碼工具 ....................................8
1.4.1 使用記事本編寫網(wǎng)頁代碼 ............8
1.4.2 瀏覽器的開發(fā)者工具 ....................8
1.4.3 IDE 簡介 ......................................10
1.4.4 HBuilderX 環(huán)境 ...........................10
1.5 每課小練 ..........................................12
1.5.1 練一練： 制作帶圖像的簡單網(wǎng)
頁..................................................12
1.5.2 試一試：制作航天新聞網(wǎng)頁 ......14
1.5.3 常見問題Q＆A ............................16
1.6 理論習(xí)題 ..........................................16
第2 課 常用的HTML 標(biāo)簽及其屬性 18
2.1 常用的標(biāo)簽 ......................................19
2.1.1 什么是標(biāo)簽 ..................................19
2.1.2 標(biāo)簽的屬性 ..................................21
2.2 特殊符號(hào) ..........................................22
2.3 表格 ..................................................23
2.4 圖像 ..................................................25
2.4.1 內(nèi)容圖像 ......................................25
2.4.2 背景圖像 ......................................25
2.5 每課小練 ..........................................26
2.5.1 練一練：基本標(biāo)簽的應(yīng)用 ..........26
2.5.2 試一試：圖像與表格 ..................28
2.5.3 常見問題Q＆A ............................32
2.6 理論習(xí)題 ..........................................32
第3 課 超鏈接與路徑 34
3.1 超鏈接 ..............................................35
3.1.1 超鏈接標(biāo)簽及其屬性 ..................35
3.1.2 錨記 ..............................................35
3.2 路徑 ..................................................36
3.2.1 絕對(duì)路徑 ......................................36
3.2.2 相對(duì)路徑 ......................................37
3.3 每課小練 ..........................................38
3.3.1 練一練：簡單超鏈接 ..................38
3.3.2 學(xué)以致用：再別康橋網(wǎng)頁 ..........39
3.3.3 常見問題Q＆A ............................41
3.4 理論習(xí)題 ..........................................42
第4 課 簡單CSS 43
4.1 CSS 樣式概述 ..................................44
4.1.1 CSS 樣式的作用..........................44
4.1.2 什么是選擇器 ..............................44
4.1.3 CSS 選擇器類型............. 47
4.1.4 基本選擇器命名規(guī)則 ..................49
4.2 顏色模型 ..........................................49
4.3 設(shè)置網(wǎng)頁的文本顏色與背景顏色 ..52
4.3.1 設(shè)置文本顏色 ..............................52
4.3.2 設(shè)置背景顏色 ..............................52
4.3.3 使用拾色器 ..................................53
4.3.4 設(shè)置背景圖像 ..............................53
4.4 每課小練 ..........................................55
4.4.1 練一練：標(biāo)簽選擇器練習(xí) ..........55
4.4.2 練一練：制作基本網(wǎng)頁模板 ......58
4.4.3 學(xué)以致用：使用float 屬性水平排列撲克牌.......................................60
4.4.4 常見問題Q＆A ............................64
4.5 理論習(xí)題 ..........................................65
第5 課 復(fù)合選擇器與網(wǎng)頁導(dǎo)航菜單 68
5.1 什么是復(fù)合選擇器 ..........................69
5.1.1 復(fù)合選擇器的種類 ......................69
5.1.2 后代選擇器與子元素選擇器的
區(qū)別..............................................70
5.1.3 毗鄰兄弟選擇器與同級(jí)兄弟選擇
器的區(qū)別......................................70
5.1.4 結(jié)構(gòu)化偽類選擇器與偽元素
詳解 ..............................................71
5.1.5 導(dǎo)航菜單超鏈接使用的選擇器 ..73
5.2 無序列表導(dǎo)航菜單 ..........................74
5.2.1 只改變字體顏色 ..........................74
5.2.2 鏈接項(xiàng)呈現(xiàn)塊級(jí)變化......... 77
5.3 常見的CSS1 ～ CSS3 選擇器 ........79
5.4 每課小練 ..........................................80
5.4.1 練一練：后代選擇器與橫向?qū)Ш?br>菜單...............................................80
5.4.2 學(xué)以致用：復(fù)合選擇器與太陽系
網(wǎng)頁..............................................81
5.4.3 常見問題Q＆A ............................87
5.5 理論習(xí)題 ..........................................87
第6 課 基本HTML5 框架與應(yīng)用 90
6.1 什么是語義化結(jié)構(gòu)標(biāo)簽 ..................91
6.2 語義化結(jié)構(gòu)標(biāo)簽的應(yīng)用 ..................92
6.3 ＜meta＞ 標(biāo)簽 .....................................93
6.3.1 ＜meta＞ 標(biāo)簽的基本用途 ............93
6.3.2 控制響應(yīng)式設(shè)計(jì)中的視口 ..........93
6.3.3 設(shè)置網(wǎng)頁的定時(shí)跳轉(zhuǎn) ..................93
6.4 每課小練 ..........................................94
6.4.1 練一練：使用＜section＞ 標(biāo)簽的上
下結(jié)構(gòu)網(wǎng)頁框架 .........................94
6.4.2 學(xué)以致用：使用CSS 實(shí)現(xiàn)個(gè)人簡
歷網(wǎng)頁..........................................97
6.4.3 常見問題Q＆A ............................99
6.5 理論習(xí)題 ........................................100
第7 課 盒子模型與DOM 樹 102
7.1 DOM 樹與文件流 ..........................103
7.2 盒子模型 ........................................103
7.2.1 什么是盒子模型 ........................103
7.2.2 容器與元素關(guān)系 ........................104
7.2.3 塊級(jí)元素與行內(nèi)元素 ................105
7.3 float 與clear 屬性 ..........................106
7.3.1 標(biāo)準(zhǔn)文件流 ................................106
7.3.2 使用float 屬性使元素脫離標(biāo)
準(zhǔn)流 ............................................106
7.3.3 使用clear 屬性清除浮動(dòng)的
影響 ............................................107
7.4 每課小練 ........................................107
7.4.1 練一練：float 與clear 屬性的
應(yīng)用 ............................................107
7.4.2 學(xué)以致用：制作IPanda 網(wǎng)頁...109
7.4.3 常見問題Q＆A .......................... 113
7.5 理論習(xí)題 ........................................ 113
第8 課 position 位置屬性 115
8.1 疊放層與漂浮層 ............................ 116
8.1.1 position 位置屬性 ...................... 116
8.1.2 z-index 屬性 ............................... 116
8.2 relative 與absolute 的精確定位 .... 117
8.3 每課小練 ........................................ 118
8.3.1 練一練：通過四角定位撲
克牌 ............................................ 118
8.3.2 試一試：使用position 位置屬性實(shí)
現(xiàn)疊放層的應(yīng)用 .......................120
8.3.3 常見問題Q＆A ..........................121
8.4 理論習(xí)題 ........................................121
第9 課 CSS+DIV 固定寬度的頁面
布局 123
9.1 float 左右布局 ................................124
9.2 float 左中右布局 ............................125
9.3 position 彈性左中右布局 ..............126
9.4 固定寬度的混合布局 ....................128
9.5 網(wǎng)頁制作的“3O”原則 ...............129
9.6 每課小練 ........................................129
9.6.1 練一練：float 左右布局基本
框架 ............................................129
9.6.2 練一練：使用float 屬性與position
位置屬性進(jìn)行固定寬度混合布局
....................................................131
9.6.3 學(xué)以致用：簡化版杭州19 樓
網(wǎng)頁 ............................................132
9.6.4 常見問題Q＆A ..........................133
9.7 理論習(xí)題 ........................................134
第10 課 表單基礎(chǔ) 136
10.1 表單與表單對(duì)象 ..........................137
10.1.1 什么是表單............... 137
10.1.2 ＜form＞ 標(biāo)簽 ............................137
10.1.3 表單對(duì)象 ..................................138
10.2 注冊登錄表單實(shí)例 ......................141
10.3 每課小練 ......................................142
10.3.1 練一練：制作簡單表單網(wǎng)頁 .142
10.3.2 學(xué)以致用：表單應(yīng)用實(shí)例 ......143
10.3.3 常見問題Q＆A ........................144
10.4 理論習(xí)題 ......................................144
第11 課 JavaScript 基本應(yīng)用 146
11.1 什么是JavaScript.........................147
11.2 JavaScript 的應(yīng)用方法.................147
11.2.1 JavaScript 基本語法 ................147
11.2.2 最簡單的JavaScript 程序（Say
Hello!） ...................................149
11.2.3 表單數(shù)據(jù)驗(yàn)證 ..........................150
11.2.4 常用的JavaScript 對(duì)象與方法 151
11.2.5 定時(shí)器函數(shù) ..............................154
11.3 每課小練 ......................................154
11.3.1 練一練：簡單時(shí)鐘網(wǎng)頁實(shí)例 ..154
11.3.2 學(xué)以致用：制作考生登錄
表單 ..........................................157
11.3.3 試一試：JavaScript 漂浮層的應(yīng)用
實(shí)例..........................................158
11.3.4 常見問題Q＆A ........................160
11.4 理論習(xí)題 ......................................160
第12 課 jQuery 特效 162
12.1 jQuery 簡介 ..................................163
12.1.1 什么是jQuery .........................163
12.1.2 jQuery 庫文件的下載與引用..164
12.2 jQuery 文件就緒事件 .................165
12.3 jQuery 選擇器及其操作 .............165
12.4 jQuery 常見特效 .........................166
12.4.1 最簡單的例子——點(diǎn)一點(diǎn)就
消失 ..........................................166
12.4.2 使用slideToggle() 方法控制面板
展開或收起..............................167
12.4.3 使用animate() 動(dòng)畫實(shí)現(xiàn)頁面上下
滾動(dòng) .........................................168
12.5 每課小練 ......................................169
12.5.1 練一練：鼠標(biāo)懸停切換圖像
特效 ...........................................170
12.5.2 學(xué)以致用：jQuery 輪播特效
實(shí)例 ..........................................172
12.5.3 常見問題Q＆A ........................177
12.6 理論習(xí)題 ......................................177
第13 課 固定寬度網(wǎng)頁實(shí)例 179
13.1 IHangzhou 網(wǎng)頁 ...........................180
13.2 杭州19 樓綜合頁面 ...................180
13.3 杭州亞運(yùn)新聞網(wǎng)頁 ......................181
13.4 每課小練 ......................................183
13.4.1 練一練：頁面布局分析與
重現(xiàn) ..........................................183
13.4.2 學(xué)以致用：開發(fā)創(chuàng)意網(wǎng)站 ......183
13.4.3 常見問題Q＆A ........................184
13.5 理論習(xí)題 ......................................184
第14 課 響應(yīng)式設(shè)計(jì)基礎(chǔ) 185
14.1 響應(yīng)式網(wǎng)站概述 ..........................186
14.1.1 最簡單的響應(yīng)式設(shè)計(jì)CSS 樣式
代碼 ..........................................186
14.1.2 視口 ..........................................186
14.1.3 響應(yīng)式技術(shù)支持 ......................187
14.2 媒體查詢與斷點(diǎn) .........................187
14.2.1 媒體查詢的語法規(guī)則 ..............187
14.2.2 斷點(diǎn)與多段響應(yīng)式 ..................188
14.2.3 斷點(diǎn)取值 ..................................189
14.3 彈性布局 ......................................189
14.4 響應(yīng)式左右布局 ..........................191
14.5 每課小練 ......................................192
14.5.1 練一練：兩段響應(yīng)式布局 ......192
14.5.2 學(xué)以致用：制作響應(yīng)式IPanda
網(wǎng)頁 ..........................................194
14.5.3 常見問題Q＆A ........................196
14.6 理論習(xí)題 ......................................196
第15 課 響應(yīng)式設(shè)計(jì)特點(diǎn)及應(yīng)用 198
15.1 響應(yīng)式設(shè)計(jì)特點(diǎn) .........................199
15.1.1 設(shè)計(jì)原則 ..................................199
15.1.2 響應(yīng)式設(shè)計(jì)考慮要點(diǎn) ..............199
15.1.3 彈性布局 ..................................200
15.2 多段響應(yīng)式布局實(shí)例 ..................201
15.3 網(wǎng)頁中的圖像 ..............................204
15.3.1 彈性圖像 ..................................204
15.3.2 常見的網(wǎng)頁圖像文件類型 ......205
15.3.3 圖像拼合技術(shù) ..........................207
15.3.4 字體圖標(biāo) ..................................207
15.4 網(wǎng)頁字體 ......................................208
15.4.1 襯線體與非襯線體 ..................208
15.4.2 使用@font-face 功能設(shè)置
字體 ..........................................208
15.5 每課小練 ......................................209
15.5.1 練一練：三段響應(yīng)式布局
練習(xí) ..........................................209
15.5.2 試一試：制作三段響應(yīng)式Oscar
網(wǎng)頁..........................................210
15.6 理論習(xí)題 .....................................214
第16 課 Flexbox 伸縮盒 216
16.1 什么是Flexbox 伸縮盒 ...............217
16.2 常用的Flexbox 伸縮盒屬性 .......217
16.3 每課小練 ......................................219
16.3.1 練一練：Flexbox 伸縮盒網(wǎng)頁
練習(xí) ..........................................219
16.3.2 試一試：將Flexbox 伸縮盒用于
響應(yīng)式布局..............................220
16.3.3 常見問題Q＆A ........................223
16.4 理論習(xí)題 ......................................223
第17 課 網(wǎng)站建設(shè)概述 225
17.1 網(wǎng)站建設(shè)過程與規(guī)范 ..................226
17.2 什么是自建站 ..............................226
17.3 網(wǎng)站重構(gòu) ......................................226
17.4 網(wǎng)站建設(shè)項(xiàng)目需求 ......................227
17.5 網(wǎng)站文件管理 ..............................227
17.6 每課小練 ......................................228
17.6.1 學(xué)以致用：網(wǎng)站建設(shè)實(shí)踐 ......228
17.6.2 常見問題Q＆A ........................233
17.7 理論習(xí)題 ......................................234
第18 課 HTML5 的API 235
18.1 什么是API ...................................236
18.2 ＜canvas＞ 繪圖 ..............................236
18.2.1 什么是網(wǎng)頁Canvas 畫布 ........236
18.2.2 Canvas 繪圖實(shí)例 .....................237
18.3 音樂播放器 ..................................239
18.3.1 ＜audio＞ 標(biāo)簽 ...........................239
18.3.2 音樂播放器代碼實(shí)現(xiàn) ..............240
18.4 百度地圖API 簡介 ......................246
18.5 理論習(xí)題 ......................................250
附錄 251
書單推薦
