第1章 基礎知識

1.1 HTML概述

• 1.1.1 什麽是HTML
• 1.1.2 HTML的發展歷程

1.2 HTML文件的基本結構

• 1.2.1 HTML的基本結構
• 1.2.2 HTML的基本標記

1.3 編寫第一個HTML文件

• 1.3.1 HTML文件的編寫方法
• 1.3.2 手工編寫頁面
• 1.3.3 使用可視化軟件WebStorm制作頁面

1.4 難點解答

• 1.4.1 HTML文件中註釋的種類
• 1.4.2 topmargin屬性和margin-top屬性的區別

1.5 小結

1.6 動手糾錯

第2章 文本

2.1 標題

• 2.1.1 標題標記
• 2.1.2 標題的對齊方式

2.2 文字

• 2.2.1 文字的斜體、下劃線、刪除線
• 2.2.2 文字的上標與下標
• 2.2.3 特殊文字符號

2.3 段落

• 2.3.1 段落標記
• 2.3.2 段落的換行標記
• 2.3.3 段落的原格式標記

2.4 水平線

• 2.4.1 水平線標記
• 2.4.2 水平線標記的寬度

2.5 難點解答

• 2.5.1 可以使用<font>標記設置文字的字體和顏色嗎？
• 2.5.2 大寫的<H1>標記和小寫的<h1>標記有區別嗎？

2.6 小結

2.7 動手糾錯

第3章 圖像與超鏈接

3.1 添加圖像

• 3.1.1 圖像的基本格式
• 3.1.2 添加圖像

3.2 設置圖像屬性

• 3.2.1 圖像的大小與邊框
• 3.2.2 圖像間距與對齊方式
• 3.2.3 替換文本與提示文字

3.3 鏈接標記

• 3.3.1 文本標簽
• 3.3.2 書簽鏈接

3.4 圖像的超鏈接

• 3.4.1 圖像的超鏈接
• 3.4.2 圖像熱區鏈接

3.5 難點解答

• 3.5.1 單擊超鏈接時，頁面顯示找不到頁面
• 3.5.2 為圖片添加了熱區鏈接，但是單擊鏈接位置並沒有跳轉頁面

3.6 小結

3.7 動手糾錯

第4章 CSS3 概述

4.1 CSS3概述

• 4.1.1 CSS的發展史
• 4.1.2 一個簡單的CSS示例

4.2 CSS3中的選擇器

• 4.2.1 屬性選擇器
• 4.2.2 類和ID選擇器
• 4.2.3 偽類和偽元素選擇器
• 4.2.4 其他選擇器

4.3 常用屬性

• 4.3.1 文本相關屬性
• 4.3.2 背景相關屬性
• 4.3.3 列表相關屬性

4.4 難點解答

• 4.4.1 類和ID選擇器是不是用的越多越好？
• 4.4.2 背景圖片無法正常顯示

4.5 小結

4.6 動手糾錯

第5章 CSS3高級應用

5.1 框模型

• 5.1.1 外邊距margin
• 5.1.2 內邊距padding
• 5.1.3 邊框border

5.2 布局常用屬性

• 5.2.1 浮動
• 5.2.2 定位相關屬性

5.3 動畫與特效

• 5.3.1 變換（transform）
• 5.3.2 過渡（transition）
• 5.3.3 動畫（animation）

5.4 難點解答

• 5.4.1 設置了浮動效果，可是元素”巋然不動“？
• 5.4.2 動畫無法正常播放

5.5 小結

5.6 動手糾錯

第6章 表格與<div>標記

6.1 簡單表格

• 6.1.1 簡單的表格制作
• 6.1.2 表頭的設置

6.2 表格的高級應用

• 6.2.1 表格的樣式
• 6.2.2 表格的合並
• 6.2.3 表格的分組

6.3 <div>標記

• 6.3.1 <div>標記的介紹
• 6.3.2 <div>標記的應用

6.4 <span>標記

• 6.4.1 <span>標記的介紹
• 6.4.2 <span>標記的應用

6.5 難點解答

• 6.5.1 有必要使用<th>表格標記嗎？用<tr>標記替換不也一樣嗎？
• 6.5.2 <div>標記與<span>標記有什麽區別？

6.6 小結

6.7 動手糾錯

第7章 列表

7.1 列表的標記

7.2 無序列表

• 7.2.1 無序列表標記
• 7.2.2 無序列表屬性

7.3 有序列表

• 7.3.1 有序列表標記
• 7.3.2 有序列表屬性

7.4 列表的嵌套

• 7.4.1 定義列表的嵌套
• 7.4.2 無序列表和有序列表的嵌套

7.5 小結

7.6 動手糾錯

第8章 表單

8.1 表單概述

