《HTML5從入門到精通》系統(tǒng)、全面地講解了HTML語(yǔ)言及其最新版本HTML5的新功能與新特性，技術(shù)新穎實(shí)用。
我們一直強(qiáng)調(diào)成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)對(duì)于企業(yè)的重要性,如果您也覺(jué)得重要,那么就需要我們慎重對(duì)待,選擇一個(gè)安全靠譜的網(wǎng)站建設(shè)公司,企業(yè)網(wǎng)站我們建議是要么不做，要么就做好,讓網(wǎng)站能真正成為企業(yè)發(fā)展過(guò)程中的有力推手。專業(yè)網(wǎng)站制作公司不一定是大公司,創(chuàng)新互聯(lián)作為專業(yè)的網(wǎng)絡(luò)公司選擇我們就是放心。
目 錄
第1篇 HTML基礎(chǔ)
第1章 HTML基礎(chǔ) 3
教學(xué)錄像：22分鐘
1.1 HTML的基本概念 4
1.2 HTML發(fā)展史 4
1.3 HTML的基本結(jié)構(gòu) 5
1.3.1 HTML文件的編寫方法 5
1.3.2 文件開(kāi)始標(biāo)簽html 7
1.3.3 文件頭部標(biāo)簽head 7
1.3.4 文件標(biāo)題標(biāo)簽title 7
1.3.5 文件主體標(biāo)簽body 7
1.3.6 編寫文件的注意事項(xiàng) 8
1.4 編寫第一個(gè)HTML文件 8
1.4.1 HTML文件的編寫方法 8
1.4.2 手工編寫頁(yè)面 9
1.4.3 使用可視化軟件制作頁(yè)面 10
1.4.4 使用瀏覽器瀏覽HTML文件 14
1.4.5 使用HTML開(kāi)發(fā)的明日?qǐng)D書網(wǎng) 14
1.5 小結(jié) 15
1.6 習(xí)題 16
第2章 HTML文件基本標(biāo)記 17
教學(xué)錄像：44分鐘
2.1 HTML頭部標(biāo)記 18
2.2 標(biāo)題標(biāo)記title 18
2.3 元信息標(biāo)記meta 19
2.3.1 設(shè)置頁(yè)面關(guān)鍵字 19
2.3.2 設(shè)置頁(yè)面描述 20
2.3.3 設(shè)置編輯工具 20
2.3.4 設(shè)定作者信息 21
2.3.5 限制搜索方式 22
2.3.6 設(shè)置網(wǎng)頁(yè)文字及語(yǔ)言 22
2.3.7 設(shè)置網(wǎng)頁(yè)的定時(shí)跳轉(zhuǎn) 23
2.3.8 設(shè)定有效期限 24
2.3.9 禁止從緩存中調(diào)用 24
2.3.10 刪除過(guò)期的cookie 25
2.3.11 強(qiáng)制打開(kāi)新窗口 25
2.3.12 設(shè)置網(wǎng)頁(yè)的過(guò)渡效果 26
2.4 基底網(wǎng)址標(biāo)記base 29
2.5 頁(yè)面的主體標(biāo)記body 30
2.5.1 設(shè)置文字顏色——text 31
2.5.2 背景顏色屬性——bgcolor 32
2.5.3 背景圖像屬性——background 32
2.5.4 設(shè)置鏈接文字屬性——link 35
2.5.5 設(shè)置邊距——margin 37
2.6 頁(yè)面的注釋標(biāo)記 38
2.7 實(shí)例演練——?jiǎng)?chuàng)建基本的HTML網(wǎng)頁(yè) 38
2.8 小結(jié) 39
2.9 習(xí)題 40
第3章 設(shè)計(jì)網(wǎng)頁(yè)文本內(nèi)容 41
教學(xué)錄像：29分鐘
3.1 標(biāo)題文字的建立 42
3.1.1 標(biāo)題文字標(biāo)記h 42
3.1.2 標(biāo)題文字的對(duì)齊方式——align 43
3.2 設(shè)置文字格式 44
3.2.1 設(shè)置文字字體——face 44
3.2.2 設(shè)置字號(hào)——size 45
3.2.3 設(shè)置文字顏色——color 46
3.2.4 粗體、斜體、下劃線——strong、em、u 46
3.2.5 上標(biāo)與下標(biāo)——sup、sub 47
3.2.6 設(shè)置刪除線——strike 48
3.2.7 等寬文字標(biāo)記——code 49
3.2.8 空格——nbsp; 49
3.2.9 其他特殊符號(hào) 50
3.3 設(shè)置段落格式 51
3.3.1 段落標(biāo)記——p 51
3.3.2 取消文字換行標(biāo)記——nobr 52
3.3.3 換行標(biāo)記——br 53
3.3.4 保留原始排版方式標(biāo)記——pre 53
3.3.5 居中對(duì)齊標(biāo)記——center 54
3.3.6 向右縮進(jìn)標(biāo)記——blockquote 55
3.4 水平線標(biāo)記 56
3.4.1 添加水平線——hr 56
3.4.2 設(shè)置水平線的寬度與高度
——width、height 57
3.4.3 設(shè)置水平線的顏色——color 58
3.4.4 設(shè)置水平線的對(duì)齊方式——align 59
3.4.5 去掉水平線陰影——noshade 60
3.5 其他文字標(biāo)記 60
3.5.1 文字標(biāo)注標(biāo)記——ruby 60
3.5.2 聲明變量標(biāo)記——var 61
3.5.3 忽視HTML標(biāo)記
——plaintext、xmp 62
3.6 小結(jié) 63
3.7 習(xí)題 63
第4章 使用列表 65
教學(xué)錄像：35分鐘
4.1 列表的標(biāo)記 66
4.2 使用無(wú)序列表 66
4.2.1 無(wú)序列表標(biāo)記——ul 66
4.2.2 無(wú)序列表的符號(hào)類型——type 67
4.3 使用有序列表 69
4.3.1 有序列表標(biāo)記——ol 69
4.3.2 有序列表的屬性——type 70
4.3.3 有序列表的起始數(shù)值——start 72
4.4 定義列表標(biāo)記——dl 73
4.5 菜單列表標(biāo)記——menu 74
4.6 目錄列表——dir 75
4.7 使用嵌套列表 76
4.7.1 定義列表的嵌套 77
4.7.2 無(wú)序列表和有序列表的嵌套 78
4.8 小結(jié) 79
4.9 習(xí)題 80
第5章 超鏈接 81
教學(xué)錄像：22分鐘
5.1 超鏈接的基本知識(shí) 82
5.1.1 超鏈接 82
5.1.2 絕對(duì)路徑 82
5.1.3 相對(duì)路徑 82
5.2 超鏈接的建立 83
5.2.1 超鏈接標(biāo)記的基本語(yǔ)法 83
5.2.2 建立文本超鏈接 83
5.2.3 設(shè)置超鏈接的目標(biāo)窗口 85
5.3 內(nèi)部鏈接 87
5.4 書簽鏈接 89
5.4.1 建立書簽 89
5.4.2 鏈接到同一頁(yè)面的書簽 91
5.4.3 鏈接到不同頁(yè)面的書簽 92
5.5 外部鏈接 93
5.5.1 通過(guò)HTTP協(xié)議 94
5.5.2 通過(guò)FTP 94
5.5.3 發(fā)送E-mail 95
5.5.4 下載文件 96
5.6 其他鏈接 98
5.6.1 腳本鏈接 98
5.6.2 空鏈接 99
5.7 小結(jié) 99
5.8 習(xí)題 100
第6章 使用圖像 101
教學(xué)錄像：35分鐘
6.1 圖像的基本格式 102
6.2 添加圖像——img 102
6.3 設(shè)置圖像屬性 103
6.3.1 圖像高度——height 103
6.3.2 圖像寬度——width 104
6.3.3 圖像邊框——border 105
6.3.4 圖像水平間距——hspace 107
6.3.5 圖像垂直間距——vspace 108
6.3.6 圖像相對(duì)于文字基準(zhǔn)線的對(duì)齊方式
——align 108
6.3.7 圖像的提示文字——alt 110
6.4 圖像的超鏈接 111
6.4.1 設(shè)置圖像的超鏈接 111
6.4.2 設(shè)置圖像熱區(qū)鏈接 112
6.5 小結(jié) 116
6.6 習(xí)題 116
第7章 表格的應(yīng)用 118
教學(xué)錄像：48分鐘
7.1 創(chuàng)建表格 119
7.1.1 表格的基本構(gòu)成——table、tr、td 119
7.1.2 表格的標(biāo)題——caption 120
7.1.3 表格的表頭——th 121
7.2 設(shè)置表格基本屬性 123
7.2.1 表格的寬度——width 123
7.2.2 表格的高度——height 125
7.2.3 表格的對(duì)齊方式——align 126
7.3 設(shè)置表格的邊框 127
7.3.1 表格邊框的寬度——border 127
7.3.2 表格邊框的顏色——bordercolor 128
7.3.3 表格內(nèi)框的寬度——cellspacing 130
7.3.4 表格內(nèi)文字與邊框的間距
——cellpadding 131
7.4 設(shè)置表格背景 132
7.4.1 表格的背景顏色——bgcolor 132
7.4.2 表格的背景圖像——background 133
7.5 設(shè)置表格的行屬性 134
7.5.1 高度的控制——height 134
7.5.2 行的邊框顏色——bordercolor 135
7.5.3 行的背景顏色——bgcolor、background 136
7.5.4 行文字的水平對(duì)齊方式——align 137
7.5.5 行文字的垂直對(duì)齊方式——valign 139
7.5.6 表格標(biāo)題的垂直對(duì)齊方式——align 140
7.6 調(diào)整單元格屬性 141
7.6.1 單元格大小——width、height 141
7.6.2 單元格水平跨度——colspan 142
7.6.3 單元格垂直跨度——rowspan 143
7.6.4 單元格對(duì)齊方式——align、valign 144
7.6.5 單元格的背景色 146
7.6.6 單元格的邊框顏色——bordercolor 147
7.6.7 單元格的亮邊框——bordercolorlight 148
7.6.8 單元格的暗邊框——bordercolordark 150
7.6.9 單元格的背景圖像——background 151
7.7 表格的結(jié)構(gòu) 152
7.7.1 表格的表頭標(biāo)記——thead 153
7.7.2 表格的表主體標(biāo)記——tbody 154
7.7.3 表格的表尾標(biāo)記——tfoot 156
7.8 表格的嵌套 157
7.9 小結(jié) 159
7.10 習(xí)題 159
第8章 層標(biāo)記——div 161
教學(xué)錄像：33分鐘
8.1 層 162
8.1.1 層的分類 162
8.1.2 定義數(shù)據(jù)塊 162
8.2 div標(biāo)簽 163
8.2.1 div標(biāo)簽的簡(jiǎn)介 163
8.2.2 div標(biāo)簽的屬性 164
8.2.3 span標(biāo)簽與div標(biāo)簽 170
8.3 iframe標(biāo)簽 172
8.3.1 iframe標(biāo)簽的簡(jiǎn)介 172
8.3.2 iframe標(biāo)簽的屬性 172
8.4 layer標(biāo)簽和ilayer標(biāo)簽 174
8.4.1 標(biāo)簽層的使用 175
8.4.2 layer標(biāo)簽和ilayer標(biāo)簽的區(qū)別 176
8.5 應(yīng)用div制作下拉菜單導(dǎo)航條 176
8.6 小結(jié) 179
8.7 習(xí)題 179
第9章 編輯表單 181
教學(xué)錄像：26分鐘
9.1 使用表單標(biāo)簽——form 182
9.1.1 處理動(dòng)作——action 182
9.1.2 表單名稱——name 183
9.1.3 傳送方法——method 183
9.1.4 編碼方式——enctype 184
9.1.5 目標(biāo)顯示方式——target 185
9.2 添加控件 185
9.3 輸入類的控件 186
9.3.1 文字字段——text 186
9.3.2 密碼域——password 187
9.3.3 單選按鈕——radio 188
9.3.4 復(fù)選框——checkbox 189
9.3.5 普通按鈕——button 190
9.3.6 提交按鈕——submit 191
9.3.7 重置按鈕——reset 192
9.3.8 圖像域——image 193
9.3.9 隱藏域——hidden 195
9.3.10 文件域——file 195
9.4 列表/菜單標(biāo)記 197
9.5 文本域標(biāo)記——textarea 198
9.6 id標(biāo)記 199
9.7 小結(jié) 200
9.8 習(xí)題 200
第10章 多媒體頁(yè)面 202
視頻講解：18分鐘
10.1 設(shè)置滾動(dòng)文字 203
10.1.1 滾動(dòng)文字標(biāo)簽——marquee 203
10.1.2 滾動(dòng)方向?qū)傩浴猟irection 203
10.1.3 滾動(dòng)方式屬性——behavior 204
10.1.4 滾動(dòng)速度屬性——scrollamount 205
10.1.5 滾動(dòng)延遲屬性——scrolldelay 206
10.1.6 滾動(dòng)循環(huán)屬性——loop 207
10.1.7 滾動(dòng)范圍屬性——width、height 208
10.1.8 滾動(dòng)背景顏色屬性——bgcolor 209
10.1.9 滾動(dòng)空間屬性——hspace、vspace 209
10.2 添加背景音樂(lè) 211
10.2.1 設(shè)置背景音樂(lè)——bgsound 211
10.2.2 設(shè)置循環(huán)播放次數(shù)——loop 212
10.3 添加多媒體文件 213
10.3.1 添加多媒體文件標(biāo)記——embed 213
10.3.2 設(shè)置自動(dòng)運(yùn)行——autostart 214
10.3.3 設(shè)置媒體文件的循環(huán)播放——loop 215
10.3.4 隱藏面板——hidden 216
10.3.5 添加其他類型的媒體文件 217
10.4 小結(jié) 217
10.5 習(xí)題 218
第2篇 HTML 5高級(jí)應(yīng)用
第11章 HTML 5的新特性 221
視頻講解：6分鐘
11.1 誰(shuí)在開(kāi)發(fā)HTML 5 222
11.2 HTML 5的新認(rèn)識(shí) 222
11.2.1 兼容性 222
11.2.2 實(shí)用性和用戶優(yōu)先 222
11.2.3 化繁為簡(jiǎn) 223
11.3 無(wú)插件范式 223
11.4 HTML 5的新特性 224
11.5 小結(jié) 224
第12章 HTML 5與HTML 4的區(qū)別 225
視頻講解：51分鐘
12.1 語(yǔ)法的改變 226
12.1.1 HTML 5的語(yǔ)法變化 226
12.1.2 HTML 5中的標(biāo)記方法 226
12.1.3 HTML 5語(yǔ)法中的3個(gè)要點(diǎn) 227
12.1.4 標(biāo)簽實(shí)例 228
12.2 新增的元素和廢除的元素 228
12.2.1 新增的結(jié)構(gòu)元素 228
12.2.2 新增的塊級(jí)的語(yǔ)義元素 230
12.2.3 新增的行內(nèi)的語(yǔ)義元素 231
12.2.4 新增的嵌入多媒體元素與交互性元素 231
12.2.5 新增的input元素的類型 232
12.2.6 廢除的元素 233
12.3 新增的屬性和廢除的屬性 234
12.3.1 新增的屬性 234
12.3.2 廢除的屬性 236
12.4 全局屬性 237
12.4.1 contentEditable屬性 237
12.4.2 designMode屬性 238
12.4.3 hidden屬性 239
12.4.4 spellcheck屬性 239
12.4.5 tabindex屬性 240
12.5 小結(jié) 240
12.6 習(xí)題 240
第13章 HTML 5的結(jié)構(gòu) 242
視頻講解：20分鐘
13.1 新增的主體結(jié)構(gòu)元素 243
13.1.1 article元素 243
13.1.2 section元素 245
13.1.3 nav元素 247
13.1.4 aside元素 248
13.1.5 time元素 250
13.1.6 pubdate屬性 250
13.2 新增的非主體結(jié)構(gòu)元素 251
13.2.1 header元素 251
13.2.2 hgroup元素 252
13.2.3 footer元素 252
13.2.4 address元素 253
13.3 小結(jié) 253
13.4 習(xí)題 254
第14章 HTML 5中的表單 255
視頻講解：50分鐘
14.1 新增表單元素與屬性 256
14.1.1 新增的屬性 256
14.1.2 增加與改良的input元素的種類 259
14.1.3 output元素的添加 264
14.1.4 應(yīng)用新增元素制作注冊(cè)表單 264
14.2 對(duì)表單的驗(yàn)證 266
14.2.1 自動(dòng)驗(yàn)證 266
14.2.2 checkValidity顯式驗(yàn)證法 267
14.2.3 避免驗(yàn)證 268
14.2.4 使用setCustomValidity方法自定義
錯(cuò)誤信息 268
14.3 增加的頁(yè)面元素 269
14.3.1 新增的figure元素 270
14.3.2 新增的details元素 271
14.3.3 新增的mark元素 272
14.3.4 新增的progress元素 274
14.3.5 新增的meter元素 275
14.3.6 改良的ol列表 276
14.3.7 改良的dl列表 276
14.3.8 加以嚴(yán)格限制的cite元素 277
14.3.9 重新定義的small元素 278
14.4 小結(jié) 278
14.5 習(xí)題 279
第15章 HTML 5中的文件與拖放 280
視頻講解：40分鐘
15.1 選擇文件 281
15.1.1 通過(guò)file對(duì)象選擇文件 281
15.1.2 使用blob接口獲取文件的類型與大小 282
15.1.3 通過(guò)類型過(guò)濾選擇的文件 283
15.2 使用FileReader接口讀取文件 285
15.2.1 檢測(cè)瀏覽器是否支持FileReader接口 285
15.2.2 FileReader接口的方法 285
15.2.3 使用readAsDataURL方法預(yù)覽圖片 286
15.2.4 使用readAsText方法讀取文本文件 287
15.2.5 FileReader接口中的事件 288
15.3 拖放API 290
15.3.1 實(shí)現(xiàn)拖放的步驟 290
15.3.2 通過(guò)拖放顯示歡迎信息 291
15.4 dataTransfer對(duì)象應(yīng)用詳解 293
15.4.1 使用effectAllowed和dropEffect屬性
設(shè)置拖放效果 293
15.4.2 使用setDragImage方法設(shè)置拖放圖標(biāo) 294
15.5 小結(jié) 295
15.6 習(xí)題 295
第16章 多媒體播放 296
視頻講解：35分鐘
16.1 HTML 5多媒體的簡(jiǎn)述 297
16.1.1 HTML 4中多媒體的應(yīng)用 297
16.1.2 HTML 5頁(yè)面中的多媒體 297
16.2 多媒體元素基本屬性 298
16.3 多媒體元素常用方法 302
16.3.1 媒體播放時(shí)的方法 302
16.3.2 canPlayType(type)方法 304
16.4 多媒體元素重要事件 304
16.4.1 事件處理方式 304
16.4.2 事件介紹 305
16.4.3 事件實(shí)例 306
16.5 小結(jié) 308
16.6 習(xí)題 309
第17章 繪制圖形 310
視頻講解：1小時(shí)32分鐘
17.1 canvas的基礎(chǔ)知識(shí) 311
17.1.1 canvas是什么 311
17.1.2 在頁(yè)面中放置canvas元素 311
17.1.3 繪制帶邊框的矩形 312
17.2 在畫布中使用路徑 314
17.2.1 使用arc方法繪制圓形 314
17.2.2 使用moveTo與lineTo路徑繪制火柴人 316
17.2.3 貝塞爾和二次方曲線 317
17.3 運(yùn)用樣式與顏色 319
17.3.1 fillStyle 和 strokeStyle屬性 319
17.3.2 透明度 globalAlpha 321
17.3.3 線型 Line styles 323
17.4 繪制漸變圖形 325
17.4.1 繪制線性漸變 325
17.4.2 繪制徑向漸變 326
17.5 繪制變形圖形 328
17.5.1 坐標(biāo)的變換 328
17.5.2 矩陣變換 330
17.6 組合多個(gè)圖形 333
17.7 給圖形繪制陰影 335
17.8 應(yīng)用圖像 336
17.8.1 繪制圖像 336
17.8.2 圖像的局部放大 338
17.8.3 圖像平鋪 339
17.8.4 圖像裁剪 341
17.8.5 像素的處理 342
17.9 繪制文字 344
17.10 保存與恢復(fù)狀態(tài) 345
17.11 文件的保存 346
17.12 對(duì)畫布繪制實(shí)現(xiàn)動(dòng)畫 347
17.13 綜合實(shí)例——桌面時(shí)鐘 348
17.14 小結(jié) 350
17.15 習(xí)題 351
第18章 數(shù)據(jù)存儲(chǔ) 352
視頻講解：50分鐘
18.1 初識(shí)Web Storage 353
18.1.1 什么是Web Storage 353
18.1.2 使用Web Storage中的API 353
18.1.3 sessionStorage和localStorage的實(shí)例
——計(jì)數(shù)器 355
18.1.4 Web Storage綜合實(shí)例——留言本 357
18.1.5 JSON對(duì)象的存數(shù)實(shí)例——用戶信息卡 359
18.2 本地?cái)?shù)據(jù)庫(kù) 361
18.2.1 Web SQL數(shù)據(jù)庫(kù)簡(jiǎn)介 361
18.2.2 使用Web SQL Database API 362
18.2.3 本地?cái)?shù)據(jù)庫(kù)實(shí)例——用戶登錄 363
18.3 小結(jié) 367
18.4 習(xí)題 367
第19章 離線應(yīng)用程序 368
視頻講解：13分鐘
19.1 HTML 5離線Web應(yīng)用概述 369
19.1.1 離線Web應(yīng)用概述 369
19.1.2 本地緩存與瀏覽器網(wǎng)頁(yè)緩存的區(qū)別 370
19.2 創(chuàng)建HTML 5離線應(yīng)用 370
19.2.1 緩存清單（manifest） 370
19.2.2 配置IIS服務(wù)器 372
19.2.3 瀏覽緩存清單 372
19.3 瀏覽器與服務(wù)器的交互過(guò)程 373
19.4 applicationCache對(duì)象 374
19.4.1 swapCache方法 375
19.4.2 applicationCache對(duì)象的事件 376
19.5 小結(jié) 379
19.6 習(xí)題 379
第20章 使用Web Worker處理線程 380
視頻講解：25分鐘
20.1 Web Worker概述 381
20.1.1 創(chuàng)建和使用Worker 381
20.1.2 Web Worker應(yīng)用實(shí)例——求和運(yùn)算 382
20.2 在Worker內(nèi)部能做什么 383
20.3 多個(gè)JavaScript文件的加載與執(zhí)行 384
20.4 線程嵌套 384
20.4.1 單層嵌套 385
20.4.2 在多個(gè)子線程中進(jìn)行數(shù)據(jù)的交互 387
20.5 小結(jié) 390
20.6 習(xí)題 390
第21章 通信API 391
視頻講解：4分鐘
21.1 跨文檔消息通信 392
21.1.1 使用postMessageAPI 392
21.1.2 跨文檔消息傳輸 392
21.2 小結(jié) 394
第22章 獲取地理位置信息 395
視頻講解：12分鐘
22.1 Geolocation API的概述 396
22.1.1 使用getCurrentPosition方法獲取
當(dāng)前地理位置 396
22.1.2 持續(xù)監(jiān)視當(dāng)前地理位置的信息 398
22.1.3 停止獲取當(dāng)前用戶的地理位置信息 398
22.2 position對(duì)象 398
22.3 在google地圖上顯示“我在這里” 399
22.4 小結(jié) 401
22.5 習(xí)題 401
第3篇 HTML 5項(xiàng)目實(shí)戰(zhàn)
第23章 旅游信息網(wǎng)前臺(tái)頁(yè)面 405
視頻講解：20分鐘
1、離線存儲(chǔ)
HTML 5可以讓你的WEB應(yīng)用程序離線也能運(yùn)行，它提供了一個(gè)稱作“應(yīng)用程序緩存”的離線存儲(chǔ)功能，因此即使當(dāng)用戶離線，瀏覽器仍然能夠訪問(wèn)到它所需的文件。這些文件可以是HM, CSS，Javascript或者其它任何網(wǎng)頁(yè)運(yùn)行所需要的文件。
2、拖拽功能
HTML 5提供了可以用來(lái)設(shè)計(jì)交互應(yīng)用程序的本地拖拽功能，通過(guò)這個(gè)特性你可以拖動(dòng)任何元素然后把它放到你想放到地方。
3、地理位置定位技術(shù)
HTML 5的地理位置定位API可以讓你與所信任的網(wǎng)站分享你當(dāng)前的位置信息，當(dāng)然，隱私問(wèn)題是這特性所主要考慮的，W3. org聲明：瀏覽器在沒(méi)有用戶許可的情況下不允許私自向網(wǎng)站發(fā)送用戶的地理位置信息。
比如一位用戶使用Firefox瀏覽器訪問(wèn)了一個(gè)實(shí)現(xiàn)地理位置定位技術(shù)的網(wǎng)頁(yè)，瀏覽器會(huì)向用戶詢問(wèn)是否共享他的地理位置信息，如果用戶同意，F(xiàn)irefox會(huì)收集附近無(wú)線接入點(diǎn)和訪問(wèn)者IP地址信息，并把這些信息發(fā)送到默認(rèn)設(shè)定的Google地理位置服務(wù)，處理之后的位置信息將會(huì)發(fā)送給用戶訪問(wèn)的這個(gè)網(wǎng)站。
4、音頻和視頻
當(dāng)前的HML缺少在頁(yè)面中嵌入多媒體文件的特性，因此多媒體文件的嵌入需要使用各種的插件。比如FLASH被廣泛地用來(lái)嵌入音頻和視頻文件?，F(xiàn)在可以非常方便地使用HTML5提供的audio和video標(biāo)簽，而不用任何插件。
5、表單輸入
HTML5提供了幾個(gè)新的表單input類型，像彈出日歷，調(diào)色板，數(shù)字輸入框等等。這些可以創(chuàng)建擁有更好的輸入控制和驗(yàn)證的高效表單。
關(guān)于Web前端學(xué)習(xí)的必經(jīng)階段。正在從事Web前端學(xué)習(xí)的小伙伴們來(lái)和小伙伴們一起看一看吧。希望能夠?qū)Υ蠹矣兴鶐椭?/p>
第一階段：
● HTML+CSS:
HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開(kāi)發(fā)、
● JavaScript基礎(chǔ)：
Js基礎(chǔ)教程、js內(nèi)置對(duì)象常用方法、常見(jiàn)DOM樹操作大全、ECMAscript、DOM、BOM、定時(shí)器和焦點(diǎn)圖。
● JS基本特效：
常見(jiàn)特效、例如：tab、導(dǎo)航、整頁(yè)滾動(dòng)、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動(dòng)事件、滾差視圖。
● JS高級(jí)特征：
正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運(yùn)動(dòng)框架、面向?qū)ο蠡A(chǔ)、
● JQuery：基礎(chǔ)使用
懸著器、DOM操作、特效和動(dòng)畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。
第二階段：HTML5和移動(dòng)Web開(kāi)發(fā)
● HTML5：
HTML5新語(yǔ)義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲(chǔ)、SVG、Web Socket、Canvas.
● CSS3:
CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動(dòng)畫、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場(chǎng)、出場(chǎng)策略、炫酷CSS3網(wǎng)頁(yè)制作。
● Bootstrap:
響應(yīng)式概念、媒體查詢、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。
● 移動(dòng)Web開(kāi)發(fā)：
跨終端WEB和主流設(shè)備簡(jiǎn)介、視口、流式布局、彈性盒子、rem、移動(dòng)終端JavaScript事件、手機(jī)中常見(jiàn)JS效果制作、Zepto.js、手機(jī)聚劃算頁(yè)面、手機(jī)滾屏。
第三階段：HTTP服務(wù)和AJAX編程
● WEB服務(wù)器基礎(chǔ)：
服務(wù)器基礎(chǔ)知識(shí)、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。
● PHP基礎(chǔ)：
PHP基礎(chǔ)語(yǔ)法、使用PHP處理簡(jiǎn)單的GET或者POST請(qǐng)求、
● AJAX上篇：
Ajax簡(jiǎn)介和異步的概念、Ajax框架的封裝、XMLHttpRequest對(duì)象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問(wèn)題、XML介紹和使用。
● AJAX下篇：
JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實(shí)現(xiàn)瀑布流案例額。
第四階段：面向?qū)ο筮M(jìn)階
● 面向?qū)ο蠼K極篇：
從內(nèi)存角度到理解JS面向?qū)ο蟆⒒绢愋?、?fù)雜類型、原型鏈、ES6中的面向?qū)ο?、屬性讀寫權(quán)限、設(shè)置器、訪問(wèn)器。
● 面向?qū)ο笕筇卣鳎?/p>
繼承性、多態(tài)性、封裝性、接口。
● 設(shè)計(jì)模式：
面向?qū)ο缶幊趟季S、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。
第五階段：封裝一個(gè)屬于自己的框架
● 框架封裝基礎(chǔ)：
事件流、冒泡、捕獲、事件對(duì)象、事件框架、選擇框架。
● 框架封裝中級(jí)：
運(yùn)動(dòng)原理、單物體運(yùn)動(dòng)框架、多物體運(yùn)動(dòng)框架、運(yùn)動(dòng)框架面向?qū)ο蠓庋b。
● 框架封裝高級(jí)和補(bǔ)充：
JQuery框架雛形、可擴(kuò)展性、模塊化、封裝屬于傳智自己的框架。
第六階段：模塊化組件開(kāi)發(fā)
● 面向組件編程：
面向組件編程的方式、面向組件編程的實(shí)現(xiàn)原理、面向組件編程實(shí)戰(zhàn)、基于組件化思想開(kāi)發(fā)網(wǎng)站應(yīng)用程序。
● 面向模塊編程：
AMD設(shè)計(jì)規(guī)范、CMD設(shè)計(jì)規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。
第七階段：主流的流行框架
● Web開(kāi)發(fā)工作流：
GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。
● MVC/MVVM/MVW框架：
Angular.js、Backbone.js、Knockout/Ember。
● 常用庫(kù)：
React.js、Vue.js、Zepto.js。
第八階段：HTML5原生移動(dòng)應(yīng)用開(kāi)發(fā)
● Cordova：
WebApp/NativeApp/HybirdApp簡(jiǎn)介、Cordova簡(jiǎn)介、與PhoneGap之間的關(guān)系、開(kāi)發(fā)環(huán)境搭建、Cordova實(shí)戰(zhàn)(創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布)。
● Ionic：
Ionic簡(jiǎn)介和同類對(duì)比、模板項(xiàng)目解析、常見(jiàn)組件及使用、結(jié)合Angular構(gòu)建APP、常見(jiàn)效果(下拉刷新，上拉加載，側(cè)滑導(dǎo)航，選項(xiàng)卡)。
● React Native：
React Native簡(jiǎn)介、React Native環(huán)境配置、創(chuàng)建項(xiàng)目，配置，編譯，調(diào)試，部署發(fā)布、原生模塊和UI組件、原生常用API。
● HTML5+：
HTML5+中國(guó)產(chǎn)業(yè)聯(lián)盟、HTML5 Plus Runtime環(huán)境、HBuilder開(kāi)發(fā)工具、MUI框架、H5+開(kāi)發(fā)和部署。
第九階段： Node.js全棧開(kāi)發(fā)
● 快速入門：
Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺(tái)程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開(kāi)發(fā)流程，調(diào)試，測(cè)試。
● 核心模塊和對(duì)象：
全局對(duì)象global，process，console，util、事件驅(qū)動(dòng)，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶端、Socket.IO。
● Web開(kāi)發(fā)基礎(chǔ)：
HTTP協(xié)議，請(qǐng)求響應(yīng)處理過(guò)程、關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問(wèn)、非關(guān)系型數(shù)據(jù)庫(kù)操作和數(shù)據(jù)訪問(wèn)、原生的Node.js開(kāi)發(fā)Web應(yīng)用程序、Web開(kāi)發(fā)工作流、Node.js開(kāi)發(fā)Blog案例。
● 快速開(kāi)發(fā)框架：
Express簡(jiǎn)介+MVC簡(jiǎn)介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見(jiàn)MVC框架。
● Node.js開(kāi)發(fā)電子商務(wù)實(shí)戰(zhàn)：
需求與設(shè)計(jì)、賬戶模塊注冊(cè)登錄、會(huì)員中心模塊、前臺(tái)展示模塊、購(gòu)物車，訂單結(jié)算、在線客服即時(shí)通訊模塊。
舉個(gè)實(shí)現(xiàn)HTML5響應(yīng)式表格的實(shí)例，僅供參考：
HTML結(jié)構(gòu)如下：
table id="miyazaki"
captionThe Films of Miyazaki/caption
thead
trthFilmthYearthHonor
tbody
tr
td data-th="Film"My Neighbor Totoro
td data-th="Year"1988
td data-th="Honor"Blue Ribbon Award (Special)
tr
td data-th="Film"Princess Mononoke
td data-th="Year"1997
td data-th="Honor"Nebula Award (Best Script)
tr
td data-th="Film"Spirited Away
td data-th="Year"2001
td data-th="Honor"Academy Award (Best Animated Feature)
tr
td data-th="Film"Howl’s Moving Castle
td data-th="Year"2004
td data-th="Honor"Hollywood Film Festival (Animation OTY)
/table
注意代碼中的data屬性，每一個(gè)單元格的data屬性都與表格的header相對(duì)應(yīng)。
CSS樣式
表格基本的CSS樣式如下：
table#miyazaki caption {
font-size: 2rem; color: #444;
margin: 1rem;
background-image: url(miyazaki.png), url(miyazaki2.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center left, center right;
}
table#miyazaki {
border-collapse: collapse;
font-family: Agenda-Light; font-weight: 100;
background: #333; color: #fff;
text-rendering: optimizeLegibility;
border-radius: 5px;
}
table#miyazaki thead th { font-weight: 600; }
table#miyazaki thead th, table#miyazaki tbody td {
padding: .8rem; font-size: 1.4rem;
}
table#miyazaki tbody td {
padding: .8rem; font-size: 1.4rem;
color: #444; background: #eee;
}
table#miyazaki tbody tr:not(:last-child) {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
下面是響應(yīng)式表格的CSS代碼：
@media screen and (max-width: 600px) {
table#miyazaki caption { background-image: none; }
table#miyazaki thead { display: none; }
table#miyazaki tbody td { display: block; padding: .6rem; }
table#miyazaki tbody tr td:first-child { background: #333; color: #fff; }
table#miyazaki tbody td:before {
content: attr(data-th); font-weight: bold;
display: inline-block; width: 6rem;
}
}
media query代碼中隱藏表格的頭部單元，并且將每一個(gè)單元格的data-th作為標(biāo)簽顯示在單元格內(nèi)容的前面。每一行的第一個(gè)單元格都設(shè)置了特別的背景色和前景色，使之更為清晰。
擴(kuò)展
你現(xiàn)在可以縮放瀏覽器來(lái)看看效果，非常不錯(cuò)。但是上面的代碼是不可擴(kuò)展的：要添加一個(gè)新行必須手動(dòng)為每個(gè)單元格添加一個(gè)data-th屬性。要想做到自動(dòng)化，可以在服務(wù)器端實(shí)現(xiàn)，如PHP。也可以通過(guò)javascript來(lái)實(shí)現(xiàn)它。
首先，將整個(gè)表格都進(jìn)行簡(jiǎn)化：
table id="miyazaki"
captionThe Films of Hayao Miyazaki/caption
thead
trthFilmthYearthHonor
tbody
tr
tdMy Neighbor Totoro
td1988
tdBlue Ribbon Award (Special)
tr
tdPrincess Mononoke
td1997
tdNebula Award (Best Script)
tr
tdSpirited Away
td2001
tdAcademy Award (Best Animated Feature)
tr
tdHowl’s Moving Castle
td2004
tdHollywood Film Festival (Animation OTY)
/table
然后在文檔的底部添加下面的javascript代碼：
script
var headertext = [];
var headers = document.querySelectorAll("#miyazaki th"),
tablerows = document.querySelectorAll("#miyazaki th"),
tablebody = document.querySelector("#miyazaki tbody");
for(var i = 0; i headers.length; i++) {
var current = headers[i];
headertext.push( current.textContent.replace( /\r?\n|\r/,"") );
}
for (var i = 0, row; row = tablebody.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
col.setAttribute("data-th", headertext[j]);
} }
/script
上面的代碼的意思是：獲取每一個(gè)th中的文本內(nèi)容，然后分別剔除它們的回車和換行符。然后將這些文本分別添加到適當(dāng)?shù)膯卧竦膁ata屬性上，添加的規(guī)則與CSS樣式的規(guī)則相一致。（使用setAttribute要比dataset要好，后者只有在IE 11中得到支持。）
隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，web前端逐漸受到企業(yè)的重視，前端開(kāi)發(fā)人員的薪資也水漲船高，越來(lái)越多的人看好前端行業(yè)的發(fā)展，想要轉(zhuǎn)行加入。下面，給大家分享一份web前端學(xué)習(xí)路線圖，希望對(duì)初學(xué)者有所幫助。Web前端行業(yè)的發(fā)展，讓前端人員能完成比以前更多的職責(zé)范圍，所以未來(lái)前端可以寬口徑就業(yè)，前景非常好。
對(duì)于零基礎(chǔ)的人而言，要怎么學(xué)習(xí)web前端呢?
1、 前端頁(yè)面重構(gòu)。主要內(nèi)容為PC端網(wǎng)站布局、Photoshop 工具及切圖、H5移動(dòng)端網(wǎng)頁(yè)布局、HTML5+CSS3新特性與交互。學(xué)習(xí)目標(biāo)是完成PC端網(wǎng)站布局，可實(shí)現(xiàn)響應(yīng)式布局，一套代碼適配 PC 端、移動(dòng)端、平板設(shè)備等。
2、 前后端網(wǎng)頁(yè)交互。主要內(nèi)容為JavaScript語(yǔ)法全面進(jìn)階、ES6 到 ES10 新語(yǔ)法實(shí)踐、jQuery 應(yīng)用及插件使用、設(shè)計(jì)模式及插件編寫、封裝JS工具庫(kù)及Web APIS、AJAX+PHP+MySQL前后端交互、前端工程化與模塊化應(yīng)用以及PC 端全棧開(kāi)發(fā)項(xiàng)目等。學(xué)習(xí)目標(biāo)是可以掌握前端工程化工具，如 git、gulp、webpack 等，搭建項(xiàng)目及開(kāi)發(fā)項(xiàng)目。
3、 Node.js + 前端框架。主要內(nèi)容為Node.js 全面進(jìn)階、Koa2+MongoDB搭建服務(wù)、Vue.js 框架、React.js 框架、小程序云開(kāi)發(fā)與小程序框架、原生APP與混合APP、數(shù)據(jù)可視化與桌面應(yīng)用等。學(xué)習(xí)目標(biāo)是掌握桌面應(yīng)用及可視化大數(shù)據(jù)，實(shí)現(xiàn)復(fù)雜數(shù)據(jù)展示類項(xiàng)目，能夠獨(dú)立完成前后臺(tái)相關(guān)功能，勝任HTML5全棧開(kāi)發(fā)工程師職位。很多學(xué)習(xí)web前端的朋友都希望在學(xué)成后能找到一份滿意的工作，所以我們?cè)趯W(xué)習(xí)過(guò)程中一定要注意實(shí)戰(zhàn)經(jīng)驗(yàn)的積累，如果你所學(xué)的東西對(duì)企業(yè)沒(méi)有用，那你所做的一切都是無(wú)用功
圖表的背景一般是精心設(shè)計(jì)的它有一定的梯度、網(wǎng)格線、號(hào)碼標(biāo)簽和月份名稱等等，如果直接通過(guò)JavaScript進(jìn)行繪制可能需數(shù)十行或上百行的代碼。但是如果我們直接通過(guò)Canvas直接創(chuàng)建一個(gè)背景圖。我們只需要在其他的軟件如PS上繪制好一個(gè)背景圖，然后加載到Canvas上就可以了。
!DOCTYPE html
html
head
meta charset="utf-8"
title繪制圖表/title
/head
body
div id="result-stub" class="well hidden"
canvas id="canvas" width="345" height="345"
p你的瀏覽器不支持canvas元素/p
/canvas
/div
script
// ??1、要繪制圖表首先我們要獲取到canvas對(duì)象以及具有圖表背景的圖片對(duì)象。
var
canvas = document.getElementById('canvas'),
context = null;
context = canvas.getContext('2d');
var img = new Image();
img.src ='chart-background.png';//這里是一張具有圖表背景的圖片
// ???2、繪制一個(gè)具有圖表背景的圖片后再根據(jù)要繪制的曲線圖各個(gè)點(diǎn)在canvas是中的坐標(biāo)繪制直線。
img.onload = function() {
//繪制圖片
context.drawImage(img, 0, 0);
//繪制直線
context.beginPath();
context.moveTo(70, 105);
context.lineTo(105, 132);
context.lineTo(142, 250);
context.lineTo(176, 175);
context.lineTo(212, 145);
context.lineTo(245, 197);
context.lineTo(280, 90);
context.stroke();
}
/script
script src="jquery.js"/script
/body
/html
3、本示例的最終繪制效果如下：這樣一個(gè)曲線圖表就繪制出來(lái)的，其他的圖表也可以用類似的方法進(jìn)行繪制。
這些都是有關(guān)于HTML5新特性的一些應(yīng)用。給你推薦一個(gè)教程網(wǎng)站秒秒學(xué)，該網(wǎng)站上有關(guān)于HTML5新特性的講解。
重慶分公司
重慶分公司
