第 1章 HTML5入門

1.1HTML5 與 HTML4 比較

1.2HTML5 基本語(yǔ)法

1.3HTML5 新增元素

1.3.1 結(jié)構(gòu)元素

1.3.2 功能元素

1.4HTML5 廢除的元素

1.5HTML5 新增屬性

1.5.1 表單屬性

1.5.2 鏈接屬性

1.5.3 其他屬性

1.6HTML5 廢除的屬性

1.7HTML5 新增全局屬性

1.7.1contentEditable屬性

1.7.2 designMode屬性

1.7.3hidden 屬性

1.7.4spellcheck 屬性

1.7.5tabindex 屬性

1.8HTML5 其他功能

1.9jQuery Mobile與 HTML5

1.10案例實(shí)戰(zhàn)

1.10.1 新建HTML5文檔

1.10.2 設(shè)計(jì)圖文頁(yè)面

第 2章 HTML5文字和版式變化

2.1HTML5 文檔

2.2HTML5 標(biāo)簽

2.2.1 結(jié)構(gòu)性標(biāo)簽

2.2.2 級(jí)塊性標(biāo)簽

2.2.3 行內(nèi)語(yǔ)義性標(biāo)簽

2.2.4 交互性標(biāo)簽

2.3設(shè)計(jì)段落版式

2.3.1 設(shè)置段落樣式

2.3.2 設(shè)置對(duì)齊和縮進(jìn)

2.3.3 添加分隔線

2.3.4 設(shè)置標(biāo)題樣式

2.4設(shè)計(jì)文字效果

2.4.1 設(shè)置字形樣式

2.4.2 設(shè)置上標(biāo)、下標(biāo)

2.5設(shè)計(jì)列表文字

2.5.1 無(wú)序列表.

2.5.2 有序列表.

2.5.3 定義列表.

2.6設(shè)計(jì)鏈接文字

2.6.1認(rèn)識(shí)超鏈接

2.6.2 定義超鏈接

2.6.3 定義站外鏈接

2.6.4 定義站內(nèi)鏈接

2.6.5 定義 Email 鏈接

2.7設(shè)計(jì)表格文字

2.7.1 定義表格.

2.7.2 設(shè)計(jì)表格結(jié)構(gòu)

2.7.3 設(shè)置表格屬性

2.7.4 合并單元格

2.7.5 定義列組和行組

2.7.6 定義表格標(biāo)題

2.8案例實(shí)戰(zhàn)

2.8.1 設(shè)計(jì)新聞內(nèi)頁(yè)

2.8.2 設(shè)計(jì)網(wǎng)頁(yè)日歷

第 3章構(gòu)建 HTML5文檔結(jié)構(gòu)

3.1創(chuàng)建HTML5 結(jié)構(gòu)

3.1.1 定義文章塊

3.1.2 定義內(nèi)容塊

3.1.3 定義導(dǎo)航欄

3.1.4 定義側(cè)邊欄

3.1.5 定義微格式

3.1.6 定義日期.

3.2定義語(yǔ)義塊

3.2.1 標(biāo)題塊

3.2.2 標(biāo)題組

3.2.3 腳注塊

3.2.4 聯(lián)系信息

3.3案例實(shí)戰(zhàn)：設(shè)計(jì)博客首頁(yè)

3.4案例實(shí)戰(zhàn)：設(shè)計(jì)個(gè)人主頁(yè)

3.4.1 設(shè)計(jì)結(jié)構(gòu)

3.4.2 設(shè)計(jì)樣式

第 4章 HTML5表單

4.1HTML5 表單結(jié)構(gòu)和表單對(duì)象

4.1.1HTML5 表單基本結(jié)構(gòu)

4.1.2HTML5 表單對(duì)象

4.2新增輸入類型

4.2.1email 類型

4.2.2url類型

4.2.3number 類型

4.2.4range類型

4.2.5 日期選擇器

4.2.6search 類型

4.2.7tel類型

4.2.8 顏色選擇器

4.3新增輸入控制屬性

4.3.1autocomplete 屬性

4.3.2autofocus 屬性

4.3.3form屬性

4.3.4formaction 屬性

4.3.5height和 width屬性

4.3.6list屬性

4.3.7min、max和 step屬性

4.3.8multiple屬性

