內容簡介

HTML 5、CSS 3和JavaScript是網站前端開發的主要應用技術，本書以結合實例和小型案例實訓的形式，逐一詳細講解這三大核心技術的基礎知識，包括HTML 5網頁設計的文檔結構、常用標記、表單的使用及HTML 5新增的標記和屬性，CSS在網頁中的應用、CSS 3新增的功能，以及JavaScript語言基礎、內置對象、對象編程、JavaScript操作HTML 5 + CSS實現網頁設計的方法和技巧。

本書結構安排合理，實用性強，既可作為應用型本科或高職高專計算機專業Web客戶端開發課程的教材，又可作為自學人員學習網站前端開發的技術參考資料或培訓教材。通過對本書實例和小型案例的學習和操練，讀者能夠很快掌握書中的知識，提高網站前端開發的實戰能力。

 

本書還提供了實例和小型案例的源代碼，供讀者直接查看和調用；同時還提供了教學課件，便于教師授課使用，也為學生自學帶來了方便。

前    言

　　從目前國內互聯網的發展趨勢來看，Web前端開發已經成為一門廣泛應用的技術，各行各業對網站的要求越來越高，對網頁設計開發人才的需求也大大增加。Web標準和CSS技術已經成為一種潮流和趨勢。

　　作者結合自己多年積累的相關課程教學經驗和Web開發經驗，編寫了本書。本書是為計算機相關專業的學生以及對網站前端開發感興趣的讀者編寫的，旨在培養讀者的網站開發能力，以適應網絡社會對這方面人才的需求，讓讀者通過學習，成為一名精通Web前端開發的能手。

　　本書以作者參與的院級科研項目“校園電子商務網站開發研究”為案例參考背景，將構建商務網站時需要的典型應用作為書中的案例，引入網站前端開發所需要的關鍵技術和開發語言。

　　本書合理安排了基礎知識和實戰訓練的比例，基礎知識以“夠用”為度，用簡明清晰的語言闡述，結合圖表來表達，符合學生的學習特點和認知規律。

　　本書重點放在專業技能的訓練上。幾乎每個重要的知識點都有實例供讀者參考練習，并且采用的是人們熟悉的電商網站的精彩部分作為案例。

　　本書包含三大核心技術，分別是HTML 5、CSS 3和JavaScript。在內容組織方面，共分為9個教學模塊和1個綜合應用案例模塊。

　　第1章 介紹網站前端設計需要的知識，包括Web基礎知識、網站開發的基本流程及關鍵技術、網站開發人才需求，以及網站開發工具。

　　第2章 屬于HTML 5部分，介紹HTML 5的新功能、新增標記和屬性、廢棄標記，以及HTML 5文檔中的常用標記、表單元素和HTML 5新增的結構化元素。

　　第3~5章 屬于CSS部分，主要介紹CSS基礎、布局方法和樣式屬性，對主流瀏覽器都支持的也比較成熟的CSS 3的部分屬性做了講解。

　　第6~8章 屬于JavaScript部分，主要介紹JavaScript語法基礎、函數及其應用、常用的內置對象、常用的文檔對象、常用的窗口對象、事件處理等內容。

　　第9章 利用JavaScript實現Canvas功能，包括使用Canvas繪制基本圖形、變換圖形及繪制文本等。

　　第10章 綜合應用案例，主要通過商品購物車功能設計，系統地介紹HTML 5、CSS樣式和JavaScript腳本編程三項技術的綜合運用。

　　本書由王黎任主編，張希文、段炬霞、劉軍玲、郭洪榮任副主編，其中王黎編寫第2、3、4、7、8、9、10章，張希文編寫第1章，劉軍玲編寫第5章，段炬霞編寫第6章，邱冬副教授、呂殿基副教授審稿，編寫過程中參考了很多相關技術資料及經典案例，吸取了許多同仁的寶貴經驗，在此深表謝意！

　　由于作者水平有限，雖然對內容進行了反復斟酌和修改，但書中不足與疏漏之處在所難免，懇請各位專家和廣大讀者批評指正。作者E-mail：wangli@biem.edu.cn。

　　

 

