HTML 5+CSS 3+JavaScript網頁設計與制作全程揭秘（網頁設計與開發(fā)殿堂之路）

目錄
第1章  認識HTML與HTML5
1.1　了解動態(tài)網站的開發(fā)技術 1
1.1.1　網頁編輯軟件Dreamweaver 1
1.1.2　網頁標記語言HTML 2
1.1.3　網頁表現(xiàn)語言CSS 2
1.1.4　網頁特效腳本語言JavaScript 2
1.1.5　動態(tài)網頁編程語言ASP、PHP和JSP等 3
1.2　HTML基礎 3
1.2.1　什么是HTML 3
1.2.2　HTML的主要功能 4
1.2.3　HTML的編輯環(huán)境 4
1.2.4　認識Dreamweaver 5
實 戰(zhàn)　制作個HTML頁面 6
1.3　HTML5基礎 7
1.3.1　HTML5概述 7
1.3.2　HTML5的優(yōu)勢 8
1.4　認識HTML5 9
1.4.1　HTML5的文檔結構 9
1.4.2　HTML5的基本語法 9
1.4.3　HTML5精簡的頭部 10
1.5　HTML5中新增的標簽 10
1.5.1　結構標簽 11
1.5.2　文本標簽 11
1.5.3　應用和輔助標簽 11
1.5.4　進度標簽 11
1.5.5　交互性標簽 11
1.5.6　在文檔和應用中使用的標簽 12
1.5.7　標簽 12
1.5.8　其他標簽 12
1.6　HTML5中廢棄的標簽 12
1.7　HTML、CSS與JavaScript的結合 13 第2章  HTML主體標簽
2.1　HTML頭部標簽設置 14
2.1.1　標簽 14
實戰(zhàn)　設置網頁標題 14
2.1.2　標簽 15
實戰(zhàn)　設置網頁基底網址 16
2.1.3　標簽 16
實戰(zhàn)　設置網頁關鍵字、說明以及頁面定時跳轉 18
2.2　HTML主體標簽設置 19
2.2.1　邊距屬性margin 19
實戰(zhàn)　設置網頁整體內容邊距 20
2.2.2　背景顏色屬性bgcolor 21
實戰(zhàn)　設置網頁背景顏色 21
2.2.3　背景圖像屬性background 21
實戰(zhàn)　為網頁主體添加背景圖像 22
2.2.4　文字屬性text 22
實戰(zhàn)　設置網頁文字默認顏色 23
2.2.5　默認鏈接屬性link 23
實戰(zhàn)　設置網頁中超鏈接文字的默認顏色 24
2.3　在HTML代碼中添加注釋 25
2.4　在HTML中調用外部程序 25
2.4.1　調用外部JavaScript程序 25
實戰(zhàn)　在網頁中顯示當前系統(tǒng)時間 25
2.4.2　區(qū)分客戶端與服務器端程序 27 第3章  文字與圖片標簽的應用
3.1　文字修飾 28
3.1.1　文字樣式標簽 28
實戰(zhàn)　設置文字樣式 28
3.1.2　文字傾斜和標簽 29
實戰(zhàn)　設置傾斜文字效果 30
3.1.3　文字加粗和標簽 30
實戰(zhàn)　設置文字加粗效果 31
3.1.4　文字下畫線標簽 31
實戰(zhàn)　為文字添加下畫線修飾 32
3.1.5　其他文字修飾方法 32
3.2　文字的分行與分段 33
3.2.1　文字換行
標簽 33
實戰(zhàn)　為網頁中的文字內容進行換行處理 33
3.2.2　文字強制不換行標簽 34
實戰(zhàn)　強制文字不自動換行 34
3.2.3　文字分段標簽 34
實戰(zhàn)　為網頁中的文字內容進行分段處理 34
3.2.4　標題文字至標簽 35
實戰(zhàn)　設置標題文字 35
3.2.5　文字對齊屬性align 36
實戰(zhàn)　設置文字水平對齊效果 36
3.2.6　水平線標簽 37
實戰(zhàn)　在網頁中插入水平線 37
3.2.7　空格與特殊字符 38
實戰(zhàn)　在網頁中插入空格和特殊字符 38
3.3　文本滾動標簽 39
實戰(zhàn)　在網頁中實現(xiàn)滾動文本效果 40
3.4　列表標簽 41
3.4.1　認識列表標簽 41
3.4.2　無序列表標簽 41
實戰(zhàn)　制作新聞列表 41
3.4.3　有序列表標簽 43
實戰(zhàn)　制作音樂排行列表 43
3.4.4　定義列表標簽 44
實戰(zhàn)　制作復雜的新聞列表 44
3.5　圖片標簽 45
3.5.1　標簽 45
實戰(zhàn)　制作圖像頁面 46
3.5.2　圖文混排 47
實戰(zhàn)　制作圖文介紹頁面 47
3.5.3　滾動圖片 48
第4章  超鏈接與表格標簽的應用
4.1　超鏈接標簽 49
4.1.1　超鏈接標簽 49
4.1.2　相對鏈接和鏈接 50
4.1.3　超鏈接提示——alt屬性 50
4.1.4　超鏈接打開方式——target屬性 50
實戰(zhàn)　在網頁中創(chuàng)建超鏈接 51
4.2　錨點鏈接 52
4.2.1　插入錨點 52
4.2.2　創(chuàng)建錨點鏈接 52
實戰(zhàn)　制作錨點鏈接頁面 52
4.3　創(chuàng)建特殊鏈接 53
4.3.1　空鏈接 54
4.3.2　文件下載鏈接 54
實戰(zhàn)　創(chuàng)建空鏈接和文件下載鏈接 54
4.3.3　腳本鏈接 55
4.3.4　E-mail鏈接 55
實戰(zhàn)　創(chuàng)建腳本鏈接和電子郵件鏈接 55
4.4　表格標簽 56
4.4.1　表格的基本構成、和標簽 57
4.4.2　表格標題標簽 57
實戰(zhàn)　創(chuàng)建數據表格 57
4.4.3　表頭、表主體和表尾標簽 58
實戰(zhàn)　設置表格中的表頭、表主體和表尾 59
4.5　iFrame框架 60
實戰(zhàn)　插入并設置iFrame框架 60
第5章  多媒體標簽的應用 5.1　使用標簽嵌入傳統(tǒng)多媒體元素 62
5.1.1　使用標簽在網頁中插入Flash動畫 62
實戰(zhàn)　制作Flash歡迎頁面 62
5.1.2　使用標簽為網頁添加背景音樂 63
實戰(zhàn) 　為網頁添加背景音樂 63
5.1.3　使用標簽嵌入音頻 64
實戰(zhàn)　在網頁中嵌入音頻 64
5.1.4　使用標簽嵌入視頻 65
實戰(zhàn)　在網頁中嵌入普通視頻 65
5.2　了解HTML5中的多媒體標簽 66
5.2.1　在線多媒體的發(fā)展 66
5.2.2　檢查瀏覽器是否支持和標簽 66
5.3　HTML5新增標簽的應用 67
5.3.1　標簽所支持的音頻格式 67
5.3.2　使用標簽 67
實戰(zhàn)　在網頁中嵌入HTML5音頻播放 67
5.4　HTML5新增標簽的應用 68
5.4.1　標簽所支持的視頻格式 68
5.4.2　使用標簽 68
實戰(zhàn)　在網頁中嵌入HTML5視頻播放 69
5.4.3　使用標簽 70
5.5　與標簽的屬性 70
5.5.1　元素的標簽屬性 70
5.5.2　元素的接口屬性 71
5.6　與標簽的接口方法與事件 72
5.6.1　元素的接口方法 72
5.6.2　元素的事件 72
實戰(zhàn)　自定義播放控制組件 73
第6章  表單標簽的應用
6.1　了解HTML表單 77
6.1.1　表單的作用 77
6.1.2　表單標簽 77
6.1.3　表單的數據傳遞方式 78
6.2　普通的HTML表單元素 78
6.2.1　文本域 78
6.2.2　密碼域 78
6.2.3　文本區(qū)域 79
6.2.4　隱藏域 79
6.2.5　復選框 79
6.2.6　單選按鈕 79
6.2.7　選擇域 80
6.2.8　文件域 80
6.2.9　按鈕 80
6.2.10　圖像域 80
實戰(zhàn)　制作登錄表單 81
6.3　HTML5新增表單輸入類型 83
6.3.1　url類型 83
6.3.2　email類型 83
6.3.3　range類型 83
6.3.4　number類型 83
6.3.5　tel類型 84
6.3.6　search類型 84
6.3.7　color類型 84
6.3.8　date類型 84
6.3.9　month、week、time、datetime、datetime-local類型 85
實戰(zhàn)　制作留言表單頁面 85
6.3.10　瀏覽器對HTML5表單的支持情況 88
6.4　HTML5新增表單屬性 88
6.4.1　form屬性 88
6.4.2　formaction屬性 89
6.4.3　formmethod、formenctype、
　　　formnovalidate、formtarget屬性 89
6.4.4　placeholder屬性 89
6.4.5　autofocus屬性 89
實戰(zhàn)　為表單元素設置默認提示內容 90
6.4.6　autocomplete屬性 90
6.5　使用HTML5表單驗證 91
6.5.1　用于實現(xiàn)驗證的表單元素屬性 91
實戰(zhàn)　驗證網頁表單元素 91
6.5.2　表單驗證方法 92
6.5.3　表單驗證事件 93 第7章  HTML5中標簽的應用
7.1　標簽 95
7.1.1　了解標簽 95
7.1.2　在網頁中使用標簽 95
7.1.3　使用標簽實現(xiàn)繪圖的流程 96
7.2　繪制基本圖形 97
7.2.1　繪制直線 97
實戰(zhàn)　在網頁中繪制直線 97
7.2.2　繪制矩形 98
實戰(zhàn)　在網頁中繪制矩形 99
7.2.3　繪制圓形 100
實戰(zhàn)　在網頁中繪制圓形 101
7.2.4　繪制三角形 101
實戰(zhàn)　在網頁中繪制三角形 102
7.2.5　圖形組合 102
7.3　繪制文本 104
7.3.1　使用文本 104
實戰(zhàn)　在網頁中繪制文字 104
7.3.2　創(chuàng)建對象陰影 105
實戰(zhàn)　為網頁中所繪制的文字添加陰影 106
7.4　在網頁中繪制特殊形狀圖像 106
7.4.1　繪制圖像 106
實戰(zhàn)　在網頁中繪制圖像 107
7.4.2　裁切區(qū)域 108
實戰(zhàn)　在網頁中實現(xiàn)圓形圖像效果 108 第8章  HTML5文檔結構標簽的應用
8.1　構建HTML5頁面主體內容 111
8.1.1　文章標簽 111
8.1.2　章節(jié)標簽 113
8.1.3　導航標簽 114
8.1.4　輔助內容標簽 115
8.1.5　日期時間標簽 116
8.2　HTML5文檔中的語義模塊標簽 116
8.2.1　標題標簽 116
8.2.2　標題分組標簽 117
8.2.3　頁腳標簽 118
8.2.4　聯(lián)系信息標簽 118
8.3　制作HTML5文章頁面 119
實戰(zhàn)　制作HTML5文章頁面 119 第9章  CSS樣式基礎
9.1　了解CSS樣式 123
9.1.1　什么是CSS樣式 123
9.1.2　CSS樣式的發(fā)展 123
9.2　CSS樣式語法 124
9.2.1　CSS樣式基本語法 124
9.2.2　CSS樣式規(guī)則 125
9.3　創(chuàng)建和使用CSS選擇器 125
9.3.1　通配符選擇器 125
實戰(zhàn)　使用通配符選擇器控制網頁中的所有標簽 126
9.3.2　標簽選擇器 126
實戰(zhàn)　使用標簽選擇器設置網頁整體樣式 127
9.3.3　ID選擇器 127
實戰(zhàn)　創(chuàng)建和使用ID CSS樣式 128
9.3.4　類選擇器 129
實戰(zhàn)　創(chuàng)建和使用類CSS樣式 129
9.3.5　偽類選擇器 130
實戰(zhàn)　設置網頁中超鏈接偽類樣式 131
9.3.6　派生選擇器 132
實戰(zhàn)　創(chuàng)建派生選擇器樣式 133
9.3.7　群組選擇器 133
實戰(zhàn)　使用群組選擇器同時定義多個網頁元素樣式 134
9.4　在網頁中應用CSS樣式的4種方式 135
9.4.1　內聯(lián)CSS樣式 135
實戰(zhàn)　創(chuàng)建并應用內聯(lián)CSS樣式 135
9.4.2　內部CSS樣式 136
實戰(zhàn)　創(chuàng)建并應用內部CSS樣式 136
9.4.3　外部CSS樣式 137
實戰(zhàn)　創(chuàng)建并鏈接外部CSS樣式表文件 137
9.4.4　導入外部CSS樣式 138
實戰(zhàn)　導入外部CSS樣式表文件 139
9.5　CSS樣式的特性 139
9.5.1　CSS樣式的繼承性 139
9.5.2　CSS樣式的特殊性 139
9.5.3　CSS樣式的層疊性 140
9.5.4　CSS樣式的重要性 140
第10章  CSS布局與定位方式
10.1　創(chuàng)建Div 142
10.1.1　了解Div 142
10.1.2　如何插入Div 142
10.1.3　塊元素與行內元素 144
10.2　CSS基礎盒模型 145
10.2.1　CSS基礎盒模型概述 145
10.2.2　margin屬性——元素邊距 146
10.2.3　border屬性——元素邊框 146
10.2.4　padding屬性——元素填充 146
實戰(zhàn)　設置網頁元素的盒模型相關屬性 147
10.3　網頁元素的定位方式 148
10.3.1　CSS定位屬性 148
10.3.2　相對定位relative 149
實戰(zhàn)　實現(xiàn)網頁元素的疊加顯示 149
10.3.3　定位absolute 150
實戰(zhàn)　網頁元素固定在右側顯示 150
10.3.4　固定定位fixed 151
實戰(zhàn)　實現(xiàn)固定位置的頂部Logo 151
10.3.5　浮動定位 152
實戰(zhàn)　制作順序排列的圖像列表 152
10.3.6　空白邊疊加 155
實戰(zhàn)　網頁中空白邊疊加的應用 155
10.4　常見的網頁布局方式 156
10.4.1　居中的布局 156
10.4.2　浮動的布局 157
10.4.3　自適應高度的解決方法 161
第11章  CSS基礎屬性詳解
11.1　使用CSS設置文字樣式 162
11.1.1　font-family屬性——字體 162
11.1.2　font-size屬性——字體大小 162
11.1.3　color屬性——文字顏色 163
實戰(zhàn)　設置網頁文字基本效果 163
11.1.4　font-weight屬性——字體粗細 164
實戰(zhàn)　設置網頁文字加粗效果 165
11.1.5　font-style屬性——字體樣式 165
實戰(zhàn)　設置網頁文字傾斜效果 166
11.1.6　text-transform屬性——英文字體大小寫 166
實戰(zhàn)　設置網頁中英文字體大小寫 167
11.1.7　text-decoration屬性——文字修飾 168
實戰(zhàn)　為網頁中的文字添加下畫線、頂畫線和刪除線效果 168
11.1.8　letter-spacing屬性——字符間距 169
實戰(zhàn)　設置網頁中文字的字符間距 169
11.2　使用CSS設置段落樣式 170
11.2.1　line-height屬性——行間距 170
11.2.2　text-indent屬性——段落首行縮進 170
實戰(zhàn)　美化網頁中的段落文本 170
11.2.3　段落首字下沉 171
實戰(zhàn)　在網頁中實現(xiàn)段落文字首字下沉 172
11.2.4　text-align屬性——水平對齊方式 172
實戰(zhàn)　設置網頁文本水平對齊效果 173
11.2.5　vertical-align屬性——垂直對齊方式 174
實戰(zhàn)　設置網頁文本垂直對齊效果 174
11.3　使用CSS設置背景顏色和背景圖像 175
11.3.1　background-color屬性——背景顏色 176
實戰(zhàn)　設置網頁的背景顏色 176
11.3.2　background-image屬性——背景圖像 176
11.3.3　background-repeat屬性——背景圖像重復方式 177
實戰(zhàn)　設置網頁背景圖像及其重復方式 177
11.3.4　background-position屬性——背景圖像位置 179
實戰(zhàn)　定位網頁中的背景圖像 179
11.3.5　background-attachment屬性——固定背景圖像 180
實戰(zhàn)　設置網頁中的背景圖像固定不動 180
11.4　使用CSS設置邊框與圖片縮放樣式 181
11.4.1　border屬性——邊框 181
實戰(zhàn)　為網頁元素添加邊框效果 182
11.4.2　圖片縮放 184
實戰(zhàn)　設置網頁中圖片的等比例縮放效果 184
11.5　使用CSS設置列表樣式 185
11.5.1　list-style-type屬性——設置列表符號 185
實戰(zhàn)　設置新聞列表效果 186
11.5.2　list-type-image屬性——自定義列表符號 187
實戰(zhàn)　使用自定義圖像作為列表符號 187
11.5.3　設置定義列表樣式 188
實戰(zhàn)　制作復雜的新聞列表 188
11.6　超鏈接CSS樣式偽類 189
11.6.1　:link偽類 189
11.6.2　:hover偽類 190
11.6.3　:active偽類 190
11.6.4　:visited偽類 190
實戰(zhàn)　設置網頁中超鏈接文字效果 191
11.6.5　按鈕式超鏈接 193
實戰(zhàn)　制作網站導航菜單 193
11.7　cursor屬性——光標指針效果 194
實戰(zhàn)　在網頁中實現(xiàn)多種光標指針效果 195
第12章  CSS3屬性詳解
12.1　了解CSS3 196
12.1.1　CSS3的發(fā)展 196
12.1.2　瀏覽器對CSS3的支持情況 196
12.1.3　了解CSS3的全新功能 197
12.2　CSS3新增選擇器 197
12.2.1　屬性選擇器 197
實戰(zhàn)　在網頁中使用屬性選擇器 198
12.2.2　結構偽類選擇器 199
12.2.3　UI元素狀態(tài)偽類選擇器 200
12.2.4　偽元素選擇器 200
實戰(zhàn)　在網頁中使用偽元素選擇器 201
12.3　新增的顏色定義方法 202
12.3.1　RGBA顏色定義方法 202
實戰(zhàn)　使用RGBA方式設置半透明顏色 202
12.3.2　HSL顏色定義方法 203
12.3.3　HSLA顏色定義方法 203
實戰(zhàn)　使用HSL和HSLA方式定義網頁元素的背景顏色 203
12.4　新增的文字設置屬性 204
12.4.1　text-shadow屬性——文字陰影 204
實戰(zhàn)　為網頁文字添加陰影效果 205
12.4.2　text-overflow屬性——文本溢出 206
實戰(zhàn)　設置文字溢出處理方式 206
12.4.3　word-wrap屬性 207
實戰(zhàn)　設置長文本內容換行 207
12.4.4　word-break和word-space屬性 208
實戰(zhàn)　設置文字內容換行處理方式 209
12.4.5　@font-face規(guī)則——嵌入Web字體 210
實戰(zhàn)　在網頁中實現(xiàn)特殊字體效果 210
12.5　新增的背景設置屬性 212
12.5.1　background-size屬性——背景圖像大小 212
實戰(zhàn)　實現(xiàn)始終滿屏顯示的網頁背景 212
12.5.2　background-origin屬性——背景圖像原點位置 215
實戰(zhàn)　設置背景圖像顯示原點位置 215
12.5.3　background-clip屬性——背景圖像裁剪區(qū)域 216
實戰(zhàn)　設置元素背景圖像的顯示區(qū)域 217
12.5.4　background屬性——多背景圖像 217
實戰(zhàn)　為網頁設置多背景圖像效果 218
12.6　新增的邊框設置屬性 219
12.6.1　border-colors屬性——多種顏色邊框 219
實戰(zhàn)　實現(xiàn)多彩絢麗的邊框效果 219
12.6.2　border-radius屬性——圓角邊框 220
實戰(zhàn)　為網頁元素設置圓角效果 221
12.6.3　border-image屬性——圖像邊框 222
實戰(zhàn)　為網頁元素設置圖像邊框效果 222
12.6.4　box-shadow屬性——元素陰影 223
實戰(zhàn)　為網頁元素添加陰影效果 224
12.7　新增的多列布局屬性 225
12.7.1　columns屬性——多列布局 225
實戰(zhàn)　快速對網頁內容分列 225
12.7.2　column-width屬性——列寬度 226
12.7.3　column-count屬性——列數 226
12.7.4　column-gap屬性——列間距 227
12.7.5　column-rule屬性——列分隔線 227
12.7.6　column-span屬性——橫跨列 228
實戰(zhàn) 　設置網頁內容的分列布局效果 228
12.8　新增的盒模型設置屬性 230
12.8.1　opacity屬性——元素不透明度 230
實戰(zhàn)　設置網頁元素的不透明度 230
12.8.2　overflow-x和overflow-y屬性——溢出內容處理方式 231
實戰(zhàn)　設置網頁元素內容溢出的處理方式 232
12.8.3　resize屬性——自由縮放 233
實戰(zhàn)　實現(xiàn)網頁元素尺寸任意拖動縮放 233
12.8.4　outline屬性——輪廓外邊框 234
實戰(zhàn)　為網頁元素添加輪廓外邊框效果 235
12.8.5　content屬性——賦予內容 236
實戰(zhàn)　為網頁元素賦予文字內容 237
第13章  使用CSS3實現(xiàn)動畫效果
13.1　實現(xiàn)元素變形 238
13.1.1　transform屬性 238
13.1.2　使用rotate( )函數實現(xiàn)元素旋轉 238
實戰(zhàn)　實現(xiàn)網頁元素的旋轉變形效果 239
13.1.3　使用scale( )函數實現(xiàn)元素縮放和翻轉變形 239
實戰(zhàn)　實現(xiàn)網頁元素的縮放和翻轉效果 240
13.1.4　使用translate( )函數實現(xiàn)元素移動 240
實戰(zhàn)　實現(xiàn)網頁元素的移動效果 241
13.1.5　使用skew( )函數實現(xiàn)元素傾斜 241
實戰(zhàn)　實現(xiàn)網頁元素的傾斜效果 242
13.1.6　使用matrix( )函數實現(xiàn)元素矩陣變形 242
實戰(zhàn)　實現(xiàn)網頁元素的矩陣變形效果 243
13.1.7　定義變形中心點 244
實戰(zhàn)　設置網頁元素的變形中心點位置 244
13.1.8　同時使用多個變形函數 245
實戰(zhàn)　為網頁元素同時應用多種變形效果 245
13.2　CSS3實現(xiàn)過渡動畫效果 246
13.2.1　transition屬性 246
13.2.2　transition-property屬性——實現(xiàn)過渡效果 247
實戰(zhàn)　制作網頁元素旋轉并放大動畫效果 247
13.2.3　transition-duration屬性——設置過渡時間 248
實戰(zhàn)　設置網頁元素變形動畫持續(xù)時間 248
13.2.4　transition-delay屬性——實現(xiàn)過渡延遲效果 249
實戰(zhàn)　設置網頁元素變形動畫延遲時間 249
13.2.5　transition-timing-function屬性——設置過渡方式 250
實戰(zhàn)　設置網頁元素變形動畫過渡方式 251
第14章  JavaScript基礎
14.1　了解JavaScript 252
14.1.1　JavaScript概述 252
14.1.2　JavaScript在網頁中的作用 252
14.1.3　如何在網頁中應用JavaScript 253
實戰(zhàn) 　編寫一個簡單的JavaScript腳本 253
14.2　JavaScript語法基礎 254
14.2.1　JavaScript代碼格式 254
14.2.2