內容簡介
Web 前端開發從網頁製作演變而來，網頁製作是Web 1.0 時代的產物，大多是以圖片和文字為主的靜態網頁，可以說開發人員只要會使用Photoshop 和Dreamweaver 兩種軟體即可實現一個網頁，但其主要功能僅限於用戶瀏覽。2005 年以後，網頁技術發展到2.0 時代，網頁不再只是承載單一的文字和圖片了，各種軟體化的互動形式為用戶提供更好的使用體驗，而這些互動形式就是基於前端技術實現的。
1.知識點講解到位，Demo貼近生活：本書知識點講解貼近生活、通俗易懂，能引領讀者快速入門，配合豐富多彩、流行有趣的實例，可達到鞏固知識點的效果。
2.貼心提示，輔助學習：本書設定了“說明”“小錦囊”“小提示”“注意”等許多貼心小欄目，輔助讀者學習。另外，購買本書後，作者團隊提供線上答疑和技術支持，讓讀者學習無後顧之憂。
3.案例入手，深入淺出：本書以零基礎學習者為對象，採用圖文結合、循序漸進的編排方式，精選了44 個經典的前端開發案例，語言淺顯易懂，和初學者一起探索Web 前端知識點，力求讓初學者快速掌握Web 前端的語法規則和編程思想。
4.視頻講解，精彩詳盡——每一案例都配有精彩詳盡的視頻講解，能夠引導初學者快速入門，感受Web 前端的快樂和成就感，快速成長為Web 前端高手。
5.情節引入，輕鬆自然——通過大白的授課經歷，將知識點寓於一個個精彩的生活場景中，輕鬆自然，靈活有趣。
目錄
目錄
1 Web 網站初體驗.................. 1
1.1 揭秘Web前端...........................2
Web是什麼？...........................2
網頁核心技術...........................3
1.HTML5概述..........................3
2.CSS3簡介...........................5
3.JavaScript簡介.....................5
1.2 大白老師帶你走進HTML5.................6
標籤、元素、結構概述...................6
1.HTML5標籤..........................6
2.元素...............................6
3.HTML5檔案結構......................7
HTML 5的基本標籤.......................7
1.檔案開始標籤<html> ..................7
2.檔案頭部標籤<head> ..................8
3.檔案標題標籤<title> .................8
4.元信息標籤<meta> ....................8
5.頁面的主體標籤<body> ................8
6.頁面的注釋..........................9
1.3 用WebStorm寫下你的第一行HTML5代碼..... 10
下載和安裝..............................10
創建HTML5工程和檔案，運行HTML5程式..13
大白的任務：網頁字元畫——史努比........ 16
2 搭建網站雛形.................... 17
案例1：製作第一個H5案例——明日學院簡介...18
案例描述................................18
知識點講解..............................18
1.<p>段落標籤........................18
2.<img>圖片標籤......................19
案例實現................................20
案例2：多圖展示合作夥伴....................23
案例描述................................23
知識點講解..............................23
1.<hr>水平線標籤.....................23
2.<br>換行標籤.......................24
案例實現................................25
案例3：通過外鏈實現友情連結................27
案例描述................................27
知識點講解..............................27
<a>連結標籤..........................27
案例實現................................28
案例4：分組標籤製作聯繫方式................30
案例描述................................30
知識點講解..............................30
<div>和<span>分組標籤.................30
案例實現................................32
大白的任務：圖文結合展示商品............. 34
3 用CSS3 裝飾你的網站............ 35
案例1：圖文混排展示課程信息................36
案例描述................................36
知識點講解..............................36
1.CSS3的發展史.......................36
2.選擇器.............................36
3.類選擇器...........................37
4.ID選擇器...........................37
案例實現................................38
案例2：時間軸方式的直播預告................42
案例描述................................42
知識點講解..............................42
1.HTML列表標籤......................42
2.CSS列表屬性........................44
案例實現................................46
案例3：美化學習興趣分類界面................49
案例描述................................49
知識點講解..............................50
1.連結<a>標籤的CSS屬性...............50
2.文本相關的CSS屬性..................51
案例實現................................53
案例4：打造多彩網站主題背景................57
案例描述................................57
知識點講解..............................58
與背景相關的CSS屬性..................58
案例實現................................59
大白的任務：商品分類展示（CSS版）........ 62
4 HTML5 多媒體實現網站“家庭影院”.63
案例1：網頁中的H5視頻播放器................64
案例描述................................64
知識點講解..............................64
<video>標籤...........................64
案例實現................................66
案例2：動態文字彈幕........................67
案例描述................................67
知識點講解..............................68
<marquee>標籤........................68
案例實現................................69
案例3：神奇的線上聽書功能..................70
案例描述................................70
知識點講解..............................71
<audio>標籤...........................71
案例實現................................72
案例4：定製你的視頻播放器...................73
案例描述................................73
知識點講解..............................74
1.多媒體標籤的事件處理...............74
2.多媒體標籤的常見事件...............74
案例實現................................75
大白的任務：DIY音樂播放器................. 78
5 通過HTML5 表單與用戶互動...... 79
案例1：表單實現用戶註冊頁面................80
案例描述................................80
知識點講解..............................80
<form>表單標籤.......................80
案例實現................................81
案例2：申請個人講師........................84
案例描述................................84
知識點講解..............................85
1.<input>標籤.........................85
2.單選框和複選框.....................86
案例實現................................87
案例3：智慧型機器人..........................90
案例描述................................90
知識點講解..............................90
<textarea>文本域標籤...................90
案例實現................................91
案例4：帶附屬檔案的用戶反饋.....................93
案例描述................................93
知識點講解..............................94
1.圖像域.............................94
2.檔案域.............................95
案例實現................................95
大白的任務：設計個人信息表單............. 98
6 列表與表格——讓網站更規整...... 99
案例1：圖文結合顯示課程列表..............100
案例描述..............................100
知識點講解...........................100
定義列表............................100
案例實現..............................102
案例2：網站必備的導航選單................104
案例描述..............................104
知識點講解............................105
無序列表............................105
案例實現..............................105
案例3：有序列表讓招聘信息更清晰...........106
案例描述.............................106
知識點講解.............................107
有序列表...........................107
案例實現...............................108
案例4：表格也可以設計漂亮的訂單頁面......110
案例描述...............................110
知識點講解.............................111
1.簡單表格..........................111
2.表格的合併........................111
案例實現...............................113
大白的任務：商品分類展示（表格版）....... 116
7 CSS3 布局與動畫................ 117
案例1：使用表格布局課程列表...............118
案例描述...............................118
知識點講解.............................118
表格布局............................118
案例實現...............................120
案例2：布局積分兌獎頁面...................123
案例描述...............................123
知識點講解.............................123
1.display 屬性........................123
2.f loat 屬性........................124
案例實現...............................125
案例3：滑鼠經過時的圖片動畫...............129
案例描述...............................129
知識點講解.............................130
變換（transform）...................130
案例實現...............................131
案例4：給導航選單增加動畫特效.............135
案例描述...............................135
知識點講解.............................136
過渡（transition）....................136
案例實現...............................138
大白的任務：商品的文字動效廣告........... 142
8 JavaScript 基礎套用............. 143
案例1：給你的課程分分類...................144
案例描述...............................144
知識點講解.............................144
1.標識符............................144
2.關鍵字............................145
3.常量..............................145
4.變數..............................145
5.函式..............................146
案例實現...............................147
案例2：個性化的智慧型搜尋...................150
案例描述...............................150
知識點講解.............................151
1.if語句.............................151
2.for循環............................151
案例實現...............................152
案例3：輪播圖廣告.........................154
案例描述...............................154
知識點講解.............................155
1.認識jQuery 框架...................155
2.使用jQuery 框架...................155
案例實現...............................157
案例4：讓用戶為你建言獻策.................159
案例描述...............................159
知識點講解.............................159
文檔對象（Document）................159
案例實現...............................161
大白的任務：網頁版日曆................... 164
9 JavaScript 事件處理.............. 165
案例1：你的手機號中獎了嗎.................166
案例描述...............................166
知識點講解.............................166
1.事件處理程式在JavaScript中的調用....166
2.事件處理程式在HTML中的調用.......167
案例實現...............................167
案例2：限時大搶購.........................169
案例描述...............................169
知識點講解.............................170
1.事件流............................170
2.主流瀏覽器的事件模型..............170
3.事件對象..........................170
案例實現...............................171
案例3：網頁刮刮卡.........................173
案例描述...............................173
知識點講解.............................173
1.滑鼠的單擊事件....................173
2.滑鼠的按下或鬆開事件..............174
3.滑鼠的移入移出事件................174
4.滑鼠的移動事件....................174
案例實現...............................174
案例4：模擬12306圖片驗證碼...............177
案例描述...............................177
知識點講解.............................178
註冊與移除事件監聽器................178
案例實現...............................179
大白的任務：布局用戶登錄頁............... 183
10 手機回響式開發（上）........... 184
案例1：手機端展示課程列表.................185
案例描述...............................185
知識點講解.............................185
1.Flex布局...........................185
2.Flex容器常見屬性...................186
案例實現...............................187
案例2：手機端這樣做用戶登錄...............190
案例描述...............................190
知識點講解.............................190
1.媒體查詢..........................190
2.使用媒體查詢的步驟................190
案例實現...............................191
案例3：移動端線上客服.....................194
案例描述...............................194
知識點講解.............................194
1.常用布局類型......................194
2.布局的實現方式....................195
案例實現...............................196
案例4：5分鐘讓你學會在手機端播放視頻......199
案例描述...............................199
知識點講解.............................199
<meta>標籤..........................199
案例實現...............................200
大白的任務：《王者榮耀》手機端官網....... 202
11 手機回響式開發（下）........... 203
案例1：讓圖片在手機上縮放自如.............204
案例描述...............................204
知識點講解.............................204
1.使用<picture>標籤...................204
2.使用CSS圖片.......................205
案例實現...............................205
案例2：第三方外掛程式助你升級視頻功能.........207
案例描述...............................207
知識點講解.............................207
使用HTML5手機播放器................207
案例實現...............................208
案例3：回響式導航選單.....................210
案例描述...............................210
知識點講解.............................211
1.CSS3回響式選單....................211
2.JavaScript回響式選單...............211
案例實現...............................211
案例4：表格“變形記”.....................214
案例描述...............................214
知識點講解.............................214
1.隱藏表格中的列....................214
2.滾動表格中的列....................214
3.轉換表格中的列....................214
案例實現...............................215
大白的任務：回響式顯示招聘信息............217
12 綜合案例—明日學院官網......... 218
案例1：主頁——打造高大上的網站門面......219
案例描述...............................219
知識點講解.............................219
1.PC端主頁界面的實現過程分析........219
2.手機端主頁界面的實現過程分析......223
案例實現...............................224
案例2：登錄頁——手機端PC端自適應........233
案例描述...............................233
知識點講解.............................233
1.PC端登錄界面實現技巧............. .233
2.手機端登錄界面實現技巧............ 233
案例實現...............................234
案例3：課程列表頁——定製你的課程........238
案例描述...............................238
知識點講解.............................239
Amaze UI 內容列表組件................239
案例實現...............................240
案例4：課程詳情頁——開啟你的學習之旅....243
案例描述...............................243
知識點講解.............................244
Amaze UI 選項卡組件..................244
案例實現...............................244
大白的任務：遊戲公園..................... 248
大神的建議（掃碼有驚喜）............249
附錄1：常用知識點索引...............251
附錄2：本書推薦視頻.................252
附錄3：HTML 參考手冊............... 253
附錄4：CSS3 參考手冊................258
附錄5：JavaScript 對象參考手冊......267
附錄6：WebStorm 常用快捷鍵.........274
