HTML5從入門到精通(第4版)

明日科技

  • 出版商: 清華大學
  • 出版日期: 2023-12-01
  • 售價: $599
  • 貴賓價: 9.5$569
  • 語言: 簡體中文
  • ISBN: 7302648492
  • ISBN-13: 9787302648499
  • 相關分類: HTML
  • 立即出貨 (庫存 < 3)

  • HTML5從入門到精通(第4版)-preview-1
  • HTML5從入門到精通(第4版)-preview-2
  • HTML5從入門到精通(第4版)-preview-3
HTML5從入門到精通(第4版)-preview-1

相關主題

商品描述

《HTML5從入門到精通(第4版)》從初學者角度出發,通過通俗易懂的語言、豐富多彩的實例,詳盡地講解了與HTML5開發相關的知識。全書分為3篇,共22章,包括HTML簡介、HTML5基礎、設計網頁文本內容、使用列表、超鏈接、使用圖像、表格的應用、佈局標簽、全局屬性、編輯表單、嵌入多媒體元素、文件操作、拖放操作、繪制圖形、SVG的使用、數據存儲、使用Web Workers處理線程、HTML5消息通信、獲取地理位置信息、HTML5其他應用、響應式網頁設計、在線教育網站等內容。書中的大部分知識點都結合具體實例進行介紹,涉及的程序代碼給出了詳細的註釋,這可以幫助讀者輕松領會HTML語言程序開發的精髓,快速提高開發技能。

目錄大綱

第1篇 基礎知識

第1章 HTML簡介 2

視頻講解:13分鐘

1.1 HTML的基本概念 2

1.2 HTML的發展史 3

1.2.1 HTML的早期發展 3

1.2.2 從HTML到XHTML 3

1.2.3 HTML5的面市及發展 4

1.3 HTML5的改進 4

1.3.1 部分代替了原來的JavaScript 5

1.3.2 更明確的語義支持 5

1.3.3 增強了Web應用程序功能 6

1.4 各瀏覽器對HTML5的支持 6

第2章 HTML5基礎 8

視頻講解:55分鐘

2.1 編寫第一個HTML文件 8

2.1.1 HTML文件的編寫方法 8

2.1.2 手工編寫頁面 10

2.1.3 實例演練——創建基本的HTML網頁 11

2.1.4 使用WebStorm製作頁面 12

2.1.5 使用瀏覽器瀏覽HTML文件 16

2.1.6 如何查看網頁源代碼 17

2.1.7 編寫文件的註意事項 19

2.2 HTML的基本結構 19

2.2.1 文件開始標簽——<html> 19

2.2.2 文件頭部標簽——<head> 20

2.2.3 文件標題標簽——<title> 20

2.2.4 基底網址標簽——<base> 21

2.2.5 文件主體標簽——<body> 22

2.2.6 註釋——<!-- --> 29

2.3 元信息標簽<meta> 29

2.3.1 設置頁面關鍵字 29

2.3.2 設置頁面描述 30

2.3.3 設置編輯工具 30

2.3.4 設定作者信息 31

2.3.5 限制搜索方式 31

2.3.6 設置網頁文字及語言 32

2.3.7 設置網頁的定時跳轉 32

2.3.8 設定有效期限 33

2.3.9 禁止從緩存中調用 34

2.3.10 刪除過期的cookie 34

2.3.11 強制打開新窗口 34

2.3.12 設定建立網站的日期 35

2.3.13 設定網頁版權信息 35

2.3.14 設定聯系人的郵箱 36

2.4 實踐與練習 36

第3章 設計網頁文本內容 39

視頻講解:107分鐘

3.1 標題文字的建立 39

3.1.1 標題文字標簽——<h> 40

3.1.2 標題文字對齊方式屬性——align 40

3.2 設置文字格式 42

3.2.1 粗體、斜體、下畫線標簽——<strong>、<em>、<u> 42

3.2.2 上標與下標標簽——<sup>、<sub> 42

3.2.3 設置刪除線標簽——<del>/<s> 43

3.2.4 等寬文字標簽——<code> 43

3.2.5 空格與其他特殊符號 44

3.3 設置段落格式 45

3.3.1 段落標簽——<p> 46

3.3.2 換行標簽——<br> 46

3.3.3 保留原始排版方式標簽——<pre> 47

