HTML CSS網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐教程目錄

時(shí)間：2023-07-07 01:12:01 | 來(lái)源：營(yíng)銷(xiāo)百科

時(shí)間：2023-07-07 01:12:01 來(lái)源：營(yíng)銷(xiāo)百科

HTML CSS網(wǎng)頁(yè)設(shè)計(jì)實(shí)踐教程目錄：第1章 HTML 5概述 1

1.1 了解HTML 5 1

1.1.1 HTML 5簡(jiǎn)介 1

1.1.2 HTML 5的組織 2

1.1.3 HTML 5的特性 2

1.1.4 HTML 5的優(yōu)點(diǎn) 4

1.1.5 HTML 5的發(fā)展趨勢(shì) 4

1.2 HTML 5與其他技術(shù)的區(qū)別 4

1.2.1 與XHTML的區(qū)別 5

1.2.2 與Silverlight和Flash的區(qū)別 6

1.3 HTML 5與HTML 4的區(qū)別 7

1.3.1 語(yǔ)法的改變 7

1.3.2 新增元素和廢除元素 10

1.3.3 新增屬性和廢除屬性 14

1.3.4 全局屬性 17

1.4 HTML 5的瀏覽器支持情況 19

1.4.1 支持HTML 5的瀏覽器

說(shuō)明 20

1.4.2 在線(xiàn)測(cè)試當(dāng)前瀏覽器的

支持情況 21

1.5 實(shí)驗(yàn)指導(dǎo)1-1：簡(jiǎn)單安裝傲游

瀏覽器 24

1.6 常用的瀏覽器內(nèi)核 25

思考與練習(xí) 26

第2章 HTML 5中的新增元素 28

2.1 新增的結(jié)構(gòu)元素 28

2.1.1 header元素 28

2.1.2 article元素 29

2.1.3 section元素 30

2.1.4 nav元素 33

2.1.5 footer元素 35

2.1.6 address元素 36

2.1.7 hgroup元素 37

2.2 新增的塊級(jí)語(yǔ)義元素 38

2.2.1 aside元素 38

2.2.2 figure元素 40

2.2.3 dialog元素 41

2.3 新增的行內(nèi)語(yǔ)義元素 42

2.3.1 mark元素 42

2.3.2 cite元素 43

2.3.3 time元素 44

2.3.4 meter元素 45

2.3.5 progress元素 47

2.4 新增的交互元素 48

2.4.1 details元素 48

2.4.2 menu元素 50

2.4.3 command元素 52

2.4.4 datagrid元素 53

2.5 改良HTML 4元素的功能 54

2.5.1 ul元素 54

2.5.2 ol元素 55

2.5.3 嵌套列表 57

2.6 實(shí)驗(yàn)指導(dǎo)2-1：使用新增元素構(gòu)建

網(wǎng)頁(yè) 58

思考與練習(xí) 64

第3章 HTML 5中的表單應(yīng)用 66

3.1 認(rèn)識(shí)和創(chuàng)建HTML表單66

3.1.1 認(rèn)識(shí)HTML表單 66

3.1.2 input元素的基本類(lèi)型 67

3.1.3 其他輸入元素 70

3.2 新增的表單元素 70

3.2.1 datalist元素 71

3.2.2 output元素 72

3.2.3 keygen元素 73

3.2.4 optgroup元素 74

3.3 新增的表單類(lèi)型 76

3.3.1 email類(lèi)型 76

3.3.2 url類(lèi)型 78

3.3.3 number類(lèi)型 78

3.3.4 range類(lèi)型 79

3.3.5 tel類(lèi)型 80

3.3.6 color類(lèi)型 81

3.3.7 search類(lèi)型 82

3.3.8 日期和時(shí)間類(lèi)型 82

3.4 新增的表單屬性 86

3.4.1 form屬性 86

3.4.2 表單重寫(xiě)屬性 88

3.4.3 placeholder屬性 89

3.4.4 required屬性 90

3.4.5 pattern屬性 91

3.4.6 autocomplete屬性 92

3.4.7 autofocus屬性 93

3.5 表單驗(yàn)證 93

3.5.1 自動(dòng)驗(yàn)證 93

3.5.2 顯式驗(yàn)證 94

3.5.3 自定義驗(yàn)證 96

3.5.4 驗(yàn)證事件 97

3.5.5 取消驗(yàn)證 98

3.6 實(shí)驗(yàn)指導(dǎo)3-1：會(huì)員資料注冊(cè) 99

思考與練習(xí) 102

第4章 HTML 5中的文件應(yīng)用 103

4.1 選擇文件 103

4.1.1 選擇單個(gè)文件 103

4.1.2 選擇多個(gè)文件 105

4.1.3 限制選擇文件類(lèi)型 107

