網(wǎng)頁(yè)設(shè)計(jì)與制作教程（HTML+CSS+JavaScript 第3版）

前言
第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)1
1.1 網(wǎng)頁(yè)與網(wǎng)站的概念1
1.2 Web前端開(kāi)發(fā)技術(shù)簡(jiǎn)介1
1.2.1 HTML5簡(jiǎn)介1
1.2.2 CSS3簡(jiǎn)介3
1.2.3 JavaScript簡(jiǎn)介4
1.3 HTML5的基本結(jié)構(gòu)和編碼規(guī)范4
1.3.1 HTML5語(yǔ)法結(jié)構(gòu)4
1.3.2 HTML5文檔結(jié)構(gòu)5
1.3.3 HTML5編碼規(guī)范7
1.4 編輯HTML文件8
1.4.1 常見(jiàn)的網(wǎng)頁(yè)編輯工具8
1.4.2 HTML文件的創(chuàng)建8
1.5 案例—制作“馨美裝修”公司介紹頁(yè)面11
習(xí)題111
第2章 編輯HTML5元素12
2.1 HTML5元素的分類12
2.1.1 元信息元素12
2.1.2 語(yǔ)義元素13
2.1.3 無(wú)語(yǔ)義元素15
2.2 注釋和特殊符號(hào)15
2.2.1 注釋15
2.2.2 特殊符號(hào)15
2.3 HTML5的顏色表示16
2.4 文本元素17
2.4.1 字體樣式元素17
2.4.2 短語(yǔ)元素18
2.5 文本層次語(yǔ)義元素19
2.5.1 mark元素19
2.5.2 cite元素19
2.5.3 time元素19
2.6 基本排版元素20
2.6.1 標(biāo)題元素20
2.6.2 段落元素和換行元素21
2.6.3 縮排元素21
2.6.4 水平線元素22
2.6.5 案例—制作“馨美裝修”網(wǎng)購(gòu)向?qū)ы?yè)面22
2.7 圖像元素23
2.7.1 常用的Web圖像格式23
2.7.2 圖像元素的基本用法23
2.8 超鏈接元素25
2.8.1 a元素25
2.8.2 頁(yè)面轉(zhuǎn)向鏈接25
2.8.3 書(shū)簽鏈接26
2.8.4 下載文件鏈接26
2.8.5 電子郵件鏈接26
2.8.6 JavaScript鏈接27
2.8.7 圖像鏈接27
2.8.8 空鏈接27
2.8.9 案例—制作“馨美裝修”服務(wù)資源頁(yè)面27
2.9 列表元素29
2.9.1 無(wú)序列表29
2.9.2 有序列表29
2.9.3 定義列表30
2.9.4 嵌套列表31
2.9.5 案例—制作“馨美裝修”廣告聯(lián)盟頁(yè)面31
2.10 HTML5多媒體元素32
2.10.1 HTML5對(duì)音頻和視頻的支持32
2.10.2 audio元素32
2.10.3 video元素33
習(xí)題234
第3章 網(wǎng)頁(yè)布局與交互35
3.1 iframe框架元素35
3.1.1 基本格法35
3.1.2 使用iframe框架元素布局頁(yè)面35
3.1.3 使用iframe框架元素實(shí)現(xiàn)頁(yè)面間的跳轉(zhuǎn)36
3.2 分區(qū)元素37
3.2.1 基本語(yǔ)法37
3.2.2 使用div元素布局頁(yè)面內(nèi)容37
3.3 范圍元素38
3.3.1 基本語(yǔ)法38
3.3.2 span元素與div元素的異同38
3.3.3 案例—布局“馨美裝修”技術(shù)支持頁(yè)面39
3.4 HTML5文檔結(jié)構(gòu)元素39
3.4.1 section元素40
3.4.2 nav元素40
3.4.3 header元素40
3.4.4 footer元素40
3.4.5 article元素40
3.4.6 aside元素42
3.4.7 分組元素43
3.4.8 案例—制作“馨美裝修”人才招聘頁(yè)面44
3.5 HTML5頁(yè)面交互元素45
3.5.1 details元素和summary元素45
3.5.2 progress元素45
3.6 表格元素46
3.6.1 表格的組成46
3.6.2 基本表格46
3.6.3 不規(guī)范表格47
3.6.4 數(shù)據(jù)分組48
3.6.5 調(diào)整列的格式49
3.6.6 案例—使用表格布局“馨美裝修”案例頁(yè)面49
3.7 表單50
3.7.1 表單元素form50
3.7.2 輸入元素input51
3.7.3 標(biāo)簽元素label53
3.7.4 選擇欄元素select53
3.7.5 多行文本元素textarea55
3.7.6 表單分組55
3.7.7 案例—制作“馨美裝修”聯(lián)系我們表單56
習(xí)題357
第4章 CSS3樣式基礎(chǔ)59
4.1 CSS3簡(jiǎn)介59
4.1.1 初識(shí)CSS359
4.1.2 CSS3的優(yōu)點(diǎn)59
4.1.3 CSS3的局限性60
4.1.4 CSS3編寫(xiě)規(guī)范60
4.1.5 CSS3的工作環(huán)境61
4.2 在HTML中引入CSS3樣式表61
4.2.1 行內(nèi)樣式61
4.2.2 內(nèi)部樣式表62
4.2.3 鏈入外部樣式表63
4.2.4 導(dǎo)入外部樣式表65
4.3 CSS3的基本語(yǔ)法和屬性值單位66
4.3.1 基本語(yǔ)法66
4.3.2 注意事項(xiàng)67
4.3.3 長(zhǎng)度、百分比單位68
4.3.4 色彩單位69
4.4 CSS3的選擇符70
4.4.1 基本選擇符70
4.4.2 復(fù)合選擇符71
4.4.3 通配符選擇符75
4.4.4 偽類選擇符76
4.4.5 偽元素選擇符78
4.4.6 案例—制作“馨美裝修”網(wǎng)站使用條款頁(yè)面79
4.5 文檔結(jié)構(gòu)與元素類型81
4.5.1 文檔結(jié)構(gòu)的基本概念81
4.5.2 元素類型82
4.6 繼承性、層疊性和優(yōu)先級(jí)83
4.6.1 繼承性83
4.6.2 層疊性84
4.6.3 優(yōu)先級(jí)84
4.7 綜合案例—制作“馨美裝修”幫助中心局部頁(yè)面85
習(xí)題488
第5章 使用CSS3修飾網(wǎng)頁(yè)元素89
5.1 CSS3字體屬性89
5.1.1 字體類型屬性font-family89
5.1.2 字體尺寸屬性font-size89
5.1.3 字體傾斜屬性font-style90
5.1.4 小寫(xiě)字體屬性font-variant90
5.1.5 字體粗細(xì)font-weight90
5.2 CSS3文本屬性91
5.2.1 文本顏色屬性color91
5.2.2 行高屬性line-height91
5.2.3 文本水平對(duì)齊方式屬性text-align92
5.2.4 為文本添加修飾屬性text-decoration92
5.2.5 段落首行縮進(jìn)屬性text-indent92
5.2.6 文本的陰影屬性text-shadow92
5.2.7 元素內(nèi)部的空白屬性white-space93
5.2.8 文本的截?cái)嘈Ч麑傩詔ext-overflow93
5.3 CSS3背景屬性94
5.3.1 背景顏色屬性background-color94
5.3.2 背景圖像屬性background-image95
5.3.3 重復(fù)背景圖像屬性background-repeat96
5.3.4 固定背景圖像屬性background-attachment97
5.3.5 背景圖像位置屬性background-position97
5.3.6 背景圖像大小屬性background-size98
5.3.7 背景屬性background98
5.3.8 背景圖像起點(diǎn)屬性background-origi