4.3.9pattern 屬性

4.3.10placeholder屬性

4.3.11required屬性

4.4新增表單元素

4.4.1datalist元素

4.4.2keygen 元素

4.4.3output元素

4.5新增表單屬性

4.5.1autocomplete 屬性

4.5.2novalidate 屬性

4.6案例實(shí)戰(zhàn)

4.6.1 設(shè)計(jì)移動(dòng)調(diào)查表

4.6.2 設(shè)計(jì) PC調(diào)查表

4.6.3 設(shè)計(jì)在位編輯

第 5章 HTML5多媒體應(yīng)用

5.1網(wǎng)頁(yè)多媒體發(fā)展歷史

5.2HTML5多媒體技術(shù)

5.2.1 視頻編解碼器

5.2.2 音頻編解碼器

5.2.3 容器

5.3HTML5 多媒體支持

5.3.1 瀏覽器支持

5.3.2 音頻格式支持檢測(cè)

5.3.3 視頻格式支持檢測(cè)

5.4使用HTML5 音頻

5.5使用HTML5 視頻

5.6設(shè)置屬性、方法與事件

5.6.1 音頻和視頻屬性

5.6.2 音頻和視頻相關(guān)方法

5.6.3 音頻和視頻事件

5.7案例實(shí)戰(zhàn)

5.7.1 手工控制視頻播放

5.7.2 根據(jù)視頻畫(huà)面控制進(jìn)度

第 6章客戶端數(shù)據(jù)存儲(chǔ)

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

6.2瀏覽器支持

6.3使用Web Storage

6.3.1 存取數(shù)據(jù).

6.3.2Web Storage 屬性和方法

6.3.3Web Storage 事件

6.3.4 案例：設(shè)置網(wǎng)頁(yè)背景色

6.3.5 案例：存取localStorage數(shù)據(jù)

6.3.6 案例：設(shè)計(jì)網(wǎng)頁(yè)計(jì)數(shù)器

6.4使用Web SQL

6.4.1 使用Web SQL

6.4.2 案例：創(chuàng)建本地?cái)?shù)據(jù)庫(kù)

6.4.3 案例：批量存儲(chǔ)本地?cái)?shù)據(jù)

6.5案例實(shí)戰(zhàn)

6.5.1 設(shè)計(jì)Web留言本1

6.5.2 設(shè)計(jì)客戶聯(lián)系表

6.5.3 使用Web SQL設(shè)計(jì)留言本

6.6綜合案例：設(shè)計(jì)購(gòu)物網(wǎng)站

6.6.1 設(shè)計(jì)思路

6.6.2 設(shè)計(jì)登錄頁(yè)

6.6.3 設(shè)計(jì)商品選購(gòu)頁(yè)面

第 7章 CSS 樣式基礎(chǔ)

7.3認(rèn)識(shí) CSS

7.1.1CSS發(fā)展歷史

7.1.2CSS優(yōu)勢(shì)

7.1.3CSS樣式

7.1.4 應(yīng)用 CSS樣式

7.1.5CSS樣式表

7.1.6 導(dǎo)入樣式表

7.1.7CSS注釋和格式化

7.1.8 設(shè)計(jì)第一個(gè)樣式示例

7.2CSS 選擇器

7.2.1 認(rèn)識(shí) CSS選擇器

7.2.2 標(biāo)簽選擇器

7.2.3ID 選擇器

7.2.4 類選擇器

7.2.5 指定選擇器

7.2.6 包含選擇器

7.2.7 子選擇器

7.2.8 相鄰選擇器

7.2.9 兄弟選擇器

7.2.10 分組選擇器

7.2.11 偽選擇器

7.2.12 屬性選擇器

7.2.13 通用選擇器

7.3CSS 特性

7.3.1 層疊性

7.3.2 繼承性

7.4案例實(shí)戰(zhàn)

7.4.1 設(shè)計(jì)超鏈接樣式

7.4.2 設(shè)計(jì)表格樣式

第 8章 CSS 設(shè)計(jì)文本樣式

8.1定義文本樣式

8.1.1 字體類型

8.1.2 字體大小

8.1.3 字體顏色.

8.1.4 字體粗細(xì).

8.1.5 斜體字體.

8.1.6 裝飾線