4.2 實(shí)驗(yàn)指導(dǎo)4-1：將文件上傳到

服務(wù)器端 109

4.3 讀取文件 111

4.3.1 認(rèn)識(shí)FileReader接口 112

4.3.2 讀取二進(jìn)制文件 115

4.3.3 顯示預(yù)覽圖像 116

4.3.4 讀取文本文件 118

4.4 錯(cuò)誤處理方案 120

4.4.1 產(chǎn)生錯(cuò)誤的原因 120

4.4.2 FileError接口 121

4.4.3 錯(cuò)誤處理練習(xí) 121

4.5 文件拖放API和常用對(duì)象 123

4.5.1 拖放API 123

4.5.2 認(rèn)識(shí)DataTransfer對(duì)象 125

4.5.3 DataTransfer對(duì)象的方法 126

4.5.4 DataTransfer對(duì)象的屬性 127

4.6 實(shí)驗(yàn)指導(dǎo)4-2：拖動(dòng)文字到網(wǎng)頁(yè)的

指定區(qū)域 129

4.7 實(shí)驗(yàn)指導(dǎo)4-3：拖放實(shí)現(xiàn)帶進(jìn)度條

的文件上傳 130

思考與練習(xí) 138

第5章 HTML 5中的多媒體元素 140

5.1 HTML 5多媒體概述 140

5.1.1 HTML 4中的多媒體應(yīng)用 140

5.1.2 HTML 5中的多媒體 141

5.2 多媒體元素的屬性 144

5.2.1 audio和video的共同屬性 144

5.2.2 audio元素顯示音頻文件 146

5.2.3 video元素顯示視頻文件 149

5.3 向多媒體元素中添加source元素 152

5.3.1 認(rèn)識(shí)source元素 152

5.3.2 source元素常用的支持

格式 152

5.3.3 多媒體元素添加source

元素 153

5.3.4 視頻文件添加source元素 154

5.4 多媒體元素的方法 155

5.5 多媒體元素的事件 157

5.5.1 audio和video的共同事件 157

5.5.2 video元素添加事件 159

5.6 認(rèn)識(shí)embed元素 162

5.7 實(shí)驗(yàn)指導(dǎo)5-1：制作絢麗的音樂(lè)

播放器 164

思考與練習(xí) 172

第6章 數(shù)據(jù)存儲(chǔ) 174

6.1 認(rèn)識(shí)Web Storage 174

6.1.1 Web Storage介紹 174

6.1.2 Web Storage的優(yōu)缺點(diǎn) 175

6.2 localStorage對(duì)象 175

6.2.1 判斷瀏覽器是否支持 176

6.2.2 localStorage的常用方法 176

6.2.3 統(tǒng)計(jì)訪(fǎng)問(wèn)人數(shù) 177

6.2.4 及時(shí)更新訪(fǎng)問(wèn)人數(shù) 179

6.3 sessionStorage對(duì)象 182

6.3.1 與localStorage對(duì)象的

不同 182

6.3.2 判斷瀏覽器是否支持 183

6.3.3 方法和事件 183

6.4 JSON對(duì)象操作數(shù)據(jù) 185

6.5 認(rèn)識(shí)Web SQL 191

6.5.1 Web SQL介紹 191

6.5.2 Web SQL API操作 191

6.5.3 數(shù)據(jù)的簡(jiǎn)單操作 193

6.6 實(shí)驗(yàn)指導(dǎo)6-1：基于Web SQL

的留言簿 196

思考與練習(xí) 202

第7章 Canvas API動(dòng)態(tài)繪圖 204

7.1 認(rèn)識(shí)canvas元素204

7.1.1 canvas基礎(chǔ)知識(shí) 204

7.1.2 canvas API的基本使用 206

7.1.3 與SVG的簡(jiǎn)單區(qū)別 208

7.2 通過(guò)路徑繪圖 209

7.2.1 基本方法 209

7.2.2 繪制直線(xiàn) 210

7.2.3 繪制圓形 212

7.2.4 繪制三角形 215

7.3 實(shí)驗(yàn)指導(dǎo)7-1：繪制復(fù)雜圖形 215

7.4貝塞爾曲線(xiàn)217

7.4.1 二次方曲線(xiàn) 217

7.4.2 三次方曲線(xiàn) 219

7.5 繪制漸變圖形 221

7.5.1 了解漸變 221

7.5.2 線(xiàn)性漸變 221

7.5.3 徑向漸變 224

7.6 高級(jí)繪圖操作 225

7.6.1 繪圖狀態(tài) 225

7.6.2 坐標(biāo)變換 226

7.6.3 矩陣變換 233

7.6.4 合成圖形 235

