Web前端開發(fā)技術(shù)

定　價(jià)：￥49.80

作　者：	羅劍，尹薇婷，廖春瓊，段巧靈著
出版社：	中國鐵道出版社
叢編項(xiàng)：
標(biāo)　簽：	暫缺

購買這本書可以去

京東 (￥46.50)

ISBN：	9787113271503	出版時(shí)間：	2020-08-01	包裝：	平裝
開本：	16開	頁數(shù)：		字?jǐn)?shù)：

內(nèi)容簡介

　　本書系統(tǒng)地介紹了Web前端開發(fā)的基礎(chǔ)知識和實(shí)際應(yīng)用，主要內(nèi)容包括網(wǎng)頁開發(fā)起步、CSS樣式入門、排列網(wǎng)頁內(nèi)容、表單與框架、網(wǎng)頁布局設(shè)計(jì)、CSS樣式進(jìn)階、響應(yīng)式網(wǎng)頁設(shè)計(jì)、網(wǎng)頁腳本編程。本書采用理論與實(shí)踐相結(jié)合的編寫方式，每個(gè)重要知識都配有示例代碼，每章最后一節(jié)為學(xué)生實(shí)踐任務(wù)，采用任務(wù)驅(qū)動(dòng)的方式完成實(shí)踐內(nèi)容。本書還配有大量的微課視頻幫助學(xué)生理解知識點(diǎn)，方便學(xué)生預(yù)習(xí)和實(shí)踐。本書適合作為高職或應(yīng)用型本科院校計(jì)算機(jī)及相關(guān)專業(yè)的教材，也可作為Web開發(fā)愛好者的入門參考用書。

作者簡介

　　羅劍，中山大學(xué)碩士研究生畢業(yè)并獲得碩士學(xué)位。原在武漢信息傳播職業(yè)技術(shù)學(xué)院工作，自2019年至今在武漢晴川學(xué)院擔(dān)任軟件工程教師、高級工程師。主講課程：《JavaEE綜合應(yīng)用開發(fā)》、《Android綜合應(yīng)用開發(fā)》、《大型應(yīng)用軟件開發(fā)綜合實(shí)訓(xùn)》、《大數(shù)據(jù)案例實(shí)踐》。學(xué)術(shù)成果：主持全國高等院校計(jì)算機(jī)基礎(chǔ)教育研究會項(xiàng)目：在線課程、課程整體解決方案的優(yōu)質(zhì)教學(xué)資源建設(shè)融合的研究；主編 “十三五”高等職業(yè)教育規(guī)劃教材《C語言程序設(shè)計(jì)》、主編普通高等教育“十三五”規(guī)劃教材《Java基礎(chǔ)案例教程》、主編《Python程序設(shè)計(jì)基礎(chǔ)教程》，近年來申請軟件著作權(quán)4項(xiàng)，以第一作者發(fā)表論文4篇。主要榮譽(yù)：指導(dǎo)學(xué)生參加“2019年全國高校計(jì)算機(jī)能力挑戰(zhàn)賽”獲得Python程序設(shè)計(jì)全國決賽三等獎(jiǎng)，被評為優(yōu)秀指導(dǎo)教師。尹薇婷，女，漢族，高級工程師，中共黨員，現(xiàn)任武漢信息傳播職業(yè)技術(shù)學(xué)院信息工程學(xué)院教師。持有信息系統(tǒng)項(xiàng)目管理師證書。主要從事軟件開發(fā)前端開發(fā)。高職院校任職多年，主要講授軟件技術(shù)專業(yè)核心專業(yè)課，負(fù)責(zé)軟件技術(shù)專業(yè)人才培養(yǎng)的課程規(guī)劃與專業(yè)建設(shè)工作。公開發(fā)表論文多篇。廖春瓊，女，漢族，高級工程師，中共黨員，現(xiàn)任武漢信息傳播職業(yè)技術(shù)學(xué)院軟件技術(shù)教研室主任。持有信息系統(tǒng)項(xiàng)目管理師證書。主要從事軟件開發(fā)前端開發(fā)。2005年畢業(yè)于長江大學(xué)計(jì)算科學(xué)與技術(shù)專業(yè)；在企業(yè)一線工作2年，在軟件培訓(xùn)機(jī)構(gòu)任教4年，高職院校任職多年，主要講授軟件技術(shù)專業(yè)核心專業(yè)課，負(fù)責(zé)軟件技術(shù)專業(yè)人才培養(yǎng)的課程規(guī)劃與專業(yè)建設(shè)工作。公開發(fā)表論文7篇，出版教材2本，完成科研項(xiàng)目2個(gè)，參與教研項(xiàng)目2個(gè)，4個(gè)專業(yè)著作權(quán)，4個(gè)科技成果獎(jiǎng)。