8.1.7 字體大小寫

8.1.8 文本水平對(duì)齊

8.1.9 文本垂直對(duì)齊

8.1.10 字間距和詞間距

8.1.11 行高

8.1.12 首行縮進(jìn)

8.2案例實(shí)戰(zhàn)

8.2.1 定義文本陰影

8.2.2 設(shè)計(jì)文本陰影特效

8.2.3 定義溢出文本

8.2.4 文本換行.

8.2.5 添加動(dòng)態(tài)內(nèi)容

8.2.6 恢復(fù)默認(rèn)樣式

8.2.7 自定義字體類型

第 9章設(shè)計(jì)背景和邊框樣式

9.1定義邊框樣式

9.2定義圓角

9.3定義陰影

9.4設(shè)計(jì)背景圖像

9.4.1 背景顏色.

9.4.2 設(shè)置背景圖像

9.4.3 背景平鋪.

9.4.4 背景定位.

9.4.5 固定背景.

9.4.6 定位參考.

9.4.7 背景裁剪.

9.4.8 背景大小.

9.4.9 多背景圖.

9.5案例實(shí)戰(zhàn)

9.5.1 設(shè)計(jì)圖標(biāo)按鈕

9.5.2 設(shè)計(jì)花邊框

9.5.3 設(shè)計(jì)橢圓圖形

第 10章使用 DIV CSS排版網(wǎng)頁(yè)

10.1控制頁(yè)面元素顯示

10.1.1 定義邊界

10.1.2 定義補(bǔ)白

10.1.3 定義尺寸

10.2以浮動(dòng)方式顯示

10.2.1 定義顯示類型

10.2.2 定義顯示模式

10.2.3 設(shè)置浮動(dòng)顯示

10.2.4 清除浮動(dòng)

10.3CSS定位顯示

10.3.1 設(shè)置定位顯示

10.3.2 靜態(tài)定位

10.3.3 絕對(duì)定位

10.3.4 相對(duì)定位

10.3.5 固定定位

10.3.6 定位包含框

10.3.7 設(shè)置定位偏移

10.3.8 設(shè)置層疊順序

10.3.9 層疊上下文

第 11章使用 HTML5 CSS3 排版網(wǎng)頁(yè)

11.1多列流動(dòng)布局

11.1.1 設(shè)置列寬

11.1.2 設(shè)置列數(shù)

11.1.3 設(shè)置列間距

11.1.4 設(shè)置列邊框樣式

11.1.5 設(shè)置跨列顯示

11.1.6 設(shè)置列高度

11.2彈性盒布局

11.2.1 定義Flexbox

11.2.2 定義伸縮方向

11.2.3 定義行數(shù)

11.2.4 定義對(duì)齊方式

11.2.5 定義伸縮項(xiàng)目

11.3比較三種布局方式

11.4案例實(shí)戰(zhàn)

11.4.1 設(shè)計(jì)可伸縮模板

11.4.2 設(shè)計(jì)多列網(wǎng)頁(yè)

11.4.3 設(shè)計(jì)HTML5模板

第 12章 jQuery Mobile 入門

12.1認(rèn)識(shí) JavaScript和 jQuery

12.1.1 使用 JavaScript

12.1.2JavaScript對(duì)象和函數(shù)

12.1.3JavaScript事件

12.1.4 使用 jQuery

12.1.5jQuery 框架

12.1.6jQuery 選擇器

12.2認(rèn)識(shí) jQuery Mobile

12.2.1jQuery Mobile的兼容性

12.2.2jQuery Mobile的優(yōu)勢(shì)

12.2.3 移動(dòng)設(shè)備模擬器

12.3使用 jQuery Mobile

12.3.1 下載文件

12.3.2 初始化頁(yè)面

12.4案例：設(shè)計(jì)第一個(gè)移動(dòng)頁(yè)面

第 13章設(shè)計(jì) jQuery Mobile 頁(yè)面和

彈出框

13.1創(chuàng)建頁(yè)面

13.1.1 定義單頁(yè)

13.1.2 定義多頁(yè)

13.1.3 定義外部鏈接

13.1.4 定義模態(tài)頁(yè)

13.1.5 定義關(guān)閉模態(tài)框

13.2設(shè)計(jì)視圖