7.7 實(shí)驗(yàn)指導(dǎo)7-2：實(shí)現(xiàn)時(shí)鐘的動(dòng)畫(huà)

效果 237

7.8 圖像操作 240

7.8.1 創(chuàng)建圖像 240

7.8.2 繪制圖像 241

7.8.3 縮放圖像 242

7.8.4 裁剪圖像 244

7.8.5 輸出圖像 245

7.9 文字和陰影效果 246

7.9.1 繪制文字 247

7.9.2 陰影特效 247

思考與練習(xí) 248

第8章 離線(xiàn)緩存 250

8.1 離線(xiàn)應(yīng)用程序概述 250

8.1.1 認(rèn)識(shí)離線(xiàn)應(yīng)用程序 250

8.1.2 離線(xiàn)緩存與瀏覽器緩存 251

8.1.3 創(chuàng)建離線(xiàn)緩存應(yīng)用 252

8.2 Cache Manifest文件 255

8.2.1 認(rèn)識(shí)Cache Manifest文件 255

8.2.2 Cache Manifest的組成 255

8.2.3 向manifest文件添加注釋 257

8.2.4 Cache Mainifest的遵循

原則 258

8.2.5 配置IIS服務(wù)器 258

8.3 離線(xiàn)訪(fǎng)問(wèn)系統(tǒng)當(dāng)前時(shí)間 260

8.4 瀏覽器與服務(wù)器的交互過(guò)程 263

8.4.1 首次載入頁(yè)面 263

8.4.2 再次載入頁(yè)面 263

8.5 離線(xiàn)存儲(chǔ)對(duì)象：applicationCache 264

8.5.1 認(rèn)識(shí)applicationCache 264

8.5.2 檢測(cè)本地緩存狀態(tài) 265

8.5.3 檢測(cè)在線(xiàn)狀態(tài) 266

8.5.4 本地緩存更新 269

8.5.5 事件執(zhí)行順序 270

8.6 實(shí)驗(yàn)指導(dǎo)8-1：制作離線(xiàn)使用的

日程備忘錄 273

思考與練習(xí) 277

第9章 通信API和地理位置獲取 279

9.1 跨文檔消息傳輸 279

9.1.1 Message API概述 279

9.1.2 跨域獲取傳遞消息 280

9.2 Web Sockets通信 283

9.2.1 Web Sockets API概述 284

9.2.2 使用Web Sockets API 284

9.2.3 向.NET端發(fā)送數(shù)據(jù) 286

9.3 Web Workers線(xiàn)程 290

9.3.1 線(xiàn)程概述 290

9.3.2 Worker對(duì)象 291

9.3.3 計(jì)算數(shù)字結(jié)果 293

9.3.4 線(xiàn)程嵌套處理 297

9.4 Geolocatin API概述 299

9.4.1 getCurrentPosition()方法 300

9.4.2 watchCurrentPosition()方法 301

9.4.3 clearWatch()方法 302

9.5 Position對(duì)象顯示當(dāng)前位置 302

9.6 實(shí)驗(yàn)指導(dǎo)9-1：Google地圖鎖定

當(dāng)前位置 305

思考與練習(xí) 308

第10章 CSS 3和新增顏色及

文本樣式 310

10.1 了解CSS 3 310

10.1.1 什么是CSS 3 310

10.1.2 CSS 3的支持情況 311

10.1.3 CSS 3的新增特性 312

10.2 新增顏色 316

10.2.1 RGBA 316

10.2.2 HSL 318

10.2.3 HSLA 320

10.2.4 opaticy 321

10.3 文本樣式 322

10.3.1 text-overflow屬性 322

10.3.2 text-shadow屬性 326

10.3.3 word-wrap屬性 329

10.4 字體樣式規(guī)則：@font-face 331

10.4.1 語(yǔ)法規(guī)則 331

10.4.2 基本練習(xí) 332

10.4.3 字體與字體樣式 334

10.4.4 注意事項(xiàng) 336

10.5 實(shí)驗(yàn)指導(dǎo)10-1：定義文章的標(biāo)題

和內(nèi)容樣式 336

思考與練習(xí) 339

第11章 CSS 3中的新增選擇器 340

11.1 屬性選擇器 340

11.1.1 E[att^='val']選擇器 340

11.1.2 E[att$='val']選擇器 342

11.1.3 E[att*='val']選擇器 343

11.2 結(jié)構(gòu)化偽類(lèi)選擇器 345

11.2.1 E:root選擇器 345

11.2.2 E:nth-child(n)選擇器 347

11.2.3 E:nth-last-child(n)選擇器 348

11.2.4 E:nth-of-type(n)和E:nth-

last-of-type(n)選擇器 351

11.2.5 E:last-child選擇器 354

11.2.6 E:first-of-type和E:last-of-

