本書定位于零基礎(chǔ)讀者，較為詳細(xì)地講述了網(wǎng)頁設(shè)計與制作的相關(guān)方法和技巧。全書理論與案例相結(jié)合，結(jié)構(gòu)清晰，內(nèi)容講解循序漸進(jìn)、由淺入深，并注意各個章節(jié)內(nèi)容與案例之間的呼應(yīng)和對照。全書共10章，內(nèi)容包括HTML5入門、HTML5的常用標(biāo)簽、HTML5中的對象、JavaScript基礎(chǔ)、CSS3基礎(chǔ)、HTML5頁面加載、JavaScript高級應(yīng)用、使用前端框架以及兩個綜合實(shí)訓(xùn)，分別是HTML5掃雷游戲和開發(fā)通過二維碼傳輸文件的應(yīng)用。
本書可作為高等院校計算機(jī)、數(shù)字媒體技術(shù)、網(wǎng)絡(luò)與新媒體、電子商務(wù)等專業(yè)相關(guān)課程的教材，還可作為相關(guān)行業(yè)從業(yè)人員的參考書。
1.全新的緊密貼合前言標(biāo)準(zhǔn)的網(wǎng)頁開發(fā)語言
2.緊密貼合行業(yè)應(yīng)用的實(shí)踐類教材
3.微課版教材，重點(diǎn)難點(diǎn)操作微課視頻講解
4.豐富配套資源，額外提供模擬考試上機(jī)編程題、HTML5經(jīng)典模板素材、HTML5語法屬性速查表
歐陽榮華，副教授，會計師，學(xué)院副院長，贛州農(nóng)業(yè)學(xué)校副校長，贛州市委統(tǒng)戰(zhàn)部公布贛州市同心圓智庫第三屆專家組成員，獨(dú)著或第一作者發(fā)表論文十余篇；參編教材兩部；近年主持課證融通教學(xué)模式的研究等江西省教改課題研究多項(xiàng)；指導(dǎo)學(xué)生參加各項(xiàng)技能競賽以及“挑戰(zhàn)杯”大學(xué)生創(chuàng)業(yè)大賽成績良好，研究方向：電子商務(wù)、物流管理、網(wǎng)頁設(shè)計與制作。
第 1章 HTML5入門
1.1 HTML概述 1
1.1.1 HTML簡介 1
1.1.2 HTML的發(fā)展 2
1.1.3 HTML5與CSS3 3
1.1.4 HTML5與JavaScript 3
1.1.5 HTML5標(biāo)準(zhǔn)和文檔 4
1.2 搭建HTML5開發(fā)環(huán)境 4
1.2.1 安裝瀏覽器 4
1.2.2 瀏覽器的配置 4
1.2.3 安裝集成開發(fā)環(huán)境 6
1.2.4 安裝文件傳輸客戶端和版本控制工具 6
1.2.5 HTML5調(diào)試工具 7
1.3 第 一個HTML5頁面 7
1.3.1 HTML5文檔結(jié)構(gòu) 7
1.3.2 打開HTML5頁面 8
1.3.3 查看HTML5頁面源代碼 9
1.4 通過網(wǎng)絡(luò)訪問HTML5頁面 9
1.4.1 瀏覽器如何發(fā)送和處理請求 9
1.4.2 搭建本地HTTP服務(wù)器 10
1.4.3 訪問本地HTTP服務(wù)器上的頁面 10
1.5 小結(jié) 10
1.6 課堂實(shí)戰(zhàn)——使用HTML5創(chuàng)建自己的簡歷 11
1.6.1 創(chuàng)建文檔 11
1.6.2 章節(jié)標(biāo)題 11
1.6.3 段落 11
1.6.4 排版 12
1.7 課堂實(shí)戰(zhàn)——在互聯(lián)網(wǎng)上發(fā)布自己的頁面 13
1.7.1 注冊GitHub或Gitee賬戶 13
1.7.2 創(chuàng)建代碼倉庫 14
1.7.3 推送本地代碼倉庫內(nèi)容到在線代碼倉庫 15
1.7.4 啟動靜態(tài)網(wǎng)站服務(wù) 15
課后習(xí)題 15
第 2章 HTML5的常用標(biāo)簽
2.1 HTML5中的標(biāo)簽 17
2.1.1 標(biāo)簽概述 17
2.1.2 標(biāo)簽分類 18
2.1.3 文檔級標(biāo)簽 18
2.1.4 內(nèi)容級標(biāo)簽 19
2.1.5 文本級標(biāo)簽 19
2.1.6 列表和表格標(biāo)簽 19
2.1.7 多媒體標(biāo)簽 20
2.1.8 鏈接標(biāo)簽 21
2.1.9 代碼和資源標(biāo)簽 21
2.1.10 表單標(biāo)簽 22
2.1.11 交互標(biāo)簽 23
2.2 HTML5新增標(biāo)簽類型 24
2.2.1 HTML5的理念 25
2.2.2 內(nèi)容結(jié)構(gòu)標(biāo)簽 26
2.2.3 多媒體和交互標(biāo)簽 26
2.3 HTML5的標(biāo)簽屬性 26
2.3.1 全局屬性 27
2.3.2 尺寸相關(guān)屬性 27
2.3.3 表單的屬性 27
2.3.4 事件處理程序?qū)傩浴?8
2.4 HTML5標(biāo)簽與元素 28
2.4.1 標(biāo)簽的渲染 28
2.4.2 查看頁面元素 29
2.4.3 動態(tài)修改HTML5文檔 29
2.5 HTML5代碼嵌入 30
2.5.1 JavaScript代碼嵌入 30
2.5.2 CSS代碼嵌入 30
2.6 小結(jié) 31
2.7 課堂實(shí)戰(zhàn)——制作HTML5相冊 31
2.7.1 頁面布局 31
2.7.2 使用
![]()
標(biāo)簽顯示圖片 32
2.7.3 單擊查看原圖 33
課后習(xí)題 33
第3章 HTML5中的對象
3.1 DOM入門 35
3.1.1 DOM的概念 35
3.1.2 通過DOM訪問元素 36
3.1.3 通過HTML選擇器訪問元素 36
3.2 window對象 37
3.2.1 通過window對象獲取瀏覽器窗口大小 37
3.2.2 通過window對象獲取瀏覽器窗口相對位置 38
3.2.3 通過window對象與用戶交互 38
3.2.4 通過window對象滾動到指定位置 39
3.2.5 通過window對象打開和關(guān)閉瀏覽器窗口 40
3.2.6 通過window對象實(shí)現(xiàn)Base64編碼解碼 40
3.2.7 window對象的子對象 40
3.3 document對象 41
3.3.1 document對象的屬性 41
3.3.2 通過document對象選擇元素 41
3.3.3 選擇元素 42
3.3.4 通過createElement和append修改頁面 42
3.4 console對象 42
3.4.1 通過console輸出日志 43
3.4.2 通過console調(diào)試 43
3.5 location對象 43
3.5.1 通過location對象跳轉(zhuǎn)頁面 43
3.5.2 通過location對象讀取頁面地址 44
3.5.3 通過location對象獲取URL參數(shù) 44
3.6 navigator對象 44
3.6.1 通過navigator對象獲取瀏覽器信息 44
3.6.2 navigator對象的應(yīng)用 45
3.7 小結(jié) 45
3.8 課堂實(shí)戰(zhàn)——開發(fā)顯示瀏覽器信息的HTML5程序 45
3.8.1 背景介紹 45
3.8.2 獲取信息 45
3.8.3 顯示信息 46
3.9 課堂實(shí)戰(zhàn)——2048小游戲：開發(fā)自動適應(yīng)窗口大小的界面 46
3.9.1 游戲背景介紹 46
3.9.2 2048小游戲界面 47
3.9.3 獲取窗口大小判斷窗口比例 47
3.9.4 窗口大小與頁面布局 48
3.9.5 設(shè)置svg元素的寬度、高度與背景 49
3.10 課堂實(shí)戰(zhàn)——2048小游戲：繪制方格 51
3.10.1 繪制方格 51
3.10.2 通過hash參數(shù)實(shí)現(xiàn)方格數(shù)量的修改 52
課后習(xí)題 53
第4章 JavaScript基礎(chǔ)
4.1 JavaScript的發(fā)展 55
4.1.1 JavaScript與Java 55
4.1.2 JavaScript的標(biāo)準(zhǔn) 56
4.1.3 ES6與非瀏覽器環(huán)境 57
4.1.4 JavaScript基本語法 57
4.2 JavaScript變量 58
4.2.1 變量的類型與聲明 58
4.2.2 變量的作用域 60
4.2.3 數(shù)組 60
4.3 運(yùn)算符 62
4.3.1 運(yùn)算符的種類 62
4.3.2 算術(shù)運(yùn)算符 62
4.3.3 邏輯運(yùn)算符 62
4.3.4 關(guān)系運(yùn)算符 62
4.3.5 位運(yùn)算符 63
4.3.6 賦值運(yùn)算符 63
4.3.7 其他運(yùn)算符 63
4.3.8 運(yùn)算符的優(yōu)先級 64
4.4 函數(shù) 66
4.4.1 創(chuàng)建函數(shù) 66
4.4.2 調(diào)用函數(shù) 66
4.4.3 函數(shù)的返回值 67
4.5 流程控制 67
4.5.1 if...else語句 67
4.5.2 switch...case語句 68
4.5.3 循環(huán)語句 69
4.6 內(nèi)置數(shù)據(jù)結(jié)構(gòu) 72
4.6.1 字符串 72
4.6.2 Map 72
4.6.3 Set 73
4.6.4 Date 74
4.6.5 Number 74
4.6.6 正則表達(dá)式 75
4.7 內(nèi)置對象 75
4.7.1 Math對象 75
4.7.2 JSON對象 76
4.7.3 全局函數(shù) 77
4.7.4 Web Storage 77
4.8 小結(jié) 78
4.9 課堂實(shí)戰(zhàn)——開發(fā)HTML5計算器 78
4.9.1 創(chuàng)建計算器界面 78
4.9.2 輸入按鈕事件的處理 80
4.9.3 實(shí)現(xiàn)功能 81
4.10 課堂實(shí)戰(zhàn)——實(shí)現(xiàn)2048小游戲邏輯 84
4.10.1 在方格內(nèi)填入數(shù)字 84
4.10.2 在空白方格中隨機(jī)填入數(shù)字 85
4.10.3 合并數(shù)字操作 87
4.10.4 處理用戶輸入 89
課后習(xí)題 90
第5章 CSS3基礎(chǔ)
5.1 盒模型 92
5.1.1 盒模型概述 92
5.1.2 在瀏覽器中查看盒模型 93
5.2 CSS選擇器 93
5.2.1 ID選擇器 93
5.2.2 類選擇器 94
5.2.3 標(biāo)簽名選擇器 94
5.2.4 屬性選擇器 94
5.2.5 組合選擇器 95
5.3 邊距與邊框 97
5.3.1 通過margin設(shè)置外邊距 97
5.3.2 通過padding設(shè)置內(nèi)邊距 98
5.3.3 通過border設(shè)置邊框 99
5.4 元素尺寸 99
5.4.1 原始尺寸 99
5.4.2 固定尺寸 100
5.4.3 適應(yīng)元素內(nèi)容 101
5.4.4 繼承父元素 101
5.5 定位方式 102
5.5.1 相對定位 102
5.5.2 絕對定位 102
5.5.3 固定定位 103
5.6 小結(jié) 103
5.7 課堂實(shí)戰(zhàn)——使用CSS3制作動態(tài)導(dǎo)航欄 103
5.7.1 靜態(tài)導(dǎo)航欄 103
5.7.2 使用CSS3美化導(dǎo)航欄 104
5.7.3 使用CSS3實(shí)現(xiàn)動態(tài)效果 105
課后習(xí)題 107
第6章 HTML5頁面加載
6.1 HTML5頁面加載過程 108
6.1.1 頁面加載過程概述 108
6.1.2 請求資源 108
6.1.3 加載過程耗時分析 109
6.2 瀏覽器緩存 110
6.2.1 瀏覽器緩存的作用 110
6.2.2 避免瀏覽器緩存的問題 111
6.3 動態(tài)加載 111
6.3.1 AJAX 112
6.3.2 使用fetch和服務(wù)器通信 113
6.3.3 根據(jù)滾動條的位置觸發(fā)動態(tài)加載 113
6.3.4 根據(jù)時間觸發(fā)動態(tài)加載 115
6.4 使用JavaScript監(jiān)控頁面加載和運(yùn)行情況 115
6.4.1 頁面加載過程中可能遇到的問題 115
6.4.2 頁面加載過程中觸發(fā)的事件 116
6.4.3 獲取頁面加載時間 116
6.4.4 捕獲運(yùn)行異�！�117
6.5 小結(jié) 118
6.6 課堂實(shí)戰(zhàn)——動態(tài)加載HTML5相冊 118
6.6.1 使用JavaScript生成
![]()
標(biāo)簽 118
6.6.2 單擊加載照片 119
課后習(xí)題 121
第7章 JavaScript高級應(yīng)用
7.1 Node.js簡介 122
7.1.1 Node.js的安裝 122
7.1.2 Node.js和瀏覽器中JavaScript運(yùn)行環(huán)境的異同 123
7.1.3 Node.js對HTML5應(yīng)用開發(fā)的作用 124
7.2 使用npm包管理器 124
7.2.1 使用npm命令行工具 124
7.2.2 安裝npm包 124
7.2.3 創(chuàng)建和發(fā)布npm包 125
7.3 JavaScript事件 125
7.3.1 什么是事件 125
7.3.2 JavaScript的事件模型 126
7.3.3 綁定事件 126
7.3.4 獲取事件上下文 127
7.3.5 阻止事件默認(rèn)行為 127
7.3.6 事件冒泡 128
7.4 JavaScript中的同步和異步 129
7.4.1 同步 129
7.4.2 異步 130
7.4.3 同步和異步結(jié)合 131
7.4.4 回調(diào) 132
7.4.5 Promise對象 132
7.5 小結(jié) 133
7.6 課堂實(shí)戰(zhàn)——生成二維碼的HTML5應(yīng)用 134
7.6.1 創(chuàng)建npm包和安裝webpack 134
7.6.2 安裝和使用qrcode包 135
7.6.3 輸出生產(chǎn)版本的前端代碼 136
課后習(xí)題 136
第8章 使用前端框架
8.1 使用Bootstrap 138
8.1.1 Bootstrap概述 138
8.1.2 布局 140
8.1.3 導(dǎo)航欄 141
8.1.4 其他常用組件 143
8.2 使用ECharts 144
8.2.1 ECharts概述 144
8.2.2 常用二維圖表 146
8.2.3 餅圖 148
8.2.4 關(guān)系圖 150
8.2.5 地圖數(shù)據(jù)展示 152
8.3 使用Vue 154
8.3.1 Vue概述 154
8.3.2 Vite簡介 155
8.3.3 組件 156
8.3.4 輸出內(nèi)容 156
8.3.5 屬性綁定和事件綁定 157
8.3.6 條件渲染和列表渲染 157
8.3.7 表單輸入綁定 158
8.4 小結(jié) 159
8.5 課堂實(shí)戰(zhàn)——HTML5英漢詞典 159
8.5.1 準(zhǔn)備詞典數(shù)據(jù) 159
8.5.2 創(chuàng)建項(xiàng)目 159
8.5.3 獲取詞典數(shù)據(jù) 160
8.5.4 實(shí)現(xiàn)查詢邏輯 160
8.5.5 實(shí)現(xiàn)查詢中文和英文單詞模糊匹配 161
課后習(xí)題 163
第9章 綜合實(shí)訓(xùn)——HTML5掃雷游戲
9.1 掃雷游戲說明 164
9.1.1 游戲界面呈現(xiàn) 164
9.1.2 游戲基本操作 165
9.1.3 游戲高級操作 165
9.1.4 游戲信息顯示 165
9.1.5 游戲過關(guān)條件 165
9.2 繪制游戲界面 165
9.2.1 繪制背景和方格 166
9.2.2 繪制單擊后的背景 166
9.2.3 繪制地雷、旗子和數(shù)字 167
9.3 記錄游戲狀態(tài) 168
9.3.1 設(shè)定地雷位置 168
9.3.2 計算提示數(shù)字 169
9.3.3 記錄方格狀態(tài) 169
9.4 處理玩家操作 169
9.4.1 處理單擊事件 169
9.4.2 處理右擊事件 171
9.4.3 判斷是否過關(guān) 172
9.4.4 過關(guān)后禁止操作 173
9.5 使用類組織代碼 173
9.5.1 類的構(gòu)造函數(shù) 173
9.5.2 事件處理函數(shù) 174
9.5.3 確保第 一次不會單擊地雷 174
9.6 小結(jié) 175
課后習(xí)題 175
第 10章 綜合實(shí)訓(xùn)——開發(fā)通過二維碼傳輸文件的應(yīng)用
10.1 使用QR Code編碼數(shù)據(jù) 176
10.1.1 QR Code簡介 176
10.1.2 二進(jìn)制數(shù)據(jù) 177
10.1.3 使用JavaScript處理二進(jìn)制數(shù)據(jù) 177
10.2 在HTML5應(yīng)用中打開和讀取文件 178
10.2.1 使用
標(biāo)簽打開文件 178
10.2.2 以Base64格式讀取文件 178
10.3 切塊傳輸 179
10.3.1 數(shù)據(jù)切分 179
10.3.2 選擇要傳輸?shù)奈募?79
10.3.3 生成包二維碼 181
10.3.4 顯示和播放二維碼 181
10.4 掃描二維碼 182
10.4.1 使用HTML5-QRCode庫 183
10.4.2 拼接掃描結(jié)果 183
10.4.3 下載拼接后的文件 184
10.5 小結(jié) 185
課后習(xí)題 185
書單推薦
