Web前端開(kāi)發(fā)必知必會(huì)
定 價(jià)：53 元
- 作者：張怡芳
- 出版時(shí)間：2024/3/1
- ISBN：9787121475443
- 出 版 社：電子工業(yè)出版社
- 中圖法分類(lèi)：TP393.092.2
- 頁(yè)碼：272
- 紙張：
- 版次：01
- 開(kāi)本：16開(kāi)
本教材共分18課（章），每課根據(jù)實(shí)際情況需要3～8個(gè)學(xué)時(shí)，第1課到第10課，主要介紹了HTML基本框架，標(biāo)簽與屬性，CSS樣式基礎(chǔ)，教會(huì)讀者利用盒子模型，結(jié)合HTML5結(jié)構(gòu)化標(biāo)簽，建立基本的頁(yè)面框架，以及固定寬度布局的模板網(wǎng)頁(yè)，第11～16課介紹了JavaScript特效應(yīng)用、表單、響應(yīng)式設(shè)計(jì)、彈性圖像與彈性布局、flexbox伸縮盒等實(shí)際Web前端開(kāi)發(fā)必備的知識(shí)點(diǎn)，并輔助以若干個(gè)對(duì)應(yīng)知識(shí)點(diǎn)的網(wǎng)頁(yè)實(shí)例；第17課~18課則介紹了網(wǎng)站建設(shè)的基本規(guī)范、API工具等，便于讀者后續(xù)的學(xué)習(xí)與實(shí)踐。讀者在學(xué)習(xí)了第1～10課后，將初步掌握Web頁(yè)面制作基礎(chǔ)，然后繼續(xù)學(xué)習(xí)后續(xù)的課程章節(jié)，學(xué)習(xí)實(shí)際Web前端開(kāi)發(fā)應(yīng)用必備的知識(shí)，通過(guò)涵蓋各個(gè)知識(shí)點(diǎn)的案例進(jìn)行實(shí)踐，快速、高效地掌握實(shí)用網(wǎng)頁(yè)制作的基本方法。另外，將另外提供教材中涉及的全部網(wǎng)頁(yè)源代碼網(wǎng)絡(luò)資源，方便社會(huì)讀者自學(xué)。
張怡芳，浙江機(jī)電職業(yè)技術(shù)學(xué)院副教授。曾主持建筑結(jié)構(gòu)智能化設(shè)計(jì)及其技術(shù)規(guī)范研究（浙江省教育廳，2002.06-2004.06）、建筑CAD圖形智能識(shí)別技術(shù)研究（浙江萬(wàn)里學(xué)院重點(diǎn)，2002.04-2005.04）等科研項(xiàng)目，以及信管專(zhuān)業(yè)"WEB前端設(shè)計(jì)”漸進(jìn)式課程教學(xué)改革探索（機(jī)電學(xué)院重點(diǎn)項(xiàng)目，2015.06）等教改項(xiàng)目。所參與的"漸進(jìn)式‘Web前端設(shè)計(jì)’與成長(zhǎng)型思維訓(xùn)練教學(xué)探索”榮獲浙江省計(jì)算機(jī)應(yīng)用與教育學(xué)會(huì)教育委員會(huì)第20屆年會(huì)優(yōu)秀論文。曾出版《計(jì)算機(jī)圖形學(xué)基礎(chǔ)及應(yīng)用教程》等。
第1 課 Web 前端簡(jiǎn)介 1
1.1 Web 前端與HTML ............................2
1.1.1 什么是Web 前端 ..........................2
1.1.2 Web 是如何工作的 .......................2
1.1.3 網(wǎng)站與HTML 網(wǎng)頁(yè) ......................3
1.1.4 網(wǎng)站類(lèi)型 ........................................3
1.2 HTML 文件結(jié)構(gòu) ................................5
1.3 網(wǎng)頁(yè)三要素：結(jié)構(gòu)、表現(xiàn)、行為 ....6
1.4 網(wǎng)頁(yè)編碼工具 ....................................8
1.4.1 使用記事本編寫(xiě)網(wǎng)頁(yè)代碼 ............8
1.4.2 瀏覽器的開(kāi)發(fā)者工具 ....................8
1.4.3 IDE 簡(jiǎn)介 ......................................10
1.4.4 HBuilderX 環(huán)境 ...........................10
1.5 每課小練 ..........................................12
1.5.1 練一練： 制作帶圖像的簡(jiǎn)單網(wǎng)
頁(yè)..................................................12
1.5.2 試一試：制作航天新聞網(wǎng)頁(yè) ......14
1.5.3 常見(jiàn)問(wèn)題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 常見(jiàn)問(wèn)題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 練一練：簡(jiǎn)單超鏈接 ..................38
3.3.2 學(xué)以致用：再別康橋網(wǎng)頁(yè) ..........39
3.3.3 常見(jiàn)問(wèn)題Q＆A ............................41
3.4 理論習(xí)題 ..........................................42
第4 課 簡(jiǎn)單CSS 43
4.1 CSS 樣式概述 ..................................44
4.1.1 CSS 樣式的作用..........................44
4.1.2 什么是選擇器 ..............................44
4.1.3 CSS 選擇器類(lèi)型............. 47
4.1.4 基本選擇器命名規(guī)則 ..................49
4.2 顏色模型 ..........................................49
4.3 設(shè)置網(wǎng)頁(yè)的文本顏色與背景顏色 ..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)頁(yè)模板 ......58
4.4.3 學(xué)以致用：使用float 屬性水平排列撲克牌.......................................60
4.4.4 常見(jiàn)問(wèn)題Q＆A ............................64
4.5 理論習(xí)題 ..........................................65
第5 課 復(fù)合選擇器與網(wǎng)頁(yè)導(dǎo)航菜單 68
5.1 什么是復(fù)合選擇器 ..........................69
5.1.1 復(fù)合選擇器的種類(lèi) ......................69
5.1.2 后代選擇器與子元素選擇器的
區(qū)別..............................................70
5.1.3 毗鄰兄弟選擇器與同級(jí)兄弟選擇
器的區(qū)別......................................70
5.1.4 結(jié)構(gòu)化偽類(lèi)選擇器與偽元素
詳解 ..............................................71
5.1.5 導(dǎo)航菜單超鏈接使用的選擇器 ..73
5.2 無(wú)序列表導(dǎo)航菜單 ..........................74
5.2.1 只改變字體顏色 ..........................74
5.2.2 鏈接項(xiàng)呈現(xiàn)塊級(jí)變化......... 77
5.3 常見(jiàn)的CSS1 ～ CSS3 選擇器 ........79
5.4 每課小練 ..........................................80
5.4.1 練一練：后代選擇器與橫向?qū)Ш?br>菜單...............................................80
5.4.2 學(xué)以致用：復(fù)合選擇器與太陽(yáng)系
網(wǎng)頁(yè)..............................................81
5.4.3 常見(jiàn)問(wèn)題Q＆A ............................87
5.5 理論習(xí)題 ..........................................87
第6 課 基本HTML5 框架與應(yīng)用 90
6.1 什么是語(yǔ)義化結(jié)構(gòu)標(biāo)簽 ..................91
6.2 語(yǔ)義化結(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)頁(yè)的定時(shí)跳轉(zhuǎn) ..................93
6.4 每課小練 ..........................................94
6.4.1 練一練：使用＜section＞ 標(biāo)簽的上
下結(jié)構(gòu)網(wǎng)頁(yè)框架 .........................94
6.4.2 學(xué)以致用：使用CSS 實(shí)現(xiàn)個(gè)人簡(jiǎn)
歷網(wǎng)頁(yè)..........................................97
6.4.3 常見(jiàn)問(wèn)題Q＆A ............................99
6.5 理論習(xí)題 ........................................100
第7 課 盒子模型與DOM 樹(shù) 102
7.1 DOM 樹(shù)與文件流 ..........................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)頁(yè)...109
7.4.3 常見(jiàn)問(wèn)題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 練一練：通過(guò)四角定位撲
克牌 ............................................ 118
8.3.2 試一試：使用position 位置屬性實(shí)
現(xiàn)疊放層的應(yīng)用 .......................120
8.3.3 常見(jiàn)問(wèn)題Q＆A ..........................121
8.4 理論習(xí)題 ........................................121
第9 課 CSS+DIV 固定寬度的頁(yè)面
布局 123
9.1 float 左右布局 ................................124
9.2 float 左中右布局 ............................125
9.3 position 彈性左中右布局 ..............126
9.4 固定寬度的混合布局 ....................128
9.5 網(wǎng)頁(yè)制作的“3O”原則 ...............129
9.6 每課小練 ........................................129
9.6.1 練一練：float 左右布局基本
框架 ............................................129
9.6.2 練一練：使用float 屬性與position
位置屬性進(jìn)行固定寬度混合布局
....................................................131
9.6.3 學(xué)以致用：簡(jiǎn)化版杭州19 樓
網(wǎng)頁(yè) ............................................132
9.6.4 常見(jiàn)問(wèn)題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 注冊(cè)登錄表單實(shí)例 ......................141
10.3 每課小練 ......................................142
10.3.1 練一練：制作簡(jiǎn)單表單網(wǎng)頁(yè) .142
10.3.2 學(xué)以致用：表單應(yīng)用實(shí)例 ......143
10.3.3 常見(jiàn)問(wèn)題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 基本語(yǔ)法 ................147
11.2.2 最簡(jiǎn)單的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 練一練：簡(jiǎn)單時(shí)鐘網(wǎng)頁(yè)實(shí)例 ..154
11.3.2 學(xué)以致用：制作考生登錄
表單 ..........................................157
11.3.3 試一試：JavaScript 漂浮層的應(yīng)用
實(shí)例..........................................158
11.3.4 常見(jiàn)問(wèn)題Q＆A ........................160
11.4 理論習(xí)題 ......................................160
第12 課 jQuery 特效 162
12.1 jQuery 簡(jiǎn)介 ..................................163
12.1.1 什么是jQuery .........................163
12.1.2 jQuery 庫(kù)文件的下載與引用..164
12.2 jQuery 文件就緒事件 .................165
12.3 jQuery 選擇器及其操作 .............165
12.4 jQuery 常見(jiàn)特效 .........................166
12.4.1 最簡(jiǎn)單的例子——點(diǎn)一點(diǎn)就
消失 ..........................................166
12.4.2 使用slideToggle() 方法控制面板
展開(kāi)或收起..............................167
12.4.3 使用animate() 動(dòng)畫(huà)實(shí)現(xiàn)頁(yè)面上下
滾動(dòng) .........................................168
12.5 每課小練 ......................................169
12.5.1 練一練：鼠標(biāo)懸停切換圖像
特效 ...........................................170
12.5.2 學(xué)以致用：jQuery 輪播特效
實(shí)例 ..........................................172
12.5.3 常見(jiàn)問(wèn)題Q＆A ........................177
12.6 理論習(xí)題 ......................................177
第13 課 固定寬度網(wǎng)頁(yè)實(shí)例 179
13.1 IHangzhou 網(wǎng)頁(yè) ...........................180
13.2 杭州19 樓綜合頁(yè)面 ...................180
13.3 杭州亞運(yùn)新聞網(wǎng)頁(yè) ......................181
13.4 每課小練 ......................................183
13.4.1 練一練：頁(yè)面布局分析與
重現(xiàn) ..........................................183
13.4.2 學(xué)以致用：開(kāi)發(fā)創(chuàng)意網(wǎng)站 ......183
13.4.3 常見(jiàn)問(wèn)題Q＆A ........................184
13.5 理論習(xí)題 ......................................184
第14 課 響應(yīng)式設(shè)計(jì)基礎(chǔ) 185
14.1 響應(yīng)式網(wǎng)站概述 ..........................186
14.1.1 最簡(jiǎn)單的響應(yīng)式設(shè)計(jì)CSS 樣式
代碼 ..........................................186
14.1.2 視口 ..........................................186
14.1.3 響應(yīng)式技術(shù)支持 ......................187
14.2 媒體查詢(xún)與斷點(diǎn) .........................187
14.2.1 媒體查詢(xún)的語(yǔ)法規(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)頁(yè) ..........................................194
14.5.3 常見(jiàn)問(wèn)題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)頁(yè)中的圖像 ..............................204
15.3.1 彈性圖像 ..................................204
15.3.2 常見(jiàn)的網(wǎng)頁(yè)圖像文件類(lèi)型 ......205
15.3.3 圖像拼合技術(shù) ..........................207
15.3.4 字體圖標(biāo) ..................................207
15.4 網(wǎng)頁(yè)字體 ......................................208
15.4.1 襯線(xiàn)體與非襯線(xiàn)體 ..................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)頁(yè)..........................................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)頁(yè)
練習(xí) ..........................................219
16.3.2 試一試：將Flexbox 伸縮盒用于
響應(yīng)式布局..............................220
16.3.3 常見(jiàn)問(wèn)題Q＆A ........................223
16.4 理論習(xí)題 ......................................223
第17 課 網(wǎng)站建設(shè)概述 225
17.1 網(wǎng)站建設(shè)過(guò)程與規(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 常見(jiàn)問(wèn)題Q＆A ........................233
17.7 理論習(xí)題 ......................................234
第18 課 HTML5 的API 235
18.1 什么是API ...................................236
18.2 ＜canvas＞ 繪圖 ..............................236
18.2.1 什么是網(wǎng)頁(yè)Canvas 畫(huà)布 ........236
18.2.2 Canvas 繪圖實(shí)例 .....................237
18.3 音樂(lè)播放器 ..................................239
18.3.1 ＜audio＞ 標(biāo)簽 ...........................239
18.3.2 音樂(lè)播放器代碼實(shí)現(xiàn) ..............240
18.4 百度地圖API 簡(jiǎn)介 ......................246
18.5 理論習(xí)題 ......................................250
附錄 251
書(shū)單推薦