編  者

目錄

第1章  網站前端設計知識準備 1

1.1  Web基礎 2

1.1.1  Web的基本概念 2

1.1.2  了解“Web標準” 2

1.1.3  靜態網頁 4

1.1.4  動態網頁 4

1.2  網站開發 4

1.2.1  網站開發的基本流程 4

1.2.2  網站開發的人才需求 5

1.2.3  網站開發的主要技術 6

1.3  Web前端工程師需要掌握的技能 6

1.3.1  Web前端工程師的工作內容 6

1.3.2  Web前端工程師需要掌握的

技術 6

1.4  網站開發工具介紹 8

1.4.1  原型設計工具 8

1.4.2  開發工具 9

1.4.3  調試工具 9

1.4.4  代碼托管工具 10

本章小結 10

習題 11

第2章  HTML 5基礎 13

2.1  HTML簡介 14

2.1.1  了解HTML 14

2.1.2  HTML元素 15

2.2  初識HTML 5 16

2.2.1  了解HTML 5 16

2.2.2  HTML 5的新功能 17

2.2.3  HTML 5的廢棄標記 18

2.2.4  HTML 5的新增標記 18

2.2.5  HTML 5的新增屬性 19

2.3  HTML 5的結構 20

2.3.1  HTML 5的基本結構 20

2.3.2  編寫第一個符合W3C標準的

HTML 5網頁 21

2.4  HTML 5文檔的常用標記 22

2.4.1  文本段落的相關標記 22

2.4.2  圖像標記<img> 23

2.4.3  超鏈接 24

2.4.4  列表 26

2.4.5  表格 27

2.4.6  HTML 5的音頻和視頻 29

2.5  HTML 5的表單元素 32

2.5.1  創建表單 32

2.5.2  input輸入類型控件 32

2.5.3  列表框(select) 39

2.5.4  多行文本輸入框(textarea) 39

2.5.5  表單控件綜合示例 40

2.6  HTML 5語義化結構性元素 41

2.6.1  新增的主體結構元素 41

2.6.2  新增的非主體結構元素 46

2.7  小型案例實訓：使用結構元素進行

網頁布局 47

本章小結 49

習題 49

第3章  CSS基礎 51

3.1  CSS概述 52

3.1.1  什么是CSS 52

3.1.2  CSS的發展史 52

3.1.3  CSS 3簡介 53

3.2  CSS的組成 53

3.2.1  基本語法規則 53

3.2.2  選擇符的分類 54

3.3  在HTML中使用CSS的方法 61

3.3.1  行內樣式 61

3.3.2  內部樣式 61

3.3.3  外部樣式 62

3.3.4  CSS的優先級 63

3.3.5  常用的CSS 3屬性前綴 63

本章小結 63

習題 64

第4章  CSS布局 65

4.1  CSS的盒模型 66

4.1.1  盒模型的結構 66

4.1.2  盒模型的元素類型 67

4.1.3  使用DIV 69

4.1.4　外邊距、內邊距與邊框的

CSS設置 70

4.1.5  CSS 3對盒模型邊框的完善 74

4.2  網頁元素的定位 78

4.2.1  定位屬性position 78

4.2.2  float浮動定位 81

4.2.3  其他CSS布局定位方式 83

4.3  DIV + CSS常用的布局方式 84

4.3.1  單列水平居中布局 85

4.3.2  浮動的布局 87

4.3.3  div嵌套布局 89

4.3.4  CSS 3多列布局 92

4.4  列表元素布局 94

4.5  小型案例實訓——布局電商網站

首頁(制作盒模型) 95

4.5.1  布局網頁的總體結構 95

4.5.2  <header></header>區域的

結構分析及布局 96

4.5.3  <div class=“content”></div>

內容區域的設計 98

4.5.4  <footer></footer>區域的

設計 100

本章小結 100

習題 101

第5章  CSS樣式屬性 103

5.1  CSS 3字體相關屬性 104

5.1.1  設置字體屬性 104

5.1.2  設置字體屬性的綜合示例 106

5.1.3  CSS 3新增字體屬性 106