type選擇器 355

11.2.7 E:only-child選擇器 357

11.2.8 E:only-of-type選擇器 357

11.2.9 E:empty選擇器 358

11.3 UI元素狀態(tài)偽類(lèi)選擇器 360

11.3.1 E:enabled選擇器 360

11.3.2 E:disabled選擇器 362

11.3.3 E:checked選擇器 363

11.3.4 E::selection選擇器 364

11.4 其他新增選擇器 366

11.4.1 否定偽類(lèi)選擇器：

E:not(s) 366

11.4.2 目標(biāo)偽類(lèi)選擇器：

E:target 367

11.4.3 通用兄弟元素選擇器：

E~F 368

11.5 新增內(nèi)容屬性：content 370

11.5.1 基本語(yǔ)法 370

11.5.2 插入圖像 371

11.5.3 插入項(xiàng)目編碼 372

11.5.4 插入嵌套符號(hào) 374

11.5.5 編號(hào)嵌套 375

11.6 實(shí)驗(yàn)指導(dǎo)11-1：結(jié)構(gòu)化的數(shù)據(jù)

表格設(shè)計(jì) 376

思考與練習(xí) 379

第12章 彈性盒模型與樣式布局 381

12.1 新增的盒模型屬性 381

12.1.1 box-orient屬性 381

12.1.2 box-direction屬性 384

12.1.3 box-ordinal-group屬性 385

12.1.4 box-flex屬性 387

12.1.5 box-flex-group屬性 389

12.1.6 box-pack屬性 390

12.1.7 box-align屬性 392

12.1.8 box-lines屬性 393

12.2 多列類(lèi)布局屬性 394

12.2.1 columns屬性 394

12.2.2 column-width屬性 396

12.2.3 column-count屬性 397

12.2.4 column-gap屬性 397

12.2.5 column-rule屬性 399

12.2.6 column-span屬性 400

12.2.7 column-fill屬性 401

12.2.8 分列打印屬性 401

12.3 用戶(hù)界面布局 402

12.3.1 box-sizing屬性 402

12.3.2 resize屬性 404

12.3.3 zoom屬性 406

12.3.4 outline-offset屬性 407

12.3.5 nav-index屬性 408

12.3.6 定義方向鍵控制順序 410

12.4 實(shí)驗(yàn)指導(dǎo)12-1：簡(jiǎn)單設(shè)計(jì)

博客網(wǎng)頁(yè) 411

思考與練習(xí) 413

第13章 邊框、背景和漸變 415

13.1 邊框設(shè)計(jì) 415

13.1.1 border-radius屬性 415

13.1.2 border-image屬性 417

13.1.3 box-shadow屬性 421

13.1.4 border-colors屬性 423

13.2 背景樣式 424

13.2.1 變更屬性 424

13.2.2 background-origin屬性 427

13.2.3 background-clip屬性 428

13.2.4 background-size屬性 430

13.3 漸變特效 431

13.3.1 WebKit引擎實(shí)現(xiàn)漸變 431

13.3.2Gecko引擎實(shí)現(xiàn)漸變 433

13.3.3 重復(fù)漸變 435

13.4 實(shí)驗(yàn)指導(dǎo)13-1：制作下拉

導(dǎo)航菜單 436

思考與練習(xí) 439

第14章 HTML 5 CSS 3制作

旅游網(wǎng)頁(yè) 440

14.1 旅游網(wǎng)站分析 440

14.1.1 產(chǎn)生背景 440

14.1.2 發(fā)展趨勢(shì) 441

14.1.3 基本結(jié)構(gòu) 441

14.2 設(shè)計(jì)首頁(yè) 442

14.2.1 網(wǎng)頁(yè)效果 442

14.2.2 添加頭部 443

14.2.3 添加底部 446

14.2.4 添加內(nèi)容 446

14.3 設(shè)計(jì)關(guān)于我們網(wǎng)頁(yè) 448

14.3.1 網(wǎng)頁(yè)效果 448

14.3.2 關(guān)于我們 448

14.3.3 最新公告 449

14.4 設(shè)計(jì)國(guó)內(nèi)旅游網(wǎng)頁(yè) 450

14.4.1 網(wǎng)頁(yè)效果 450

14.4.2 國(guó)內(nèi)旅游 451

14.4.3 其他內(nèi)容 451

14.5 設(shè)計(jì)出境旅游網(wǎng)頁(yè) 452

14.6 設(shè)計(jì)留言咨詢(xún)網(wǎng)頁(yè) 453

14.6.1 網(wǎng)頁(yè)效果 453

14.6.2 清空留言 453

14.6.3 提交留言 454

14.6.4 查看位置 455

附錄 思考與練習(xí)答案459^[1]