HTMLCSS JavaScript從入門到精通

目錄 
Chapter01  從零起步——HTML輕松入門
1.1 認(rèn)識(shí)HTML ........................................................................................... 2
1.1.1 什么是HTML ................................................................................... 2
1.1.2 使用瀏覽器瀏覽文件 .......................................................................... 2
1.2 HTML文件的基本標(biāo)記 ........................................................................ 3
1.2.1 開始標(biāo)簽 ............................................................................... 3 1.2.2 頭部標(biāo)簽 .............................................................................. 3 1.2.3 標(biāo)題標(biāo)簽 ................................................................................ 4 1.2.4 主體標(biāo)簽 .............................................................................. 4 1.2.5 元信息標(biāo)簽 ........................................................................... 5
1.2.6 標(biāo)簽 ........................................................................... 5
1.3 文字基本標(biāo)記 ........................................................................................ 6
1.3.1 段落標(biāo)簽的用法 ................................................................................ 6
1.3.2 換行標(biāo)簽的用法 ................................................................................ 7
1.3.3 不換行標(biāo)簽的用法 ............................................................................. 8
1.3.4 加粗標(biāo)簽的用法 ................................................................................ 9
1.3.5 傾斜標(biāo)簽的用法 ................................................................................ 9
1.3.6 標(biāo)題標(biāo)簽的用法 ............................................................................... 10
本章小結(jié) .............................................................................................. 12
 
Chapter02  網(wǎng)頁設(shè)計(jì)基本功——表格的使用
2.1 表格的基本元素 ................................................................................... 14
2.2 表格的相關(guān)代碼 .................................................................................... 14
2.2.1 表格標(biāo)簽 ............................................................................. 15 2.2.2 行標(biāo)簽 ..................................................................................... 16 2.2.3 單元格標(biāo)簽 .............................................................................. 17 2.2.4 表格的結(jié)構(gòu)標(biāo)簽 ............................................................................... 18
2.2.5 設(shè)置表格標(biāo)題 .................................................................................. 21
2.3 設(shè)置表格大小和行內(nèi)屬性 ................................................................... 22
2.3.1 設(shè)置整個(gè)表格的大小 ........................................................................ 22
2.3.2 設(shè)置表格中行的屬性 ........................................................................ 23
2.3.3 設(shè)置行的背景顏色 ........................................................................... 24
2.3.4 設(shè)置行內(nèi)文字的對(duì)齊方式 .................................................................. 25
2.4 設(shè)置表格邊框樣式 .............................................................................. 28
2.4.1 表格的邊框?qū)挾?.............................................................................. 28
2.4.2 表格的邊框顏色 .............................................................................. 29
2.4.3 表格中的單元格間距 ........................................................................ 30
2.4.4 表格中文字與邊框間距 ...................................................................... 31
2.5 設(shè)置表格的背景 .................................................................................. 33
2.5.1 設(shè)置表格背景顏色 ........................................................................... 33
2.5.2 為表格背景插入圖像 ........................................................................ 34
2.6 設(shè)置單元格的樣式 ............................................................................... 35
2.6.1 設(shè)置單元格的大小 ........................................................................... 35
2.6.2 設(shè)置單元格的背景顏色 ..................................................................... 36
2.6.3 設(shè)置單元格的邊框顏色 ..................................................................... 38
2.6.4 合并單元格 .................................................................................... 39
本章小結(jié) .............................................................................................. 41
 
Chapter03  豐富網(wǎng)頁——圖像的插入
3.1 圖片的格式 .......................................................................................... 43
3.2 插入圖片 .............................................................................................. 43
3.2.1 使用img標(biāo)簽 .................................................................................. 43
3.2.2 圖片的源文件 ................................................................................. 44
3.2.3 設(shè)置圖片大小 ................................................................................. 45
3.2.4 設(shè)置圖片提示文字 ........................................................................... 45
3.2.5 圖片的對(duì)齊方式 .............................................................................. 47
3.2.6 圖片的邊框 ..................................................................................... 48
3.3 為圖片添加超鏈接 ............................................................................... 49
本章小結(jié) .............................................................................................. 50
 
