階段走進前端之HTML5 CSS3

第1章大前端時代

1.1什麼是大前端

1.2大前端時代帶來的變革和機遇

1.3前端工程師的需求和前景

1.3.1前端工程師崗位要求

1.3.2市場對前端工程師的需求

1.3.3未來前景

1.4Web前端開發工具

1.5瀏覽器工具

第2章HTML5核心技術

2.1HTML初識

2.2HTML基本結構

2.2.1HTML骨架

2.2.2基本語法

2.2.3注釋

2.3HTML常用標簽

2.3.1基礎標簽

2.3.2文本格式化標簽

2.3.3特殊符號

2.3.4圖像標簽

2.3.5路徑和相對路徑

2.3.6超鏈接標簽

2.3.7框架標簽

2.3.8容器標簽

2.4列表

2.4.1無序列表

2.4.2有序列表

2.4.3定義列表

2.4.4綜合實戰

2.5表格

2.5.1表格概述

2.5.2表格標題

2.5.3表格屬性

2.5.4表格行和列的屬性

2.5.5格

2.5.6表格嵌套

2.5.7綜合實戰

2.6表單

2.6.1表單標簽form

2.6.2輸入標簽input

2.6.3標記標簽label

2.6.4多行文本標簽textarea

2.6.5下拉列表標簽select

2.6.6域標簽fieldset

2.6.7綜合實戰

2.素素的區別

第3章HTML5新增標簽和屬性

3.1HTML5表單新增

3.1.1HTML5新增輸入類型

3.1.2HTML素標簽

3.1.3HTML5新增屬性

3.2HTML5新增結構標簽

3.2.1新增文檔結構標簽

3.2.2新增格式標簽

3.3HTML5媒體標簽

3.3.1聲頻

3.3.2視頻

第4章CSS3核心模塊

4.1CSS核心基礎

4.1.1CSS介紹

4.1.2CSS的優勢

4.1.3基本語法

4.1.4CSS引入方式

4.1.5CSS引入方式的優先級

4.1.6開發者工具(Chrome)

4.1.7基礎選擇器

4.1.8復合選擇器

4.1.9偽類選擇器

4.1.10屬性選擇器

4.1.11繼承與層疊

4.1.12DIV CSS布局

4.1.13綜合實戰

4.2CSS美素

4.2.1字體樣式

4.2.2文本樣式

4.2.3顏色

4.2.4背景樣式

4.2.5列表樣式

4.2.6綜合實戰

4.3盒模型

4.3.1什麼是盒模型

4.3.2盒子大小

4.3.3定義邊框border

4.3.4外邊距margin

4.3.5內邊距padding

4.3.6綜合實戰

4.4浮動和定位

4.4.1浮動應用

4.4.2清除浮動

4.4.3display和overflow屬性

4.4.4定位

4.4.5zindex屬性

4.4.6綜合實戰

第5章CSS3新增特性

5.1CSS3邊框與漸變

5.1.1CSS3特效邊框

5.1.2漸變

5.2轉換

5.2.12D轉換

5.2.23D轉換

5.3過渡與動畫

5.3.1過渡

5.3.2動畫

5.4響應式

5.4.1媒體查詢

5.4.2響應式布局

5.4.3多列

5.5CSS3高級技巧

5.5.1字體圖標

5.5.2雪碧圖

5.5.3滑動門

第6章企業級項目： 小米官網（264min）

6.1小米黑色導航條

6.2小米白色導航條

6.3小米輪播圖和滑動門

6.4小米小廣告位

6.5小米閃購

6.6小米手機部分

6.7小米視頻部分

6.8頁腳

第二階段探索JavaScript的奧秘

第7章JavaScript基礎

7.1快速入門

7.1.1JavaScript簡介

7.1.2第1個JavaScript 程序

7.1.3JavaScript語法

7.1.4JavaScript 變量

7.1.5數據類型

7.1.6JavaScript 輸出

7.2運算符