• 8.1.1 概述
• 8.1.2 表單標記<form>

8.2 輸入標記

• 8.2.1 文本框
• 8.2.2 單選按鈕和復選框
• 8.2.3 按鈕
• 8.2.4 文件域和圖像域

8.3 文本域和列表

• 8.3.1 文本域
• 8.3.2 列表/菜單

8.4 難點解答

• 8.4.1 單行文本框與文本域的區別？
• 8.4.2 文件域控件上顯示的文字“選擇文件”能否改為其他文字？

8.5 小結

8.6 糾錯

第9章 多媒體

9.1 HTML5多媒體的簡述

• 9.1.1 HTML4中多媒體的應用
• 9.1.2 HTML5頁面中的多媒體

9.2 多媒體元素基本屬性

9.3 多媒體元素常用方法

• 9.3.1 媒體播放時的方法
• 9.3.2 canPlayType（type）的方法

9.4 多媒體元素重要事件

• 9.4.1 事件處理方式
• 9.4.2 事件介紹
• 9.4.3 事件實例

9.5 難點解答

• 9.5.1 <source>標記有哪些重要屬性？
• 9.5.2 如何運用controls屬性、width屬性和height屬性？

9.6 小結

9.7 動手糾錯

第2篇 核心技術

第10章 HTML5新特性

10.1 誰在開發HTML5

10.2 HTML5的新特性

10.3 HTML5與HTML4de區別

• 10.3.1 HTML5的語法變化
• 10.3.2 HTML5中的標記方法
• 10.3.3 HTML5語法中需要掌握的幾個要點

10.4 新增和廢除的元素

• 10.4.1 新增的結構元素
• 10.4.2 新增的塊級（block）的語義元素
• 10.4.3 新增的行內（inline）語義元素
• 10.4.4 新增的嵌入多媒體元素與交互性元素
• 10.4.5 新增的input元素的類型
• 10.4.6 廢除的元素

10.5 新增的屬性和廢除的屬性

• 10.5.1 新增的屬性
• 10.5.2 廢除的屬性

10.6 難點解答

• 10.6.1 在HTML5中設置字符編碼註意事項？
• 10.6.2 可以省略標記的元素有哪些？

10.7 小結

10.8 動手糾錯

第11章 JavaScript基礎

11.1 JavaScript概述

• 11.1.1 JavaScript發展史
• 11.1.2 JavaScript在HTML中的使用

11.2 JavaScript語言基礎

• 11.2.1 數據類型
• 11.2.2 運算符
• 11.2.3 流程控制

11.3 JavaScript對象編程

• 11.3.1 Windows窗口對象
• 11.3.2 Document文檔對象

11.4 JavaScript事件處理

• 11.4.1 鼠標鍵盤事件
• 11.4.2 頁面事件

11.5 難點解答

• 11.5.1 如何分別在JavaScript中和HTML5中調用事件處理程序？
• 11.5.2 如何在JavaScript中驗證表單數據？

11.6 小結

11.7 動手糾錯

第12章 繪制圖形

12.1 認識HTML5中的畫布Canvas

• 12.1.1 Canvas概述
• 12.1.2 使用Canvas繪制矩形

12.2 繪制基本圖形

• 12.1.1 繪制直線
• 12.1.2 繪制曲線
• 12.1.3 繪制圓形

12.3 繪制變形圖形

• 12.3.1 繪制平移效果的圖形
• 12.3.2 繪制縮放效果的圖形
• 12.3.3 繪制旋轉效果的圖形

12.4 繪制文字

• 12.4.1 繪制輪廓文字
• 12.4.2 繪制填充文字
• 12.4.3 文字相關屬性

12.5 疑難解答

• 12.5.1 beginPath()和closePath()的使用？
• 12.5.2 繪制平移縮放和旋轉效果圖形時需要註意什麽？

12.6 小結

12.7 動手糾錯

第13章 文件與拖放

13.1 選擇文件

• 13.1.1 通過file對象選擇文件
• 13.1.2 使用Blob對象獲取文件的類型與大小

13.2 讀取文件

• 13.2.1 FileReader接口的方法以及事件
• 13.2.2 使用readAsDataURL方法預覽圖片
• 13.2.3 使用readAsText方法讀取文本文件

13.3 拖放文件

• 13.3.1 拖放頁面元素
• 13.3.2 DataTransfer對象的屬性與方法
• 13.3.3 使用effectAllowed和dropEffect屬性設置拖放效果

13.4 疑難解答

• 13.4.1 FileReader接口中的事件執行時有順序嗎？
• 13.4.2 實現拖放功能時，每個拖放相關的事件都要編寫嗎？

13.5 小結

13.6 動手糾錯

第3篇 高級應用

