本教材共分18課（章），每課根據(jù)實際情況需要3～8個學(xué)時，第1課到第10課，主要介紹了HTML基本框架，標(biāo)簽與屬性，CSS樣式基礎(chǔ)，教會讀者利用盒子模型，結(jié)合HTML5結(jié)構(gòu)化標(biāo)簽，建立基本的頁面框架，以及固定寬度布局的模板網(wǎng)頁，第11～16課介紹了JavaScript特效應(yīng)用、表單、響應(yīng)式設(shè)計、彈性圖像與彈性布局、flexbox伸縮盒等實際Web前端開發(fā)必備的知識點，并輔助以若干個對應(yīng)知識點的網(wǎng)頁實例；第17課~18課則介紹了網(wǎng)站建設(shè)的基本規(guī)范、API工具等，便于讀者后續(xù)的學(xué)習(xí)與實踐。讀者在學(xué)習(xí)了第1～10課后，將初步掌握Web頁面制作基礎(chǔ)，然后繼續(xù)學(xué)習(xí)后續(xù)的課程章節(jié)，學(xué)習(xí)實際Web前端開發(fā)應(yīng)用必備的知識，通過涵蓋各個知識點的案例進行實踐，快速、高效地掌握實用網(wǎng)頁制作的基本方法。另外，將另外提供教材中涉及的全部網(wǎng)頁源代碼網(wǎng)絡(luò)資源，方便社會讀者自學(xué)。
張怡芳，浙江機電職業(yè)技術(shù)學(xué)院副教授。曾主持建筑結(jié)構(gòu)智能化設(shè)計及其技術(shù)規(guī)范研究（浙江省教育廳，2002.06-2004.06）、建筑CAD圖形智能識別技術(shù)研究（浙江萬里學(xué)院重點，2002.04-2005.04）等科研項目，以及信管專業(yè)"WEB前端設(shè)計”漸進式課程教學(xué)改革探索（機電學(xué)院重點項目，2015.06）等教改項目。所參與的"漸進式‘Web前端設(shè)計’與成長型思維訓(xùn)練教學(xué)探索”榮獲浙江省計算機應(yīng)用與教育學(xué)會教育委員會第20屆年會優(yōu)秀論文。曾出版《計算機圖形學(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 特殊符號 ..........................................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 絕對路徑 ......................................36
3.2.2 相對路徑 ......................................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 毗鄰兄弟選擇器與同級兄弟選擇
器的區(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àn)塊級變化......... 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è)計中的視口 ..........93
6.3.3 設(shè)置網(wǎng)頁的定時跳轉(zhuǎn) ..................93
6.4 每課小練 ..........................................94
6.4.1 練一練：使用＜section＞ 標(biāo)簽的上
下結(jié)構(gòu)網(wǎng)頁框架 .........................94
6.4.2 學(xué)以致用：使用CSS 實現(xiàn)個人簡
歷網(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 塊級元素與行內(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 屬性清除浮動的
影響 ............................................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 位置屬性實
現(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
位置屬性進行固定寬度混合布局
....................................................131
9.6.3 學(xué)以致用：簡化版杭州19 樓
網(wǎng)頁 ............................................132
9.6.4 常見問題Q＆A ..........................133
9.7 理論習(xí)題 ........................................134
第10 課 表單基礎(chǔ) 136
10.1 表單與表單對象 ..........................137
10.1.1 什么是表單............... 137
10.1.2 ＜form＞ 標(biāo)簽 ............................137
10.1.3 表單對象 ..................................138
10.2 注冊登錄表單實例 ......................141
10.3 每課小練 ......................................142
10.3.1 練一練：制作簡單表單網(wǎng)頁 .142
10.3.2 學(xué)以致用：表單應(yīng)用實例 ......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ù)驗證 ..........................150
11.2.4 常用的JavaScript 對象與方法 151
11.2.5 定時器函數(shù) ..............................154
11.3 每課小練 ......................................154
11.3.1 練一練：簡單時鐘網(wǎng)頁實例 ..154
11.3.2 學(xué)以致用：制作考生登錄
表單 ..........................................157
11.3.3 試一試：JavaScript 漂浮層的應(yīng)用
實例..........................................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 最簡單的例子——點一點就
消失 ..........................................166
12.4.2 使用slideToggle() 方法控制面板
展開或收起..............................167
12.4.3 使用animate() 動畫實現(xiàn)頁面上下
滾動 .........................................168
12.5 每課小練 ......................................169
12.5.1 練一練：鼠標(biāo)懸停切換圖像
特效 ...........................................170
12.5.2 學(xué)以致用：jQuery 輪播特效
實例 ..........................................172
12.5.3 常見問題Q＆A ........................177
12.6 理論習(xí)題 ......................................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 學(xué)以致用：開發(fā)創(chuàng)意網(wǎng)站 ......183
13.4.3 常見問題Q＆A ........................184
13.5 理論習(xí)題 ......................................184
第14 課 響應(yīng)式設(shè)計基礎(chǔ) 185
14.1 響應(yīng)式網(wǎng)站概述 ..........................186
14.1.1 最簡單的響應(yīng)式設(shè)計CSS 樣式
代碼 ..........................................186
14.1.2 視口 ..........................................186
14.1.3 響應(yīng)式技術(shù)支持 ......................187
14.2 媒體查詢與斷點 .........................187
14.2.1 媒體查詢的語法規(guī)則 ..............187
14.2.2 斷點與多段響應(yīng)式 ..................188
14.2.3 斷點取值 ..................................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è)計特點及應(yīng)用 198
15.1 響應(yīng)式設(shè)計特點 .........................199
15.1.1 設(shè)計原則 ..................................199
15.1.2 響應(yīng)式設(shè)計考慮要點 ..............199
15.1.3 彈性布局 ..................................200
15.2 多段響應(yīng)式布局實例 ..................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è)項目需求 ......................227
17.5 網(wǎng)站文件管理 ..............................227
17.6 每課小練 ......................................228
17.6.1 學(xué)以致用：網(wǎng)站建設(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 繪圖實例 .....................237
18.3 音樂播放器 ..................................239
18.3.1 ＜audio＞ 標(biāo)簽 ...........................239
18.3.2 音樂播放器代碼實現(xiàn) ..............240
18.4 百度地圖API 簡介 ......................246
18.5 理論習(xí)題 ......................................250
附錄 251
書單推薦
