從2009年開始,HTML5逐漸進入人們的視野,2012年,HTML5開發在北京嶄露頭角,隨著2015年微信公眾號的推廣、國家對創業的大力扶持,各類企業對網站以及移動網站的依賴性越來越強,HTML5開發在各個二線城市飛速發展。
通過HTML與CSS進行網頁布局,是實現網站開發的第一步,良好的HTML與CSS有助于我們更好地書寫出企業需要的前端頁面。
本書從實戰角度出發,基于行業特點和要求,將知識按照開發的流程和順序進行拆分,然后逐步實現網頁的開發,伴隨著網頁的實現過程講解相應的知識點,并在適當章節進行總結,以保證在知識、方法和流程得到突出的前提下,讓知識點“網絡化”“體系化”。
適用人群
本書適用于每一個希望自學HTML5的人、擁有一定計算機基礎的初學者、希望學習HTML5的大學生、希望夯實基礎的HTML5開發工程師閱讀。此外,也可以作為計算機相關專業的師生學習用書和培訓機構的教材。
本書結構
本書共由19章以及附錄組成,各章簡介如下。
第1章旅途之前,介紹本書的學習方法與流程、HTML5的基本概念、HTML5行業的前景、在HTML5開發中與切圖相關的工作、Photoshop工具的具體用法、Sublime編輯器的使用方法以及瀏覽器的調試方法。
第2章HTML5入門,講解網站開發的基本流程,探討前端開發工程師在流程中的位置和作用,包括認識并創建HTML文件,HTML結構中的文檔聲明、標題、元信息、注釋、常見的HTML標簽等。
第3章整體布局(上)——標簽尺寸處理,介紹CSS技術,并借助代碼實例探討不同引入方式的優劣勢,介紹ID、類名、標簽名等三種基本選擇器以及它們的使用情景,CSS編碼規范,瀏覽器默認樣式與樣式重置,盒模型的各個屬性。
第4章整體布局(下)——浮動布局,講解各類標簽在布局時存在的不足,引出浮動的基本知識和概念,探討浮動對元素布局的影響,如何清除浮動以及各種清除浮動方法的優劣勢。
第5章模塊布局(上)——選擇標簽,首先介紹在模塊布局當中會使用到的各類標簽,之后探討為何選取標簽,包括在選取標簽時需要考慮的具體因素,標簽的默認樣式、嵌套規則、標簽的語義性、樣式的可控性等。
第6章模塊布局(下)——可用性與擴展性,討論在模塊布局的標簽選擇時要考慮的擴展性和可用性,包括超鏈接a標簽、鼠標樣式的處理、img標簽的選用與處理、超出隱藏設置等。
第7章文本等細節類樣式處理,講解關于具體文本的各類樣式,包括背景樣式、字體樣式、段落樣式、背景圖合并技術以及網絡字體設置的相關知識。
第8章特殊布局情況——定位布局,介紹定位布局這種比較特殊的布局方式,討論元素針對哪個元素進行定位,多個定位元素之間的層疊關系等。
第9章特殊布局情況——界限控制與偽元素的妙用,探討網頁開發中的一些“界限”問題,對于存在界限的布局應當如何實現和處理,此外還介紹了偽元素的知識及應用。
第10章表格,介紹表格布局的興衰、當前開發中表格布局的具體用法、表格包含的各類標簽、表格標簽專有的屬性和樣式。
第11章表單,講解表單的主要功能、基本用法,表單包含的各類常用元素,表單元素的特殊狀態和屬性,此外還介紹了屬性選擇器,討論了表單元素的實際應用。
第12章停下來回頭看路,探討復習的方式方法,介紹網狀復習法與歸納整理法的基本概念,并以實例的方式針對HTML與CSS的PC端開發知識進行整理和歸納。此外,對hack技術以及網頁開發之后的優化方法進行介紹。
第13章HTML5新標簽與CSS3基礎,講解HTML5新增結構元素、瀏覽器內核以及瀏覽器內核前綴、CSS3的新增選擇器、CSS3圓角邊框、CSS3文本陰影、CSS3盒陰影、CSS3背景類樣式等。
第14章轉戰移動端(上)——百分比與rem,探討移動端的發展歷程,并依據移動端的發展,講解設備調試的基本方法,視口viewport,盒模型、行高等屬性設置百分比時存在的問題,CSS3新增的度量單位(rem等)、盒陰影背景尺寸等技術在移動端的應用等。
第15章轉戰移動端(下)——響應式&移動端的探索,介紹響應式布局及媒體查詢的基本知識,討論優化移動端開發的方法與框架,包括flexible、Metahandler。此外,還介紹移動端較為常見的兼容問題。
第16章CSS3變形與動畫,講解CSS3二維變形、CSS3三維變形、CSS3過渡與CSS3動畫,探討二維變形與三維變形在屬性上的區別,過渡與動畫在用法與含義上的區別。
第17章各章節自評習題集,針對第1~16章,出于加強理論知識基礎的考慮,設置了相對應的習題集,主要用于考查理論類知識和比較基礎的小型實戰類知識。
第18章各章節代碼實戰,針對第1~16章的大部分章節,設置了與之相對應的代碼實戰題。
第19章網頁案例實戰,針對第1~16章,設置了兩個較大型的網頁案例,分別是PC端網頁和移動端網頁的實戰開發。
第20章附錄,介紹HTML5的發展史,手機端操作系統發展史,HTML的各種布局,編輯器插件安裝與應用,開發需要準備的基本軟件,HTML5學習平臺與網站,學習HTML5技術涉及的部分單詞,CSS樣式重置代碼解析,開發備忘錄,Iconfont等。
源代碼
在學習本書示例代碼時,可以手工輸入所有完整案例,也可以使用隨書的源代碼文件。本書所有完整案例的源代碼、涉及的一些軟件、文件,均可以在本書的電子資料庫當中下載。
第1章 旅途之前
1.1 講解方法與旅途指南
1.1.1 和其他技術書籍相比,本書到底有何不同
1.1.2 書籍概覽
1.1.3 推薦學習流程
1.1.4 旅途指南
1.2 HTML5學習的前期準備
1.3 認識HTML
1.3.1 HTML5是做什么的
1.3.2 HTML5的由來
1.3.3 HTML5的基本組成
1.3.4 專業化角度認識HTML
1.3.5 容易混淆的概念
1.4 了解HTML5行業前景與基本概念
1.4.1 一些行業詞匯
1.4.2 HTML5的行業并非一勞永逸
1.4.3 近幾年來HTML5行業的變化
1.4.4 到底是什么決定著薪資
1.4.5 是誰決定你的去留
1.5 HTML與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.7 Photoshop快捷鍵總結
1.9 代碼編輯器
1.9.1 Sublime Text
1.9.2 其他代碼編輯器
1.1 0瀏覽器調試
1.1 0.1 為何要進行瀏覽器調試
1.1 0.2 瀏覽器調試的基本要求
1.1 0.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.3 HTML標簽的書寫規則
2.2.4 HTML書寫規則的問題區
2.3 基本的HTML結構
2.3.1 一個HTML文件的基本組成
2.3.2 文檔聲明
2.3.3 title標題
2.3.4 meta元信息
2.3.5 HTML文件的內容區
2.3.6 HTML注釋
2.3.7 網站開發常用標簽
2.3.8 基本HTML結構的問題區
第3章 整體布局(上)——標簽尺寸處理
3.1 整體布局與整體布局中使用的標簽
3.1.1 整體布局
3.1.2 div元素
3.2 什么是CSS
3.2.1 沒有CSS時代的網頁
3.2.2 什么是CSS
3.3 CSS引入方式
3.3.1 行內書寫——最簡單的樣式操作方法
3.3.2 內部書寫——簡化樣式操作
3.3.3 外部引入——控制多頁面樣式
3.3.4 CSS三種常見引入方式比較
3.3.5 外部引入CSS的擴展知識
3.3.6 CSS引入方式的問題區
3.4 CSS選擇器
3.4.1 生活中的"選擇器"——找人
3.4.2 CSS選擇器的基本語法
3.4.3 CSS基本選擇器
3.4.4 樣式沖突的問題
3.4.5 生活中的"優先級"——誰是老大
3.4.6 CSS選擇器優先級
3.4.7 行內的style屬性
3.4.8 選擇器的使用原則
3.4.9 CSS選擇器的問題區
3.5 CSS編碼規范
3.5.1 CSS注釋
3.5.2 書寫風格
3.5.3 關于類名命名
3.5.4 樣式書寫順序
3.5.5 CSS編碼規范的問題區
3.6 CSS樣式重置
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.5 br標簽清除浮動
4.3.6 父元素浮動
4.3.7 父元素設置overflow: hidden或auto
4.3.8 利用after偽元素清除浮動
4.3.9 after偽元素清除浮動的實際用法
4.4 關于"清除浮動"的問題區
4.4.1 clear: 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.1 h1~h6標題類標簽
5.2.2 hr分隔線
5.2.3 p與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.4 display的問題區
5.5 標簽的合理嵌套
5.5.1 標簽嵌套基本規則
5.5.2 錯誤嵌套時的表現情況
5.6 SEO搜索引擎優化——標簽語義性
5.6.1 為何要談SEO
5.6.2 SEO是什么
5.6.3 搜索爬蟲工作原理
5.6.4 爬蟲抓取的是什么
5.6.5 什么樣的網站才能夠被快速收錄
5.6.6 針對SEO,前端開發要注意什么
5.6.7 SEO中表示強調的標簽
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.1 0標簽選擇實戰(2)——樣式控制
5.1 0.1 方案1——使用ul無序列表
5.1 0.2 方案2——使用dl自定義列表
5.1 0.3 當前最優方案
第6章 模塊布局(下)——可用性與擴展性
6.1 a標簽
6.1.1 超鏈接
6.1.2 超鏈接的屬性
6.1.3 錨鏈接
6.1.4 超鏈接的基本樣式
6.1.5 關于a標簽的問題區
6.2 光標樣式
6.2.1 光標效果
6.2.2 cursor相關屬性
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.4 img標簽的選用
6.4.1 img標簽基本語法
6.4.2 數據圖與背景圖
6.4.3 img問題的規避
6.4.4 img中alt與title的區別
6.4.5 href與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.5 margin負值的問題區
6.9 標簽選擇實戰(4)——完成開發
6.9.1 考慮超出和margin負值
6.9.2 完整版代碼
6.9.3 總結
第7章 文本等細節類樣式處理
7.1 背景類樣式
7.1.1 背景顏色——backgroundcolor屬性
7.1.2 背景圖片——backgroundimage屬性
7.1.3 背景重復——backgroundrepeat屬性
7.1.4 背景定位——backgroundposition屬性
7.1.5 背景關聯——backgroundattachment屬性
7.1.6 復合寫法——background屬性
7.1.7 背景類樣式的相關問題
7.2 透明背景
7.2.1 opacity與filter
7.2.2 rgba控制
7.2.3 transparent
7.2.4 透明背景的問題區
7.3 背景圖合并
7.3.1 什么是背景圖合并
7.3.2 為何進行背景圖合并
7.3.3 背景圖合并的核心技術與操作方法
7.3.4 CSS Sprite
7.3.5 背景圖合并的問題區
7.4 段落樣式
7.4.1 lineheight
7.4.2 textdecoration
7.4.3 textindent
7.4.4 textalign
7.4.5 verticalalign
7.4.6 wordspacing與letterspacing
7.4.7 wordwrap與wordbreak
7.4.8 段落樣式的問題區
7.5 字體類樣式
7.5.1 color
7.5.2 fontfamily
7.5.3 fontsize
7.5.4 fontstyle
7.5.5 fontweight
7.5.6 font復合樣式
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 定位——zindex屬性
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.4 after與before偽元素
9.2.5 讓偽元素按照塊元素特性渲染
9.2.6 偽元素實現背景圖
9.2.7 偽元素的問題區
第10章 表格
10.1 table布局的興衰
10.1.1 表格的發展歷史
10.1.2 表格的應用
10.2 table各類元素以及用法
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.4 table元素的屬性
10.4.1 table的常見屬性
10.4.2 width與height——寬度與高度
10.4.3 border——表格邊框設置
10.4.4 cellspacing與cellpadding——空白區設置
10.5 表格特有的CSS屬性
10.5.1 合并單元格之間的邊框——bordercollapse
10.5.2 邊框之間的空隙——borderspacing
10.5.3 空白單元格——emptycells
10.6 表格屬性與樣式選用原則
第11章 表單
11.1 認識表單
11.1.1 表單的作用——實現對話
11.1.2 向服務端發送數據的場景示例
11.1.3 表單的基本結構
11.1.4 各類表單元素通用屬性
11.2 表單常用元素
11.2.1 form
11.2.2 input
11.2.3 label
11.2.4 select、option與optgroup
11.2.5 textarea
11.2.6 button
11.2.7 fieldset與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.2 textarea的尺寸控制
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.4 hack技術
12.4.1 什么是hack技術
12.4.2 常用IE hack
12.4.3 IE條件注釋
12.5 實現網頁開發之后要考慮的東西
12.6 PC端瀏覽器的兼容問題
第13章 HTML5新標簽與CSS3基礎
13.1 HTML5新增元素
13.1.1 新增結構元素及含義
13.1.2 使用HTML5新結構元素完成頁面搭建
13.1.3 HTML5新元素的問題區
13.2 瀏覽器內核
13.2.1 瀏覽器主要內核
13.2.2 常見瀏覽器內核前綴
13.2.3 瀏覽器內核的問題區
13.3 CSS3選擇器
13.3.1 CSS2.0選擇器回顧
13.3.2 CSS3選擇器——通用兄弟選擇器
13.3.3 CSS3選擇器——偽類選擇器
13.3.4 CSS3選擇器的問題區
13.4 CSS3圓角邊框
13.4.1 圓角邊框——borderradius
13.4.2 圓角邊框效果實例
13.4.3 CSS3圓角帶來的變革
13.4.4 CSS3圓角邊框的問題區
13.5 CSS3文本陰影
13.5.1 文本陰影——textshadow
13.5.2 文本陰影效果實例
13.5.3 文本陰影的問題區
13.6 CSS3盒陰影
13.6.1 盒陰影——boxshadow
13.6.2 盒陰影的效果實例
13.6.3 關于盒陰影的問題區
13.7 CSS3背景新屬性
13.7.1 背景尺寸——backgroundsize
13.7.2 背景切割——backgroundclip
13.7.3 背景原點——backgroundorigin
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.3 viewport元標簽以及屬性
14.3.4 視口調整的各種命令
14.3.5 對待視口的基本原則
14.4 當盒模型與行高遇到百分比
14.4.1 盒模型單位如何選擇
14.4.2 margin和padding使用百分比作為單位
14.4.3 height使用百分比作為單位
14.4.4 border使用百分比作為單位
14.4.5 lineheight使用百分比作為單位
14.5 CSS3新增度量單位
14.5.1 新度量單位
14.5.2 rem與em
14.5.3 vw與vh
14.6 字體處理不容小覷
14.6.1 美工圖設計的基準字體
14.6.2 移動端網絡字體使用更加頻繁
14.7 盒陰影的妙用
14.8 背景圖的處理
14.9 使用JS配合rem讓頁面適應各個分辨率
14.9.1 Step1查看設計圖,確定需要兼容的分辨率
14.9.2 Step2調整視口
14.9.3 Step3確定設計圖的最小字體
14.9.4 Step4按照設計圖的像素進行開發
14.9.5 Step5使用百分比和rem替換px
14.9.6 Step6使用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.4 flexible.js的用法
15.3.5 flexible框架使用的注意事項
15.4 讓移動端開發變得更快——固定像素的實現方法
15.4.1 MetaHandler.js
15.4.2 框架當前還存在的問題
15.5 移動端兼容
15.5.1 CSS3媒體查詢兼容問題
15.5.2 HTML與CSS的基本兼容問題
15.5.3 默認樣式處理
第16章 CSS3變形與動畫
16.1 CSS3二維變形
16.1.1 二維變形基本語法
16.1.2 具體變形方式語法詳析
16.1.3 變形順序對最終結果是否會造成影響
16.2 CSS3三維變形
16.2.1 如何觸發三維變形
16.2.2 Z軸的位置
16.2.3 三維變形的變形屬性
16.2.4 視角
16.2.5 旋轉帶來的問題
16.2.6 關于三維變形的應用
16.2.7 關于變形的問題區
16.3 CSS3過渡
16.3.1 過渡的基本屬性
16.3.2 過渡的合寫方法transition
16.3.3 多屬性過渡時,各個屬性的書寫方法
16.3.4 過渡得以實現的必備要素
16.3.5 關于過渡的問題區
16.4 CSS3動畫
16.4.1 幀與關鍵幀
16.4.2 CSS3動畫的基本語法
16.4.3 animation動畫的基本屬性
16.4.4 動畫命令的合寫方法animation
16.4.5 動畫與過渡的比較
第17章 各章節自評習題集
17.1 習題集
17.1.1 習題內容
17.1.2 習題答案
17.2 習題集
17.2.1 習題內容
17.2.2 習題答案
17.3 習題集
17.3.1 習題內容
17.3.2 習題答案
17.4 習題集
17.4.1 習題內容
17.4.2 習題答案
17.5 習題集
17.5.1 習題內容
17.5.2 習題答案
17.6 習題集
17.6.1 習題內容
17.6.2 習題答案
17.7 習題集
17.7.1 習題內容
17.7.2 習題答案
17.8 習題集
17.8.1 習題內容
17.8.2 習題答案
17.9 習題集
17.9.1 習題內容
17.9.2 習題答案
17.1 0習題集
17.1 0.1 習題內容
17.1 0.2 習題答案
17.1 1習題集
17.1 1.1 習題內容
17.1 1.2 習題答案
17.1 2習題集
17.1 2.1 習題內容
17.1 2.2 習題答案
17.1 3習題集
17.1 3.1 習題內容
17.1 3.2 習題答案
17.1 4習題集
17.1 4.1 習題內容
17.1 4.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.9 CSS3陰影特效——[第13章 ]
18.9.1 實戰題目
18.9.2 實戰答案
18.1 0響應式布局——[第15章 ]
18.1 0.1 實戰題目
18.1 0.2 實戰答案
18.1 1二維三維特效動畫——[第16章 ]
18.1 1.1 實戰題目
18.1 1.2 實戰答案
第19章 網頁案例實戰
19.1 PC端網頁開發實戰
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.1 0實現底部(版權)區域部分
19.1.1 1實現大圖部分
19.1.1 2考慮超出隱藏以及光標移入狀態
19.1.1 3考慮臨界值
19.1.1 4代碼優化
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.1 HTML5發展史
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.4 iOS、安卓高奏凱歌
20.2.5 蘋果和Adobe
20.3 HTML的各種布局
20.3.1 表格布局
20.3.2 DIV CSS
20.3.3 960柵格
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.2 WAMP軟件的安裝
20.5.3 初識多人協同開發用的"版本控制管理工具"
20.6 HTML5學習平臺與網站
20.6.1 HTML5布局之路——官方平臺
20.6.2 其他學習類網站
20.6.3 找工作的網站平臺
20.7 單詞列表
20.8 網頁中部分模塊的CSS命名參考
20.9 重置代碼解析
20.9.1 重置代碼
20.9.2 重置代碼解析
20.9.3 在重置文件中添加的語句
20.1 0開發備忘錄
20.1 0.1 書寫基本的需求分析報告
20.1 0.2 基本的前期準備工作
20.1 0.3 移動端與PC端的特殊性
20.1 0.4 整體開發的基本順序提醒
20.1 0.5 具體開發中的注意事項
20.1 0.6 其他
20.1 1Iconfont
20.1 1.1 什么是Iconfont
20.1 1.2 Iconfont中圖標的下載
20.1 1.3 Iconfont可能出現的問題以及解決辦法
20.1 1.4 實際開發中Iconfont的用途
參考文獻