1.1講解方法與旅途指南

1.1.1和其他技術書籍相比，本書到底有何不同

1.1.2書籍概覽

1.1.3推薦學習流程

1.1.4旅途指南

1.2HTML5學習的前期準備

1.3認識HTML5

1.3.1HTML5是做什么的

1.3.2HTML5的由來

1.3.3HTML5的基本組成

1.3.4專業化角度認識HTML5

1.3.5容易混淆的概念

1.4了解HTML5行業前景與基本概念

1.4.1一些行業詞匯

1.4.2HTML5的行業并非一勞永逸

1.4.3近幾年來HTML5行業的變化

1.4.4到底是什么決定著薪資

1.4.5是誰決定你的去留

1.5HTML與CSS的學法

1.5.1方法1整體到局部，骨架到血肉

1.5.2方法2類比

1.5.3方法3記憶很重要

1.5.4方法4聚沙成塔

1.5.5方法5循序漸進

1.5.6方法6知識的遷移

1.5.7方法7生活輔助學習

1.5.8方法8實踐出真知

1.6開發工程師與Photoshop

1.6.1圖片切圖

1.6.2認識軟件

1.7切圖與Photoshop相關用法

1.7.1切圖的基本流程

1.7.2打開文件

1.7.3找到切圖目標

1.7.4整理好要處理的圖層

1.7.5新建文件存儲目標圖像

1.7.6在新文件中調整圖像位置

1.7.7修改畫布大小

1.7.8將圖片按照最佳格式類型進行存儲

1.7.9圖片大小處理與壓縮

1.8使用Photoshop獲取圖層信息

1.8.1獲取顏色

1.8.2文字內容與特點

1.8.3撤銷

1.8.4圓角大小的測量

1.8.5陰影的測量

1.8.6將文字處理成圖像

1.8.7Photoshop快捷鍵總結

1.9代碼編輯器

1.9.1SublimeText

1.9.2其他代碼編輯器

1.10瀏覽器調試

1.10.1為何要進行瀏覽器調試

1.10.2瀏覽器調試的基本要求

1.10.3瀏覽器調試方法

第2章HTML5入門

2.1網站開發流程

2.1.1網站開發流程圖

2.1.2網站需求調查階段

2.1.3網站技術分析階段

2.1.4網站頁面策劃階段

2.1.5網站設計開發階段

2.1.6網站測試改進階段

2.1.7前端工程師負責的部分

2.2第一個HTML文件

2.2.1創建基本的網站文件夾

2.2.2創建第一個HTML文件

2.2.3HTML標簽的書寫規則

2.2.4HTML書寫規則的問題區

2.3基本的HTML結構

2.3.1一個HTML文件的基本組成

2.3.2文檔聲明

2.3.3title標題

2.3.4meta元信息

2.3.5HTML文件的內容區

2.3.6HTML注釋

2.3.7網站開發常用標簽

2.3.8基本HTML結構的問題區

第3章整體布局（上）——標簽尺寸處理

3.1整體布局與整體布局中使用的標簽

3.1.1整體布局

3.1.2div元素

3.2什么是CSS

3.2.1沒有CSS時代的網頁

3.2.2什么是CSS

3.3CSS引入方式

3.3.1行內書寫——最簡單的樣式操作方法

3.3.2內部書寫——簡化樣式操作

3.3.3外部引入——控制多頁面樣式

3.3.4CSS三種常見引入方式比較

3.3.5外部引入CSS的擴展知識

3.3.6CSS引入方式的問題區

3.4CSS選擇器

3.4.1生活中的“選擇器”——找人

3.4.2CSS選擇器的基本語法

3.4.3CSS基本選擇器

3.4.4樣式沖突的問題

3.4.5生活中的“優先級”——誰是老大

3.4.6CSS選擇器優先級

3.4.7行內的style屬性

3.4.8選擇器的使用原則

3.4.9CSS選擇器的問題區

3.5CSS編碼規范

3.5.1CSS注釋

3.5.2書寫風格

3.5.3關于類名命名

3.5.4樣式書寫順序