3.3.4 向右縮進標簽——<blockquote> 48

3.4 設置水平線格式 48

3.4.1 添加水平線標簽——<hr> 49

3.4.2 設置水平線寬度與高度屬性——width、size 49

3.4.3 設置水平線顏色屬性——color 50

3.4.4 設置水平線對齊方式屬性——align 51

3.4.5 去掉水平線陰影屬性——noshade 52

3.5 其他文字標簽 53

3.5.1 文字標註標簽——<ruby> 53

3.5.2 聲明變量標簽——<var> 54

3.5.3 設置地址文字標簽——<address> 54

3.6 頁面顯示增強標簽 55

3.6.1 塊級內容標簽——<figure> 55

3.6.2 展開/收縮區域標簽——<details> 56

3.6.3 高亮顯示標簽——<mark> 58

3.6.4 進度標簽——<progress> 60

3.6.5 度量數量值標簽——<meter> 60

3.6.6 引用標簽——<cite> 61

3.6.7 小號字體標簽——<small> 61

3.7 主體結構標簽 62

3.7.1 獨立自包含內容標簽——<article> 62

3.7.2 節標簽——<section> 64

3.7.3 導航鏈接標簽——<nav> 64

3.7.4 附屬信息標簽——<aside> 65

3.7.5 日期時間標簽——<time> 67

3.8 非主體結構標簽 68

3.8.1 頁眉標簽——<header> 68

3.8.2 標題分組標簽——<hgroup> 68

3.8.3 頁腳標簽——<footer> 69

3.9 實踐與練習 69

第4章 使用列表 72

視頻講解:57分鐘

4.1 列表基礎 72

4.2 使用無序列表 73

4.2.1 創建無序列表——<ul>標簽 73

4.2.2 設置無序列表的類型——type屬性 74

4.3 使用有序列表 76

4.3.1 創建有序列表——<ol>標簽 76

4.3.2 設置有序列表的類型——type屬性 76

4.3.3 設置有序列表的起始數值——start屬性 78

4.4 定義列表的創建及使用 80

4.5 嵌套列表的使用 82

4.5.1 無序列表和有序列表的互相嵌套 82

4.5.2 有序列表之間的嵌套 83

4.5.3 定義列表的嵌套 84

4.6 實踐與練習 86

第5章 超鏈接 88

視頻講解:34分鐘

5.1 超鏈接基礎 88

5.1.1 什麽是超鏈接 88

5.1.2 絕對路徑 88

5.1.3 相對路徑 89

5.2 超鏈接的建立 89

5.2.1 超鏈接標簽——<a> 89

5.2.2 建立文本超鏈接 89

5.2.3 設置超鏈接的目標窗口 91

5.3 內部鏈接 93

5.4 書簽鏈接 94

5.4.1 建立書簽 95

5.4.2 為書簽設置鏈接 95

5.5 外部鏈接 98

5.5.1 通過HTTP協議設置外部鏈接 98

5.5.2 通過超鏈接實現發送E-mail郵件 99

5.5.3 通過超鏈接實現文件下載 100

5.6 其他鏈接 101

5.6.1 腳本鏈接 101

5.6.2 空鏈接 102

5.7 實踐與練習 102

第6章 使用圖像 104

視頻講解:55分鐘

6.1 圖像基礎 104

6.2 添加圖像——<img>標簽 105

6.3 設置圖像屬性 106

6.3.1 圖像高度、寬度和邊框 106

6.3.2 圖像水平間距和垂直間距 107

6.3.3 圖像相對於文字基準線的對齊方式 108

6.3.4 圖像的提示文字和替換文字 109

6.4 圖像超鏈接 110

6.4.1 設置圖像的超鏈接 111

6.4.2 設置圖像熱區鏈接 113

6.5 實踐與練習 114

第7章 表格的應用 119

視頻講解:79分鐘

7.1 創建表格 119

7.1.1 創建表格的基本構成——<table>、<tr>、<td>標簽 120

7.1.2 設置表格的標題——<caption>標簽 120

7.1.3 設置表格的表頭——<th>標簽 121

7.2 設置表格基本屬性 122

7.2.1 設置表格寬度——width屬性 122

7.2.2 設置表格高度——height屬性 124

