劍指HTML5+CSS3——核心原理與應用實踐

HTML 篇
第1 章 Web 及前端介紹 ·····························.1
1.1 Web ············································.1
1.1.1 認識URL ·····························.1
1.1.2 認識HTTP ···························.2
1.1.3 Web 的發展 ··························.3
1.1.4 Web 相關標準 ·······················.4
1.1.5 軟件結構劃分 ························.4
1.1.6 動態網站開發所需的Web 構件 ·.5
1.2 什麼是前端 ···································.7
1.3 編輯器介紹 ···································.8
1.4 本章小結 ······································.9
第2 章 初探HTML ··································.10
2.1 HTML 基礎語法 ···························.10
2.1.1 HTML 的基本概念 ···············.10
2.1.2 標簽的分類 ··························.11
2.1.3 標簽屬性 ····························.12
2.1.4 HTML 中對於空格及回車的處理
········································.12
2.1.5 實體 ··································.13
2.1.6 HTML 的註釋符 ··················.13
2.2 文檔結構 ····································.13
2.2.1 文檔頭 ·······························.14
2.2.2 ＜html＞標簽 ·························.14
2.2.3 ＜head＞標簽及＜body＞標簽 ······.14
2.3 ＜head＞標簽中的內容 ·····················.15
2.3.1 ＜title＞標簽··························.15
2.3.2 ＜meta＞標簽 ························.15
2.3.3 其他頭標簽 ·························.16
2.4 本章小結 ····································.17
第3 章 常用HTML 標簽 ···························.18
3.1 標記文字——普通文本 ··················.18
3.2 標記文字——超鏈接 ······················.25
3.2.1 絕對路徑、相對路徑 ·············.25
3.2.2 超鏈接 ·······························.27
3.2.3 錨點 ··································.29
3.3 組織內容——普通文本 ···················.29
3.4 組織內容——列表 ·························.30
3.4.1 有序列表 ····························.30
3.4.2 無序列表 ····························.31
3.4.3 自定義列表 ·························.32
3.5 組織內容——標題標簽 ···················.33
3.6 嵌入內容——圖像標簽 ···················.34
3.6.1 圖片類型 ····························.34
3.6.3 圖像標簽 ····························.34
3.7 實例：劃分HTML 的結構 ··············.35
3.8 本章小結 ·····································.39
第4 章 表格和表單 ··································.40
4.1 表格 ···········································.40
4.1.1 普通表格 ····························.41
4.1.2 實例：海鮮購買清單 ·············.42
4.1.3 ＜th＞、＜td＞標簽中的colspan 和
rowspan 屬性 ·······················.45
4.1.4 實例：食堂菜譜 ···················.46
4.2 表單 ···········································.47
4.2.1 初始表單 ····························.48
4.2.2 ＜form＞標簽的action 和method
屬性 ··································.48
4.2.3 布爾屬性 ····························.49
4.2.4 詳解＜input /＞標簽 ·················.49
4.2.5 下拉列表 ····························.52
4.2.6 文本域 ·······························.53
4.2.7 按鈕 ··································.54
4.2.8 為表單標簽定義標註 ·············.55
4.3 實例：個人資料修改表單 ···············.55
4.4 本章小結 ····································.60
CSS 篇
第5 章 初探CSS 及選擇器 ·······················.62
5.1 CSS 的基本用法 ···························.62
5.1.1 CSS 的基礎語法···················.62
5.1.2 CSS 中的註釋符···················.63
5.1.3 CSS 中顏色的表示方式 ·········.64
5.1.4 CSS 的使用方式···················.64
5.2 CSS 特性 ····································.67
5.3 CSS 選擇器 ·································.69
5.3.1 標簽選擇器 ·························.69
5.3.2 類選擇器 ····························.70
5.3.3 實例：仿Google ··················.73
5.3.4 層次選擇器 ·························.74
5.3.5 ID 選擇器 ···························.78
5.3.6 組合選擇器 ·························.79
5.3.7 通配符選擇器 ······················.80
5.3.8 偽類選擇器 ·························.81
5.3.9 其他選擇器 ·························.84
5.3.10 實例：表格隔行換色 ···········.85
5.4 權重值 ·······································.88
5.5 本章小結 ····································.90
第6 章 字體與文本··································.91
6.1 調試器在CSS 中的使用 ·················.91
6.2 字體 ··········································.98
6.2.1 字體及字體族 ······················.98
6.2.2 字體（字體族）的類型 ··········.98
6.2.3 設置字體（字體族）——
可繼承 ·······························.98
6.2.4 字號——可繼承 ··················.100
6.2.5 設置字重——可繼承 ············.101
6.2.6 字體風格——可繼承 ············.102
6.2.7 字體簡寫 ···························.103
6.3 文本 ·········································.104
6.3.1 盒子模型的基本要素 ············.104
6.3.2 行內元素和塊狀元素 ············.105
6.3.3 元素顯示類型 ·····················.105
6.3.4 字體顏色——可繼承 ············.107
6.3.5 文本裝飾——不可繼承 ·········.108
6.3.6 文本縮進——可繼承 ···········.110
6.3.7 字符間距——可繼承 ···········.113
6.3.8 文本對齊——可繼承 ···········.113
6.3.9 空白處理及換行 ·················.115
6.3.10 超出隱藏 ·························.118
6.3.11 行高 ·······························.118
6.3.12 垂直居中 ·························.125
6.4 本章小結 ···································.129
第7 章 盒子模型 ···································.130
7.1 整體結構 ···································.130
7.2 寬度 ·········································.132
7.3 高度 ·········································.134
7.4 元素寬度、高度的最大值和最小值 ·.136
7.5 內邊距 ······································.139
7.5.1 單邊內邊距 ·······················.142
7.5.2 行內元素和行內塊狀元素的
內邊距 ·····························.142
7.6 邊框 ·········································.144
7.6.1 邊框寬度 ··························.145
7.6.2 邊框樣式 ··························.146
7.6.3 邊框顏色 ··························.147
7.6.4 邊框簡寫 ··························.147
7.6.5 實例：做一個三角形 ···········.148
7.7 輪廓 ·········································.149
7.7.1 輪廓樣式 ··························.149
7.7.2 輪廓寬度 ··························.150
7.7.3 輪廓顏色 ··························.151
7.7.4 輪廓簡寫 ··························.151
7.7.5 輪廓與邊框的不同 ··············.151
7.8 外邊距 ······································.153
7.9 關於auto ···································.156
7.10 實例：新聞網頁 ························.162
7.11 本章小結 ·································.168
第8 章 背景、列表及表格 ·······················.169
8.1 背景 ·········································.169
8.1.1 背景顏色 ··························.169
8.1.2 背景圖片 ··························.172
8.1.3 背景重復 ··························.173
8.1.4 背景定位 ··························.174
8.1.5 背景粘滯 ··························.178
8.1.6 實例：精靈圖 ····················.181
8.2 列表 ·········································.185
8.2.1 列表簡介 ···························.185
8.2.2 列表標記類型 ·····················.187
8.2.3 列表標記圖片 ·····················.189
8.2.4 列表標記位置 ·····················.190
8.2.5 列表樣式的簡寫屬性 ···········.191
8.2.6 實例：寵物列表 ··················.192
8.3 表格 ·········································.194
8.3.1 CSS 中的表格 ····················.194
8.3.2 表格標題位置 ·····················.198
8.3.3 單元格的邊框 ·····················.199
8.3.4 實例：隔行換色表格 ···········.203
8.4 本章小結 ···································.205
第9 章 浮動及定位 ································.206
9.1 浮動 ·········································.206
9.1.1 普通文檔流和浮動···············.206
9.1.2 浮動的規則 ························.209
9.1.3 清除浮動 ···························.216
9.1.4 案例：個人博客導航條 ········.221
9.1.5 案例：首頁的“為你推薦”
頻道 ·································.224
9.1.6 案例：左側固定、右側自適應
頁面 ·································.229
9.2 定位 ·········································.232
9.2.1 定位屬性 ···························.232
9.2.2 移動元素屬性 ·····················.232
9.2.3 定位屬性和移動元素屬性的
配合使用 ···························.233
9.2.4 層疊順序 ···························.242
9.2.5 案例：元素水平、垂直居中 ··.245
9.2.6 案例：二級菜單 ··················.246
9.2.7 案例：輪播圖佈局···············.250
9.2.8 案例：網站底部廣告 ···········.254
9.3 本章小結 ···································.255
HTML5 篇
第10 章 HTML5 初體驗 ··························.257
10.1 HTML5 介紹 ·····························.257
10.1.1 XHTML1.0 ·······················.257
10.1.2 XHTML2.0 ·······················.258
10.1.3 HTML5 出現 ····················.258
10.2 體驗HTML5 ····························.258
10.2.1 設置HTML5 的文檔類型 ····.258
10.2.2 設置頁面語言 ···················.259
10.2.3 設置字符編碼 ···················.259
10.2.4 驗證HTML5 ····················.259
10.3 HTML5 的語法及其標簽 ·············.260
10.3.1 不建議使用的標簽 ·············.260
10.3.2 修改的標簽 ······················.261
10.3.3 新增的標簽及屬性 ·············.261
10.4 使用HTML5 重構網頁頁面 ·········.264
10.4.1 結構的劃分 ······················.265
10.4.2 傳統的HTML 頁面構建 ······.265
10.4.3 使用HTML5 構建頁面 ·······.270
10.5 本章小結 ·································.273
第11 章 HTML5 表單及音頻、視頻 ···········.274
11.1 表單 ·······································.274
11.1.1 表單的自動完成 ················.274
11.1.2 讓表單控件顯示在表單外部 ·.275
11.1.3 給表單控件添加占位符 ·······.276
11.1.4 給表單添加默認焦點 ··········.276
11.1.5 給表單添加驗證 ················.277
11.1.6 顯示建議列表 ···················.278
11.1.7 更加豐富的＜input＞標簽 ······.279
11.1.8 案例：表單的改造 ·············.284
11.2 音頻、視頻 ······························.290
11.2.1 音頻 ·······························.290
11.2.2 視頻 ·······························.291
11.2.3 使用＜source＞標簽 ··············.291
11.3 本章小結 ·································.292
CSS3 篇
第12 章 CSS3 簡介及選擇器 ···················.293
12.1 CSS3 簡介 ·······························.293
12.2 CSS3 選擇器 ····························.294
12.2.1 CSS3 中新增的層次選擇器 ··.294
12.2.2 屬性選擇器 ······················.295
12.2.3 結構性偽類選擇器 ·············.301
12.2.4 狀態偽類選擇器 ················.316
12.2.5 其他偽類選擇器 ················.320
12.2.6 偽元素選擇器 ···················.325
12.3 本章小結 ·································.342
第13 章 CSS3 新增屬性和屬性值 ·············.344
13.1 CSS3 中新增的屬性值 ·················.344
13.1.1 全局屬性值 ······················.344
13.1.2 相對單位值 ······················.346
13.1.3 顏色 ·······························.346
13.2 文字、文本的新增屬性 ···············.347
13.2.1 使用服務器端字體 ·············.347
13.2.2 文字陰影 ·························.349
13.2.3 案例：特效文字 ················.350
13.2.4 最後一行的對齊方式 ··········.352
13.2.5 內容溢出處理 ···················.357
13.2.6 換行處理 ·························.359
13.3 有關盒子的新增屬性 ··················.361
13.3.1 盒子陰影 ·························.361
13.3.2 盒子模型的計算方式 ··········.363
13.3.3 控制元素、調整大小 ··········.365
13.3.4 設置元素透明度 ················.366
13.4 邊框 ·······································.368
13.4.1 圓角邊框 ·························.368
13.4.2 案例：遊戲圖標 ················.372
13.4.3 案例：太極圖 ···················.373
13.5 粘滯定位 ·································.376
13.5.1 粘滯定位 ·························.376
13.5.2 案例：評論列表 ················.378
13.6 本章小結 ·································.381
第14 章 背景及漸變 ·······························.382
14.1 背景 ·······································.382
14.1.1 背景延伸 ·························.382
14.1.2 案例：圖片文字 ················.384
14.1.3 背景定位基準 ···················.385
14.1.4 背景尺寸 ·························.386
14.1.5 簡寫屬性 ·························.389
14.1.6 多背景 ····························.390
14.2 漸變 ·······································.392
14.2.1 線性漸變 ·························.392
14.2.2 重復性線性漸變 ················.399
14.2.3 徑向漸變 ·························.401
14.2.4 重復性徑向漸變 ················.406
14.2.5 案例：優惠券 ···················.407
14.3 本章小結 ·································.411
第15 章 濾鏡、裁剪、過渡 ·····················.412
15.1 濾鏡 ·······································.412
15.2 裁剪 ·······································.414
15.3 過渡 ·······································.421
15.3.1 過渡時間 ·························.421
15.3.2 受過渡影響的屬性 ·············.422
15.3.3 設置過渡的快慢 ················.424
15.3.4 設置過渡的延遲 ················.427
15.3.5 不同數量的屬性值的使用
問題 ·······························.427
15.3.6 反向過渡 ·························.430
15.3.7 過渡的簡寫屬性 ················.431
15.4 實例 ·······································.433
15.4.1 實例：卡片懸停效果 ··········.433
15.4.2 實例：裁剪按鈕 ················.439
15.4.3 實例：手風琴效果 ·············.440
15.4.4 實例：滑動菜單 ················.443
15.5 本章小結 ·································.447
第16 章 變形、動畫 ·······························.449
16.1 動畫 ·······································.449
16.1.1 簡單地使用 ······················.449
16.1.2 再提動畫使用 ···················.451
16.1.3 動畫的執行次數 ················.458
16.1.4 設置動畫的播放方向 ··········.459
16.1.5 延遲播放動畫 ···················.460
16.1.6 改變動畫的內部時序 ··········.464
16.1.7 動畫播放完成後的填充 ·······.467
16.1.8 動畫的簡寫屬性 ················.468
16.2 變形 ·······································.471
16.3 本章小結 ·································.483
第17 章 媒體查詢、彈性盒子 ··················.484
17.1 媒體查詢 ·································.484
17.1.1 媒體類型及媒體查詢的
基本使用 ·························.484
17.1.2 媒體描述符 ······················.486
17.1.3 實例：響應式頭部 ·············.490
17.2 彈性盒子 ·································.495
17.2.1 彈性容器 ·························.495
17.2.2 設置主軸方向 ···················.497
17.2.3 設置換行 ·························.498
17.2.4 設置彈性元素如何在主軸上
分佈 ·······························.501
17.2.5 設置彈性元素如何在當前行上
垂直分佈 ·························.507
17.2.6 設置整個彈性元素如何對齊 ·.509
17.2.7 彈性增長因子 ···················.512
17.2.8 彈性元素的順序 ················.514
17.3.9 在彈性元素上使用float 屬性
和position 屬性 ·················.516
17.3 實例 ·······································.517
17.3.1 實例：骰子 ······················.517
17.3.2 實例：尚矽谷網站頭部 ·······.521
17.4 本章小結 ·································.526