3.5.5CSS編碼規范的問題區

3.6CSS樣式重置

3.6.1什么是樣式重置

3.6.2為何需要樣式重置

3.6.3樣式重置文件

3.7盒模型

3.7.1生活中的“盒模型”——魚缸

3.7.2盒模型基本知識

3.7.3盒模型——width與height屬性

3.7.4盒模型——margin屬性

3.7.5盒模型——padding屬性

3.7.6盒模型——border屬性

3.7.7盒模型的問題區

第4章整體布局（下）——浮動布局

4.1浮動

4.1.1為何要浮動

4.1.2生活中的“浮動”——水槽

4.1.3浮動——float屬性

4.1.4浮動特效分析

4.1.5浮動的問題區

4.2浮動的影響

4.2.1文檔流

4.2.2浮動元素對父級元素高度的影響

4.2.3浮動元素對兄弟級元素布局的影響

4.3清除浮動

4.3.1浮動——clear屬性

4.3.2清除浮動的不同類型

4.3.3為兄弟元素設置clear樣式

4.3.4空標簽清除浮動

4.3.5br標簽清除浮動

4.3.6父元素浮動

4.3.7父元素設置overflow：hidden或auto

4.3.8利用after偽元素清除浮動

4.3.9after偽元素清除浮動的實際用法

4.4關于“清除浮動”的問題區

4.4.1clear：both的兼容問題

4.4.2為父級設置高度是不是清除浮動的方法

4.4.3浮動元素與非浮動元素處于同一行時會出現的問題

4.4.4清除浮動方法的選擇

4.5較為復雜的浮動布局

4.5.1功能需求

4.5.2需求分析

第5章模塊布局（上）——選擇標簽

5.1為何要選擇標簽

5.2開發時可以選用的標簽以及功能

5.2.1h1~h6標題類標簽

5.2.2hr分隔線

5.2.3p與br段落與換行

5.2.4無序列表與有序列表

5.2.5自定義列表

5.2.6行內標簽

5.2.7代碼范例的顯示效果圖

5.3標簽選擇時的影響因素

5.4標簽的默認顯示樣式

5.4.1顯示屬性display

5.4.2根據標簽默認display屬性劃分類別

5.4.3顯示樣式影響的標簽選用

5.4.4display的問題區

5.5標簽的合理嵌套

5.5.1標簽嵌套基本規則

5.5.2錯誤嵌套時的表現情況

5.6SEO搜索引擎優化——標簽語義性

5.6.1為何要談SEO

5.6.2SEO是什么

5.6.3搜索爬蟲工作原理

5.6.4爬蟲抓取的是什么

5.6.5什么樣的網站才能夠被快速收錄

5.6.6針對SEO，前端開發要注意什么

5.6.7SEO中表示強調的標簽

5.6.8關于SEO的問題區

5.7嵌套層數與深度

5.8標簽選擇實戰（1）——確定標簽

5.8.1功能需求

5.8.2提出實現方案

5.8.3標簽選擇思路分析

5.8.4實現方案的對比分析

5.9樣式的可控性

5.9.1原有選擇器對樣式的控制問題

5.9.2加強版選擇器——后代選擇器

5.9.3加強版選擇器——子代選擇器

5.9.4加強版選擇器——群組選擇器

5.9.5加強版選擇器優先級算法

5.9.6關于樣式可控性的問題區

5.10標簽選擇實戰（2）——樣式控制

5.10.1方案1——使用ul無序列表

5.10.2方案2——使用dl自定義列表

5.10.3當前最優方案

第6章模塊布局（下）——可用性與擴展性

6.1a標簽

6.1.1超鏈接

6.1.2超鏈接的屬性

6.1.3錨鏈接

6.1.4超鏈接的基本樣式

6.1.5關于a標簽的問題區

6.2光標樣式

6.2.1光標效果

6.2.2cursor相關屬性

6.2.3關于cursor：hand

6.2.4關于自定義光標樣式的支持程度

6.3標簽選擇實戰（3）——添加鏈接

6.3.1為實例添加a標簽

6.3.2調整可觸區