圖書目錄

目　錄
第1章　網(wǎng)頁開發(fā)起步.1
1.1　HTML文檔的結(jié)構(gòu).2
1.1.1　HTML的基本結(jié)構(gòu).2
1.1.2　使用記事本開發(fā)HTML頁面3
【示例1.1】使用記事本開發(fā)HTML3
1.1.3　使用VS Code開發(fā)網(wǎng)頁4
1.1.4　設(shè)置頁面背景色和背景圖片8
【示例1.2】設(shè)置網(wǎng)頁背景顏色.9
【示例1.3】設(shè)置背景圖片.9
1.2　基礎(chǔ)標(biāo)簽10
1.2.1　文本類標(biāo)簽10
【示例1.4】標(biāo)題標(biāo)簽的使用.11
【示例1.5】 p標(biāo)簽的使用12
【示例1.6】行內(nèi)標(biāo)簽的使用.13
【示例1.7】換行標(biāo)簽的使用.14
1.2.2　水平線標(biāo)簽14
【示例1.8】水平線的使用.15
1.2.3　HTML文檔注釋和特殊符號15
【示例1.9】在網(wǎng)頁底部添加
版權(quán)部分16
1.3　圖像標(biāo)簽17
1.3.1　圖像標(biāo)簽的使用17
【示例1.10】圖片的使用.18
1.3.2　圖片的相對路徑與絕對路徑19
1.4　超鏈接標(biāo)簽20
1.4.1　頁面間鏈接20
【示例1.11】超鏈接的使用.21
【示例1.12】網(wǎng)站內(nèi)頁面間的鏈接22
1.4.2　錨點(diǎn)鏈接23
【示例1.13】錨點(diǎn)鏈接23
1.4.3　電子郵件鏈接25
【示例1.14】郵箱鏈接的使用.25
1.5　塊級標(biāo)簽與行內(nèi)標(biāo)簽.26
1.5.1　div標(biāo)簽和span標(biāo)簽.26
【示例1.15】div標(biāo)簽的使用.26
【示例1.16】span 標(biāo)簽的使用.27
1.5.2　 HTML的標(biāo)簽分類27
實(shí)踐任務(wù)28
小　　結(jié)29
習(xí)　　題29
第2章　CSS樣式入門.31
2.1　CSS的基本語法.32
2.1.1　CSS樣式表概述32
2.1.2　樣式表的基本語法34
2.1.3　樣式表的選擇器34
【示例2.1】標(biāo)簽選擇器應(yīng)用.35
【示例2.2】類樣式選擇器案例.37
【示例2.3】ID樣式選擇器示例38
2.2　常見的樣式屬性及其應(yīng)用39
2.2.1　文本及字體屬性39
【示例2.4】文本及字體樣式設(shè)置.40
2.2.2　盒子模型41
【示例2.5】邊框樣式設(shè)置.44
【示例2.6】填充樣式設(shè)置.45
【示例2.7】塊級元素和行內(nèi)元素
設(shè)置寬與高47
2.2.3　背景屬性49
【示例2.8】背景相關(guān)樣式設(shè)置.50
2.3　樣式使用分類.51
2.3.1　行內(nèi)樣式表51
【示例2.9】行內(nèi)樣式設(shè)置. 52
2.3.2　內(nèi)嵌樣式表52
2.3.3　外部樣式表52
實(shí)踐任務(wù) 55
小　　結(jié) 63
習(xí)　　題 64
第3 章　排列網(wǎng)頁內(nèi)容66
3.1　列表標(biāo)簽 67
3.1.1　無序列表67
【示例3.1】無序列表標(biāo)簽的使用. 68
3.1.2　有序列表69
【示例3.2】有序列表標(biāo)簽的使用. 69
3.1.3　定義列表70
【示例3.3】定義列表標(biāo)簽的使用. 71
【示例3.4】定義列表混合布局. 72
3.2　表格標(biāo)簽 73
3.2.1　表格的基本結(jié)構(gòu)73
3.2.2　表格的使用74
【示例3.5】表格標(biāo)簽的應(yīng)用. 75
3.2.3　合并單元格76
【示例3.6】colspan 屬性的用法 77
【示例3.7】rowspan 屬性的用法. 79
【示例3.8】跨行與跨列的同時(shí)應(yīng)用 81
3.2.4　表格的高級用法82
【示例3.9】表格高級標(biāo)簽的應(yīng)用. 83
3.3　表格的美化與布局 85
3.3.1　表格的美化85
【示例3.10】表格寬度、高度、.
邊框?qū)傩缘挠梅? 85
【示例3.11】表格背景和對齊設(shè)置 87
【示例3.12】設(shè)置表格單元格的.
間距與填充. 89
3.3.2　表格布局90
實(shí)踐任務(wù) 94
小　　結(jié) 95
習(xí)　　題 96
第4 章　表單與框架98
4.1　表單. 99
4.1.1　表單概述99
4.1.2　表單的基本語法100
【示例4.1】用戶登錄 101
4.2　表單元素. 102
4.2.1　表單元素的基本格式102
4.2.2　表單元素介紹103
4.3　表單的綜合應(yīng)用. 110
4.4　內(nèi)嵌框架. 114
4.4.1　的使用114
【示例4.2】內(nèi)嵌框架的使用. 114
4.4.2　超鏈接與內(nèi)嵌框架關(guān)聯(lián)115
【示例4.3】內(nèi)嵌框架的使用. 116
實(shí)踐任務(wù). 117
小　　結(jié). 127
習(xí)　　題. 128
第5 章　網(wǎng)頁布局設(shè)計(jì) 130
5.1　盒子的定位 131
5.1.1　標(biāo)準(zhǔn)文檔流131
【示例5.1】display 屬性的使用. 132
【示例5.2】行內(nèi)塊inline-block.
屬性值的使用. 135
5.1.2　盒子的定位136
【示例5.3】固定定位的使用. 142
5.2　盒子的浮動(dòng) 144
5.2.1　float 屬性144
【示例5.4】使用float 實(shí)現(xiàn)文字.
繞排圖片 145
5.2.2　inline-block 與浮動(dòng)的區(qū)別153
5.3　頁面整體布局 153

