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