本書從實用角度出發，緊密聯繫教學實際。語法介紹簡明清晰、實例內容豐富、重點突出。在基礎知識章節後面均附有綜合實例以及思考與練習部分，建議讀者在學完一章內容以後，都能完成各章的練習，以加深和鞏固所學知識。相信會為讀者的學習和工作帶來一定的幫助。可以作為高等院校電子信息工程、通信工程、電子信息科學與技術、自動化、電氣工程等電子與電氣類相關本科專業教材和研究生參考書，同時也適用於從事電路設計和繫統開發工程技術人員。

\"本書從HTML、CSS、JavaScript最基本的概念開始，由淺至深地介紹這三種語言在網頁開發中的應用，並挑選了網頁開發技術中最精髓的部分進行講解，讓讀者能夠更高效地掌握網頁開發技術。 　　本書的第一部分從宏觀上介紹HTML、CSS、JavaScript在Web開發中的應用；第二部分著重介紹HTML語言，分析其搭建網頁框架上的特點；第三部分講解CSS語言如何控制頁面的樣式和風格；第四部分分析JavaScript在實現網頁動態邏輯方面的運用；第五部分通過綜合樣例說明HTML、CSS、JavaScript在實際開發中的各類運用場景。 　　本書既適合作為網頁開發的入門教程和工具書，也適合非計算機專業的學生及廣大計算機愛好者 閱讀。\"

