Web前端開發(fā)精品課：HTML與CSS進階教程

目錄
第一部分　HTML進階
第01章　HTML基礎(chǔ)知識
1．1　HTML和CSS進階簡介 2
1．1．1　你真的精通HTML和CSS嗎 2
1．1．2　進階教程簡介 3
1．2　HTML、XHTML和HTML5 3
1．2．1　HTML和XHTML 3
1．2．2　HTML5 4
1．3　div和span 6
1．4　id和class 7
1．4．1　id屬性 7
1．4．2　class屬性 7
1．5　瀏覽器標(biāo)題欄小圖標(biāo) 8
第02章　語義化
2．1　語義化簡介 10
2．2　標(biāo)題語義化 12
2．3　圖片語義化 14
2．3．1　alt屬性和title屬性 14
2．3．2　figure元素和figcaption元素 15
2．4　表格語義化 16
2．5　表單語義化 19
2．5．1　label標(biāo)簽 20
2．5．2　fieldset標(biāo)簽和legend標(biāo)簽 21
2．6　其他語義化 22
2．6．1　換行符
22
2．6．2　無序列表ul 24
2．6．3　strong標(biāo)簽和em標(biāo)簽 25
2．6．4　del標(biāo)簽和ins標(biāo)簽 25
2．6．5　img標(biāo)簽 26
2．7　語義化驗證 26
2．8　HTML5舍棄的標(biāo)簽 27

