從零開始：HTML5+CSS3快速入門教程

郝金亭

高校教師，具有豐富的教學經驗。

史笑顏

前端工程師，熱愛Web技術，喜歡嘗試新事物，學習新技術。
其大學時自學前端技術，發現市面上的技術書對於初學者來說晦澀難懂，
學有所成後寫出一本可以幫助初學者輕鬆入門的書籍。

第1章 初識HTML5——完成第一個HTML5 頁面
1.1 準備HTML5 開發環境010
1.1.1 瀏覽器的使用010
1.1.2 下載編輯器013
1.1.3 HTML5 的學習方法014
1.2 第一個HTML5 頁面015
1.2.1 用HBuilderX 創建一個項目015
1.2.2 在頁面中寫入內容016
1.3 用CSS 美化頁面017
1.3.1 給頁面添加背景018
1.3.2 將頁面中的文本元素居中021
1.3.3 調整頁面文字的字體和顏色023
1.3.4 給按鈕添加邊框和背景色024
1.3.5 給頁面增加動態效果026
1.4 在手機上查看頁面028
 

第2章 HTML 語法和基礎標籤
2.1 HTML 基礎語法032
2.1.1 HTML 語法規則032
2.1.2 HTML 文檔的基礎結構033
2.1.3 元素的嵌套033
2.2 文本元素034
2.2.1 標題035
2.2.2 段落——<p> 標籤035
2.2.3 HTML 折行——<br> 標籤036
2.2.4 文本格式化037
2.3 HTML 超鏈接——<a> 標籤038
2.3.1 初識超鏈接038
2.3.2 超鏈接語法039
2.3.3 href 屬性——*對路徑和相對路徑040
2.3.4 target 屬性041
2.3.5 <a> 標籤的應用041
2.4 HTML 圖像——<img> 標籤045
2.5 列表047
2.5.1 無序列表048
2.5.2 有序列表048
2.5.3 定義列表048
2.5.4 列表的嵌套049
 

第3章 CSS 語法和基礎屬性
3.1 在HTML 文檔中引入CSS 的
3 種常用方法054
3.1.1 外部樣式表——使用<link> 標籤引入CSS 樣式表055
3.1.2 內部樣式表057
3.1.3 內聯樣式058
3.2 CSS 語法058
3.2.1 CSS 結構與規則058
3.2.2 選擇器的種類060
3.2.3 繼承063
3.3 CSS 顏色065
3.4 文本的常用樣式066
3.4.1 文本的顏色和常用屬性066
3.4.2 字體068
3.4.3 背景072
3.4.4 CSS 鏈接079
 

第4章 盒模型佈局——DIV+CSS3 頁面佈局
4.1 盒模型的基礎知識084
4.1.1 盒模型的組成084
4.1.2 查看元素的盒模型084
4.2 邊框085
4.2.1 邊框的組成085
4.2.2 使用邊框的特性製作三角形086
4.2.3 邊框的圓角效果——border-radius 088
4.3 內邊距088
4.3.1 padding 會撐大元素的大小089
4.3.2 padding 的複合寫法090
4.4 外邊距091
4.4.1 margin 的作用091
4.4.2 margin 在使用中的問題094
4.5 盒模型的大小098
4.6 元素的display 屬性102
4.6.1 元素的隱藏102
4.6.2 塊元素和內聯元素104
4.6.3 塊元素與內聯元素之間的轉化106
4.6.4 auto 實現塊元素居中顯示108
4.7 內聯塊109
4.8 初始化頁面樣式112
 

第5章 浮動佈局——實現網頁的經典佈局
5.1 浮動的基本語法117
5.1.1 浮動的定義117
5.1.2 float 屬性118
5.2 浮動的特徵119
5.3 clear 屬性125
5.4 清除浮動126
5.4.1 高度塌陷126
5.4.2 清除浮動的方法128
5.4.3 使用偽類清除浮動131
5.5 實戰練習134
5.6 頁面佈局的建議144
 

第6章 定位——實現元素的疊加
6.1 定位的position 屬性149
6.2 層級150
6.3 相對定位151
6.4 *對定位152
6.5 固定定位155
6.6 透明度157
6.6.1 opacity 157
6.6.2 rgba(r, g, b, a) 159
 

第7章 表格與表單——信息展示與信息採集
7.1 表格165
7.1.1 表格結構165
7.1.2 表格的邊框166
7.1.3 區分錶格頭部與表格主體167
7.1.4 單元格合併169
7.1.5 帶標題的表格171
7.1.6 美化表格171
7.2 表單177
7.2.1 form 元素177
7.2.2 input 元素177
7.2.3 其他表單元素183
 

第8章 HTML5 與CSS3 的新特性
8.1 HTML5 的新增元素191
8.2 CSS3 的新增樣式194
8.2.1 文本屬性194
8.2.2 字體屬性195
8.2.3 背景196
8.2.4 過渡效果200
8.2.5 動畫201
8.2.6 圓角邊框202
8.2.7 2D 轉換203
8.2.8 calc() 函數計算206
 

第9章 PC 端實戰——製作一個購物網頁
9.1 PxCook 工具介紹211
9.1.1 PxCook 下載211
9.1.2 PxCook 安裝211
9.1.3 PxCook“快速入門”文檔212
9.1.4 新建項目212
9.1.5 開發模式213
9.1.6 設計模式214
9.1.7 配合Photoshop 完成切圖215
9.2 項目結構215
9.3 網頁製作前的準備217
9.3.1 分辨率217
9.3.2 內容居中217
9.4 項目佈局218
9.5 <header> 部分難點講解220
9.5.1 圖文對齊220
9.5.2 錨點223
9.6 <main> 部分中.page1 難點223
9.6.1 複雜頁面的選擇器使用224
9.6.2 留白較多的頁面怎樣佈局225
9.7 <main> 部分中.page2 難點225
9.8 <main> 部分中.page3 難點225
9.9 小結226

附錄
HTML 元素速查表（按字母順序排列） 227
CSS 屬性速查表230
盒模型相關屬性232
HTML 實體符號速查表236
CSS3 選擇器239
CSS 單位速查表240
思考與練習答案241