本書(shū)依據(jù)互聯(lián)網(wǎng)行業(yè)對(duì)Web前端開(kāi)發(fā)工程師崗位技術(shù)與能力的要求，結(jié)合作者長(zhǎng)期在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中積累的經(jīng)驗(yàn)，由淺入深、循序漸進(jìn)地介紹了HTML5、CSS3、JavaScript等前端網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。
全書(shū)共分為13章，全面講述HTML5、CSS3和JavaScript技術(shù)。第1～8章重點(diǎn)介紹網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)概念、HTML5語(yǔ)言基礎(chǔ)和網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)工具Sublime Text的使用；第9、10章講解CSS3樣式表與網(wǎng)頁(yè)布局的相關(guān)知識(shí)；第11、12章講述JavaScript語(yǔ)言的相關(guān)內(nèi)容和前臺(tái)動(dòng)態(tài)頁(yè)面的制作；第13章講解HTML5高級(jí)應(yīng)用技術(shù)。
本書(shū)圖文并茂、通俗易懂，可作為高等學(xué)校計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、信息管理與信息系統(tǒng)、網(wǎng)絡(luò)工程、物聯(lián)網(wǎng)工程、信息科學(xué)技術(shù)、數(shù)字媒體技術(shù)及其他文、理科相關(guān)專業(yè)或計(jì)算機(jī)公共基礎(chǔ)的網(wǎng)頁(yè)開(kāi)發(fā)與設(shè)計(jì)、網(wǎng)頁(yè)制作、Web編程技術(shù)、Web前端開(kāi)發(fā)技術(shù)等課程教學(xué)的教材，也可作為網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者快速入門(mén)的自學(xué)讀物。
（1）由淺入深、循序漸進(jìn)地介紹了HTML5、CSS3、JavaScript等前端網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。（2）圖文并茂、通俗易懂，可作為高等學(xué)校計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、信息管理與信息系統(tǒng)、網(wǎng)絡(luò)工程、物聯(lián)網(wǎng)工程、信息科學(xué)技術(shù)、數(shù)字媒體技術(shù)及其他文、理科相關(guān)專業(yè)或計(jì)算機(jī)公共基礎(chǔ)的網(wǎng)頁(yè)開(kāi)發(fā)與設(shè)計(jì)、網(wǎng)頁(yè)制作、Web編程技術(shù)、Web前端開(kāi)發(fā)技術(shù)等課程教學(xué)的教材，也可作為網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者快速入門(mén)的自學(xué)讀物。
序言前言隨著HTML5、CSS3和JavaScript技術(shù)的廣泛應(yīng)用， Web前端開(kāi)發(fā)者的工作量大大減輕，開(kāi)發(fā)成本不斷降低，三者是Web項(xiàng)目開(kāi)發(fā)中非常重要的開(kāi)發(fā)技術(shù)。HTML5跨平臺(tái)的優(yōu)勢(shì)使其在未來(lái)的技術(shù)市場(chǎng)中逐漸發(fā)展成為主流開(kāi)發(fā)技術(shù)，占據(jù)越來(lái)越重要的地位。本書(shū)以HTML5為主體，搭配CSS3和JavaScript，并且立足于當(dāng)前網(wǎng)絡(luò)行業(yè)，成為您充實(shí)自己實(shí)力或踏入網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的最好幫手。1. 本書(shū)內(nèi)容全書(shū)共分為13章，各章節(jié)主要內(nèi)容如下:第1章主要對(duì)Internet與Web技術(shù)進(jìn)行概述。包括Internet與萬(wàn)維網(wǎng)、域名、URL等概念，以及開(kāi)發(fā)工具sublime text的安裝和使用。第2章介紹HTML5的網(wǎng)頁(yè)文檔結(jié)構(gòu)。包括HTML5文檔的基本框架、標(biāo)記和標(biāo)記屬性等語(yǔ)法，為編寫(xiě)Web程序打下基礎(chǔ)。第3章介紹HTML5文檔文字與段落的處理，包括文字內(nèi)容、文字修飾、段落等常用標(biāo)記。第4章介紹用HTML5建立超鏈接。包括文字、圖片、郵箱的超鏈接，錨點(diǎn)的使用和相對(duì)路徑與絕對(duì)路徑的概念等。第5章介紹用HTML5創(chuàng)建列表。包括無(wú)序列表、有序列表、嵌套列表和自定義列表。第6章介紹多媒體的應(yīng)用。包括圖片、音頻和視頻的應(yīng)用。第7章介紹用HTML5創(chuàng)建表格。包括表格的常用屬性、樣式設(shè)計(jì)、表格嵌套等。第8章介紹使用表單。包括表單概述、表單基本元素的使用和表單的驗(yàn)證方法和屬性等。第9章介紹HTML5的高級(jí)應(yīng)用。包括畫(huà)布、地理位置、Web存儲(chǔ)、應(yīng)用緩存等高級(jí)應(yīng)用技術(shù)。第10章介紹CSS3基礎(chǔ)。包括CSS3基礎(chǔ)語(yǔ)法、選擇器、媒體查詢等。第11章介紹CSS3的高級(jí)應(yīng)用。包括Div元素、導(dǎo)航欄設(shè)計(jì)、動(dòng)畫(huà)設(shè)計(jì)等。第12章介紹JavaScript基本語(yǔ)法和內(nèi)置對(duì)象。包括JavaScript簡(jiǎn)介、數(shù)據(jù)類型與變量、運(yùn)算符與表達(dá)式、流程控制語(yǔ)句和函數(shù)、字符串對(duì)象、數(shù)學(xué)對(duì)象、日期對(duì)象和數(shù)組對(duì)象等。第13章介紹JavaScript的對(duì)象編程。包括常用對(duì)象、DOM操作和事件編程。2. 本書(shū)特色(1) 知識(shí)全面，內(nèi)容豐富。內(nèi)容由淺入深，涵蓋了所有HTML5、CSS3和JavaScript知識(shí)點(diǎn)，便于讀者全面掌握網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。(2) 循序漸進(jìn)，難度適中。知識(shí)結(jié)構(gòu)安排合理，把知識(shí)點(diǎn)融匯于案例實(shí)訓(xùn)中，并且結(jié)合經(jīng)典案例進(jìn)行講解和拓展，幫助讀者快速入門(mén)。(3) 理論與實(shí)際緊密結(jié)合。書(shū)中穿插大量綜合案例，幫助讀者學(xué)習(xí)理論知識(shí)的同時(shí)，更好地結(jié)合開(kāi)發(fā)實(shí)踐，掌握網(wǎng)頁(yè)設(shè)計(jì)工作中解決實(shí)際問(wèn)題的方法。(4) 結(jié)合最新工具，高效開(kāi)發(fā)。本書(shū)采用Web開(kāi)發(fā)中廣泛應(yīng)用的Sublime Text3開(kāi)發(fā)工具進(jìn)行講述，使讀者在學(xué)習(xí)知識(shí)的同時(shí)，能夠熟練高效地使用工具。(5) 配套資源完善。為幫助讀者更好地使用本教材進(jìn)行學(xué)習(xí)，教材配套相關(guān)教學(xué)資源，提供免費(fèi)的圖片、代碼等相關(guān)素材，還特別為教師提供PowerPoint教案，方便教師授課使用。〖1〗HTML5網(wǎng)頁(yè)設(shè)計(jì)教程前言[3]〖3〗3. 讀者對(duì)象本書(shū)適合作為高等學(xué)校計(jì)算機(jī)科學(xué)與技術(shù)、軟件工程、信息管理與信息系統(tǒng)、網(wǎng)絡(luò)工程、物聯(lián)網(wǎng)工程、信息科學(xué)技術(shù)、數(shù)字媒體技術(shù)及其他文、理科相關(guān)專業(yè)或計(jì)算機(jī)公共基礎(chǔ)的網(wǎng)頁(yè)開(kāi)發(fā)與設(shè)計(jì)、網(wǎng)頁(yè)制作、Web編程技術(shù)、Web前端開(kāi)發(fā)技術(shù)等課程教學(xué)的教材，也可作為網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者快速入門(mén)的自學(xué)讀物。書(shū)中大量的示例模擬了真實(shí)的網(wǎng)頁(yè)設(shè)計(jì)案例，對(duì)讀者的學(xué)習(xí)有現(xiàn)實(shí)的借鑒意義。4. 作者團(tuán)隊(duì)本書(shū)作者孫甲霞、呂瑩瑩、李學(xué)勇等長(zhǎng)期從事網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)工作。孫甲霞編寫(xiě)第1～3章，呂瑩瑩編寫(xiě)第4～7章，金松林編寫(xiě)第8～10章，李學(xué)勇編寫(xiě)第11～13章，另外，在本書(shū)的編寫(xiě)過(guò)程中，牛燕尾在素材的整理等工作中也付出了辛勤的勞動(dòng)，才能使此書(shū)和讀者見(jiàn)面。 在本書(shū)的編寫(xiě)過(guò)程中，我們力求精益求精，但由于水平有限，書(shū)中難免有不足之處，懇請(qǐng)讀者諒解。讀者如果遇到問(wèn)題或有意見(jiàn)和建議，敬請(qǐng)與我們聯(lián)系，我們將全力提供幫助。
編者2017年1月
目錄
第1章Internet與Web基礎(chǔ)/1
1.1Internet與萬(wàn)維網(wǎng)1
1.1.1Internet的誕生與發(fā)展2
1.1.2萬(wàn)維網(wǎng)的誕生2
1.2統(tǒng)一資源標(biāo)識(shí)符和域名3
1.2.1統(tǒng)一資源定位符3
1.2.2域名4
1.3瀏覽器與服務(wù)器5
1.3.1B/S模型5
1.4HTML語(yǔ)言與HTML55
1.4.1HTML語(yǔ)言6
1.4.2HTML的最新版本HTML56
1.5Web前端開(kāi)發(fā)相關(guān)技術(shù)9
1.5.1CSS9
1.5.2JavaScript9
1.6Sublime Text簡(jiǎn)介10
1.6.1Sublime Text的安裝10
1.6.2Sublime Text的使用12
1.7本章小結(jié)17
第2章HTML5結(jié)構(gòu)與基礎(chǔ)語(yǔ)法/18
2.1HTML5文檔結(jié)構(gòu)18
2.1.1文檔類型定義19
2.1.2頭部?jī)?nèi)容19
2.1.3主體內(nèi)容20
2.2HTML5基本語(yǔ)法21
2.2.1標(biāo)記語(yǔ)法21
2.2.2屬性語(yǔ)法22
2.3注釋23
2.4編寫(xiě)與命名規(guī)范23
2.4.1編寫(xiě)規(guī)范23
2.4.2命名規(guī)范24
2.5上機(jī)練習(xí)24
2.6本章小結(jié)25
〖1〗HTML5網(wǎng)頁(yè)設(shè)計(jì)教程目錄[3]〖3〗第3章文字與段落/27
3.1文字內(nèi)容27
3.1.1標(biāo)題字27
3.1.2添加空格28
3.1.3添加特殊符號(hào)29
3.1.4注釋標(biāo)記30
3.2文字修飾30
3.2.1粗體、斜體、下畫(huà)線30
3.2.2刪除線31
3.2.3上標(biāo)和下標(biāo)31
3.2.4設(shè)置地址文字32
3.3段落33
3.3.1段落標(biāo)記33
3.3.2換行標(biāo)記34
3.3.3居中標(biāo)記34
3.3.4水平分隔線34
3.3.5預(yù)格式化標(biāo)記35
3.4上機(jī)練習(xí)36
3.5本章小結(jié)37
第4章超鏈接/39
4.1超鏈接簡(jiǎn)介39
4.2創(chuàng)建超鏈接39
4.2.1相對(duì)路徑和絕對(duì)路徑39
4.2.2內(nèi)部鏈接41
4.2.3外部鏈接41
4.3鏈接對(duì)象41
4.3.1文字鏈接41
4.3.2圖片鏈接42
4.3.3書(shū)簽鏈接43
4.3.4電子郵件鏈接46
4.3.5FTP鏈接47
4.3.6下載文件鏈接47
4.4上機(jī)練習(xí)47
4.5本章小結(jié)49
第5章列表/50
5.1列表簡(jiǎn)介50
5.2無(wú)序列表50
5.3有序列表51
5.3.1有序列表及編號(hào)樣式51
5.3.2編號(hào)起始值52
5.3.3列表項(xiàng)編號(hào)52
5.4嵌套列表55
5.5定義列表56
5.6上機(jī)練習(xí)57
5.7本章小結(jié)59
第6章多媒體應(yīng)用/60
6.1圖片60
6.1.1圖片標(biāo)記60
6.1.2指定圖像的高與寬61
6.1.3指定圖像的對(duì)齊方式62
6.2音頻和視頻64
6.2.1視頻文件格式64
6.2.2video標(biāo)簽的屬性64
6.2.3為視頻添加控件和自動(dòng)播放65
6.2.4為視頻指定循環(huán)播放和海報(bào)圖像66
6.2.5阻止視頻預(yù)加載68
6.2.6音頻文件格式68
6.2.7audio標(biāo)簽的屬性70
6.2.8自動(dòng)播放、循環(huán)和載入音頻70
6.2.9使用多種來(lái)源的視頻和備用文本72
6.3本章小結(jié)74
第7章表格/75
7.1表格標(biāo)記75
7.1.1表格標(biāo)題76
7.1.2表格表頭78
7.2表格屬性79
7.2.1設(shè)置表格的邊框?qū)傩?9
7.2.2設(shè)置表格的寬度和高度80
7.2.3設(shè)置表格的背景顏色80
7.2.4設(shè)置表格的背景圖像80
7.2.5設(shè)置表格單元格間距82
7.2.6設(shè)置表格單元格邊距83
7.2.7設(shè)置表格的水平對(duì)齊屬性84
7.3設(shè)置行的屬性86
7.3.1行內(nèi)容水平對(duì)齊86
7.3.2行內(nèi)容垂直對(duì)齊86
7.4設(shè)置單元格的屬性88
7.4.1設(shè)置單元格跨行88
7.4.2設(shè)置單元格跨列89
7.5表格嵌套91
7.6上機(jī)練習(xí)93
第8章表單/95
8.1表單概述95
8.1.1表單的結(jié)構(gòu)95
8.1.2表單的處理96
8.1.3HTML5表單的特性96
8.2表單類型98
8.2.1創(chuàng)建文本框98
8.2.2創(chuàng)建密碼框98
8.2.3創(chuàng)建單選按鈕100
8.2.4創(chuàng)建復(fù)選框101
8.2.5創(chuàng)建提交按鈕和重置按鈕102
8.2.6創(chuàng)建隱藏字段103
8.2.7創(chuàng)建電子郵件框104
8.2.8搜索框105
8.2.9電話框106
8.2.10網(wǎng)址框107
8.2.11數(shù)字框108
8.2.12日歷框109
8.3創(chuàng)建文本區(qū)域110
8.4創(chuàng)建選擇框111
8.5讓訪問(wèn)者上傳文件112
8.6上機(jī)練習(xí)113
8.7本章小結(jié)114
第9章CSS3基礎(chǔ)/115
9.1CSS115
9.1.1CSS簡(jiǎn)介115
9.1.2從CSS到CSS3115
9.1.3CSS3新特性115
9.2樣式表的定義與使用116
9.2.1定義內(nèi)聯(lián)樣式表116
9.2.2定義內(nèi)部樣式表116
9.2.3鏈接外部樣式表117
9.3定義選擇器117
9.3.1按照類型選擇元素117
9.3.2按照類選擇元素118
9.3.3按照ID選擇元素119
9.3.4選擇元素的一部分121
9.3.5偽類選擇器121
9.4文本與排版樣式的使用126
9.4.1長(zhǎng)度、百分比單位126
9.4.2文本樣式屬性127
9.5背景和顏色的使用138
9.5.1設(shè)置顏色的方法138
9.5.2設(shè)置背景顏色140
9.5.3設(shè)置背景圖片141
9.6設(shè)置超鏈接樣式143
9.7盒子概念與使用145
9.7.1盒子的概念145
9.7.2設(shè)置元素外邊界145
9.7.3設(shè)置元素邊框147
9.7.4設(shè)置元素內(nèi)邊界149
9.8列表150
9.9上機(jī)練習(xí)151
9.10本章小結(jié)154
第10章CSS3高級(jí)應(yīng)用/155
10.1div元素155
10.2導(dǎo)航欄設(shè)計(jì)158
10.3動(dòng)畫(huà)設(shè)計(jì)159
10.3.1@keyframes規(guī)則159
10.3.22D變形160
10.3.2平滑過(guò)渡165
10.3.33D動(dòng)畫(huà)167
10.3.4漸變效果171
10.4用戶界面177
10.4.1CSS3調(diào)整尺寸177
10.4.2CSS3方框大小調(diào)整177
10.4.3CSS3外形修飾178
10.5頁(yè)面布局178
10.5.1多欄布局178
10.5.2盒布局179
10.6上機(jī)練習(xí)181
10.7本章小結(jié)183
第11章JavaScript基礎(chǔ)語(yǔ)法/184
11.1JavaScript簡(jiǎn)介184
11.2JavaScript的使用184
11.2.1將JavaScript插入網(wǎng)頁(yè)的方法184
11.2.2JavaScript的位置186
11.3JavaScript變量187
11.3.1變量的類型及聲明187
11.4JavaScript數(shù)據(jù)類型188
11.4.1數(shù)據(jù)類型的相關(guān)內(nèi)容188
11.4.2數(shù)據(jù)類型189
11.5JavaScript運(yùn)算符和表達(dá)式191
11.5.1表達(dá)式191
11.5.2運(yùn)算符192
11.6JavaScript控制語(yǔ)句196
11.7JavaScript對(duì)象和函數(shù)201
11.7.1JavaScript對(duì)象201
11.7.2JavaScript函數(shù)201
11.8JavaScript注釋201
11.9上機(jī)練習(xí)JavaScript綜合實(shí)例202
11.10本章小結(jié)204
第12章JavaScript面向?qū)ο缶幊?205
12.1內(nèi)置對(duì)象205
12.1.1字符串對(duì)象205
12.1.2數(shù)學(xué)對(duì)象207
12.1.3日期對(duì)象207
12.1.4數(shù)組對(duì)象208
12.1.5Boolean對(duì)象209
12.2宿主對(duì)象209
12.2.1DOM對(duì)象的屬性和方法209
12.2.2DOM對(duì)象的操作212
12.2.3window對(duì)象214
12.3常用其他對(duì)象215
12.3.1表單對(duì)象215
12.3.2Image對(duì)象215
12.4事件編程216
12.4.1事件處理216
12.4.2事件驅(qū)動(dòng)217
12.5上機(jī)練習(xí)JavaScript綜合實(shí)例219
12.6本章小結(jié)222
第13章HTML5高級(jí)應(yīng)用/223
13.1使用HTML5繪制圖形223
13.1.1繪制基本圖形224
13.1.2使用moveTo與lineTo繪制直線227
13.1.3使用bezierCurveTo繪制貝塞爾曲線229
13.1.4繪制漸變圖形231
13.1.5繪制平移效果的圖形234
13.1.6繪制縮放效果的圖形235
13.1.7繪制旋轉(zhuǎn)效果的圖形236
13.1.8繪制組合效果的圖形237
13.1.9繪制帶陰影的圖形240
13.1.10使用圖像241
13.2本地存儲(chǔ)243
13.2.1Web存儲(chǔ)243
13.2.2使用本地?cái)?shù)據(jù)庫(kù)進(jìn)行本地存儲(chǔ)245
13.3離線緩存248
13.3.1建立一個(gè)應(yīng)用緩存248
13.3.2配置manifest文件249
13.3.3更新緩存250
13.4地理位置250
13.4.1地理位置元素的基礎(chǔ)知識(shí)250
13.5本章小結(jié)253
書(shū)單推薦