7.2.1算術運算符

7.2.2賦值運算符

7.2.3比較運算符

7.2.4邏輯運算符

7.2運算符

7.2.6運算符的優先級

7.3程序控制語句

7.3.1順序結構語句

7.3.2分支結構語句

7.3.3循環結構語句

7.4函數

7.4.1常用繫統函數

7.4.2自定義函數

7.5對像

7.5.1創建對像

7.5.2對像的使用

7.6內置對像

7.6.1Array

7.6.2Math

7.6.3Date

7.6.4String

第8章JavaScript深入解析

8.1DOM

8.1.1DOM簡介

8.1.2節點

8.1.3節點獲取

8.1.4節點操作

8.1.5DOM CSS

8.2事件處理

8.2.1鼠標事件

8.2.2鍵盤事件

8.2.3窗口事件

8.2.4表單事件

8.3BOM

8.3.1window對像

8.3.2history對像

8.3.3location對像

8.3.4navigator對像

8.3.5screen對像

8.4綜合實戰

第三階段PC端整棧開發

第9章jQuery模塊

9.1初識jQuery

9.2jQuery對像和DOM對像

9.3jQuery 選擇器

9.3.1基本選擇器

9.3.2層次選擇器

9.3.3基本過濾選擇器

9.3.4屬性過濾選擇器

9.3.5表單選擇器

9.4jQuery中的DOM操作

9.4.1樣式操作

9.4.2內容操作

9.4.3節點操作

9.4.4屬性操作

9.4.5節點遍歷

9.5鏈式編程與隱式迭代

9.6事件和動畫

9.6.1頁面載入

9.6.2常用事件

9.6.3事件對像的屬性與方法

9.6.4常用動畫方法

9.6.5自定義動畫方法

9.7原生 Ajax

9.7.1JSON

9.7.2純JS的Ajax請求

9.8jQuery Ajax

9.9jQuery 插件

9.9.1jQuery UI

9.9.2自定義jQuery插件

9.9.3編寫jQuery插件之放大鏡

9.10綜合實戰

第10章Bootstrap模塊

10.1Bootstrap簡介

10.2搭建Bootstrap環境

10.3Bootstrap柵格繫統

10.3.1柵格繫統介紹

10.3.2在Bootstrap中創建柵格

10.3.3響應式列的重置

10.3.4列偏移、排序和嵌套

10.4全局 CSS 樣式

10.4.1排版

10.4.2代碼

10.4.3表格

10.4.4表單

10.4.5按鈕

10.4.6圖片

10.5組件應用

10.5.1字體圖標

10.5.2下拉菜單

10.5.3導航

10.5.4按鈕組

10.6使用Bootstrap JavaScript插件

10.6.1如何使用Bootstrap JavaScript插件

10.6.2動畫過渡(Transition)

10.6.3模態彈出框(Modal)

第11章企業級項目： 藍莓派音樂社區（260min）

11.1XAMPP安裝

11.2藍莓派音樂頁面登錄Ajax請求

11.3藍莓派登錄後臺構建

11.4藍莓派登錄後頁面結構變更

11.5首頁輪播數據構建與Ajax請求

11.6首頁輪播數據頁面加載

11.7藍莓派模態框處理與加載

11.8分頁器原理解析

11.9聊聊模塊瀑布流繪制加載

11.10聲頻播放控制器結構與按鈕邏輯

11.11聲頻按鈕與聲頻播放實現

11.12播放時間變換與進度條改變

第四階段ES6 Node 工程化

第12章ES6 新特性

12.1ES6 簡介

12.2ES6 變量

12.2.1let和const

12.2.2變量的解構賦值

12.3字符串擴展

12.3.1模板字符串

12.3.2標簽模板

12.3.3字符串新增方法

12.4數值的擴展

12.4.1Symbol數據類型

12.4.2Number

12.5函數的擴展

12.6數組的擴展

12.7對像的擴展

12.8Set和Map數據結構