Chapter04  網(wǎng)頁交互——表單的使用
4.1 表單的基本標(biāo)簽 .................................................................................. 52
4.1.1 標(biāo)簽 ................................................................................... 52
4.1.2 標(biāo)簽 ................................................................................... 53
4.1.3 標(biāo)簽 ............................................................................. 54 4.1.4 標(biāo)簽 ................................................................................. 55 4.2 表單的基本屬性 .................................................................................. 56
4.2.1 action屬性 ..................................................................................... 56
4.2.2 name屬性 ..................................................................................... 57
4.2.3 method屬性 .................................................................................. 57
4.2.4 enctype屬性 .................................................................................. 58
4.2.5 target屬性 ..................................................................................... 59
4.3 插入表單對(duì)象 ...................................................................................... 59
4.3.1 文本域 ........................................................................................... 59
4.3.2 密碼域 ........................................................................................... 60
4.3.3 普通按鈕 ........................................................................................ 61
4.3.4 單選按鈕 ....................................................................................... 62
4.3.5 復(fù)選框 ........................................................................................... 63
4.3.6 提交按鈕 ....................................................................................... 64
4.3.7 重置按鈕 ....................................................................................... 65
4.3.8 圖像按鈕 ........................................................................................ 66
4.3.9 隱藏域 ........................................................................................... 67
4.3.10 文件域 .......................................................................................... 68
4.3.11 菜單和列表 ................................................................................... 69
4.4 創(chuàng)建一個(gè)注冊(cè)類表單頁面 .................................................................... 71
本章小結(jié) .............................................................................................. 74
 
Chapter05  網(wǎng)頁鏈接——創(chuàng)建超鏈接
5.1 超鏈接的路徑 ...................................................................................... 76
5.1.1 路徑 ....................................................................................... 76
5.1.2 相對(duì)路徑 ....................................................................................... 76
5.2 創(chuàng)建超鏈接 .......................................................................................... 76
5.2.1 超鏈接標(biāo)簽的屬性 ........................................................................... 76
5.2.2 內(nèi)部鏈接 ........................................................................................ 77
5.2.3 錨點(diǎn)鏈接 ....................................................................................... 78
5.2.4 外部鏈接 ........................................................................................ 81
本章小結(jié) .............................................................................................. 84
 
Chapter06  視聽效果——添加多媒體
6.1 插入多媒體 .......................................................................................... 86
6.1.1 插入Flash動(dòng)畫 ............................................................................... 86
6.1.2 插入音頻 ....................................................................................... 87
6.1.3 插入視頻 ....................................................................................... 87
6.2 滾動(dòng)效果 .............................................................................................. 88
6.2.1 設(shè)置滾動(dòng)速度 ................................................................................. 88
6.2.2 設(shè)置滾動(dòng)方向 ................................................................................. 89
6.2.3 設(shè)置滾動(dòng)延遲 ................................................................................. 90
6.2.4 設(shè)置滾動(dòng)方式 .................................................................................. 91
6.2.5 設(shè)置滾動(dòng)循環(huán) ................................................................................. 92
6.2.6 設(shè)置滾動(dòng)背景顏色 ........................................................................... 93
6.2.7 設(shè)置滾動(dòng)范圍 ................................................................................. 94
6.2.8 設(shè)置空白空間 .................................................................................. 95
本章小結(jié) .............................................................................................. 96
 
Chapter07  HTML升級(jí)——HTML5入門知識(shí)
7.1 什么是HTML5 ................................................................................... 98
7.1.1 認(rèn)識(shí)HTML5 ................................................................................... 98
7.1.2 HTML5的發(fā)展 ................................................................................ 98
7.2 HTML5新增功能 ............................................................................... 99
7.2.1 字符集和DOCTYPE的改進(jìn) .............................................................. 99
7.2.2 引入的新元素 ................................................................................ 100
7.2.3 標(biāo)準(zhǔn)改進(jìn) ...................................................................................... 100
7.3 HTML5的優(yōu)勢(shì) .................................................................................. 101
7.3.1 HTML5化繁為簡(jiǎn) ............................................................................ 101
7.3.2 用戶優(yōu)先和效率 ............................................................................. 101
7.4 HTML5新增的主體元素 ................................................................... 102
7.4.1 article元素 .................................................................................... 102
7.4.2 section元素 .................................................................................. 103
7.4.3 nav元素 ....................................................................................... 106
7.4.4 aside元素 ..................................................................................... 107
7.4.5 time元素 ...................................................................................... 108
7.4.6 pubdate屬性 ................................................................................ 109
7.5 HTML5新增的非主體元素 ............................................................... 110
7.5.1 header元素 .................................................................................. 110
7.5.2 hgroup元素 .................................................................................. 112
7.5.3 footer元素 .................................................................................... 113
7.5.4 address元素 ................................................................................ 114
7.6 HTML5新增的元素屬性 ................................................................... 115
7.6.1 表單相關(guān)屬性 ................................................................................ 115
7.6.2 其他相關(guān)屬性 ................................................................................ 116
7.7 HTML5新增與廢除的元素 ............................................................... 116
7.7.1 HTML5中新增的元素 ...................................................................... 116
7.7.2 HTML5中廢除的元素 ...................................................................... 124
本章小結(jié) ............................................................................................ 125
 
