HTML+CSS+JavaScript網頁設計實用教程

第1章HTML、CSS、JavaScript基礎知識和基本語法/1
1.1Web網頁的基本概念/1
1.1.1網頁/1
1.1.2網站/2
1.2靜態網頁工作原理與制作工具/3
1.2.1靜態網頁的工作原理/3
1.2.2運行Web服務器中的頁面/4
1.2.3靜態網頁制作工具/8
1.3HTML、CSS、JavaScript簡介/8
1.3.1HTML超文本標記語言/8
1.3.2CSS 層疊樣式表/10
1.3.3JavaScript腳本語言/11
1.4頁面文檔結構和基本語法/11
1.4.1HTML文檔結構/11
1.4.2HTML基本語法/12
1.4.3XHTML文檔結構/14
1.5頁面文檔頭部的相關標記/15
1.5.1設置頁面標題＜title＞/15
1.5.2定義頁面元信息＜meta /＞/15
1.5.3引用外部文件＜link /＞/17
1.6習題/18第2章CSS樣式表基礎/20
2.1CSS中層疊的概念/20
2.2CSS樣式規則與內聯CSS樣式/21
2.2.1CSS樣式規則/21
2.2.2內聯CSS樣式/22
2.3CSS樣式表/23
2.3.1CSS樣式表結構與使用/23
2.3.2基本選擇符/25
2.3.3群組與通用選擇符/28
2.3.4包含與子對象選擇符/292.3.5相鄰選擇符/33
2.3.6屬性選擇符/34
2.3.7偽對象(偽元素)選擇符/38
2.3.8偽類選擇符/39
2.4CSS常用樣式/42
2.4.1CSS顏色的屬性值/42
2.4.2CSS設置鼠標形狀cursor/42
2.4.3CSS大小尺寸量度的屬性值/43
2.4.4文本字符的CSS樣式屬性/44
2.4.5文本外觀CSS樣式屬性/46
2.5樣式規則的優先級/51
2.5.1樣式規則的優先級原則/52
2.5.2用!important提高樣式優先級/54
2.6案例分析與實現/56
2.7習題/57第3章盒子的應用/59
3.1盒模型的結構/59
3.1.1盒子的寬度與高度/60
3.1.2盒子的內填充與外邊距/60
3.1.3盒子的邊框/61
3.1.4盒子的陰影效果/65
3.1.5box?sizing屬性/66
3.1.6盒子的背景/67
3.1.7網頁元素div/69
3.2垂直外邊距的合並/70
3.2.1上下相鄰元素的垂直外邊距合並/70
3.2.2內外包含元素的垂直邊距合並/70
3.2.3空元素自身的垂直外邊距合並/71
3.3盒子的排列/71
3.3.1盒子的居中/71
3.3.2盒子的浮動與清除浮動/72
3.3.3盒子的布局應用舉例/76
3.4盒子的定位/77
3.4.1自動定位static/78
3.4.2相對定位relative/78
3.4.3絕對定位absolute/81
3.4.4固定定位fixed/85
3.4.5元素的層疊等級/85
3.5盒子的顯示方式與可見性/86
3.5.1塊元素和行內元素/86
3.5.2元素的顯示方式/86
3.5.3元素的可見性visibility/87
3.6彈出式菜單設計/87
3.7習題/94第4章HTML的基本元素及樣式/96
4.1文本及相關標記/96
4.1.1HTML文本字符與注釋標記/96
4.1.2文本相關標記/97
4.2圖像與圖像樣式/99
4.2.1插入圖像/99
4.2.2圖像樣式/100
4.2.3使用display:block將圖像轉換為塊級元素/102
4.2.4使用float將圖像設置為浮動塊元素/102
4.3小案例: div、圖像和文本的綜合排版/103
4.3.1案例分析/104
4.3.2案例代碼/105
4.4列表標記與相關樣式/106
4.4.1各種列表標記介紹/107
4.4.2列表樣式/109
4.5超鏈接標記與偽類/111
4.5.1超鏈接標記及屬性/111
4.5.2鏈接到普通文檔、圖像或多媒體文件/113
4.5.3設置錨點與Email鏈接/115
4.5.4超鏈接偽類選擇符/116
4.6圖像映射標記/120
4.6.1創建圖像映射標記/121
4.6.2使用圖像映射的＜img /＞圖像/121
4.7表格標記及樣式/123
4.7.1創建表格的基本標記/123
4.7.2表格基本標記中的樣式屬性/126
4.7.3表格單元格合並/129
4.7.4表格結構划分標記＜thead＞＜tfoot＞
＜tbody＞/131
4.8小案例: 山東商職學院網站首頁制作/133
4.9課堂練習小案例/140
4.10習題/141第5章HTML框架、表單、多媒體/144
5.1HTML的浮動框架/144
5.1.1浮動框架的基本概念/144
5.1.2浮動框架的應用舉例/145
5.2表單標記/148
5.2.1創建表單標記＜form＞/148
5.2.2表單輸入標記＜input /＞/149
5.2.3HTML5新增＜input /＞輸入元素/156
5.2.4文本區標記＜textarea＞/159
5.2.5滾動列表與下拉列表標記＜select＞
＜option＞/160
5.2.6按鈕標記＜button＞/163
5.2.7控件標簽標記＜label＞/163
5.2.8表單分組及標題標記＜fieldset＞
＜legend＞/164
5.2.9應用div和樣式的表單設計/166
5.3滾動字幕、背景音樂與多媒體/169
5.3.1滾動字幕標記＜marquee＞/169
5.3.2背景音樂標記＜bgsound /＞/171
5.3.3播放多媒體標記＜embed＞/171
5.4習題/172第6章JavaScript基礎/173
6.1JavaScript概述/173
6.1.1ECMAScript/173
6.1.2DOM簡介/174
6.1.3瀏覽器對象模型BOM/175
6.1.4JavaScript語言的特點/176
6.1.5JavaScript的使用/177
6.2JavaScript基本概念/181
6.2.1語法/181
6.2.2關鍵字和保留字/181
6.2.3變量/182
6.2.4數據類型/183
6.3JavaScript運算符與表達式/186
6.3.1算術運算符與表達式/187
6.3.2賦值運算符與表達式/187
6.3.3比較、邏輯運算符與表達式/187
6.3.4條件運算符與表達式/189
6.4JavaScript語句/189
6.4.1if語句/189
6.4.2switch語句/190
6.4.3循環語句while、do?while、for/193
6.4.4break和continue語句/197
6.5JavaScript自定義函數/200
6.5.1函數聲明和函數表達式/200
6.5.2函數內部屬性/205
6.5.3函數的嵌套與遞歸/206
6.5.4匿名函數/207
6.5.5閉包/211
6.6JavaScript事件處理/216
6.6.1JavaScript的常用事件/217
6.6.2頁面相關事件與函數的記憶調用/220
6.6.3鼠標相關事件/222
6.6.4焦點、按鍵及表單相關事件/227
6.6.5表單數據驗證/230
6.7onerror事件與頁面錯誤提示/236
6.7.1用onerror事件捕獲錯誤/236
6.7.2用try…catch捕獲錯誤/238
6.8習題/242第7章JavaScript全局對象與系統對象/244
7.1面向對象概述/244
7.1.1面向對象基礎/244
7.1.2對象訪問語句/245
7.2JavaScript全局對象/246
7.2.1全局對象的屬性——全局變量/246
7.2.2全局對象的方法——全局函數/246
7.3瀏覽器窗口對象window/249
7.3.1window對象的屬性/249
7.3.2window對象的對話框/252
7.3.3window對象的方法/253
7.3.4定時器應用小案例——圖片輪換與漂浮廣告
/259
7.4瀏覽器信息對象navigator/263
7.5location對象/264
7.5.1location對象的屬性/265
7.5.2location對象的方法/265
7.6history對象/267
7.7習題/269第8章JavaScript內置對象與DOM對象/270
8.1Date對象/270
8.1.1Date日期時間對象的創建/270
8.1.2Date日期時間對象的常用方法/271
8.2Array對象/273
8.2.1數組的創建與屬性/273
8.2.2數組對象的方法/274
8.2.3數組對象與日期時間對象的綜合應用/279
8.2.4表單復選框組數據驗證的實現/279
8.3String對象/281
8.4RegExp對象/285
8.4.1正則表達式的構成/285
8.4.2RegExp正則表達式對象的創建與屬性/288
8.4.3RegExp正則表達式對象的方法/289
8.4.4String字符串對象使用正則表達式的方法
/292
8.5Math對象/295
8.6DOM/296
8.6.1document對象/297
8.6.2DOM節點對象的通用屬性/299
8.6.3標記對象的屬性/299
8.6.4標記對象的方法/301
8.6.5表單腳本/304
8.6.6節點對象綜合應用案例/308
8.7event事件對象/310
8.8style樣式對象/314
8.9習題/316附錄: 習題答案/320