第二部分　CSS進階
第03章　CSS基礎(chǔ)知識
3．1　CSS單位 30
3．1．1　絕對單位 30
3．1．2　相對單位 31
3．2　CSS特性 37
3．2．1　繼承性 37
3．2．2　層疊性 39
3．3　CSS優(yōu)先級 40
3．3．1　引用方式?jīng)_突 41
3．3．2　繼承方式?jīng)_突 41
3．3．3　指定樣式?jīng)_突 42
3．3．4　繼承樣式和指定樣式?jīng)_突 44
3．3．5　!important 45
3．4　CSS引入方式 47
3．4．1　外部樣式表 48
3．4．2　內(nèi)部樣式表 48
3．4．3　行內(nèi)樣式表 50
3．5　CSS選擇器 51
3．5．1　后代選擇器 51
3．5．2　子代選擇器 52
3．5．3　兄弟選擇器 54
3．5．4　相鄰選擇器 55
第04章　CSS規(guī)范
4．1　CSS規(guī)范簡介 58
4．2　命名規(guī)范 59
4．2．1　CSS文件命名 59
4．2．2　id和class命名 59
4．3　書寫規(guī)范 62
4．4　注釋規(guī)范 65
4．4．1　頂部注釋 65
4．4．2　模塊注釋 65
4．4．3　簡單注釋 65
4．5　CSS reset 66
4．5．1　什么是CSS reset 66
4．5．2　為什么要用CSS reset 66
4．5．3　如何使用CSS reset 67
第05章　盒子模型
5．1　CSS盒子模型 70
5．2　深入border 73
5．2．1　性能差異 74
5．2．2　兼容差異 74
5．3　深入padding 74
5．4　外邊距疊加 76
5．4．1　外邊距疊加的三種情況 77
5．4．2　外邊距疊加的意義 78
5．5　負margin技術(shù) 79
5．5．1　負margin簡介 79
5．5．2　負margin技巧 82
5．6　overflow 86
第06章　display屬性
6．1　塊元素和行內(nèi)元素 90
6．1．1　塊元素 90
6．1．2　行內(nèi)元素 92
6．2　display簡介 93
6．2．1　塊元素 93
6．2．2　inline元素 93
6．2．3　inline-block元素 94
6．3　display：none 95
6．3．1　display：none簡介 95
6．3．2?“display：none”和
“visibility：hidden”的區(qū)別 96
6．4　display：table-cell 98
6．4．1　圖片垂直居中于元素 98
6．4．2　等高布局 100
6．4．3　自動平均劃分元素 102
6．5　去除inline-block元素間距 103
第07章　文本效果
7．1　文本效果簡介 107
7．2　深入text-indent 108
7．3　深入text-align 111
7．3．1　text-align起作用的元素 112
7．3．2?“text-align：center;”與
“margin：0 auto;”的區(qū)別 113
7．4　深入line-height 113
7．4．1　line-height的定義 113
7．4．2　line-height取值 115
7．5　深入vertical-align 118
7．5．1　vertical-align屬性取值 119
7．5．2　vertical-align屬性應(yīng)用 121
第08章　表單效果
8．1　表單效果簡介 126
8．2　深入radio和checkbox 127
8．3　深入textarea 128
8．3．1　固定大小，禁用拖動 129
8．3．2　在chrome、Firefox和IE實現(xiàn)
相同的外觀 131
8．4　表單對齊 132
第09章　浮動布局
9．1　正常文檔流 136
9．1．1　正常文檔流 136
9．1．2　脫離文檔流 138
9．2　深入浮動 139
9．3　浮動的影響 142
9．3．1　對自身的影響 142
9．3．2　對父元素影響 143
9．3．3　對兄弟元素的影響 144
9．3．4　對子元素的影響 148
9．4　浮動的負作用 150
9．5　清除浮動 152
9．5．1　clear：both 152
9．5．2　overflow：hidden 154
9．5．3　：：after偽元素 155
第10章　定位布局
10．1　深入定位 157
10．1．1　子元素相對父元素定位 157
10．1．2　子元素相對祖先元素定位 160
10．2　z-index屬性 162
第11章　CSS圖形
11．1　CSS圖形簡介 165
11．2　三角形 166
11．2．1　CSS實現(xiàn)三角形的原理 166
11．2．2　帶邊框的三角形 168
11．3　圓 172
11．3．1　CSS實現(xiàn)圓角 172
11．3．2　CSS實現(xiàn)半圓和圓 175
11．3．3　border-radius派生
子屬性 177
11．4　橢圓 177
第12章　性能優(yōu)化
12．1　CSS優(yōu)化簡介 180
12．2　屬性縮寫 181
12．2．1　盒模型縮寫 181
12．2．2　背景縮寫 183
12．2．3　字體縮寫 184
12．2．4　顏色值縮寫 184
12．3　語法壓縮 185
12．3．1　空白符 185
12．3．2　結(jié)尾分號 186
12．3．3　url的引號 186
12．3．4　屬性值為0 187
12．3．5　屬性值為以0開頭的小數(shù) 187
12．3．6　合并相同的定義 187
12．3．7　利用繼承進行合并 188
12．4　壓縮工具 190
12．5　圖片壓縮 191
12．5．1　JPEG、PNG和GIF 191
12．5．2　圖片壓縮 191
12．6　高性能的選擇器 191
12．6．1　選擇器在瀏覽器的解析
原理 192
12．6．2　不同選擇器的解析速度 192
第13章　CSS技巧
13．1　水平居中 194
13．1．1　文字的水平居中 194
13．1．2　元素的水平居中 195
13．2　垂直居中 198
13．2．1　文字的垂直居中 198
13．2．2　元素的垂直居中 200
13．3　CSS Sprite 203
13．4　Icon Font圖標(biāo) 206
13．4．1　iconfont網(wǎng)站 207
13．4．2　icon font技術(shù) 209
第14章　重要概念
14．1　CSS中的重要概念 214
14．2　包含塊 214
14．2．1　什么是包含塊 214
14．2．2　包含塊的判定以及包含塊的
范圍 215
14．3　層疊上下文 216
14．3．1　什么是層疊上下文？ 216
14．3．2　什么是層疊級別？ 217
14．3．3　層疊上下文的特點 218
14．4　BFC和IFC 220
14．4．1　基本概念 220
14．4．2　什么是BFC 221
14．4．3　BFC的用途 223
后記