12.9Class基礎語法

12.10Class的繼承

12.11模塊化

第13章Node.js編程模塊

13.1Node.js基礎

13.1.1Node.js優點

13.1.2Node.js安裝

13.1.3全局對像

13.1.4回調函數

13.1.5模塊(CommonJS規範)

13.1.6事件

13.1.7文件讀寫

13.1.8流和管道

13.2Node.js實現Web服務

13.2.1創建第1個應用

13.2.2模塊化組織代碼

13.2.3路由

13.2.4重構路由代碼

13.2.5使用GET和POST發送數據

13.3NPM命令

13.3.1使用NPM命令安裝模塊

13.3.2package.json

13.3.3熱部署

13.4Express框架

13.4.1Express介紹

13.4.2Express環境搭建

13.4.3Express初體驗

13.4.4Express路由

13.4.5GET與POST傳遞參數

13.4.6托管靜態資源

13.4.7Express中間件

第14章前端工程化

14.1Less

14.1.1Less介紹

14.1.2Less環境構建及使用

14.1.3Less語法

14.2Sass

14.3Webpack構建工具

14.3.1Webpack簡介

14.3.2安裝 Webpack

14.3.3Webpack之Loader配置和使用

14.3.4Webpack之Plugin的使用

14.3.5使用DevServer

14.3.6更多配置

14.3.7Webpack和Vue結合使用

第五階段Vue技術棧

第15章Vue知識體繫

15.1Vue簡述及使用

15.1.1什麼是Vue

15.1.2為什麼選擇Vue

15.1.3Vue的3種安裝方式

15.1.4第1個Vue程序

15.2模板語法

15.2.1插值

15.2.2指令

15.2.3過濾器

15.3實例及選項

15.3.1數據選項

15.3.2屬性選項

15.3.3方法選項

15.3.4計算屬性

15.3.5表單控件

15.3.6生命周期

15.4模板渲染

15.4.1條件渲染

15.4.2列表渲染

15.4.3template標簽用法

15.5事件綁定

15.5.1基本用法

15.5.2修飾符

15.6基礎demo案例

15.6.1列表渲染

15.6.2功能實現

15.7自定義指令

15.7.1指令的注冊

15.7.2指令的定義對像

15.7.3指令實例屬性

15.7.4案例： 下拉菜單

15.7.5案例： 相對時間轉換

15.8組件

15.8.1什麼是組件

15.8.2組件的基本使用

15.8.3DOM模板解析說明

15.8.4組件選項

15.8.5組件通信

15.8.6內容分發

15.8.7動態組件

15.8.8綜合案例

15.9過渡與動畫

15.素/組件過渡

15.9.2使用過渡類實現動畫

第16章Vue工程化

16.1VueCLI

16.1.1Node.js

16.1.2NPM

16.1.3基本使用

16.2項目打包與發布

16.2.1使用靜態服務器工具包發布打包

16.2.2使用動態Web服務器(Tomcat)發布打包

16.3Vuedevtools

16.3.1Vuedevtools的安裝

16.3.2Vuedevtools使用

第17章UI組件庫和常用插件

17.1elementui

17.2Vuerouter

17.2.1基本用法

17.2.2跳轉

17.2.3路由嵌套

17.2.4路由參數傳遞

17.3Axios

17.3.1基本使用

17.3.2JSONServer的安裝及使用

17.3.3跨域處理

17.3.4Vue中Axios的封裝

17.4Vuex

17.4.1初識Vuex

17.4.2基本用法

17.4.3模塊組

第18章企業級項目： 部門管理繫統（173min）

18.1技術分析

18.2項目構建

18.2.1前端項目搭建

18.2.2後端項目搭建

18.2.3數據庫設計

18.3查詢數據

18.3.1後端實現

18.3.2前端實現

18.4加載菜單

18.4.1引入elementui

18.4.2加載菜單

18.5帶分頁數據查詢

18.5.1後端接口實現

