零基礎(chǔ)入門(mén)學(xué)習(xí)Web開(kāi)發(fā)（HTML5 & CSS3）

第　1章 概述　1

1.1　Web開(kāi)發(fā)是什么　1

1.2　學(xué)習(xí)Web開(kāi)發(fā)有前途嗎　1

1.3　Web的發(fā)展史　3

第　2章 網(wǎng)頁(yè)基礎(chǔ)　4

2.1　第 一個(gè)程序　4

2.2　img元素和a元素　6

2.3　“多才多藝”的meta元素　7

2.3.1　聲明文檔編碼　7

2.3.2　實(shí)現(xiàn)網(wǎng)頁(yè)自適應(yīng)　9

2.3.3　搜索引擎優(yōu)化　10

2.3.4　網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)　11

2.4　為網(wǎng)頁(yè)添加樣式　11

2.5　link元素　14

2.5.1　鏈接外部樣式表　14

2.5.2　鏈接網(wǎng)站圖標(biāo)　16

2.6　絕對(duì)路徑和相對(duì)路徑　16

2.7　base元素　17

2.8　JavaScript初體驗(yàn)　18

2.8.1　定義文檔內(nèi)嵌腳本　18

2.8.2　引用外部腳本　18

2.8.3　延遲執(zhí)行腳本　19

2.8.4　異步執(zhí)行腳本　21

2.8.5　noscript元素　21

第3章　標(biāo)記文字的元素　22

3.1　注釋　22

3.1.1　HTML的注釋　22

3.1.2　CSS的注釋　23

3.1.3　JavaScript的注釋　24

3.2　塊級(jí)元素和行內(nèi)元素　25

3.3　pre元素　26

3.3.1　預(yù)格式化　27

3.3.2　字符實(shí)體　28

3.4　code元素　29

3.5　var、kbd、samp元素　30

3.6　q元素　30

3.7　blockquote元素　31

3.8　cite元素　33

3.9　abbr元素　33

3.10　dfn元素　34

3.11　address元素　34

3.12　ruby元素　35

3.13　bdo元素　35

3.14　strong元素和b元素　36

3.15　em元素和i元素　36

3.16　使用CSS代替b元素和i元素　37

3.17　del元素和ins元素　38

3.18　s元素　38

3.19　mark元素　39

3.20　sup元素和sub元素　39

3.21　small元素　39

第4章　列表　41

4.1　ul元素　41

4.2　ol元素　41

4.3　兩個(gè)與列表相關(guān)的CSS屬性　43

4.4　列表嵌套　45

4.5　定義列表　46

第5章　表格　48

5.1　實(shí)現(xiàn)表格　48

5.2　給表格添加邊框　49

5.3　給表格添加標(biāo)題　50

5.4　分割表格　52

第6章　表單　57

6.1　form元素　57

6.2　button元素　58

6.3　一些常用的功能　59

6.3.1　自動(dòng)填充　59

6.3.2　指定目標(biāo)顯示位置　61

6.3.3　設(shè)置默認(rèn)值　61

6.3.4　自動(dòng)聚焦　61

6.3.5　禁用元素　61

6.4　label元素　62

6.5　fieldset元素　63

6.6　legend元素　64

6.7　select元素和option元素　64

6.8　optgroup元素　65

第7章　“萬(wàn)能”的input元素　67

7.1　按鈕　67

7.2　單選框　68

7.3　復(fù)選框　68

7.4　時(shí)間和日期　69

7.5　搜索框　70

7.6　顏色選擇框　70

7.7　圖像按鈕　71

7.8　隱藏input元素　72

7.9　上傳文件　73

7.10　限定數(shù)字輸入　75

7.11　限定數(shù)值范圍　76

7.12　數(shù)值滾動(dòng)條　76

7.13　郵箱、電話號(hào)碼和網(wǎng)址　77

7.14　placeholder屬性　78

7.15　required屬性　78

7.16　size屬性　79

7.17　maxlength屬性　79

7.18　list屬性和datalist元素　80

第8章　其他表單元素　81

8.1　輸出計(jì)算結(jié)果　81

8.2　接收多行文本輸入　81

第9章　div和語(yǔ)義化布局　84

9.1　div元素　84

9.2　語(yǔ)義化布局　88

第　10章 嵌入　92

10.1　嵌入圖片　92

10.1.1　map和area元素　92

10.1.2　picture和source元素　93

10.1.3　figure和figcaption元素　94

10.2　嵌入視頻　94

10.2.1　video元素　94

10.2.2　播放控件和自動(dòng)播放　95

10.2.3　視頻預(yù)加載　96

10.2.4　視頻封面　96

10.2.5　多個(gè)視頻文件　97

10.3　嵌入音頻　97

10.4　嵌入字幕　97

10.5　嵌入網(wǎng)頁(yè)　98

10.6　meter元素和progress元素　100

第　11章 CSS語(yǔ)法　102

11.1　什么是CSS　102

11.2　CSS基礎(chǔ)語(yǔ)法　103

11.2.1　內(nèi)聯(lián)樣式　103

11.2.2　內(nèi)部樣式表　104

11.2.3　外部樣式表　104

第　12章 基本選擇器與復(fù)合選擇器　106

12.1　基本選擇器　106

12.1.1　通用選擇器　107

12.1.2　元素選擇器　107

12.1.3　類(lèi)選擇器　109

12.1.4　id選擇器　110

12.2　復(fù)合選擇器　110

12.2.1　交集選擇器　111

12.2.2　并集選擇器　111

12.2.3　后代選擇器　112