　　**部分 前端語言介紹
第1章 HTML、CSS、JavaScript的介紹 2
1.1 準備 2
1.2 HTML、CSS、JavaScript的介紹 4
1.3 HTML、CSS、JavaScript之間的協作關繫 4
1.4 HTML、CSS、JavaScript的學習建議 5
1.5 HTML、CSS、JavaScript樣例 5
1.5.1 綜合樣例 5
1.5.2 HTML樣例 7
1.5.3 CSS樣例 8
1.5.4 JavaScript樣例 9
思考題 10
第2章 HTML入門 11
2.1 HTML背景及特點 11
2.1.1 HTML背景 11
2.1.2 HTML特點 11
2.2 HTML開發環境 12
2.3 HTML快速入門 13
思考題 14
第3章 CSS入門 15
3.1 CSS背景及特點 15
3.1.1 CSS背景 15
3.1.2 CSS特點 15
3.1.3 CSS開發環境 15
3.2 CSS快速入門 16
3.2.1 CSS基本語法 16
3.2.2 如何插入樣式表 17
思考題 19
第4章 JavaScript入門 20
4.1 JavaScript的背景及特點 20
4.1.1 JavaScript的背景 20
4.1.2 JavaScript的特點 20
4.2 JavaScript開發環境 21
4.3 JavaScript快速入門 21
4.3.1 JavaScript基本語法 21
4.3.2 JavaScript函數 22
4.3.3 JavaScript對像 25
思考題 27
第5章 HTML、CSS、JavaScript樣例 28
思考題 32
本部分小結 32
　　第二部分 HTML
第6章 HTML介紹 34
6.1 標記語言 34
6.2 HTML 35
思考題 35
第7章 基本概念 36
7.1 元素 36
7.1.1 HTML元素語法 36
7.1.2 常見元素 36
7.1.3 HTML實例解析 38
7.1.4 小知識 39
7.2 屬性 39
7.2.1 屬性語法 40
7.2.2 常見屬性 40
7.2.3 屬性實例 41
7.3 樣式 43
7.3.1 簡介 43
7.3.2 內聯樣式 44
7.3.3 內部樣式表 46
7.3.4 外部樣式表 47
7.3.5 HTML樣式標簽 49
7.3.6 已棄用的標簽和屬性 49
7.4 注釋 49
7.5 區塊 50
7.5.1 簡介 50
7.5.2 常見元素 50
思考題 51
第8章 常用控件 52
8.1 表單 52
8.1.1 簡介 52
8.1.2 表單定義 52
8.1.3 表單屬性 53
8.1.4 表單元素 54
8.1.5 表單樣例 60
8.2 媒體 63
8.2.1 HTML音頻（Audio） 63
8.2.2 HTML視頻（Videos） 65
8.3 DIV+CSS 66
8.3.1 什麼是DIV+CSS 67
8.3.2 DIV+CSS產生背景 67
8.3.3 DIV+CSS的優勢 67
8.3.4 DIV+CSS嵌入方式 68
8.3.5 DIV+CSS布局優點 69
8.3.6 DIV+CSS存在問題 69
8.3.7 DIV+CSS常見錯誤 70
8.3.8 DIV+CSS常用工具 70
思考題 71
第9章 代碼規範 72
9.1 代碼風格 72
9.1.1 縮進與換行 72
9.1.2 命名 72
9.1.3 標簽 73
9.1.4 屬性 76
9.2 通用 77
9.2.1 DOCTYPE 77
9.2.2 編碼 77
9.2.3 CSS和JavaScript引入 78
9.3 Head 79
9.4 圖片 79
9.5 表單 80
9.6 按鈕 80
9.7 模板中的HTML 82
9.8 模板使用 85
9.8.1 為什麼使用HTML模板 85
9.8.2 如何獲取HTML模板 85
思考題 86
**0章 HTML樣例 87
思考題 94
本部分小結 94
　　第三部分 CSS
**1章 CSS介紹 96
11.1 簡介 96
11.1.1 CSS歷史 96
11.1.2 CSS語言特點 96
11.1.3 CSS工作原理 97
11.2 語言基礎 97
11.2.1 屬性和屬性值 97
11.2.2 選擇器 98
11.3 技術應用 100
思考題 100
**2章 CSS基本概念 101
12.1 CSS語法 101
12.2 id和class選擇器 102
12.2.1 id選擇器 102
12.2.2 class選擇器 102
12.3 CSS字體 102
12.3.1 CSS字型 103
12.3.2 字體繫列 103
12.3.3 字體樣式 104
12.3.4 字體大小 104
12.3.5 設置字體大小像素 105
12.3.6 使用百分比和EM組合 105
12.3.7 所有CSS字體屬性 106
12.4 顏色 107
12.4.1 CSS顏色原理 107
12.4.2 1600多萬種不同的顏色 107
12.4.3 灰階 108
12.5 CSS3背景 109
12.5.1 瀏覽器支持 109
12.5.2 屬性 110
12.5.3 背景使用實例 113
思考題 114
**3章 CSS盒子模型 116
13.1 盒子模型簡介 116
13.1.1 元素的寬度和高度 116
13.1.2 瀏覽器的兼容性問題 117
13.2 CSS邊框 117
13.2.1 邊框樣式 117
13.2.2 邊框寬度 118
13.2.3 邊框顏色 119
13.2.4 邊框-單獨設置各邊 120
13.2.5 邊框-簡寫屬性 121
13.3 CSS輪廓 121
13.3.1 輪廓屬性 121
13.3.2 輪廓實例 122
13.4 CSS margin 123
13.4.1 margin單邊外邊距屬性 123
13.4.2 margin簡寫屬性 124
13.4.3 所有的CSS邊距屬性 124
13.4.4 margin樣例 124
13.5 CSS padding 125
13.5.1 填充單邊內邊距屬性 126
13.5.2 填充簡寫屬性 126
13.5.3 CSS填充屬性 126
13.5.4 padding實例 127
思考題 128
**4章 CSS定位 129
14.1 position屬性 129
14.1.1 static定位 129
14.1.2 fixed定位 129
14.1.3 relative定位 129
14.1.4 absolute定位 130
14.1.5 重疊的元素 130
14.1.6 CSS position屬性總結 131
14.1.7 position實例 132
14.2 float屬性 133
14.2.1 什麼是CSS的float 133
14.2.2 元素浮動方式 133
14.2.3 彼此相鄰的浮動元素 133
14.2.4 清除浮動使用clear 133
14.2.5 CSS中所有的浮動屬性 134
14.2.6 float實例 134
14.3 align屬性 136
思考題 137
**5章 CSS3動畫及響應式 138
15.1 什麼是CSS3中的動畫 138
15.2 CSS3的@keyframes規則 140
15.3 CSS3動畫屬性 142
15.4 CSS動畫實例 142
15.5 響應式布局簡介 143
15.6 viewpoint 145
15.7 網格視圖 145
思考題 149
**6章 代碼規範 150
16.1 CSS書寫格式 150
16.2 選擇器與屬性縮寫 152
16.2.1 選擇器 152
16.2.2 屬性縮寫 153
16.2.3 空行 154
16.3 值與單位 155
16.3.1 文本 155
16.3.2 數值 156
16.3.3 url() 156
16.3.4 長度 156
16.3.5 顏色 157
16.3.6 2D位置 158
16.4 文本編排 158
16.4.1 字體族 158
16.4.2 字號 160
16.4.3 字體風格 160
16.4.4 變換與動畫 160
16.5 CSS注釋 161
16.5.1 普通注釋 161
16.5.2 區塊注釋 161
16.6 CSS命名規範 162
16.6.1 命名組成 162
16.6.2 命名前綴 162
16.7 CSS模板使用 162
思考題 164
本部分小結 164
　　第4部分 JavaScript
**7章 JavaScript介紹 166
17.1 簡介 166
17.2 應用場景 168
思考題 169
**8章 JavaScript的基本概念 170
18.1 變量 170
18.1.1 變量定義 170
18.1.2 JavaScript數據類型 170
18.1.3 創建JavaScript變量 171
18.1.4 變量作用域 172
18.2 JavaScript保留關鍵字 172
18.3 函數 173
18.3.1 函數語法 173
18.3.2 調用帶參數的函數 173
18.3.3 帶有返回值的函數 174
18.3.4 函數使用樣例 175
18.4 對像 178
18.4.1 對像創建方法 178
18.4.2 對像創建示例 181
18.4.3 日期對像 182
18.4.4 鐘表示例 183
18.5 事件 185
18.5.1 基本概念 185
18.5.2 事件分類 185
18.5.3 事件示例 187
思考題 188
**9章 常用功能 189
19.1 數組 189
19.1.1 創建數組 189
19.1.2 數組的索引與長度 190
19.1.3 元素添加/刪除 191
19.1.4 常用方法 193
19.2 Date 195
19.2.1 Date對像簡介 195
19.2.2 Date對像常見方法 196
19.3 表單 197
19.3.1 提交表單 198
19.3.2 重置表單 198
19.3.3 表單字段 199
19.3.4 表單樣例 201
19.4 類庫 202
19.4.1 常見類庫 203
19.4.2 jQuery 205
19.5 jQuery詳解 207
19.5.1 jQuery選擇器 207
19.5.2 jQuery事件 209
19.5.3 jQuery內容修改 213
19.5.4 jQuery遍歷 217
思考題 220
第20章 代碼規範 221
20.1 文件及結構 221
20.1.1 文件 221
20.1.2 結構 221
20.2 命名和注釋 227
20.2.1 命名 227
20.2.2 注釋 229
思考題 230
第21章 JavaScript樣例 231
21.1 俄羅斯方塊 231
21.1.1 代碼及展示 231
21.1.2 代碼分析 233
21.2 計算器 234
21.2.1 代碼及展示 234
21.2.2 代碼分析 241
思考題 242
本部分小結 242
　　第五部分 綜 合 樣 例
第22章 管理繫統 246
22.1 類庫準備 246
22.2 主頁 246
22.3 數據展示頁面 249
22.4 用戶管理頁面 256
思考題 262
第23章 遊戲2048 263
23.1 界面 263
23.2 代碼 263
23.2.1 HTML 263
23.2.2 CSS 264
23.2.3 JavaScript 266
思考題 273
第24章 個人網站 274
24.1 準備 274
24.2 WordPress部署 276
24.2.1 服務器鏡像安裝 276
24.2.2 WordPress初始化 279
24.3 個人網站使用 279
思考題 280
本部分小結 280
後記 281
參考文獻 282