5.3.1　頁面布局概述153
5.3.2　布局案例分析155
實(shí)踐任務(wù). 161
小　　結(jié). 168
習(xí)　　題. 169
第6 章　CSS 樣式進(jìn)階. 170
6.1　CSS 樣式選擇器 171
6.1.1　基本選擇器分類171
6.1.2　復(fù)合選擇器分類171
【示例6.1】層次選擇器的使用. 173
6.1.3　偽類選擇器175
【示例6.2】超鏈接偽類樣式的.
使用 175
【示例6.3】偽類選擇器的使用. 177
6.1.4　屬性選擇器178
【示例6.4】屬性選擇器的使用. 179
6.2　CSS 樣式的特性與常用屬性. 180
6.2.1　CSS 樣式的特性180
【示例6.5】 CSS 的繼承性.
與層疊性 180
6.2.2　樣式屬性分類181
6.2.3　頁面布局屬性184
6.3　CSS3 的其他樣式. 185
6.3.1　盒子模型的圓角185
【示例6.6】圓角邊框的使用. 185
6.3.2　盒子陰影186
【示例6.7】盒子陰影box-.
shadow 的使用 187
【示例6.8】設(shè)置水平垂直偏移.
得到陰影效果. 189
6.3.3　動(dòng)畫設(shè)置190
實(shí)踐任務(wù). 198
小　　結(jié). 204
習(xí)　　題. 205
第7 章　響應(yīng)式網(wǎng)頁設(shè)計(jì) 207
7.1　響應(yīng)式網(wǎng)頁概述. 208
7.1.1　響應(yīng)式網(wǎng)頁的起源208
7.1.2　響應(yīng)式網(wǎng)頁的技術(shù)手段208
7.2　Bootstrap 概述. 209
7.2.1　Bootstrap 的特點(diǎn)210
7.2.2　Bootstrap 的結(jié)構(gòu)210
【示例7.1】使用Bootstrap 框架.
開發(fā)第一個(gè)網(wǎng)頁. 211
7.3　柵格系統(tǒng). 213
7.3.1　柵格系統(tǒng)原理213
【示例7.2】柵格系統(tǒng)的使用. 213
7.3.2　柵格系統(tǒng)的其他用法216
【示例7.3】列偏移 216
7.4　CSS 全局樣式. 218
7.4.1　基礎(chǔ)排版218
7.4.2　表格.220
7.4.3　按鈕.221
7.4.4　圖像.222
7.4.5　表單.223
【示例7.4】基本表單的使用. 223
7.5　Bootstrap 組件. 225
7.5.1　圖標(biāo).226
【示例7.5】小圖標(biāo)的使用. 226
7.5.2　下拉菜單227
7.5.3　按鈕組.228
7.5.4　導(dǎo)航.229
7.5.5　導(dǎo)航欄.230
【示例7.6】導(dǎo)航條的使用. 230
【示例7.7】響應(yīng)式導(dǎo)航欄的實(shí)現(xiàn) 232
7.5.6　縮略圖.234
【示例7.8】縮略圖的使用. 234
實(shí)踐任務(wù). 235
小　　結(jié). 242
習(xí)　　題. 243
第8 章　網(wǎng)頁腳本編程 245
8.1　JavaScript 概述 246
8.1.1　JavaScript 簡介.246
8.1.2　基本語法247
8.1.3　邏輯控制語句249
【示例8.1】輸出1~10 之間的.
奇數(shù) 250
8.2　函數(shù)與事件 251
8.2.1　函數(shù)的定義與調(diào)用252
8.2.2　變量的作用域252
8.2.3　事件處理254
【示例8.2】驗(yàn)證郵箱格式. 255
8.2.4　JavaScript 的內(nèi)置對象257
【示例8.3】顯示系統(tǒng)時(shí)間. 257
【示例8.4】動(dòng)態(tài)時(shí)鐘 259
8.3　JavaScript 操作DOM 元素 261
8.3.1　瀏覽器對象模型261
8.3.2　文檔對象模型263
【示例8.5】動(dòng)態(tài)表格 266
8.3.3　訪問元素的CSS 樣式.269
8.4　jQuery 270
8.4.1　jQuery 庫的導(dǎo)入270
【示例8.6】第一個(gè)jQuery 代碼 271
8.4.2　jQuery 選擇器271
8.4.3　jQuery 函數(shù).273
【示例8.7】動(dòng)畫特效函數(shù)的使用 274
實(shí)踐任務(wù). 275
小　　結(jié). 278
習(xí)　　題. 279
參考文獻(xiàn). 280