第14章 離線Web應用程序

14.1 離線Web應用介紹

• 14.1.1 離線web應用
• 14.1.2 應用緩存技術

14.2 創建離線應用

• 14.2.1 緩存清單
• 14.2.2 applicationCache對象
• 14.2.3 applicationCache對象的事件

14.3 難點解答

• 14.3.1 本地緩存與瀏覽器頁面緩存的區別？
• 14.3.2 Internet臨時保存功能可以指定保存特定類型的文件嗎？

14.4 小結

14.5 動手糾錯

第15章 使用Web Worker處理線程

15.1 Web Worker概述

• 15.1.1 創建和使用Worker
• 15.1.2 Worker對象處理線程

15.2 線程中可用的對象和方法

15.3 多個JavaScript文件的加載與執行

15.4 線程嵌套

• 15.4.1 使用線程的單層嵌套
• 15.4.2 使用線程嵌套交互數據

15.5 難點解答

• 15.5.1 如何使用API創建Worker，如何實現多個子進程之間的交互？
• 15.5.2 Worker對象的onmessage事件有什麽作用？

15.6 小結

15.7 動手糾錯

第16章 Web服務器通信

16.1 WebSocket通信

• 16.1.1 WebSocketAPI介紹
• 16.1.2 HTTP通信和WebSocket通信比較

16.2 跨文檔消息傳輸

• 16.2.1 使用postMessageAPI
• 16.2.2 跨文檔消息傳輸流程

16.3 小結

第17章 本地存儲數據

17.1 初識Web Storage

• 17.1.1 Web Storage概述
• 17.1.2 Web Storage中API的使用

17.2 本地數據庫

• 17.2.1 Web SQL數據庫概述
• 17.2.2 Web SQL Database中API的使用

17.3 疑難解答

• 17.3.1 sessionStorage、localStorage與web SQL的異同？
• 17.3.2 本地存儲等於離線緩存嗎？

17.4 小結

17.5 動手糾錯

第18章 響應式網頁設計

18.1 概述

18.1.1 響應式網頁設計的概念

18.1.2 響應式網頁設計的優缺點和技術原理

18.2 像素和屏幕分辨率

• 18.2.1 像素和屏幕分辨率
• 18.2.2 設備像素和CSS像素

18.3 視口

• 18.3.1 視口
• 18.3.2 視口的常用屬性
• 18.3.3 媒體查詢

18.4 響應式網頁的布局設計

• 18.4.1 常用布局類型
• 18.4.2 布局的實現方式
• 18.4.3 響應式布局的設計與實現

18.5 小結

第19章 響應式組件

19.1 響應式圖片

• 19.1.1 方法1：使用<picture>標記
• 19.1.2 方法2：使用CSS圖片

19.2 響應式視頻

• 19.2.1 方法1：使用<meta>標記
• 19.2.2 方法2:使用HTML5手機播放器

19.3 響應式導航菜單

• 19.3.1 方法1：CSS3響應式菜單
• 19.3.2 方法2：JavaScript響應式菜單

19.4 響應式表格

• 19.4.1 方法1：隱藏表格中的列
• 19.4.2 方法2：滾動表格中的列
• 19.4.3 方法3：轉換表格中的列

19.5 小結

19.6 動手糾錯

第4篇 項目實戰

第20章 51購商城

20.1 項目的設計思路

• 20.1.1 項目概述
• 20.1.2 界面預覽
• 20.1.3 功能結構
• 20.1.4 文件夾組織結構

20.2 主頁的設計與實現

• 20.2.1 主頁的設計
• 20.2.2 頂部區和底部區功能的實現
• 20.2.3 商品分類導航功能的實現
• 20.2.4 輪播圖功能的實現
• 20.2.6 適配移動端的實現

20.3 商品列表頁面的設計與實現

• 20.3.1 商品列表頁面的設計
• 20.3.2 分類選項功能的實現
• 20.3.3 商品列表區的實現

20.4 商品詳情頁面的設計與實現

• 20.4.1 商品詳情頁面的設計
• 20.4.2 商品概要功能的實現
• 20.4.3 商品品評功能的實現
• 20.4.4 猜你喜歡功能的實現

20.5 購物車頁面的設計與實現

• 20.5.1 購物車頁面的設計
• 20.5.2 購物車頁面的實現

20.6 付款頁面的設計與實現

• 20.6.1 付款頁面的設計
• 20.6.2 付款頁面的實現

20.7 登錄註冊頁面的設計與實現

• 20.7.1 登錄註冊頁面的設計
• 20.7.2 登錄頁面的實現
• 20.7.3 註冊頁面的實現

20.8 小結

零基礎學 HTML+CSS3 全彩版 明日科技 編著