網頁設計與開發教程：HTML5+CSS3+JavaScript

呂凱，吉林師範大學計算機學院教師，碩士，副教授。 參與國家自然科學基金2項 參與吉林省科技廳項目2項 主持吉林省教育廳項目2項 參與吉林省教育廳項目2項。 發表核心論文2篇，省級論文多篇。 主編教材3本

目 錄

                                                    

第1章HTML5基礎1

1.1HTML5概述1

1.1.1HTML5的發展史1

1.1.2HTML5支持的瀏覽器2

1.1.3HTML5的主要特性2

1.2Web前端開發工具3

1.3HTML5的文檔結構5

1.3.1文檔類型聲明6

1.3.2html標記6

1.3.3head標記6

1.3.4body標記9

1.3.5註釋10

1.4HTML5的基本語法11

1.4.1標記的類型11

1.4.2HTML5屬性12

1.5HTML5語法的新變化13

本章小結14

習題15

第2章文本、圖像、超鏈接和列表16

2.1文本控制標記16

2.1.1標題標記16

2.1.2段落標記17

2.1.3換行標記18

2.1.4水平線標記18

2.1.5文本格式化標記20

2.1.6字體標記21

2.1.7特殊字符替換代碼22

2.1.8拼音註釋標記23

2.1.9段落縮進標記24

2.1.10預格式化標記24

2.2圖像標記25

2.2.1插入圖像26

2.2.2設置圖像的替換文本27

2.2.3設置圖像的提示信息28

2.2.4設置圖像的寬度和高度29

2.2.5設置圖像的邊框29

2.2.6設置圖像的邊距30

2.2.7設置圖像的對齊方式30

2.3超鏈接標記31

2.3.1超鏈接語法32

2.3.2錨點鏈接33

2.3.3超鏈接的路徑34

2.3.4浮動框架35

2.4列表37

2.4.1無序列表37

2.4.2有序列表38

2.4.3列表嵌套40

2.4.4定義列表42

本章小結43

習題44

第3章HTML5新增元素45

3.1結構元素45

3.1.1header標記45

3.1.2nav標記46

3.1.3article標記47

3.1.4section標記48

3.1.5aside標記49

3.1.6footer標記50

3.2分組元素51

3.2.1hgroup標記51

3.2.2figure標記和figcaption標記52

3.3網頁交互元素53

3.3.1details標記和summary標記53

3.3.2progress標記54

3.3.3meter標記55

3.4文本層次語義元素56

3.4.1time標記56

3.4.2mark標記57

3.4.3cite標記57

本章小結58

習題58

第4章表格、表單、視頻和音頻60

4.1表格60

4.1.1創建表格60

4.1.2表格的屬性設置62

4.1.3單元格的屬性設置64

4.2表單65

4.2.1創建表單66

4.2.2定義域和域標題67

4.3輸入元素及屬性68

4.3.1單行文本輸入框和密碼輸入框69

4.3.2單選按鈕和復選框70

4.3.3提交按鈕、重置按鈕和普通按鈕71

4.3.4圖像按鈕72

4.3.5文件選擇框和隱藏框73

4.3.6日期的時間選擇器74

4.3.7電子郵件地址輸入域75

4.3.8URL地址輸入域75

4.3.9電話號碼輸入域76

4.3.10搜索輸入域76

4.3.11顏色輸入域76

4.3.12數值輸入域76

4.3.13指定範圍的數值輸入域77

4.4其他表單元素78

4.4.1多行文本輸入框78

4.4.2下拉菜單78

4.4.3下拉列表框81

4.4.4密鑰對生成器82

4.4.5輸出元素83

4.5視頻和音頻83

4.5.1video標記及屬性84

4.5.2audio標記及屬性85

本章小結86

習題86

第5章CSS基礎88

5.1CSS概述88

5.1.1CSS的基本概念88

5.1.2CSS的優勢88

5.1.3CSS的編輯方法89

5.2CSS核心知識89

5.2.1CSS基本語法89

5.2.2引入CSS樣式90

5.2.3CSS選擇器類型93

5.3CSS的層疊性和繼承性99

5.3.1層疊性99

5.3.2繼承性100

5.4CSS字體、文本與段落屬性101

5.4.1字體屬性101

5.4.2文本屬性104

5.4.3段落屬性109

本章小結115

習題115

第6章CSS3選擇器117

6.1屬性選擇器117

6.1.1E［attribute］屬性選擇器117

6.1.2E［attribute=value］屬性選擇器118

6.1.3E［attribute～=value］屬性選擇器119