6.3.3當前方案的具體代碼

6.3.4方案結束了嗎

6.4img標簽的選用

6.4.1img標簽基本語法

6.4.2數據圖與背景圖

6.4.3img問題的規避

6.4.4img中alt與title的區別

6.4.5href與src的區別

6.5后臺維護對前端的影響

6.5.1圖像加載對頁面布局的影響

6.5.2文字超出造成的頁面混亂

6.6網頁中哪里需控制高度或超出隱藏

6.6.1不同頁面的不同需求

6.6.2關于高度設定的基本結論

6.6.3何時考慮超出隱藏

6.6.4關于“高度控制與超出隱藏”的問題區

6.7內容的超出處理——overflow

6.7.1基本語法與功能

6.7.2實現文本超出隱藏

6.7.3實現文本超出顯示為省略號

6.7.4關于overflow的問題區

6.8代碼擴展性——關于margin負值

6.8.1前后臺數據整合方式

6.8.2比數據條數少一個的虛線如何實現

6.8.3特殊情況的類名設置詳析

6.8.4擴展性曾經的救世主——margin負值

6.8.5margin負值的問題區

6.9標簽選擇實戰（4）——完成開發

6.9.1考慮超出和margin負值

6.9.2完整版代碼

6.9.3總結

第7章文本等細節類樣式處理

7.1背景類樣式

7.1.1背景顏色——backgroundcolor屬性

7.1.2背景圖片——backgroundimage屬性

7.1.3背景重復——backgroundrepeat屬性

7.1.4背景定位——backgroundposition屬性

7.1.5背景關聯——backgroundattachment屬性

7.1.6復合寫法——background屬性

7.1.7背景類樣式的相關問題

7.2透明背景

7.2.1opacity與filter

7.2.2rgba控制

7.2.3transparent

7.2.4透明背景的問題區

7.3背景圖合并

7.3.1什么是背景圖合并

7.3.2為何進行背景圖合并

7.3.3背景圖合并的核心技術與操作方法

7.3.4CSSSprite

7.3.5背景圖合并的問題區

7.4段落樣式

7.4.1lineheight

7.4.2textdecoration

7.4.3textindent

7.4.4textalign

7.4.5verticalalign

7.4.6wordspacing與letterspacing

7.4.7wordwrap與wordbreak

7.4.8段落樣式的問題區

7.5字體類樣式

7.5.1color

7.5.2fontfamily

7.5.3fontsize

7.5.4fontstyle

7.5.5fontweight

7.5.6font復合樣式

7.5.7網絡字體

7.5.8字體類樣式的問題區

第8章特殊布局情況——定位布局

8.1定位屬性

8.1.1為何要使用定位

8.1.2生活中的“定位”——便攜貼

8.1.3定位——position屬性

8.1.4定位對文檔流的影響

8.2絕對定位的位置控制

8.2.1設置絕對定位的元素的基本特點

8.2.2定位——left等屬性

8.3層級覆蓋關系

8.3.1定位——zindex屬性

8.3.2多級別的層疊關系比較

8.4固定定位

第9章特殊布局情況——界限控制與偽元素的妙用

9.1未設置固定寬高元素的界限控制

9.1.1何處需要考慮界限控制

9.1.2最小高度

9.1.3最小寬度

9.1.4最大寬度與最大高度

9.2偽元素

9.2.1什么是偽元素

9.2.2偽元素的種類

9.2.3偽元素的書寫格式

9.2.4after與before偽元素

9.2.5讓偽元素按照塊元素特性渲染

9.2.6偽元素實現背景圖

9.2.7偽元素的問題區

第10章表格

10.1table布局的興衰

10.1.1表格的發展歷史

10.1.2表格的應用

10.2table各類元素以及用法

10.2.1基本標簽

10.2.2表格的嵌套規則

10.2.3行列合并控制

10.2.4關于表格元素的問題區

10.3基本數據表的開發與制作

10.3.1基本數據表的功能需求

10.3.2基本數據表的實現思路

10.3.3基本數據表的需求分析

10.3.4基本數據表的實現

10.4table元素的屬性