　CSS入門 3.1 CSS背景及特點 　　CSS 指層疊樣式表（Cascading Style Sheets），它是繼HTML語言之後誕生的前端樣式語言。起初，HTML因為控制的樣式字體等前端文字樣式過於繁瑣復雜，從而造成它的可維護性極低。為了解決這個問題，CSS誕生了。
3.1.1 CSS背景 　　HTML 標簽原本是用於定義文檔內容。起初，通過使用

、

、

這樣的標簽，HTML表達了“這是標題”“這是段落”“這是表格”之類的信息。同時文檔布局是由瀏覽器來完成，而不使用任何的格式化標簽。
　　由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規範中，使得創建文檔內容可以清晰地獨立於文檔表現層的站點變得越來越困難。
　　為了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（style）。目前所有的主流瀏覽器均支持層疊樣式表。
3.1.2 CSS特點 　　CSS 是優化HTML顯示，讓文檔內容清晰地獨立於文檔表現層的重要技術： * CSS定義如何顯示 HTML 元素； * CSS通常存儲在樣式表中； * 把CSS添加到 HTML 4.0 中，是為了解決內容與表現分離的問題； * 外部CSS可以極大提高工作效率； * 外部CSS通常存儲在 CSS 文件中； * 多個CSS定義可層疊為一層。
3.1.3 CSS開發環境 　　CSS可以和HTML使用**一樣的開發環境。
3.2 CSS快速入門 3.2.1 CSS基本語法 　　CSS 規則是由兩個主要的部分構成：選擇器，以及一條或多條聲明。
　　 selector {declaration1; declaration2; …; declarationN} 　　 　　選擇器通常是需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
　　 selector {property: value} 　　 　　本書中像素以px表示。下面這行代碼的作用是將h1元素內的文字顏色定義為紅色，同時將字體大小設置為14px。在這個例子中，h1是選擇器，color和font-size 是屬性，red 和14px是值。
　　 h1 {color:red; font-size:14px;} 　　 　　上面這段CSS代碼的結構如圖3-1所示。
圖3-1 CSS代碼的結構 * 值的不同寫法和單位 　　除了英文單詞red，我們還可以使用十六進制的顏色值#ff0000： 　　 p { color: #ff0000; } 　　 　　為了節約字節，我們可以使用 CSS 的縮寫形式： 　　 p { color: #f00; } 　　 　　我們還可以通過兩種方法使用 RGB 值： 　　 p { color: rgb(255,0,0); } p { color: rgb(***,0%,0%); } 　　 　　請注意，當使用 RGB 百分比時，即使當值為 0 時也要寫百分比符號，但是在其他的情況下就不需要這麼做了。比如說，當尺寸為 0 像素時，0 之後不需要使用 px 單位，因為 0 就是 0，無論單位是什麼。如果值為若干單詞，則要給值加引號。
　　 p {font-family: \"sans serif\";} 　　 * 多重聲明 　　如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示了如何定義一個紅色文字的居中段落。*後一條規則是不需要加分號的，因為分號在英語中是一個分隔符號，不是結束符號。然而，大多數有經驗的設計師會在每條聲明的末尾都加上分號。這麼做的好處是，當從現有的規則中增減聲明時，會盡可能地減少出錯的可能性。就像 這樣： 　　 p {text-align:center; color:red;} 　　 　　你應該在每行隻描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣： 　　 p { text-align: center; color: black; font-family: arial; } 　　 * 空格和大小寫 　　大多數樣式表包含不止一條規則，而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表*容易被編輯。
　　 body { color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } 　　 　　是否包含空格不會影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及與HTML文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
3.2.2 如何插入樣式表 　　當讀到一個樣式表時，瀏覽器會根據它來格式化HTML文檔。插入樣式表的方法有三種，*後會說明三種CSS的優先級關繫。
　　1．外部樣式表 　　當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 標簽鏈接到樣式表。 標簽在（文檔的）頭部，如代碼3-1所示。
　　代碼3-1 　　 　　 　　瀏覽器會從文件 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的HTML標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子。
　　 hr {color: sienna;} p {margin-left: 20px;} body {background-image: url(\"images/back40.gif\");} 　　 　　不要在屬性值與單位之間留有空格。否則，如果你使用 “margin-left: 20 px” 而不是 “margin-left: 20px”，則可能會無法正常顯示。