18.5.2前端實現

18.6部門員工的錄入

18.6.1後端接口實現

18.6.2前端實現

18.7部門數據編輯

18.7.1後端接口實現

18.7.2前端實現

18.8部門數據刪除

18.8.1後端接口實現

18.8.2前端實現

互聯網時代，前端無處不在。本書主要針對想進入前端開發行業及已在前端圈工作想進一步提高技能而繫統地學習前端知識體繫的讀者設置，扎實的理論基礎 豐富的實戰案例 大廠規範 全局架構思維 復雜企業項目，繫統培養大廠P7技術專家和中小廠前端領導者。

前端工程師的成長之路離不開扎實的技能、實踐項目的經驗積累、不斷總結與全新的架構思想。前端技術的研究已是一種趨勢，它已經成形，這也就是這本書真正的意義。項目實戰貫穿全書，幫助前端工程師提升企業級實踐技能。

全書共分為5個階段，共18章。每個階段的連貫性不強，讀者可根據自己的需求有選擇地閱讀。

階段走進前端之HTML5 CSS3(第1~6章)： 內容涉及大前端概述、HTML、CSS、H5、CSS3新特性和小米官網項目。

第二階段探索JavaScript的奧秘(第7、8章)： 內容涉及JavaScript從入門到高級的全面講解。

第三階段PC端整棧開發(第9~11章)： 內容涉及jQuery框架、Bootstrap框架及藍莓派音樂社區項目。

第四階段ES6 Node.js 工程化(第12~14章)： 內容涉及ES6語法、Node.js開發、工程化工具Webpack的使用。

第五階段Vue技術棧(第15~18章)： 內容涉及Vue核心基礎、Vue企業化實戰項目。  

互聯網上不缺學習資料，但是大部分資料不全面、不繫統，往往對初學者不友好，而本書剛好就可以解決這些問題，相信讀者能從書中收獲良多。本書的概貌如下頁圖所示。

針對大前端學習的溫馨提示： 

(1) 前端學習以培養興趣為主，不要過於追求深層理解。

(2) 前端學習不能靠死記硬背，要多編寫代碼、多做項目。

(3) 不要急於求成，踏實積累纔是硬道理。

本書的講解理念如下圖所示。

讀者定位

初、 中級前端開發者，渴望了解前端知識整體脈絡的程序員及希望突破瓶頸進一步提升的工程師。

配套教學資源

(1) 開發參考手冊、面試題。

(2) 一套完整的教學精簡版PPT。

(3) 資料(素材、思維導圖)及源程序。

(4) 3個企業級實戰項目的視頻講解。

本書特色

采用工程化和體繫化的設計思想，以循序漸進和深入淺出的方式繫統地講解前端知識。在重構基礎知識方面，本書將標準規範和實踐代碼相結合。在培養進階技能方面，本書深度剖析了技術背後的原理。書中設計了很多經典綜合實戰案例，不僅能幫助初級開發者夯實基礎，還能為中、高級開發者突破瓶頸提供幫助和啟發。3個企業級項目帶領讀者入門，助力讀者職場晉升； 幫助讀者快速提升技能，勇闖江湖！

(1) 思維導圖引導學習。

(2) 扎實的理論基礎 豐富的實戰案例 大廠規範 全局架構思維 復雜企業項目。

(3) 書中包含了作者大量的實踐經驗，將知識繫統化，濃縮為精華，用通俗易懂的語言直指前端開發者的痛點。

本書勘誤

由於編者水平有限，書中難免存在疏漏，誠懇地希望讀者批評指正，同時也十分歡迎廣大讀者給予寶貴建議。

致謝

感謝清華大學出版社趙佳霓編輯一直以來給予的幫助和支持，並提出很多中肯的建議。同時，還要感謝清華大學出版社的所有編審人員為本書的出版所付出的辛勤勞動。本書的成功出版是大家共同努力的結果，謝謝大家。

編者
2023年1月