10.4.1table的常見屬性

10.4.2width與height——寬度與高度

10.4.3border——表格邊框設置

10.4.4cellspacing與cellpadding——空白區設置

10.5表格特有的CSS屬性

10.5.1合并單元格之間的邊框——bordercollapse

10.5.2邊框之間的空隙——borderspacing

10.5.3空白單元格——emptycells

10.6表格屬性與樣式選用原則

第11章表單

11.1認識表單

11.1.1表單的作用——實現對話

11.1.2向服務端發送數據的場景示例

11.1.3表單的基本結構

11.1.4各類表單元素通用屬性

11.2表單常用元素

11.2.1form

11.2.2input

11.2.3label

11.2.4select、option與optgroup

11.2.5textarea

11.2.6button

11.2.7fieldset與legend元素

11.2.8表單元素的問題區

11.3表單嵌套規則

11.4表單元素的特殊狀態屬性

11.5屬性選擇器

11.5.1屬性選擇器的應用場景

11.5.2基本的屬性選擇器

11.5.3模糊類屬性選擇器

11.6表單元素的實際應用

11.6.1去掉表單元素外部的聚焦線

11.6.2textarea的尺寸控制

11.6.3自定義樣式的表單元素

第12章停下來回頭看路

12.1從〇開始

12.1.1〇是什么

12.1.2最常見的答案

12.1.3讓結果變得更優秀

12.2網狀復習法

12.2.1網狀復習法的特點

12.2.2網狀復習法的實現方式

12.2.3網狀復習法的簡單案例

12.2.4網狀復習HTML與CSS

12.3歸納整理法

12.3.1歸納整理法的特點

12.3.2歸納整理法的實現方式

12.3.3歸納整理復習HTML與CSS

12.4hack技術

12.4.1什么是hack技術

12.4.2常用IEhack

12.4.3IE條件注釋

12.5實現網頁開發之后要考慮的東西

12.6PC端瀏覽器的兼容問題

第13章HTML5新標簽與CSS3基礎

13.1HTML5新增元素

13.1.1新增結構元素及含義

13.1.2使用HTML5新結構元素完成頁面搭建

13.1.3HTML5新元素的問題區

13.2瀏覽器內核

13.2.1瀏覽器主要內核

13.2.2常見瀏覽器內核前綴

13.2.3瀏覽器內核的問題區

13.3CSS3選擇器

13.3.1CSS2.0選擇器回顧

13.3.2CSS3選擇器——通用兄弟選擇器

13.3.3CSS3選擇器——偽類選擇器

13.3.4CSS3選擇器的問題區

13.4CSS3圓角邊框

13.4.1圓角邊框——borderradius

13.4.2圓角邊框效果實例

13.4.3CSS3圓角帶來的變革

13.4.4CSS3圓角邊框的問題區

13.5CSS3文本陰影

13.5.1文本陰影——textshadow

13.5.2文本陰影效果實例

13.5.3文本陰影的問題區

13.6CSS3盒陰影

13.6.1盒陰影——boxshadow

13.6.2盒陰影的效果實例

13.6.3關于盒陰影的問題區

13.7CSS3背景新屬性

13.7.1背景尺寸——backgroundsize

13.7.2背景切割——backgroundclip

13.7.3背景原點——backgroundorigin

13.7.4背景切割與背景原點的區別

13.8漸變背景

13.8.1什么是漸變

13.8.2漸變的種類

13.8.3如何書寫CSS3漸變

13.9新元素和CSS3基礎屬性為網站帶來了什么

第14章轉戰移動端（上）——百分比與rem

14.1移動端發展

14.1.1智能手機熱潮

14.1.2針對移動端的探索

14.1.3分辨率初變

14.1.4多分辨率的處理

14.1.5移動端的未來

14.1.6移動端發展總結&開發移動端的基本流程

14.2設備調試方法

14.2.1設備調試方法的種類

14.2.2調試的基本原則：多臺真機測試

14.3視口——viewport

14.3.1視口以及常見數值

14.3.2調整視口大小——命令類

14.3.3viewport元標簽以及屬性

