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