13.2.1 設(shè)計(jì)視圖背景

13.2.2 設(shè)計(jì)頁(yè)面切換動(dòng)畫(huà)

13.3定義彈出頁(yè)

13.4應(yīng)用彈出頁(yè)

13.4.1 彈出菜單

13.4.2 彈出表單

13.4.3 彈出對(duì)話框

13.4.4 彈出圖片

13.5設(shè)置彈出頁(yè)

13.5.1 設(shè)置顯示位置

13.5.2 設(shè)置切換動(dòng)畫(huà)

13.5.3 設(shè)置主題樣式

13.5.4 設(shè)置關(guān)閉按鈕

13.6案例實(shí)戰(zhàn)

13.6.1 設(shè)計(jì)彈出框

13.6.2 設(shè)計(jì)側(cè)滑面板

13.6.3 設(shè)計(jì)相冊(cè)

第 14章移動(dòng)頁(yè)面布局

14.1使用分欄布局 3

14.1.1 定義分欄

14.1.2 案例：設(shè)計(jì)兩欄頁(yè)面

14.2使用折疊塊

14.2.1 定義折疊塊

14.2.2 定義嵌套折疊塊

14.2.3 定義折疊組

14.3使用列表

14.3.1 定義列表視圖

14.3.2 定義嵌套列表

14.3.3 分類列表

14.3.4 定義拆分按鈕

14.3.5 定義縮微圖和圖標(biāo)

14.3.6 定義氣泡

14.3.7 列表過(guò)濾

14.3.8 定義插頁(yè)列表

14.3.9 定義折疊列表

14.3.10 自動(dòng)分類列表

14.4使用表格

14.4.1 表格回流

14.4.2 表格字段切換

14.5使用滑動(dòng)面板

14.6案例實(shí)戰(zhàn)

14.6.1 設(shè)計(jì)課程表

14.6.2 設(shè)計(jì)九宮格

14.6.3 設(shè)計(jì)登錄頁(yè)

14.6.4 設(shè)計(jì)新聞列表

14.6.5 設(shè)計(jì)播放列表

14.6.6 設(shè)計(jì)通訊錄

第 15章使用 UI 組件

15.1使用按鈕

15.1.1 定義按鈕

15.1.2 定義內(nèi)聯(lián)按鈕

15.1.3 定義按鈕圖標(biāo)樣式

15.1.4 設(shè)置按鈕圖標(biāo)位置

15.1.5 定義迷你按鈕

15.1.6 定義按鈕組

15.2使用工具欄

15.2.1 定義工具欄

15.2.2 定義顯示模式

15.3設(shè)計(jì)頁(yè)眉

15.3.1 定義頁(yè)眉欄

15.3.2 定義頁(yè)眉按鈕

15.3.3 定義按鈕位置

15.4設(shè)計(jì)導(dǎo)航

15.4.1 定義導(dǎo)航欄

15.4.2 定義導(dǎo)航圖標(biāo)

15.4.3 定義圖標(biāo)位置

15.5設(shè)計(jì)頁(yè)腳

15.5.1 定義頁(yè)腳欄

15.5.2 包含表單

15.6使用表單組件

15.6.1 文本框

15.6.2 單選按鈕

15.6.3 復(fù)選框

15.6.4 滑塊

15.6.5 開(kāi)關(guān)按鈕

15.6.6 下拉菜單

15.6.7 列表框

15.7設(shè)計(jì)表單組件

15.7.1 恢復(fù)表單原生樣式

15.7.2 選擇項(xiàng)目分組

15.7.3 禁用選擇項(xiàng)目

15.7.4 禁用表單對(duì)象

15.7.5 隱藏標(biāo)簽

15.7.6 設(shè)計(jì)迷你表單

15.8案例實(shí)戰(zhàn)

15.8.1 設(shè)計(jì)播放器

15.8.2 設(shè)計(jì)模擬鍵盤

15.8.3 設(shè)計(jì)調(diào)查問(wèn)卷

15.8.4 設(shè)計(jì)拾色器

15.8.5 設(shè)計(jì)登錄框

第 16章設(shè)置主題

16.1使用主題

16.1.1 認(rèn)識(shí)主題

16.1.2 默認(rèn)主題

16.1.3 應(yīng)用主題