14.3.4視口調整的各種命令

14.3.5對待視口的基本原則

14.4當盒模型與行高遇到百分比

14.4.1盒模型單位如何選擇

14.4.2margin和padding使用百分比作為單位

14.4.3height使用百分比作為單位

14.4.4border使用百分比作為單位

14.4.5lineheight使用百分比作為單位

14.5CSS3新增度量單位

14.5.1新度量單位

14.5.2rem與em

14.5.3vw與vh

14.6字體處理不容小覷

14.6.1美工圖設計的基準字體

14.6.2移動端網絡字體使用更加頻繁

14.7盒陰影的妙用

14.8背景圖的處理

14.9使用JS配合rem讓頁面適應各個分辨率

14.9.1Step1查看設計圖，確定需要兼容的分辨率

14.9.2Step2調整視口

14.9.3Step3確定設計圖的最小字體

14.9.4Step4按照設計圖的像素進行開發

14.9.5Step5使用百分比和rem替換px

14.9.6Step6使用JS控制基準字體

第15章轉戰移動端（下）——響應式&移動端的探索

15.1響應式布局

15.1.1理解響應式布局

15.1.2響應式布局的優劣勢

15.1.3響應式布局的核心技術

15.2媒體查詢

15.2.1什么是媒體查詢

15.2.2媒體查詢書寫方法

15.2.3常見媒體類型

15.2.4關于媒體的特性

15.3讓移動端開發變得更好——關于高清屏幕

15.3.1高清分辨率

15.3.2此前移動端開發存在的一些不足

15.3.3按照高清分辨率解讀的“想法”

15.3.4flexible.js的用法

15.3.5flexible框架使用的注意事項

15.4讓移動端開發變得更快——固定像素的實現方法

15.4.1MetaHandler.js

15.4.2框架當前還存在的問題

15.5移動端兼容

15.5.1CSS3媒體查詢兼容問題

15.5.2HTML與CSS的基本兼容問題

15.5.3默認樣式處理

第16章CSS3變形與動畫

16.1CSS3二維變形

16.1.1二維變形基本語法

16.1.2具體變形方式語法詳析

16.1.3變形順序對最終結果是否會造成影響

16.2CSS3三維變形

16.2.1如何觸發三維變形

16.2.2Z軸的位置

16.2.3三維變形的變形屬性

16.2.4視角

16.2.5旋轉帶來的問題

16.2.6關于三維變形的應用

16.2.7關于變形的問題區

16.3CSS3過渡

16.3.1過渡的基本屬性

16.3.2過渡的合寫方法transition

16.3.3多屬性過渡時，各個屬性的書寫方法

16.3.4過渡得以實現的必備要素

16.3.5關于過渡的問題區

16.4CSS3動畫

16.4.1幀與關鍵幀

16.4.2CSS3動畫的基本語法

16.4.3animation動畫的基本屬性

16.4.4動畫命令的合寫方法animation

16.4.5動畫與過渡的比較

第17章各章節自評習題集

17.1習題集01

17.1.1習題內容

17.1.2習題答案

17.2習題集02

17.2.1習題內容

17.2.2習題答案

17.3習題集03

17.3.1習題內容

17.3.2習題答案

17.4習題集04

17.4.1習題內容

17.4.2習題答案

17.5習題集05

17.5.1習題內容

17.5.2習題答案

17.6習題集06

17.6.1習題內容

17.6.2習題答案

17.7習題集07

17.7.1習題內容

17.7.2習題答案

17.8習題集08

17.8.1習題內容

17.8.2習題答案

17.9習題集09

17.9.1習題內容

17.9.2習題答案

17.10習題集10

17.10.1習題內容

17.10.2習題答案

17.11習題集11

17.11.1習題內容

17.11.2習題答案

17.12習題集12

17.12.1習題內容

17.12.2習題答案

17.13習題集13

17.13.1習題內容

17.13.2習題答案

17.14習題集14

17.14.1習題內容

17.14.2習題答案

第18章各章節代碼實戰

18.1代碼檢錯——［第2、3章］

18.1.1實戰題目