Chapter08  HTML5進(jìn)階——無處不在的應(yīng)用
8.1 畫布功能 ............................................................................................. 127
8.1.1 canvas元素 .................................................................................. 127
8.1.2 canvas坐標(biāo) .................................................................................. 128
8.1.3 canvas繪制路徑 ............................................................................ 128
8.1.4 canvas漸變 .................................................................................. 130
8.1.5 canvas文本 .................................................................................. 132
8.2 音頻和視頻 ......................................................................................... 134
8.2.1 audio元素 ..................................................................................... 134
8.2.2 video元素 ..................................................................................... 137
8.3 表單功能 ............................................................................................. 138
8.3.1 form新特性 ................................................................................... 139
8.3.2 輸入型控件 ................................................................................... 139
8.3.3 form新元素 ................................................................................... 141
8.3.4 form新屬性 ................................................................................... 143
8.3.5 form練習(xí) ...................................................................................... 147
8.4 拖放功能 ............................................................................................. 149
8.4.1 dataTransfer屬性 ......................................................................... 149
8.4.2 拖放列表 ...................................................................................... 150
8.5 地理位置 ............................................................................................. 153
8.5.1 geolocation概述 ........................................................................... 153
8.5.2 geolocation瀏覽器支持檢測(cè) ............................................................ 155
8.5.3 在地圖上顯示你的位置 .................................................................... 157
8.6 本地存儲(chǔ) ............................................................................................. 159
8.6.1 WebStorage介紹 .......................................................................... 159
8.6.2 executeSql執(zhí)行查詢 ...................................................................... 161
本章小結(jié) ............................................................................................ 164
 
Chapter09  美化網(wǎng)頁——CSS樣式
9.1 CSS概述 ............................................................................................ 166
9.1.1 CSS基本語法 ................................................................................ 166
9.1.2 CSS特點(diǎn) ...................................................................................... 167
9.1.3 使用CSS ...................................................................................... 167
9.2 CSS選擇器 ........................................................................................ 169
9.2.1 元素選擇器 ................................................................................... 169
9.2.2 類選擇器 ...................................................................................... 170
9.2.3 id選擇器 ....................................................................................... 172
9.2.4 集體選擇器 ................................................................................... 173
9.2.5 屬性選擇器 ................................................................................... 174
9.2.6 偽類 ............................................................................................. 176
9.2.7 偽元素 .......................................................................................... 178
9.3 CSS定位 ............................................................................................ 180
9.3.1 浮動(dòng)定位 ...................................................................................... 180
9.3.2 相對(duì)定位 ...................................................................................... 183
9.3.3 定位 ...................................................................................... 184
9.4 盒子模型 ............................................................................................. 186
9.4.1 盒子簡(jiǎn)介 ...................................................................................... 186
9.4.2 設(shè)置外邊距 ................................................................................... 186
9.4.3 設(shè)置內(nèi)邊距 ................................................................................... 190
9.5 字體樣式 ............................................................................................. 191
9.5.1 font-family字體 ............................................................................ 191
9.5.2 font-size字號(hào) ............................................................................... 192
9.5.3 font-style字體風(fēng)格 ........................................................................ 193
9.5.4 font-weight加粗字體 ..................................................................... 195
9.6 段落樣式 ............................................................................................. 196
9.6.1 letter-spacing字符間隔 ................................................................. 196
9.6.2 word-spacing單詞間隔 .................................................................. 197
9.6.3 text-indent段落縮進(jìn) ...................................................................... 198
9.6.4 line-height文本行間距 ................................................................... 200
9.6.5 text-align橫向?qū)R ........................................................................ 201
9.6.6 vertical-align縱向?qū)R .................................................................. 202
9.7 邊框樣式 ............................................................................................ 204
9.7.1 border-style邊框線型 .................................................................. 204
9.7.2 border-color邊框顏色 .................................................................. 205
9.7.3 border-width邊框?qū)挾?.................................................................. 206
9.7.4 border邊框練習(xí) ............................................................................ 206
9.8 輪廓樣式 ............................................................................................ 208
9.8.1 outline-style邊框線型 ................................................................... 208
9.8.2 outline-color邊框顏色 .................................................................. 209
9.8.3 outline-width邊框?qū)挾?................................................................... 210
9.8.4 outline與border的異同點(diǎn) ................................................................ 212
9.9 列表標(biāo)記樣式 ..................................................................................... 213
9.9.1 list-style-type列表標(biāo)記樣式 ........................................................... 213
9.9.2 list-style-image列表標(biāo)記圖像 ........................................................ 216
9.9.3 list-style-position列表標(biāo)記的位置 ................................................... 218
9.9.4 list-style列表簡(jiǎn)寫格式 ................................................................... 219
本章小結(jié) ............................................................................................ 220
 
