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