18.1.2實戰答案

18.2為元素設置盒模型樣式——［第3章］

18.2.1實戰題目

18.2.2實戰答案

18.3使用浮動實現網頁布局——［第4章］

18.3.1實戰題目

18.3.2實戰答案

18.4合理選擇標簽——［第5、6章］

18.4.1實戰題目

18.4.2實戰答案

18.5文本樣式處理——［第7章］

18.5.1實戰題目

18.5.2實戰答案

18.6定位布局——［第8章］

18.6.1實戰題目

18.6.2實戰答案

18.7偽元素的應用——［第9章］

18.7.1實戰題目

18.7.2實戰答案

18.8課程表與表格簡歷制作——［第10章］

18.8.1實戰題目

18.8.2實戰答案

18.9CSS3陰影特效——［第13章］

18.9.1實戰題目

18.9.2實戰答案

18.10響應式布局——［第15章］

18.10.1實戰題目

18.10.2實戰答案

18.11二維三維特效動畫——［第16章］

18.11.1實戰題目

18.11.2實戰答案

第19章網頁案例實戰

19.1PC端網頁開發實戰

19.1.1功能需求

19.1.2整體測繪

19.1.3實現整體布局

19.1.4實現頭部模塊（含LOGO與微信）部分

19.1.5實現導航模塊部分

19.1.6實現內容左側最新文章部分

19.1.7實現內容右側廣告區部分

19.1.8實現tab區域標題部分

19.1.9實現tab區域內容部分

19.1.10實現底部（版權）區域部分

19.1.11實現大圖部分

19.1.12考慮超出隱藏以及光標移入狀態

19.1.13考慮臨界值

19.1.14代碼優化

19.2移動端網頁開發實戰

19.2.1功能需求

19.2.2整體測繪

19.2.3實現整體布局

19.2.4添加JS控制，實現多分辨率自適應

19.2.5實現熱門與推薦部分

19.2.6實現具體文章模塊部分

19.2.7實現頂部區域

19.2.8實現底部版權部分

19.2.9代碼優化

第20章附錄

20.1HTML5發展史

20.1.1萌芽

20.1.2第一次瀏覽器大戰

20.1.3第二次瀏覽器大戰

20.1.4第三次瀏覽器大戰

20.2手機端操作系統發展史

20.2.1諾基亞的世界開始動搖

20.2.2微軟、蘋果、谷歌之戰

20.2.3一代霸主隕落

20.2.4iOS、安卓高奏凱歌

20.2.5蘋果和Adobe

20.3HTML的各種布局

20.3.1表格布局

20.3.2DIV+CSS

20.3.3960柵格

20.3.4經典的三欄布局——雙飛翼

20.3.5瀑布流布局

20.3.6響應式布局

20.3.7單頁面無限滾動

20.3.8移動端的rem自適應布局

20.3.9其他布局以及未來

20.4編輯器插件安裝與應用

20.4.1插件安裝

20.4.2關于Emmet插件的相關配置

20.4.3利用Emmet插件快速編寫HTML代碼

20.5開發需要準備的基本軟件

20.5.1基本軟件列表

20.5.2WAMP軟件的安裝

20.5.3初識多人協同開發用的“版本控制管理工具”

20.6HTML5學習平臺與網站

20.6.1HTML5布局之路——官方平臺

20.6.2其他學習類網站

20.6.3找工作的網站平臺

20.7單詞列表

20.8網頁中部分模塊的CSS命名參考

20.9重置代碼解析

20.9.1重置代碼

20.9.2重置代碼解析

20.9.3在重置文件中添加的語句

20.10開發備忘錄

20.10.1書寫基本的需求分析報告

20.10.2基本的前期準備工作

20.10.3移動端與PC端的特殊性

20.10.4整體開發的基本順序提醒

20.10.5具體開發中的注意事項

20.10.6其他

20.11Iconfont

20.11.1什么是Iconfont

20.11.2Iconfont中圖標的下載

20.11.3Iconfont可能出現的問題以及解決辦法

20.11.4實際開發中Iconfont的用途

參考文獻