本書緊密圍繞網(wǎng)頁設計師在制作網(wǎng)頁過程中的實際需要和應該掌握的技術,全面介紹了如何使用HTML、CSS、JavaScrip 以及前端框架進行網(wǎng)站建設和網(wǎng)頁設計。
從內(nèi)功到招式,全書貫穿了不同行業(yè)的多種實例,各實例均經(jīng)過精心設計,操作步驟清晰簡明,技術分析深入淺出,能夠幫助讀者沉浸在真實的開發(fā)狀態(tài)中。這樣,無論以后是面對公司的面試,還是真實的工作需求,讀者都能夠跨過所學與所用之間的鴻溝。
此外,本書還精心配備了PPT 電子課件,便于老師課堂教學和學生把握知識要點。
初學優(yōu)選 入門經(jīng)典
針對前端新手全新打造,一本書搞定 HTML、CSS、JavaScript
· 精品呈現(xiàn) 通俗易懂
語言輕松幽默,講解一針見血,從全新角度講透前端開發(fā)核心技術
· 五位一體 全面服務
在線教程 在線問答 面試練習 源碼素材 課件 PPT
(獲取方式請加本書封底QQ群)
莫振杰,綠葉學習網(wǎng)(http://www.lvyestudy.com)站長,利用該網(wǎng)站用于分享自己在前后端開發(fā)中的一些經(jīng)驗,并且制作相關前后端開發(fā)的在線教程。這些在線教程在互聯(lián)網(wǎng)引起廣泛關注,極大受到網(wǎng)友推崇。本人編寫過大量原創(chuàng)在線教程和《Web前端開發(fā)精品課》系列圖書,廣受網(wǎng)友稱贊與推崇。
《Web前端開發(fā)精品課HTML與CSS基礎教程》
《Web前端開發(fā)精品課HTML與CSS進階教程》
《Web前端開發(fā)精品課JavaScript基礎教程》
《Web前端開發(fā)精品課HTML5 Canvas開發(fā)詳解》
目錄
第一部分 HTML基礎
第01章 HTML簡介
1.1 前端技術簡介 2
1.1.1 從網(wǎng)頁制作到前端開發(fā) 2
1.1.2 從前端開發(fā)到后端開發(fā) 3
1.1.3 學習路線 5
1.2 什么是HTML 5
1.3 教程介紹 6
1.3.1 教程簡介 6
1.3.2 初學者比較關心的問題7
第02章 開發(fā)工具
2.1 開發(fā)工具 8
2.2 使用Hbuilder 9
第03章 基本標簽
3.1 HTML結構 11
3.2 head標簽 12
3.2.1 title標簽 13
3.2.2 meta標簽 13
3.2.3 style標簽 15
3.2.4 script標簽 15
3.2.5 link標簽 16
3.2.6 base標簽 16
3.3 body標簽 16
3.4 HTML注釋 17
3.5 練習題 18
第04章 文本
4.1 文本簡介 19
4.1.1 頁面組成元素 19
4.1.2 HTML文本 20
4.2 標題標簽 21
4.3 段落標簽 22
4.3.1 段落標簽:
22
4.3.2 換行標簽:
23
4.4 文本標簽 25
4.4.1 粗體標簽 25
4.4.2 斜體標簽 26
4.4.3 上標標簽 26
4.4.4 下標標簽 27
4.4.5 中劃線標簽 27
4.4.6 下劃線標簽 28
4.4.7 大字號標簽和小字號標簽 28
4.5 水平線標簽 29
4.6 div標簽 30
4.7 自閉合標簽 31
4.8 塊元素和行內(nèi)元素 32
4.8.1 塊元素 33
4.8.2 行內(nèi)元素 34
4.9 特殊符號 35
4.9.1 網(wǎng)頁中的空格 35
4.9.2 網(wǎng)頁中的特殊符號 36
4.10 練習題 38
第05章 列表
5.1 列表簡介 39
5.2 有序列表 40
5.2.1 有序列表簡介 40
5.2.2 type屬性 41
5.3 無序列表 42
5.3.1 無序列表簡介 42
5.3.2 type屬性 43
5.3.3 深入無序列表 44
5.4 定義列表 46
5.5 HTML語義化 47
5.6 練習題 48
第06章 表格
6.1 表格簡介 49
6.2 基本結構 49
6.3 完整結構 51
6.3.1 表格標題:caption 51
6.3.2 表頭單元格:th 52
6.4 語義化 54
6.5 合并行:rowspan 56
6.6 合并列:colspan 57
6.7 練習題 58
第07章 圖片
7.1 圖片標簽 59
7.1.1 src屬性 59
7.1.2 alt屬性和title屬性 60
7.2 圖片路徑 62
7.2.1 page1.html引用圖片 62
7.2.2 page2.html引用圖片 63
7.3 圖片格式 64
7.3.1 位圖 64
7.3.2 矢量圖 66
7.4 練習題 67
第08章 超鏈接
8.1 超鏈接簡介 68
8.1.1 a標簽 69
8.1.2 target屬性 70
8.2 內(nèi)部鏈接 70
8.3 錨點鏈接 72
8.4 練習題 74
第09章 表單
9.1 表單簡介 75
9.1.1 表單是什么75
9.1.2 表單標簽 76
9.2 form標簽 76
9.2.1 form標簽簡介 76
9.2.2 form標簽屬性 77
9.3 input標簽 78
9.4 單行文本框 79
9.4.1 單行文本框簡介 79
9.4.2 單行文本框屬性 79
9.5 密碼文本框 81
9.5.1 密碼文本框簡介 81
9.5.2 密碼文本框屬性 82
9.6 單選框 83
9.6.1 單選框簡介 83
9.6.2 忽略點 84
9.7 復選框 86
9.8 按鈕 87
9.8.1 普通按鈕button 88
9.8.2 提交按鈕submit 89
9.8.3 重置按鈕reset 89
9.8.4 button標簽 91
9.9 文件上傳 91
9.10 多行文本框 92
9.11 下拉列表 93
9.11.1 下拉列表簡介 93
9.11.2 select標簽屬性 94
9.11.3 option標簽屬性 95
9.12 練習題 97
第10章 框架
10.1 iframe標簽 99
10.2 練習題 100
第二部分 CSS基礎
第11章 CSS簡介
11.1 CSS簡介 102
11.1.1 CSS是什么 102
11.1.2 CSS和CSS3 102
11.2 教程簡介 103
11.3 CSS引入方式 103
11.3.1 外部樣式表 103
11.3.2 內(nèi)部樣式表 104
11.3.3 行內(nèi)樣式表 105
11.4 練習題 106
第12章 CSS選擇器
12.1 元素的id和class 107
12.1.1 id屬性 107
12.1.2 class屬性 108
12.2 選擇器是什么 108
12.3 CSS選擇器 109
12.3.1 元素選擇器 110
12.3.2 id選擇器 110
12.3.3 class選擇器 111
12.3.4 后代選擇器 113
12.3.5 群組選擇器 114
12.4 練習題 116
第13章 字體樣式
13.1 字體樣式簡介 118
13.2 字體類型(font-family)119
13.3 字體大。╢ont-size)120
13.3.1 px是什么 120
13.3.2 采用px為單位 121
13.4 字體粗細(font-weight)122
13.5 字體風格(font-style)123
13.6 字體顏色(color)125
13.6.1 關鍵字 125
13.6.2 16進制RGB值 125
13.7 CSS注釋 126
13.8 練習題 128
第14章 文本樣式
14.1 文本樣式簡介 129
14.2 首行縮進(text-indent)129
14.3 水平對齊(text-align)130
14.4 文本修飾(text-decoration)131
14.4.1 text-decoration屬性 131
14.4.2 三種劃線的用途分析 133
14.5 大小寫(text-transform)134
14.6 行高(line-height)135
14.7 間距(letter-spacing和word-spacing)136
14.7.1 字間距 136
14.7.2 詞間距 136
14.8 練習題 137
第15章 邊框樣式
15.1 邊框樣式簡介 139
15.2 整體樣式 140
15.2.1 邊框屬性 140
15.2.2 簡寫形式 142
15.3 局部樣式 142
15.4 練習題 145
第16章 列表樣式
16.1 列表項符號(list-style-type)146
16.1.1 定義列表項符號 146
16.1.2 去除列表項符號 148
16.2 列表項圖片(list-style-image)149
16.3 練習題 150
第17章 表格樣式
17.1 表格標題位置(caption-side)151
17.2 表格邊框合并(border-collapse)152
17.3 表格邊框間距(border-spacing)154
17.4 練習題 155
第18章 圖片樣式
18.1 圖片大小 156
18.2 圖片邊框 157
18.3 圖片對齊 158
18.3.1 水平對齊 158
18.3.2 垂直對齊 159
18.4 文字環(huán)繞初識float 162
18.5 練習題 163
第19章 背景樣式
19.1 背景樣式簡介 164
19.2 背景顏色(background-color)164
19.3 背景圖片樣式(background-image)166
19.4 背景圖片重復(background-repeat)167
19.5 背景圖片位置(background-position)169
19.5.1 像素值 169
19.5.2 關鍵字 170
19.6 背景圖片固定(background-attachment)172
19.7 練習題 173
第20章 超鏈接樣式
20.1 超鏈接偽類 174
20.1.1 超鏈接偽類簡介 174
20.1.2 深入了解超鏈接偽類 175
20.2 深入了解:hover 177
20.3 鼠標樣式 178
20.3.1 瀏覽器鼠標樣式 178
20.3.2 自定義鼠標樣式 180
20.4 練習題 181
第21章 盒子模型
21.1 CSS盒子模型 182
21.2 寬和高(width和height)184
21.3 邊框(border)187
21.4 內(nèi)邊距(padding)188
21.4.1 padding局部樣式 188
21.4.2 padding簡寫形式 189
21.5 外邊距(margin)191
21.5.1 margin局部樣式191
21.5.2 margin簡寫形式 194
21.5.3 瀏覽器審查元素 195
21.6 練習題 196
第22章 浮動布局
22.1 文檔流簡介 197
22.1.1 正常文檔流 197
22.1.2 脫離文檔流 198
22.2 浮動 200
22.3 清除浮動 202
22.4 練習題 204
第23章 定位布局
23.1 定位布局簡介 205
23.2 固定定位:fixed 206
23.3 相對定位:relative 207
23.4 絕對定位:absolute 209
23.5 靜態(tài)定位:static 211
23.6 練習題 211
第三部分 JavaScript基礎
第24章 JavaScript簡介
24.1 JavaScript是什么214
24.1.1 JavaScript簡介 214
24.1.2 教程介紹 215
24.2 JavaScript開發(fā)工具 216
24.3 JavaScript引入方式 217
24.3.1 外部JavaScript 218
24.3.2 內(nèi)部JavaScript 219
24.3.3 元素屬性JavaScript 220
24.4 一個簡單的JavaScript程序 221
24.5 練習題 222
第25章 語法基礎
25.1 語法簡介 223
25.2 變量與常量 224
25.2.1 變量 225
25.2.2 常量 229
25.3 數(shù)據(jù)類型 229
25.3.1 數(shù)字 229
25.3.2 字符串 230
25.3.3 布爾值 232
25.3.4 未定義值 233
25.3.5 空值 234
25.4 運算符 234
25.4.1 算術運算符 235
25.4.2 賦值運算符 239
25.4.3 比較運算符 240
25.4.4 邏輯運算符 241
25.4.5 條件運算符 244
25.5 表達式與語句 245
25.6 類型轉換 245
25.6.1 字符串轉換為數(shù)字 245
25.6.2 數(shù)字轉換為字符串 248
25.7 轉義字符 249
25.8 注釋 251
25.8.1 單行注釋 251
25.8.2 多行注釋 252
25.9 練習題 253
第26章 流程控制
26.1 流程控制簡介 255
26.1.1 順序結構 255
26.1.2 選擇結構 256
26.1.3 循環(huán)結構 257
26.2 選擇結構:if 257
26.2.1 單向選擇:if… 257
26.2.2 雙向選擇:if…else… 259
26.2.3 多向選擇:if…else if…else… 260
26.2.4 if語句的嵌套 262
26.3 選擇結構:switch 264
26.4 循環(huán)結構:while 267
26.5 循環(huán)結構:do…while 270
26.6 循環(huán)結構:for 271
26.7 判斷整數(shù)或小數(shù) 274
26.8 找出水仙花數(shù) 275
26.9 練習題 276
第27章 初識函數(shù)
27.1 函數(shù)是什么? 278
27.2 函數(shù)的定義 280
27.2.1 沒有返回值的函數(shù) 280
27.2.2 有返回值的函數(shù) 282
27.2.3 全局變量與局部變量 283
27.3 函數(shù)的調用 285
27.3.1 直接調用 286
27.3.2 在表達式中調用 286
27.3.3 在超鏈接中調用 287
27.3.4 在事件中調用 288
27.4 嵌套函數(shù) 289
27.5 內(nèi)置函數(shù) 290
27.6 判斷某一年是否閏年 291
27.7 求出任意五個數(shù)最大值 292
27.8 練習題 292
第28章 字符串對象
28.1 內(nèi)置對象簡介 294
28.2 獲取字符串長度 295
28.3 大小寫轉換 296
28.4 獲取某一個字符 297
28.5 截取字符串 298
28.6 替換字符串 300
28.7 分割字符串 302
28.8 檢索字符串的位置 304
28.9 統(tǒng)計某一個字符的個數(shù) 306
28.10 統(tǒng)計字符串中有多少個數(shù)字307
28.11 練習題 308
第29章 數(shù)組對象
29.1 數(shù)組是什么 309
29.2 數(shù)組的創(chuàng)建 310
29.3 數(shù)組的獲取 310
29.4 數(shù)組的賦值 311
29.5 獲取數(shù)組長度 312
29.6 截取數(shù)組某部分 315
29.7 為數(shù)組添加元素 316
29.7.1 在數(shù)組開頭添加元素:unshift() 316
29.7.2 在數(shù)組結尾添加元素:push() 318
29.8 刪除數(shù)組元素 319
29.8.1 刪除數(shù)組中第一個元素:shift() 319
29.8.2 刪除數(shù)組最后一個元素:pop() 320
29.9 數(shù)組大小比較 :sort()322
29.10 數(shù)組顛倒順序:reverse()323
29.11 將數(shù)組元素連接成字符串:join()323
29.12 數(shù)組與字符串的轉換操作 326
29.13 計算面積與體積,返回一個數(shù)組 326
29.14 練習題 327
第30章 時間對象
30.1 日期對象簡介 329
30.2 操作年、月、日 331
30.2.1 獲取年、月、日 331
30.2.2 設置年、月、日 333
30.3 操作時、分、秒 334
30.3.1 獲取時、分、秒 334
30.3.2 設置時、分、秒 335
30.4 獲取星期幾 336
30.5 練習題 338
第31章 數(shù)學對象
31.1 數(shù)學對象簡介 339
31.2 Math對象的屬性 339
31.3 Math對象的方法 341
31.4 最大值與最小值 341
31.5 取整運算 342
31.5.1 向下取整:floor() 342
31.5.2 向上取整:ceil() 343
31.6 三角函數(shù) 344
31.7 生成隨機數(shù) 346
31.7.1 隨機生成某個范圍內(nèi)的任意數(shù) 346
31.7.2 隨機數(shù)生成某個范圍內(nèi)的整數(shù) 347
31.8 生成隨機驗證碼 347
31.9 生成隨機顏色值 348
31.10 練習題 349
第32章 DOM基礎
32.1 核心技術簡介 350
32.2 DOM是什么 351
32.2.1 DOM對象 351
32.2.2 DOM結構 351
32.3 節(jié)點類型 352
32.4 獲取元素 353
32.4.1 getElementById() 353
32.4.2 getElementsByTagName 355
32.4.3 getElementsByClassName() 359
32.4.4 querySelector()和querySelectorAll() 360
32.4.5 getElementsByName() 363
32.4.6 document.title和document.body 364
32.5 創(chuàng)建元素 365
32.6 插入元素 370
32.6.1 appendChild() 370
32.6.2 insertBefore() 372
32.7 刪除元素 373
32.8 復制元素 376
32.9 替換元素 377
32.10 練習題 378
第33章 DOM進階
33.1 HTML屬性操作(對象屬性) 380
33.1.1 獲取HTML屬性值 380
33.1.2 設置HTML屬性值 386
33.2 HTML屬性操作(對象方法) 388
33.2.1 getAttribute() 388
33.2.2 setAttribute() 390
33.2.3 removeAttribute() 391
33.2.4 hasAttribute() 393
33.3 CSS屬性操作 394
33.3.1 獲取CSS屬性值 394
33.3.2 設置CSS屬性值 396
33.3.3 最后一個問題 401
33.4 DOM遍歷 404
33.4.1 查找父元素 404
33.4.2 查找子元素 406
33.4.3 查找兄弟元素 410
33.5 innerHTML和innerText 411
33.6 練習題 414
第34章 事件基礎
34.1 事件是什么 415
34.2 事件調用方式 416
34.2.1 在script標簽中調用 416
34.2.2 在元素中調用事件 417
34.3 鼠標事件 418
34.3.1 鼠標單擊 419
34.3.2 鼠標移入和鼠標移出 421
34.3.3 鼠標按下和鼠標松開 422
34.4 鍵盤事件 423
34.5 表單事件 425
34.5.1 onfocus和onblur 425
34.5.2 onselect 427
34.5.3 onchange 429
34.6 編輯事件 432
34.6.1 oncopy 432
34.6.2 onselectstart 433
34.6.3 oncontextmenu 434
34.7 頁面事件 435
34.7.1 onload 435
34.7.2 onbeforeunload 437
34.8 練習題 438
第35章 事件進階
35.1 事件監(jiān)聽器 439
35.1.1 事件處理器 439
35.1.2 事件監(jiān)聽器 440
35.2 event對象 447
35.2.1 type 448
35.2.2 keyCode 448
35.3 this 451
35.4 練習題 454
第36章 window對象
36.1 window對象簡介 455
36.2 窗口操作 457
36.2.1 打開窗口 457
36.2.2 關閉窗口 462
36.3 對話框 464
36.3.1 alert() 464
36.3.2 confirm() 465
36.3.3 prompt() 466
36.4 定時器 467
36.4.1 setTimeout()和clearTimeout() 468
36.4.2 setInterval()和clearInterval() 472
36.5 location對象 476
36.5.1 window.location.href 476
36.5.2 window.location.search 477
13.5.3 window.location.hash 478
36.6 navigator對象 479
36.7 練習題 481
第37章 document對象
37.1 document對象簡介 482
37.2 document對象屬性 482
37.2.1 document.URL 483
37.2.2 document.referrer 484
37.3 document對象方法 484
37.3.1 document.write() 485
37.3.2 document.writeln() 485
37.4 練習題 487
后記