7.2.3 設置表格對齊方式——align屬性 125

7.3 設置表格的邊框 126

7.3.1 設置表格邊框寬度——border屬性 126

7.3.2 設置表格邊框顏色——bordercolor屬性 127

7.3.3 設置表格內框寬度——cellspacing屬性 128

7.3.4 設置表格內文字與邊框間距——cellpadding屬性 129

7.4 設置表格背景 130

7.4.1 設置表格的背景顏色——bgcolor屬性 130

7.4.2 設置表格的背景圖像——background屬性 131

7.5 設置表格的行屬性 132

7.5.1 行高度的控制——height屬性 132

7.5.2 設置行背景——bgcolor、background屬性 133

7.5.3 設置行文字的水平對齊方式——align屬性 134

7.5.4 設置行文字的垂直對齊方式——valign屬性 135

7.5.5 設置標題行的垂直對齊方式——align屬性 135

7.6 設置表格的單元格屬性 137

7.6.1 設置單元格的大小——width、height屬性 137

7.6.2 設置單元格中文字的對齊方式——align、valign屬性 138

7.6.3 設置單元格的背景顏色——bgcolor屬性 139

7.6.4 設置單元格的背景圖像——background屬性 140

7.6.5 合並單元格——colspan、rowspan屬性 141

7.7 統一表格樣式的結構標簽 143

7.7.1 表首標簽——<thead> 143

7.7.2 表主體標簽——<tbody> 144

7.7.3 表尾標簽——<tfoot> 145

7.8 表格的嵌套 146

7.9 實踐與練習 148

第8章 佈局標簽 150

視頻講解:35分鐘

8.1 <div>標簽 150

8.1.1 <div>標簽簡介 150

8.1.2 <div>標簽的屬性 151

8.2 <span>標簽 157

8.2.1 <span>標簽簡介 158

8.2.2 <span>標簽與<div>標簽的比較 158

8.3 <iframe>標簽 159

8.3.1 <iframe>標簽簡介 159

8.3.2 <iframe>標簽的屬性 160

8.4 案例:製作下拉菜單導航條 162

8.5 實踐與練習 164

第9章 全局屬性 166

視頻講解:23分鐘

9.1 HTML5繼承前版本的全局屬性 166

9.1.1 title屬性 166

9.1.2 dir屬性 167

9.2 contenteditable屬性 168

9.3 spellcheck屬性 170

9.4 hidden屬性 172

9.5 translate屬性 174

9.6 tabindex屬性 175

9.7 實踐與練習 176

第10章 編輯表單 178

視頻講解:80分鐘

10.1 表單標簽——<form> 178

10.1.1 傳送地址——action屬性 178

10.1.2 表單名稱——name屬性 179

10.1.3 傳送方式——method屬性 180

10.1.4 編碼方式——enctype屬性 181

10.1.5 目標顯示方式——target屬性 181

10.1.6 自動完成——autocomplete屬性 182

10.1.7 表單驗證——novalidate屬性 183

10.2 輸入類元素 183

10.2.1 文本框——text屬性值 185

10.2.2 密碼域——password屬性值 186

10.2.3 單選按鈕——radio 188

10.2.4 復選框——checkbox屬性值 189

10.2.5 普通按鈕——button屬性值 191

10.2.6 提交按鈕——submit屬性值 192

10.2.7 重置按鈕——reset屬性值 194

10.2.8 圖像域——image屬性值 194

10.2.9 隱藏域——hidden屬性值 195

10.2.10 文件域——file屬性值 196

10.3 文本域標簽——<textarea> 197

10.4 標註與輸出標簽 199

10.4.1 標註標簽——<label> 199

10.4.2 輸出標簽——<output> 200

10.5 按鈕標簽——<button> 201

10.5.1 使用<button>標簽在頁面中添加按鈕 202

10.5.2 使用<button>標簽與<input>標簽添加按鈕的區別 203

10.6 下拉列表 204

10.6.1 列表標簽——<select> 204

10.6.2 選項標簽——<option> 204

10.6.3 選項組標簽——<optgroup> 206

10.6.4 自動完成下拉列表 207

10.7 對表單的驗證 208

10.7.1 自動驗證 208

10.7.2 checkValidity顯式驗證法 210

10.7.3 自定義錯誤信息 212

10.8 實踐與練習 213