12.2.4　子元素選擇器　113

12.2.5　相鄰兄弟選擇器　113

12.2.6　通用兄弟選擇器　114

第　13章 偽元素選擇器　115

13.1　::first-line選擇器　115

13.2　::first-letter選擇器　116

13.3　::before選擇器和::after選擇器　117

13.4　::selection選擇器　118

第　14章 動(dòng)態(tài)偽類(lèi)選擇器和UI偽類(lèi)選擇器　119

14.1　動(dòng)態(tài)偽類(lèi)選擇器　119

14.2　UI偽類(lèi)選擇器　122

第　15章 結(jié)構(gòu)偽類(lèi)選擇器和其他偽類(lèi)選擇器　128

15.1　結(jié)構(gòu)偽類(lèi)選擇器　128

15.2　其他偽類(lèi)選擇器　134

15.3　如何區(qū)分偽類(lèi)選擇器和偽元素選擇器　136

第　16章 屬性選擇器　139

16.1　使用屬性選擇器精確匹配　139

16.2　使用屬性選擇器模糊匹配　142

第　17章 顏色和背景　144

17.1　顏色　144

17.1.1　前景色　144

17.1.2　RGB　145

17.1.3　HEX和HSL　145

17.1.4　RGBA和HSLA　146

17.2　背景　146

17.2.1　背景色　146

17.2.2　背景圖像　147

17.2.3　重復(fù)背景圖像　148

17.2.4　背景圖像的位置　149

17.2.5　背景圖像的尺寸　150

17.2.6　背景圖像的附著方式　151

17.2.7　背景圖像的起始位置和顯示區(qū)域　151

17.2.8　background屬性的簡(jiǎn)寫(xiě)形式　153

第　18章 盒子模型　154

18.1　邊框　154

18.1.1　邊框樣式　154

18.1.2　邊框?qū)挾取?55

18.1.3　邊框顏色　156

18.1.4　border屬性的簡(jiǎn)寫(xiě)形式　156

18.1.5　為邊框設(shè)置樣式、寬度、顏色　157

18.1.6　圓角邊框　158

18.1.7　圖像邊框　160

18.2　內(nèi)邊距　162

18.3　外邊距　163

18.4　水平居中　164

18.5　外邊距塌陷　165

18.6　設(shè)置元素的尺寸　167

18.7　設(shè)置元素的最小尺寸和最大尺寸　168

18.8　處理溢出問(wèn)題　169

18.9　輪廓　171

18.10　陰影　174

第　19章 經(jīng)典網(wǎng)頁(yè)布局（上）　176

19.1　設(shè)置元素的顯示類(lèi)型　176

19.2　浮動(dòng)　184

19.3　利用float實(shí)現(xiàn)多列布局　187

19.4　清除浮動(dòng)　190

19.5　定位　192

19.6　z-index屬性　195

19.7　利用position實(shí)現(xiàn)多列布局　196

19.8　BFC　197

19.9　多列布局　204

第　20章 經(jīng)典網(wǎng)頁(yè)布局（下）　211

20.1　居中　211

20.2　單列布局　215

20.3　兩列布局　217

20.4　三列布局　219

20.5　雙飛翼布局　223

20.6　杯狀布局　224

20.7　瀑布流布局　225

第　21章 彈性盒布局　229

21.1　彈性容器和彈性元素　229

21.2　主軸和垂軸　235

21.3　主軸上的對(duì)齊方式　239

21.4　垂軸上的對(duì)齊方式　240

21.5　多行彈性元素的對(duì)齊方式　243

21.6　order屬性　244

21.7　彈性盒布局“彈”的到底是什么呢　245

21.8　設(shè)置彈性元素的壓縮比例　247

21.9　設(shè)置彈性元素的放大比例　249

21.10　設(shè)置彈性元素的初始尺寸　250

21.11　彈性元素的特征　251

第　22章 柵格布局　253

22.1　創(chuàng)建柵格容器　255

22.2　定義柵格軌道　256

22.3　定義柵格區(qū)域　257

22.4　定義柵格間距　260

22.5　一些關(guān)鍵字和函數(shù)　261

22.6　柵格布局的對(duì)齊方式　264

22.7　柵格線　269

22.8　定義柵格元素的放置規(guī)則　274

22.9　grid屬性　277

22.10　柵格元素的特性　278

第　23章 文本樣式和字體　280

23.1　設(shè)置文本對(duì)齊　280

23.2　保留空白字符　281

23.3　設(shè)置文本的方向　282

23.4　設(shè)置縮進(jìn)　283

23.5　設(shè)置間距　284

23.6　縱向?qū)R文本　285

23.7　創(chuàng)建文本陰影　286

23.8　控制斷詞　287

23.9　控制文本溢出　288

23.10　裝飾文本　289

23.11　轉(zhuǎn)換大小寫(xiě)　290

23.12　設(shè)置字體　291

23.13　使用Web字體　295

第　24章 過(guò)渡、變形和動(dòng)畫(huà)　296

24.1　過(guò)渡　296

24.2　變形　300

24.3　動(dòng)畫(huà)　309

第　25章 濾鏡、混合模式、裁剪和遮罩　317

25.1　濾鏡　317

25.2　混合模式　324

25.3　裁剪　331

25.4　蒙版　333

25.5　置換元素的填充與定位　334

第　26章 其他CSS特性　336

26.1　優(yōu)先級(jí)　336

26.2　透明度　339

26.3　漸變　340

26.4　CSS變量　344

26.5　CSS計(jì)數(shù)器　345

26.6　媒體查詢(xún)　347