5.2  CSS控制文本的樣式 107

5.2.1  文本屬性 107

5.2.2  設置文本屬性的綜合示例 109

5.2.3  CSS 3新增的文本屬性 110

5.3  使用CSS控制背景 114

5.3.1  背景屬性 114

5.3.2  背景設置綜合示例 116

5.3.3  CSS 3新增的與背景相關的

屬性 116

5.4  使用CSS設置列表樣式 121

5.4.1  CSS列表屬性 121

5.4.2  列表屬性的綜合實例 122

5.5  小型案例實訓 123

5.5.1  案例1：商品信息展示 123

5.5.2  案例2：CSS制作二級導航

下拉菜單 125

本章小結 128

習題 128

第6章  JavaScript入門 131

6.1  JavaScript概述 132

6.1.1  認識JavaScript 132

6.1.2  JavaScript的特點和作用 132

6.1.3  在網頁中使用JavaScript 134

6.1.4  JavaScript代碼規范 135

6.2  變量、數據類型 136

6.2.1  變量的聲明和使用 136

6.2.2  JavaScript的基本數據類型 138

6.3  表達式與運算符 141

6.3.1  表達式 141

6.3.2  運算符 141

6.4  流程控制語句 148

6.4.1  分支結構 148

6.4.2  循環結構 151

6.5  JavaScript的函數 154

6.5.1  函數的定義 154

6.5.2  函數的調用 154

6.5.3  使用函數的返回值 157

6.5.4  函數的嵌套 158

6.5.5  內置函數 158

6.6  小型案例實訓——制作簡易

計算器 160

本章小結 162

習題 162

第7章  JavaScript中的對象 165

7.1  JavaScript的常用內置對象 166

7.1.1  數組對象 166

7.1.2  字符串(String)對象 170

7.1.3  日期(Date)對象 172

7.1.4  數學(Math)對象 174

7.2  常用文檔對象 177

7.2.1  文檔對象模型(DOM對象) 177

7.2.2  文檔對象的節點樹 178

7.2.3  文檔對象(document) 185

7.2.4  表單及其控件對象 188

7.2.5  style對象 190

7.3  常用窗口對象 192

7.3.1  屏幕對象 192

7.3.2  window窗口對象 194

7.3.3  瀏覽器信息對象 196

7.3.4  網址對象 197

7.3.5  歷史記錄對象 198

7.4  小型案例實訓 200

7.4.1  案例1：將英文單詞首字母

改成大寫 200

 

7.4.2  案例2：限制多行文本域

輸入的字符個數 202

本章小結 204

習題 205

第8章  事件處理 209

8.1  了解JavaScript事件 210

8.1.1  JavaScript的常用事件 210

8.1.2  調用事件處理程序的方法 211

8.2  常用事件在網頁中的應用 213

8.2.1  鼠標事件 213

8.2.2  表單事件 216

8.2.3  頁面相關事件 221

8.2.4  鍵盤事件 222

8.3  小型案例實訓：JavaScript實現

廣告圖像輪播 223

本章小結 227

習題 227

第9章  利用JavaScript實現Canvas

功能 229

9.1  創建Canvas元素 230

9.2  繪制基本圖形 231

9.2.1  繪制直線 232

9.2.2  繪制圓形 232

9.2.3  繪制矩形 233

9.2.4  繪制多邊形 234

9.3  圖形的變換 235

9.3.1  保存與恢復Canvas狀態 235

9.3.2  移動坐標位置 236

9.3.3  縮放圖形 237

9.4  使用特效 237

9.5  繪制文本 239

9.6  小型案例實訓：用Canvas繪制

時鐘 240

9.6.1  繪制靜態時鐘 240

9.6.2  制作動態時鐘 244

本章小結 244

習題 245

第10章  綜合案例——購物車功能的

實現 247

10.1  案例介紹 248

10.2  設計思路 248

10.3  實施過程 249

10.3.1  購物車的HTML結構 249

10.3.2  購物車的樣式設計 251

10.3.3  利用JavaScript實現購物車

功能 256

參考文獻 262