第2篇 高級應用

第11章 嵌入多媒體元素 216

視頻講解:51分鐘

11.1 播放音頻 216

11.1.1 音頻格式 216

11.1.2 使用<audio>標簽嵌入音頻 217

11.1.3 使用JavaScript腳本控制音頻播放 218

11.2 播放視頻 221

11.2.1視頻格式 221

11.2.2 使用<video>標簽嵌入視頻 221

11.2.3 為視頻添加字幕 223

11.2.4 處理視頻播放相關事件 229

11.2.5 使用JavaScript腳本控制視頻播放 232

11.3 嵌入PDF文檔 234

11.3.1 使用<object>標簽嵌入PDF文檔 234

11.3.2 使用<embed>標簽嵌入PDF文檔 235

11.4 實踐與練習 236

第12章 文件操作 238

視頻講解:37分鐘

12.1 使用文件對象 238

12.1.1 通過FileList對象和file對象獲取文件信息 238

12.1.2 使用Blob對象獲取文件的類型與大小 241

12.1.3 創建並使用Blob對象 243

12.1.4 截取Blob對象 244

12.2 使用FileReader對象讀取文件 245

12.2.1 檢測瀏覽器對FileReader對象的支持性 245

12.2.2 FileReader對象的方法與事件 245

12.2.3 使用readAsDataURL()方法預覽圖片 247

12.2.4 使用readAsText()方法讀取文本文件 249

12.3 實踐與練習 251

第13章 拖放操作 253

視頻講解:35分鐘

13.1 拖放API 253

13.1.1 設置允許拖放 253

13.1.2 處理與拖放相關的事件 254

13.1.3 阻止拖放 255

13.2 dataTransfer對象 257

13.2.1 dataTransfer對象的常用屬性 257

13.2.2 dataTransfer對象的常用方法 258

13.3 案例:通過拖放實現將商品加入購物車中 260

13.4 實踐與練習 262

第14章 繪制圖形 264

視頻講解:166分鐘

14.1 初識Canvas 264

14.1.1 創建一個畫布 265

14.1.2 Canvas的坐標系 265

14.1.3 繪制矩形 266

14.2 創建路徑 269

14.2.1 創建矩形路徑 269

14.2.2 創建直線路徑 270

14.2.3 創建圓形路徑 271

14.2.4 貝塞爾曲線 273

14.3 運用樣式與顏色 275

14.3.1 fillStyle屬性和strokeStyle屬性 275

14.3.2 透明度——globalAlpha 276

14.3.3 線型——Line styles 277

14.4 實現漸變顏色 280

14.4.1 線性漸變 280

14.4.2 徑向漸變 281

14.5 圖形的變形 282

14.5.1 坐標的變換 282

14.5.2 路徑的坐標變換 283

14.5.3 矩陣變換 284

14.6 組合多個圖形 287

14.7 給圖形繪制陰影 290

14.8 圖像的處理 291

14.8.1 繪制圖像 291

14.8.2 圖像的局部放大 293

14.8.3 圖像平鋪 293

14.8.4 圖像裁剪 295

14.8.5 像素的處理 296

14.9 繪制文字 297

14.10 保存與恢復Canvas狀態 298

14.11 將Canvas對象轉換為base64編碼 299

14.12 製作動畫 300

14.13 綜合實例——桌面時鐘 302

14.14 實踐與練習 304

第15章 SVG的使用 306

視頻講解:75分鐘

15.1 SVG基礎 306

15.1.1 為什麽使用SVG 306

15.1.2 如何使用SVG 307

15.2 使用SVG繪制基本形狀 308

15.2.1 繪制矩形 309

15.2.2 繪制圓形 310

15.2.3 繪制橢圓 310

15.2.4 繪制多邊形 311

15.2.5 繪制直線 312

15.2.6 繪制折線 313

15.2.7 繪制路徑 314

15.2.8 繪制文本 315

15.3 SVG中的濾鏡 318

15.3.1 SVG濾鏡的使用方法 319

15.3.2 SVG實現模糊效果 319

15.3.3 SVG實現文字陰影 320

15.4 SVG實現動畫 321

15.4.1 使用<animate>標簽 321

15.4.2 使用<animateMotion>標簽 322

15.4.3 使用<animateTransform>標簽 323