16.2使用 ThemeRoller

16.3案例實(shí)戰(zhàn)

16.3.1 定義多頁(yè)面主題

16.3.2 動(dòng)態(tài)設(shè)置頁(yè)面主題

16.3.3 設(shè)計(jì)計(jì)算器

第 17章 jQuery Mobile 配置和事件

17.1配置

17.1.1jQuery Mobile配置項(xiàng)

17.1.2 案例：設(shè)置 gradeA

17.2頁(yè)面事件

17.2.1 頁(yè)面初始事件

17.2.2 頁(yè)面切換事件

17.2.3 頁(yè)面顯隱事件

17.3觸摸事件

17.3.1 劃動(dòng)事件

17.3.2 翻轉(zhuǎn)事件

17.3.3 滾屏事件

17.4案例實(shí)戰(zhàn)

17.4.1 點(diǎn)按和長(zhǎng)按

17.4.2 側(cè)劃面板

第 18章使用 Bootstrap

18.1Bootstrap 概述

18.1.1Bootstrap特色

18.1.2Bootstrap模塊

18.2下載 Bootstrap

18.2.1 下載Bootstrap

18.2.2 源碼版 Bootstrap文件結(jié)構(gòu)

18.2.3 編譯版 Bootstrap文件結(jié)構(gòu)

18.3安裝 Bootstrap

18.3.1 在頁(yè)面中導(dǎo)入 Bootstrap框架

18.3.2 初次使用 Bootstrap

18.4使用常用組件

18.4.1 設(shè)計(jì)下拉菜單

18.4.2 設(shè)計(jì)按鈕組

18.4.3 設(shè)計(jì)按鈕導(dǎo)航條

18.4.4 設(shè)計(jì)按鈕式下拉菜單

18.4.5 設(shè)計(jì)導(dǎo)航組件

18.4.6 綁定導(dǎo)航和下拉菜單

18.4.7 設(shè)計(jì)導(dǎo)航條

18.4.8 設(shè)計(jì)列表組

18.4.9 定義模態(tài)框

18.4.10 定義滾動(dòng)監(jiān)聽(tīng)

18.5案例實(shí)戰(zhàn)

18.5.1 設(shè)計(jì)Tabs組件

18.5.2 設(shè)計(jì)企業(yè)首頁(yè)

第 19章案例開(kāi)發(fā)：微信 wap網(wǎng)站

19.1設(shè)計(jì)思路

19.1.1 內(nèi)容

19.1.2 結(jié)構(gòu)

19.1.3 效果

19.2設(shè)計(jì)首頁(yè)

19.3設(shè)計(jì)登錄頁(yè)

19.4選擇城市

19.5選擇酒店

19.6預(yù)定酒店

第 20章實(shí)戰(zhàn)開(kāi)發(fā)：記事本應(yīng)用項(xiàng)目

20.1項(xiàng)目分析

20.2框架設(shè)計(jì)

20.3技術(shù)準(zhǔn)備

20.3.1 兼容性檢查

20.3.2 讀寫數(shù)據(jù)

20.3.3 使用Web Storage

20.3.4Web Storage 事件監(jiān)測(cè)

20.4制作主頁(yè)面

20.5制作列表頁(yè)

20.6制作詳細(xì)頁(yè)

20.7制作修改頁(yè)

20.8制作添加頁(yè)

第 21章實(shí)戰(zhàn)開(kāi)發(fā)：互動(dòng)社區(qū)wap項(xiàng)目

21.1項(xiàng)目分析

21.2主頁(yè)設(shè)計(jì)

21.3登錄頁(yè)設(shè)計(jì)

21.4注冊(cè)頁(yè)設(shè)計(jì)

21.5發(fā)布頁(yè)設(shè)計(jì)

21.6后臺(tái)開(kāi)發(fā)

21.6.1 設(shè)計(jì)數(shù)據(jù)庫(kù)

21.6.2 連接數(shù)據(jù)庫(kù)

21.6.3 首頁(yè)功能實(shí)現(xiàn)

21.6.4 注冊(cè)頁(yè)功能實(shí)現(xiàn)

21.6.5 發(fā)布頁(yè)功能實(shí)現(xiàn)

21.6.6 回復(fù)功能實(shí)現(xiàn)