網頁設計與制作教程（HTML+CSS+JavaScript 第3版）

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