15.5 SVG中的漸變 325

15.5.1 線性漸變 325

15.5.2 徑向漸變 326

15.6 實踐與練習 327

第16章 數據存儲 330

視頻講解:50分鐘

16.1 初識Web Storage 330

16.1.1 Web Storage是什麽 330

16.1.2 測試瀏覽器是否支持Web Storage 331

16.1.3 使用Web Storage中的API 331

16.1.4 案例:sessionStorage對象的應用——分步註冊 333

16.1.5 案例:localStorage對象的應用——自動登錄 336

16.2 本地數據庫 338

16.2.1 Web SQL Database簡介 338

16.2.2 使用Web SQL Database API 338

16.2.3 使用IndexedDB API 346

16.3 實踐與練習 351

第17章 使用Web Workers處理線程 353

視頻講解:20分鐘

17.1 Web Workers API概述 353

17.1.1 創建和使用Web Worker對象 354

17.1.2 線程間數據交互的實例——數的累加 357

17.2 在Web Worker內部能做什麽 359

17.3 多個JavaScript文件的加載與執行 360

17.4 線程嵌套 360

17.4.1 主線程中嵌套多個子線程 360

17.4.2 在多個子線程中進行數據的交互 363

17.5 實踐與練習 366

第18章 HTML5消息通信 367

視頻講解:39分鐘

18.1 跨文檔消息通信 367

18.1.1 監聽消息 367

18.1.2 發送消息 368

18.1.3 案例:同域跨文檔消息通信 369

18.1.4 案例:跨域消息通信 370

18.2 消息通道通信 374

18.3 WebSocket全雙工通信 378

18.3.1 什麽是WebSocket 378

18.3.2 使用WebSocket API 378

18.4 Server-Sent Events服務器推送事件通信 383

18.5 實踐與練習 386

第19章 獲取地理位置信息 387

視頻講解:28分鐘

19.1 Geolocation API的概述 387

19.1.1 獲取當前地理位置——getCurrentPosition()方法 387

19.1.2 監視定位——watchCurrentPosition()方法 389

19.1.3 停止獲取當前地理位置——clearWatch()方法 390

19.2 position對象的應用 390

19.3 利用HTML5和百度地圖實現地圖定位 393

19.4 實踐與練習 395

第20章 HTML5其他應用 396

視頻講解:50分鐘

20.1 操作瀏覽歷史記錄——History API 396

20.1.1 歷史記錄導航 397

20.1.2 添加歷史記錄條目 398

20.1.3 更新歷史記錄條目 401

20.2 實現桌面通知——Notification API 403

20.3 控制頁面可見性——Page Visibility API 408

20.4 切換全屏模式——Fullscreen API 410

20.5 判斷在線狀態 412

20.5.1 使用navigator對象的onLine屬性實現 412

20.5.2 為window對象添加online/offline事件監聽器實現 414

20.6 實踐與練習 416

第21章 響應式網頁設計 417

視頻講解:36分鐘

21.1 概述 417

21.1.1 響應式網頁設計的概念 417

21.1.2 響應式網頁設計的技術原理 418

21.1.3 響應式網頁設計的優缺點 418

21.2 響應式相關概念 419

21.2.1 像素和屏幕分辨率 419

21.2.2 視口 420

21.2.3 常見的網頁佈局類型 422

21.2.4 佈局的常見實現方式 422

21.3 響應式網頁設計的實現 423

21.3.1 通過CSS實現響應式網頁設計 423

21.3.2 通過第三方框架實現響應式網頁設計 427

21.4 實踐與練習 429

第3篇 項目實戰

第22章 在線教育網站 432

視頻講解:10分鐘

22.1 開發準備 432

22.1.1 網站概述 432

22.1.2 系統預覽 432

22.1.3 實現過程分析 434

22.2 首頁的設計與實現 437

22.2.1 首頁設計 437

22.2.2 代碼實現 438

22.3 登錄頁的設計與實現 440

22.3.1 登錄頁設計 440

22.3.2 代碼實現 441

22.4 課程列表頁的設計與實現 443

22.4.1 課程列表頁設計 443

22.4.2 代碼實現 444

22.5 課程詳情頁的設計與實現 446

22.5.1 課程詳情頁設計 446

22.5.2 代碼實現 447