6.1.4E［attribute|=value］屬性選擇器120

6.1.5E［attribute^=value］屬性選擇器120

6.1.6E［attribute$=value］屬性選擇器121

6.1.7E［attribute=value］屬性選擇器122

6.2關系選擇器123

6.2.1子代選擇器123

6.2.2兄弟選擇器123

6.3結構化偽類選擇器126

6.3.1:root選擇器126

6.3.2:not選擇器126

6.3.3:onlychild選擇器127

6.3.4:firstchild選擇器和:lastchild選擇器128

6.3.5:nthchild(n)選擇器和:nthlastchild(n)選擇器129

6.3.6:nthoftype(n)選擇器和:nthlastoftype(n)選擇器130

6.3.7:empty選擇器131

6.3.8:target選擇器132

6.4偽元素選擇器133

6.4.1:before偽元素選擇器134

6.4.2:after偽元素選擇器135

6.5鏈接偽類136

本章小結137

習題137

第7章盒子模型139

7.1CSS盒子模型結構139

7.2盒子的相關屬性140

7.2.1外邊距屬性140

7.2.2邊框屬性142

7.2.3內邊距屬性151

7.2.4盒子的寬和高151

7.3背景的相關屬性153

7.3.1設置背景顏色153

7.3.2設置背景圖片154

7.3.3設置背景圖片重復154

7.3.4設置背景圖片位置155

7.3.5設置背景圖片固定157

7.3.6設置背景圖片大小158

7.3.7設置背景圖片顯示區域159

7.3.8設置背景圖片裁剪區域160

7.3.9設置背景復合屬性161

本章小結163

習題163

第8章DIV+CSS布局165

8.1DIV圖層165

8.2布局的常用屬性167

8.2.1浮動屬性167

8.2.2清除浮動的影響169

8.2.3overflow屬性175

8.2.4元素的定位177

8.2.5層疊等級屬性182

8.3網頁布局設計183

8.3.1三行模式184

8.3.2三列模式185

8.3.3三行三列模式187

本章小結189

習題189

第9章CSS3高級應用191

9.1CSS3過渡屬性191

9.1.1transitionproperty屬性191

9.1.2transitionduration屬性192

9.1.3transitiontimingfunction屬性193

9.1.4transitiondelay屬性195

9.1.5transition屬性綜合設置196

9.2CSS3變換屬性196

9.2.1二維變換196

9.2.2三維變換200

9.3CSS3動畫屬性202

9.3.1@keyframes功能203

9.3.2animationname屬性203

9.3.3animationduration屬性203

9.3.4animationtimingfunction屬性204

9.3.5animationdelay屬性204

9.3.6animationiterationcount屬性204

9.3.7animationdirection屬性204

9.3.8animation屬性綜合設置205

本章小結207

習題207

第10章JavaScript基礎209

10.1JavaScript概述209

10.1.1JavaScript的特點209

10.1.2第一個JavaScript程序210

10.1.3在HTML5中使用JavaScript代碼211

10.2JavaScript程序214

10.2.1語句和語句塊214

10.2.2消息框214

10.2.3註釋217

10.3變量和數據類型217

10.3.1變量218

10.3.2數據類型219

10.4運算符和表達式221

10.4.1算術運算符和算術表達式221

10.4.2賦值運算符和賦值表達式222

10.4.3關系運算符和關系表達式222

10.4.4位運算符和位表達式223

10.4.5邏輯運算符和邏輯表達式224

10.4.6條件運算符和條件表達式225

10.5程序流程控制225

10.5.1順序結構225

10.5.2選擇結構226

10.5.3循環結構232

10.6函數237

10.6.1常用系統函數237

10.6.2自定義函數242

本章小結245

習題245

第11章DOM和BOM247

11.1DOM247

11.1.1DOM概述247

11.1.2DOM節點樹248

11.1.3DOM節點249

11.1.4DOM節點的訪問253

11.1.5DOM節點操作256

11.2BOM261

11.2.1window對象261

11.2.2navigator對象263

11.2.3screen對象265

11.2.4history對象266

11.2.5location對象267

本章小結269

習題269

第12章事件271

12.1事件概述271

12.1.1事件類型271

12.1.2事件句柄272

12.1.3事件的綁定方式273

12.2鼠標事件276

12.2.1鼠標單擊、雙擊事件277

12.2.2鼠標移動事件277

12.3鍵盤事件279

12.4表單事件280

12.4.1獲得焦點和失去焦點事件280

12.4.2提交和重置事件281

12.5窗口事件283

本章小結284

習題284