## 章名目錄 【第 一篇】 基礎(chǔ)篇 第 1章 Web前端開(kāi)發(fā)基礎(chǔ)知識(shí) 第 2章 HTML5語(yǔ)言基礎(chǔ) 第3章 CSS語(yǔ)言基礎(chǔ) 第4章 CSS3選擇器 【第二篇】 樣式與布局篇 第5章 用CSS設(shè)置文本樣式 第6章 用CSS設(shè)置圖片效果 第7章 盒子模型 第8章 用CSS設(shè)置常用元素樣式 第9章 經(jīng)典DIV+CSS網(wǎng)頁(yè)布局方法 【第三篇】 JavaScript開(kāi)發(fā)篇 第 10章 JavaScript基礎(chǔ) 第 11章 程序控制流與函數(shù) 第 12章 JavaScript中的對(duì)象 第 13章 以集合方式處理數(shù)據(jù) 第 14章 DOM ## 詳細(xì)目錄 【第 一篇】 基礎(chǔ)篇 第 1章 Web前端開(kāi)發(fā)基礎(chǔ)知識(shí) 1.1 基礎(chǔ)概念 02 1.2 網(wǎng)頁(yè)與HTML語(yǔ)言 04 1.3 Web標(biāo)準(zhǔn)：結(jié)構(gòu)、表現(xiàn)與行為 04 1.3.1 標(biāo)準(zhǔn)的重要性 05 1.3.2 “Web標(biāo)準(zhǔn)”概述 05 1.4 初步理解網(wǎng)站開(kāi)發(fā)的過(guò)程 07 1.4.1 基本任務(wù)與角色 07 1.4.2 明確網(wǎng)站定位 08 1.4.3 收集信息和素材 08 1.4.4 策劃?rùn)谀績(jī)?nèi)容 08 1.4.5 設(shè)計(jì)頁(yè)面方案 09 1.4.6 制作頁(yè)面 09 1.4.7 實(shí)現(xiàn)后臺(tái)功能 09 1.4.8 整合與測(cè)試網(wǎng)站 09 1.4.9 頁(yè)面設(shè)計(jì)相關(guān)技術(shù)的基礎(chǔ)知識(shí) 10 本章小結(jié) 11 習(xí)題1 12 第 2章 HTML5語(yǔ)言基礎(chǔ) 2.1 HTML5基本知識(shí) 13 2.1.1 HTML文件結(jié)構(gòu) 14 2.1.2 簡(jiǎn)單的HTML案例 15 2.1.3 網(wǎng)頁(yè)源文件的獲取 19 2.2 實(shí)例：利用 VS Code 快速建立基本文檔 21 2.2.1 創(chuàng)建新的空白文檔 21 2.2.2 編寫(xiě)基礎(chǔ)的HTML 21 2.3 文本標(biāo)記 22 2.3.1 實(shí)現(xiàn)段落與段內(nèi)換行（p和br） 22 2.3.2 設(shè)置標(biāo)題（h1～h6） 25 2.3.3 使文字水平居中（center） 25 2.3.4 設(shè)置文字段落的縮進(jìn)（blockquote） 26 2.4 HTML標(biāo)記與HTML屬性 27 2.4.1 用align屬性控制段落的水平位置 28 2.4.2 用bgcolor屬性設(shè)置背景顏色 29 2.4.3 設(shè)置文字的特殊樣式 30 2.4.4 設(shè)置文字的大小和顏色（font） 31 2.4.5 網(wǎng)頁(yè)中的特殊文字符號(hào) 32 2.5 在網(wǎng)頁(yè)中使用圖片（img） 34 2.5.1 網(wǎng)頁(yè)中的圖片格式 34 2.5.2 一個(gè)簡(jiǎn)單的插入了圖片的網(wǎng)頁(yè) 34 2.5.3 使用路徑 35 2.5.4 用alt屬性為圖片設(shè)置替換文本 38 2.6 再談HTML5 39 2.6.1 追根溯源 39 2.6.2 HTML5的優(yōu)勢(shì)與特點(diǎn) 40 2.6.3 HTML5的新增標(biāo)記 41 2.7 實(shí)例：創(chuàng)建一個(gè)簡(jiǎn)單的網(wǎng)頁(yè) 42 本章小結(jié) 44 習(xí)題2 44 第3章 CSS語(yǔ)言基礎(chǔ) 3.1 入門(mén)知識(shí) 46 3.1.1 CSS標(biāo)準(zhǔn) 47 3.1.2 傳統(tǒng)HTML的缺點(diǎn) 47 3.1.3 CSS的引入 48 3.1.4 如何編寫(xiě)CSS 50 3.2 理解CSS規(guī)則 51 3.3 基本CSS選擇器 52 3.3.1 標(biāo)記選擇器 52 3.3.2 類(lèi)別選擇器 53 3.3.3 ID選擇器 56 3.4 在HTML中使用CSS的方法 57 3.4.1 行內(nèi)樣式 58 3.4.2 內(nèi)嵌式 58 3.4.3 鏈接式 59 3.4.4 導(dǎo)入樣式 60 3.4.5 各種方法的優(yōu)先級(jí)問(wèn)題 62 本章小結(jié) 65 習(xí)題3 65 第4章 CSS3選擇器 4.1 理解復(fù)合選擇器 66 4.1.1 交集選擇器 67 4.1.2 并集選擇器 68 4.1.3 后代選擇器 70 4.2 CSS的繼承和層疊特性 72 4.2.1 繼承關(guān)系 73 4.2.2 CSS繼承的運(yùn)用 74 4.2.3 CSS的層疊特性 77 4.3 關(guān)系選擇器 79 4.3.1 后代選擇器 80 4.3.2 子元素選擇器 80 4.3.3 相鄰兄弟選擇器 81 4.3.4 相鄰兄弟組選擇器 81 4.4 屬性選擇器 82 4.4.1 “屬性存在”選擇器 83 4.4.2 “屬性等于”選擇器 83 4.4.3 “屬性包含”選擇器 84 4.5 結(jié)構(gòu)偽類(lèi)選擇器 85 4.6 偽元素選擇器 86 本章小結(jié) 88 習(xí)題4 88 【第二篇】 樣式與布局篇 第5章 用CSS設(shè)置文本樣式 5.1 長(zhǎng)度單位 90 5.1.1 相對(duì)類(lèi)型 91 5.1.2 絕對(duì)類(lèi)型 91 5.2 顏色定義 92 5.3 實(shí)例：通過(guò)文字樣式美化一個(gè)頁(yè)面 93 5.3.1 準(zhǔn)備頁(yè)面 93 5.3.2 設(shè)置文字的字體 93 5.3.3 設(shè)置文字的傾斜效果 94 5.3.4 設(shè)置文字的加粗效果 96 5.3.5 英文字母大小寫(xiě)轉(zhuǎn)換 96 5.3.6 控制文字的大小 97 5.3.7 文字的裝飾效果 99 5.4 實(shí)例：通過(guò)段落樣式美化頁(yè)面 100 5.4.1 設(shè)置段落首行縮進(jìn) 100 5.4.2 設(shè)置字詞間距 101 5.4.3 設(shè)置段落內(nèi)部的文字行高 102 5.4.4 設(shè)置段落之間的距離 103 5.4.5 控制文本的水平位置 104 5.4.6 設(shè)置文字及其背景色 105 5.4.7 設(shè)置文字的特效 105 本章小結(jié) 106 習(xí)題5 107 第6章 用CSS設(shè)置圖片效果 6.1 設(shè)置圖片邊框 108 6.1.1 基本屬性 109 6.1.2 為不同的邊框分別設(shè)置樣式 110 6.2 圖片縮放 112 6.3 圖文混排 113 6.3.1 文字環(huán)繞 113 6.3.2 設(shè)置圖片與文字的間距 114 6.4 實(shí)例：八大行星科普網(wǎng)頁(yè) 115 6.5 設(shè)置圖片與文字的對(duì)齊方式 118 6.5.1 橫向?qū)�齊 118 6.5.2 縱向?qū)�齊 119 本章小結(jié) 120 習(xí)題6 121 第7章 盒子模型 7.1 “盒子”與“模型”的概念探究 123 7.2 邊框（border） 124 7.2.1 設(shè)置邊框樣式（border-style） 125 7.2.2 屬性值的簡(jiǎn)寫(xiě)形式 126 7.3 設(shè)置內(nèi)邊距（padding） 128 7.4 設(shè)置外邊距（margin） 129 7.5 盒子之間的關(guān)系 130 7.5.1 HTML與DOM 130 7.5.2 標(biāo)準(zhǔn)文檔流 133 7.5.3 div標(biāo)記與span標(biāo)記 135 7.6 盒子在標(biāo)準(zhǔn)流中的定位原則 137 7.6.1 行內(nèi)元素之間的水平margin 138 7.6.2 塊級(jí)元素之間的豎直margin 139 7.6.3 嵌套盒子之間的margin 140 7.6.4 margin屬性可以設(shè)置為負(fù)數(shù) 141 7.7 實(shí)例：盒子模型計(jì)算思考題 142 7.8 盒子模型相關(guān)的常用樣式 145 7.8.1 背景 145 7.8.2 圓角 152 7.8.3 陰影 154 7.8.4 漸變 155 本章小結(jié) 158 習(xí)題7 158 第8章 用CSS設(shè)置常用元素樣式 8.1 設(shè)置鏈接與導(dǎo)航菜單 160 8.1.1 超鏈接標(biāo)記 160 8.1.2 豐富的超鏈接特效 162 8.1.3 控制鼠標(biāo)指針 165 8.1.4 設(shè)置項(xiàng)目列表樣式 166 8.1.5 實(shí)例：創(chuàng)建簡(jiǎn)單的導(dǎo)航菜單 168 8.2 設(shè)置表格樣式 171 8.2.1 表格中的標(biāo)記 171 8.2.2 設(shè)置表格的邊框 173 8.2.3 確定表格的寬度 174 8.2.4 合并單元格 174 8.2.5 其他與表格相關(guān)的標(biāo)記 177 8.2.6 實(shí)例：美化表格 178 8.3 設(shè)置表單樣式 182 8.3.1 表單的用途和原理 182 8.3.2 表單輸入類(lèi)型 183 8.3.3 實(shí)例：美化表單 188 本章小結(jié) 190 習(xí)題8 190 第9章 經(jīng)典DIV&CSS網(wǎng)頁(yè)布局方法 9.1 向報(bào)紙學(xué)習(xí)排版思想 193 9.2 CSS排版觀念 195 9.2.1 兩列布局 195 9.2.2 三列布局 195 9.2.3 多列布局 196 9.3 元素的浮動(dòng) 197 9.3.1 浮動(dòng)的方式 198 9.3.2 使用clear屬性清除浮動(dòng)的影響 201 9.3.3 擴(kuò)展盒子的高度 202 9.4 元素的定位 204 9.4.1 靜態(tài)定位（static） 204 9.4.2 相對(duì)定位（relative） 205 9.4.3 絕對(duì)定位（absolute） 208 9.4.4 固定定位（fixed） 210 9.5 z-index空間位置 210 9.6 經(jīng)典兩列布局 211 9.6.1 準(zhǔn)備工作 211 9.6.2 絕對(duì)定位法 214 9.6.3 浮動(dòng)定位法 216 9.7 Grid和Flexbox布局 218 本章小結(jié) 219 習(xí)題9 219 【第三篇】 JavaScript開(kāi)發(fā)篇 第 10章 JavaScript基礎(chǔ) 10.1 JavaScript簡(jiǎn)介 223 10.1.1 JavaScript的起源、發(fā)展與標(biāo)準(zhǔn)化 223 10.1.2 JavaScript的組成 224 10.2 JavaScript的基本語(yǔ)法 226 10.3 使用VS Code編寫(xiě)第 一個(gè)包含JavaScript的頁(yè)面 227 10.3.1 創(chuàng)建基礎(chǔ)的HTML文檔 227 10.3.2 編寫(xiě)JavaScript 228 10.3.3 在瀏覽器中查看與調(diào)試 229 10.4 關(guān)鍵字與保留字 230 10.5 變量 231 10.6 數(shù)據(jù)類(lèi)型 233 10.6.1 數(shù)值類(lèi)型 233 10.6.2 字符型 234 10.6.3 布爾型 238 10.6.4 類(lèi)型轉(zhuǎn)換 238 10.6.5 數(shù)組 240 本章小結(jié) 244 習(xí)題10 245 第 11章 程序控制流與函數(shù) 11.1 順序結(jié)構(gòu)：賦值語(yǔ)句與表達(dá)式 247 11.2 分支結(jié)構(gòu)：條件語(yǔ)句 247 11.2.1 比較運(yùn)算符 248 11.2.2 邏輯運(yùn)算符 248 11.2.3 if語(yǔ)句 249 11.2.4 switch語(yǔ)句 250 11.3 循環(huán)語(yǔ)句 252 11.3.1 while語(yǔ)句 252 11.3.2 do…while語(yǔ)句 252 11.3.3 for語(yǔ)句 254 11.3.4 break和continue語(yǔ)句 255 11.3.5 實(shí)例：九九乘法表 257 11.3.6 for…of語(yǔ)句 259 11.3.7 for…in語(yǔ)句 259 11.4 函數(shù) 260 11.4.1 定義函數(shù)的基本方法 260 11.4.2 arguments對(duì)象 262 11.4.3 實(shí)例：楊輝三角形 264 11.4.4 變量的作用域 266 11.4.5 函數(shù)作為函數(shù)的參數(shù) 268 11.4.6 箭頭函數(shù) 269 11.5 異常處理 270 本章小結(jié) 273 習(xí)題11 273 第 12章 JavaScript中的對(duì)象 12.1 理解對(duì)象的含義 274 12.1.1 理解常見(jiàn)的“類(lèi)-對(duì)象”結(jié)構(gòu) 275 12.1.2 理解JavaScript中的對(duì)象 276 12.1.3 使用ES6的class語(yǔ)法創(chuàng)建類(lèi)和對(duì)象 277 12.2 時(shí)間日期：Date對(duì)象 279 12.3 數(shù)學(xué)計(jì)算：Math對(duì)象 283 12.4 原始類(lèi)型與裝箱 285 12.4.1 Boolean 286 12.4.2 Number 287 12.4.3 String 288 12.5 BOM對(duì)象 289 12.5.1 window對(duì)象 289 12.5.2 location對(duì)象 292 12.5.3 navigator對(duì)象 293 12.5.4 screen對(duì)象 295 12.5.5 history對(duì)象 295 本章小結(jié) 298 習(xí)題12 298 第 13章 以集合方式處理數(shù)據(jù) 13.1 數(shù)組 300 13.1.1 數(shù)組的基本操作 300 13.1.2 作為不同數(shù)據(jù)結(jié)構(gòu)的數(shù)組 302 13.2 對(duì)象 306 13.3 集合類(lèi)型 307 13.3.1 Map集合 307 13.3.2 Set集合 309 本章小結(jié) 310 習(xí)題13 311 第 14章 DOM 14.1 網(wǎng)頁(yè)中的DOM框架 312 14.2 DOM中的節(jié)點(diǎn) 313 14.2.1 元素節(jié)點(diǎn) 313 14.2.2 文本節(jié)點(diǎn) 314 14.2.3 屬性節(jié)點(diǎn) 314 14.3 通過(guò)JavaScript訪問(wèn)DOM 314 14.3.1 訪問(wèn)節(jié)點(diǎn) 315 14.3.2 檢測(cè)節(jié)點(diǎn)類(lèi)型 317 14.3.3 父子兄關(guān)系 317 14.3.4 節(jié)點(diǎn)屬性 320 14.3.5 創(chuàng)建和操作節(jié)點(diǎn) 321 14.4 DOM與CSS 325 14.4.1 HTML、CSS、JavaScript三位一體 325 14.4.2 className屬性 326 14.5 事件 326 14.5.1 事件與事件流 327 14.5.2 事件監(jiān)聽(tīng) 328 14.5.3 事件對(duì)象 330 本章小結(jié) 331 習(xí)題14 332