第1篇　HTML基礎(chǔ)篇
第1章 HTML基礎(chǔ) 2 視頻講解：5節(jié)，58分鐘
1.1 HTML概述 3
1.1.1 什么是HTML 3
1.1.2 HTML的發(fā)展歷程 3
1.2 HTML文件的基本結(jié)構(gòu) 3
1.2.1 HTML的基本結(jié)構(gòu) 4
1.2.2 HTML的基本標(biāo)簽 5
1.3 編寫第一個(gè)HTML文件 8
1.3.1 HTML文件的編寫方法 8
1.3.2 手工編寫頁面 9
1.3.3 使用WebStorm制作頁面 10
[實(shí)例1.1] 運(yùn)用屬性，渲染頁面效果 15
本章知識(shí)思維導(dǎo)圖 16

第2章 文本 17 視頻講解：10節(jié)，72分鐘
2.1 標(biāo)題 18
2.1.1 標(biāo)題標(biāo)簽 18
[實(shí)例2.1] 巧用標(biāo)題標(biāo)簽，編寫開心一笑 18
2.1.2 標(biāo)題的對(duì)齊方式 20
[實(shí)例2.2] 活用文字居中，推薦商品信息 20
2.2 文字 21
2.2.1 文字的斜體、下劃線、刪除線 21
[實(shí)例2.3] 活用文字裝飾，推薦商品信息 21
2.2.2 文字的上標(biāo)與下標(biāo) 22
[實(shí)例2.4] 使用上標(biāo)與下標(biāo)，展示數(shù)學(xué)公示表 23
2.2.3 特殊文字符號(hào) 23
[實(shí)例2.5] 巧用文字符，繪制字符畫 24
2.3 段落 24
2.3.1 段落標(biāo)簽 25
[實(shí)例2.6] 巧用段落標(biāo)簽，介紹創(chuàng)意文字 25
2.3.2 段落的換行標(biāo)簽 26
[實(shí)例2.7] 巧用換行，書寫古詩 26
2.3.3 段落的原格式標(biāo)簽 27
[實(shí)例2.8] 巧用原格式標(biāo)簽，輸出元旦快樂 27
2.4 水平線 28
2.4.1 水平線標(biāo)簽 28
[實(shí)例2.9] 巧用水平線，繪制行表格 28
2.4.2 水平線標(biāo)簽的寬度 29
[實(shí)例2.10] 巧用

---

的寬度屬性，裝飾文字 29
本章知識(shí)思維導(dǎo)圖 30

第3章 添加圖像 31 視頻講解：5節(jié)，74分鐘
3.1 添加圖像 32
3.1.1 圖像的基本格式 32
3.1.2 添加圖像 32
[實(shí)例3.1] 使用img標(biāo)簽，實(shí)現(xiàn)象棋簡介 33
3.2 設(shè)置圖像屬性 34
3.2.1 圖像大小與邊框 34
[實(shí)例3.2] 改變手機(jī)商品圖像的大小和邊框 34
3.2.2 圖像間距與對(duì)齊方式 35
[實(shí)例3.3] 使用align和vspace等改變頭像的位置 36
3.2.3 替換文本與提示文字 36
[實(shí)例3.4] 設(shè)置圖像的提示文字與替換文本 37
本章知識(shí)思維導(dǎo)圖 38

第4章 超鏈接的使用 39 視頻講解：4節(jié)，67分鐘
4.1 鏈 接 標(biāo) 簽 40
4.1.1 文本鏈接 40
[實(shí)例4.1] 巧用文本鏈接，實(shí)現(xiàn)網(wǎng)站導(dǎo)航 40
4.1.2 書簽鏈接 41
[實(shí)例4.2] 巧用書簽鏈接，實(shí)現(xiàn)商城網(wǎng)頁內(nèi)部跳轉(zhuǎn) 41
4.2 圖像的超鏈接 43
4.2.1 圖像的超鏈接 43
[實(shí)例4.3] 添加圖像鏈接，實(shí)現(xiàn)“手機(jī)風(fēng)暴”板塊 43
4.2.2 圖像熱區(qū)鏈接 44
[實(shí)例4.4] 使用熱區(qū)鏈接，添加多個(gè)鏈接地址 45
本章知識(shí)思維導(dǎo)圖 46

第5章 表格與