Chapter10  超級(jí)網(wǎng)頁——CSS3樣式表的應(yīng)用
10.1 CSS3概述 ...................................................................................... 222
10.1.1 CSS3與CSS的異同 ................................................................... 222
10.1.2 CSS3瀏覽器的支持情況 ............................................................. 222
10.2 CSS3的新增功能 ........................................................................... 223
10.2.1 CSS3新增的rem ....................................................................... 223
10.2.2 新增結(jié)構(gòu)性偽類 ......................................................................... 224
10.2.3 新增UI元素狀態(tài)偽類 ................................................................... 229
10.2.4 新增屬性和其他 .......................................................................... 231
10.3 CSS3文本樣式 .............................................................................. 234
10.3.1 text-shadow文本陰影 ............................................................... 234
10.3.2 text-overflow文本溢出 .............................................................. 236
10.3.3 word-wrap文本換行 ................................................................. 237
10.3.4 word-break單詞拆分 ................................................................ 239
10.4 CSS3邊框樣式 .............................................................................. 240
10.4.1 border-radius圓角邊框 ............................................................. 240
10.4.2 box-shadow盒子陰影 ................................................................ 241
10.5 CSS3背景樣式 .............................................................................. 243
10.5.1 background-size背景尺寸 ........................................................ 243
10.5.2 background-origin背景的繪制區(qū)域 ............................................. 244
10.6 CSS3漸變 ...................................................................................... 246
10.6.1 線性漸變 .................................................................................. 246
10.6.2 徑向漸變 .................................................................................. 249
10.7 CSS3轉(zhuǎn)換 ....................................................................................... 251
10.7.1 2D轉(zhuǎn)換 ..................................................................................... 251
10.7.2 3D轉(zhuǎn)換 .................................................................................... 258
10.8 CSS3動(dòng)畫 ...................................................................................... 264
10.8.1 動(dòng)畫屬性 .................................................................................. 264
10.8.2 實(shí)現(xiàn)動(dòng)畫 .................................................................................. 266
10.9 CSS3多列布局 ............................................................................... 269
10.10 CSS3過渡 ..................................................................................... 273
10.10.1 單項(xiàng)屬性過渡 ......................................................................... 273
10.10.2 多項(xiàng)屬性過渡 ......................................................................... 274
本章小結(jié) ............................................................................................ 276
 
Chapter11  知識(shí)拓展——XML的應(yīng)用
11.1 XML入門 ........................................................................................ 278
11.2 XML進(jìn)階 ......................................................................................... 281
本章小結(jié) ............................................................................................ 287
 
Chapter12  網(wǎng)頁特效——JavaScript必會(huì)基礎(chǔ)
12.1 JavaScript簡(jiǎn)介 ............................................................................ 289
12.2 JavaScript的基本元素 ................................................................ 290
12.3 JavaScript事件分析 .................................................................... 300
12.4 表單事件 .......................................................................................... 305
12.5 鼠標(biāo)事件 .......................................................................................... 307
12.6 鍵盤事件 ........................................................................................... 310
12.7 窗口事件 ........................................................................................... 311
本章小結(jié) ............................................................................................ 312
 
Chapter13  典型應(yīng)用——使用JavaScript制作特效
13.1 JavaScript事件分析 ..................................................................... 314
13.2 窗口特效 .......................................................................................... 322
13.3 時(shí)間特效 .......................................................................................... 323
本章小結(jié) ............................................................................................ 326
 
Chapter14  綜合實(shí)例——商業(yè)類網(wǎng)頁的制作
14.1 商業(yè)網(wǎng)站功能分析 ........................................................................... 328
14.2 頭部和banner的制作 .................................................................... 329
14.3 頁面主體的制作 ............................................................................... 332
14.4 頁面尾部的制作 ............................................................................... 335
14.5 網(wǎng)站首頁代碼實(shí)例 ........................................................................... 336
14.6 二級(jí)頁面的制作 ............................................................................... 340
本章小結(jié) ............................................................................................ 345
 
Chapter15  綜合實(shí)例——網(wǎng)店類網(wǎng)頁的制作
15.1 網(wǎng)店類網(wǎng)頁介紹 ............................................................................... 347
15.2 界面設(shè)計(jì)分析 .................................................................................. 347
15.3 頁面主體的制作 ............................................................................... 354
15.4 對(duì)底部?jī)?nèi)容進(jìn)行樣式定義 ............................................................... 364
15.5 二級(jí)頁面的制作 ............................................................................... 376
本章小結(jié) ............................................................................................ 380顯示全部信息