前 言
HTML誕生于20世紀(jì)90年代，它帶來(lái)了Web行業(yè)的一片繁榮。而隨著移動(dòng)互聯(lián)網(wǎng)時(shí)代的到來(lái)，HTML的最新版本HTML5應(yīng)運(yùn)而生，它的出現(xiàn)顛覆了互聯(lián)網(wǎng)開發(fā)的格局，取代了Flash插件在網(wǎng)頁(yè)開發(fā)中的壟斷地位，優(yōu)化了移動(dòng)互聯(lián)網(wǎng)的體驗(yàn)，甚至顛覆了Android、iOS等手機(jī)軟件。
為了幫助更多的讀者進(jìn)入移動(dòng)互聯(lián)網(wǎng)行業(yè)。杰瑞教育組織專業(yè)講師團(tuán)隊(duì)，完成了此書的編寫工作。杰瑞教育成立于2011年，專注于互聯(lián)網(wǎng)人才培訓(xùn)領(lǐng)域，每年均為全國(guó)各地互聯(lián)網(wǎng)企業(yè)輸送優(yōu)秀IT人才數(shù)千人。本書以杰瑞教育Web前端課程大綱為基準(zhǔn)，結(jié)合杰瑞教育線下培訓(xùn)授課內(nèi)容與課堂案例編寫而成。
為保證學(xué)習(xí)效果，本書秉承純干貨的原則，幫助廣大讀者通過(guò)更精簡(jiǎn)的語(yǔ)言、更通俗的案例，學(xué)習(xí)更全面的知識(shí)體系。
本書特點(diǎn)本書的特點(diǎn)主要體現(xiàn)在以下幾個(gè)方面：
配套資源豐富。
為方便讀者自學(xué)，本書隨書附贈(zèng)案例源代碼等學(xué)習(xí)資源。
專業(yè)的技術(shù)支持服務(wù)。
為保證讀者學(xué)習(xí)效果，杰瑞教育將為讀者提供專業(yè)的技術(shù)支持服務(wù)，解決讀者學(xué)習(xí)的后顧之憂。
專業(yè)的就業(yè)咨詢服務(wù)。
對(duì)那些順利完成本書學(xué)習(xí)任務(wù)，并達(dá)到相應(yīng)技術(shù)要求的學(xué)員，杰瑞教育將有專業(yè)的就業(yè)導(dǎo)師團(tuán)隊(duì)，為廣大讀者在就業(yè)過(guò)程中遇到的問(wèn)題提供就業(yè)咨詢服務(wù)。
完善的知識(shí)體系。
本書講授的所有知識(shí)內(nèi)容，均來(lái)自杰瑞教育多年教學(xué)經(jīng)驗(yàn)的積累，完全按照杰瑞教育Web前端課程教學(xué)大綱要求進(jìn)行本書知識(shí)體系的編寫。
每章均提供案例與習(xí)題。
本書在注重理論知識(shí)的同時(shí)，更加注重學(xué)員的動(dòng)手實(shí)踐能力，每章節(jié)均附有完整的章節(jié)案例與章節(jié)練習(xí)，幫助讀者提高動(dòng)手操作能力。
本書內(nèi)容本書分為3篇，共18章。
第1篇HTML5（第1～4章）首先講授的是HTML5的基礎(chǔ)入門知識(shí)，緊接著是常見的塊級(jí)標(biāo)簽與行級(jí)標(biāo)簽，最后詳細(xì)地介紹了表格與表單的使用。
第2篇CSS3（第5～10章）首先從CSS3的基礎(chǔ)知識(shí)開始，講解了CSS樣式表與選擇器的使用（包括CSS3新增選擇器），并重點(diǎn)講解了CSS中的各種屬性以及CSS3的新屬性，緊接著講解了CSS中的盒模型、浮動(dòng)、定位的相關(guān)知識(shí)，最后介紹移動(dòng)開發(fā)、響應(yīng)式與彈性布局。
第3篇JavaScript（第11～18章）從JavaScript的語(yǔ)法基礎(chǔ)開始，逐步講解JavaScript中的變量與運(yùn)算符、分支與循環(huán)、函數(shù)、BOM與DOM、數(shù)組與對(duì)象、正則表達(dá)式等相關(guān)知識(shí)點(diǎn)，并通過(guò)學(xué)習(xí)JavaScript面向?qū)ο髞?lái)結(jié)束這一篇章的學(xué)習(xí)。這部分內(nèi)容是全書的重點(diǎn)也是難點(diǎn)。
適合閱讀本書的讀者? 希望學(xué)習(xí)并從事Web前端行業(yè)的初學(xué)者。
具有一定的工作經(jīng)驗(yàn)但希望夯實(shí)基礎(chǔ)知識(shí)的前端開發(fā)工程師。
相關(guān)專業(yè)大中專院�；蚺嘤�(xùn)學(xué)校的學(xué)生。
需要備課教材的大中專院校或培訓(xùn)學(xué)校的教師。
希望轉(zhuǎn)入Web前端開發(fā)的其他軟件工程師。
閱讀建議
沒(méi)有基礎(chǔ)的讀者應(yīng)從第1章開始順序閱讀，盡量不要跳躍學(xué)習(xí)。
有一定工作經(jīng)驗(yàn)的開發(fā)工程師可以根據(jù)需要選擇所需章節(jié)閱讀。
學(xué)練結(jié)合，將書中涉及的案例與練習(xí)親自動(dòng)手做一遍，會(huì)加深對(duì)內(nèi)容的理解。
認(rèn)真閱讀書中的源代碼，養(yǎng)成良好的編碼習(xí)慣。
養(yǎng)成良好的自學(xué)習(xí)慣，這將對(duì)讀者以后的發(fā)展至關(guān)重要。
提升解決問(wèn)題的能力，學(xué)會(huì)利用網(wǎng)絡(luò)資源解決問(wèn)題。
本書作者本書由王濤、楊延成、姜浩編寫，姜浩、王翠英負(fù)責(zé)本書的資料與案例整理，楊延成負(fù)責(zé)全書的最后審定工作。
編 者2018年1月
目 錄前言第1篇 HTML5
第1章 HTML5學(xué)習(xí)概述
1.1 認(rèn)識(shí)HTML5
1.1.1
HTML的發(fā)展歷程
1.1.2
HTML5與HTML4的區(qū)別
1.2 學(xué)習(xí)HTML5前的準(zhǔn)備工作
1.2.1
常用瀏覽器介紹
1.2.2
常見的HTML5開發(fā)軟件介紹
1.2.3
創(chuàng)建第一個(gè)HTML5頁(yè)面
1.3
HTML5的語(yǔ)法與結(jié)構(gòu)
1.3.1
HTML5的語(yǔ)法
1.3.2
HTML5的文檔結(jié)構(gòu)
1.4 章節(jié)案例：開始我的第一個(gè)網(wǎng)頁(yè)第2章 HTML5常見的塊級(jí)標(biāo)簽和行級(jí)標(biāo)簽
2.1 常見的塊級(jí)標(biāo)簽
2.1.1
：標(biāo)題標(biāo)簽
2.1.2
：水平線標(biāo)簽
2.1.3
：段落標(biāo)簽
2.1.4
：換行標(biāo)簽
2.1.5
：引用標(biāo)簽
2.1.6
：預(yù)格式標(biāo)簽
2.1.7
：無(wú)序列表標(biāo)簽
2.1.8
：有序列表標(biāo)簽
2.1.9
：定義列表標(biāo)簽
2.1.10
：分區(qū)標(biāo)簽
2.2 常見的行級(jí)標(biāo)簽
2.2.1
：圖片標(biāo)簽
2.2.2
：超鏈接標(biāo)簽
2.2.3
其他常用的行級(jí)標(biāo)簽
2.3
HTML5新增標(biāo)簽簡(jiǎn)介
2.4 章節(jié)案例：促銷信息網(wǎng)頁(yè)實(shí)現(xiàn)第3章 HTML5表格
3.1
HTML5表格簡(jiǎn)介
3.1.1
表格的基本結(jié)構(gòu)
3.1.2
表格的定義
3.2 表格的基本屬性
3.2.1
border: 表格邊框?qū)傩?/p>
3.2.2
width/height: 表格（寬度/高度）屬性
3.2.3
bgcolor: 表格背景色屬性
3.2.4
background: 表格背景圖屬性
3.2.5
bordercolor: 表格邊框顏色屬性
3.2.6
cellspacing: 表格單元格間距屬性
3.2.7
cellpadding: 表格單元格內(nèi)邊距屬性
3.2.8
align:表格對(duì)齊屬性
3.3 行和列的屬性
3.3.1
width/height：?jiǎn)卧駥挾?高度屬性
3.3.2
bgcolor：?jiǎn)卧癖尘吧珜傩?/p>
3.3.3
align：?jiǎn)卧駜?nèi)容水平對(duì)齊屬性
3.3.4
valign：?jiǎn)卧駜?nèi)容垂直對(duì)齊屬性
3.3.5
colspan /rowspan：表格的跨行與跨列
3.4 表格的結(jié)構(gòu)化與直列化
3.4.1
表格的結(jié)構(gòu)化
3.4.2
表格的直列化
3.5 章節(jié)案例：完成 特別休假申請(qǐng)單第4章 HTML5表單
4.1 表單簡(jiǎn)介
4.1.1
表單的結(jié)構(gòu)
4.1.2
表單的常用屬性
4.2
input輸入框
4.2.1
input常用屬性
4.2.2
text：文本輸入框
4.2.3
password：密碼輸入框
4.2.4
radio：?jiǎn)芜x按鈕
4.2.5
checkbox：復(fù)選按鈕
4.2.6
file：文件上傳按鈕
4.2.7
submit：表單提交按鈕
4.2.8
reset：重置按鈕
4.2.9
image：圖形提交按鈕
4.2.10
button：可單擊按鈕
4.3 其他表單元素
4.3.1
select下拉選擇控件
4.3.2
textarea文本域
4.3.3
button按鈕
4.4
HTML5智能表單
4.4.1
表單分組
4.4.2
表單新增元素及屬性
4.5 章節(jié)案例：用戶注冊(cè)頁(yè)面實(shí)現(xiàn)第2篇 CSS3
第5章 CSS基礎(chǔ)知識(shí)
5.1
CSS概述
5.1.1
CSS簡(jiǎn)介
5.1.2
CSS語(yǔ)法結(jié)構(gòu)
5.1.3
CSS注釋
5.1.4
行內(nèi)樣式表
5.1.5
內(nèi)部樣式表
5.1.6
外部樣式表
5.2
CSS選擇器
5.2.1
通用選擇器
5.2.2
標(biāo)簽選擇器
5.2.3
類選擇器
5.2.4
id選擇器
5.2.5
后代選擇器與子代選擇器
5.2.6
交集選擇器與并集選擇器
5.2.7
偽類選擇器
5.2.8
選擇器的命名規(guī)則及優(yōu)先級(jí)
5.3 章節(jié)案例：CSS選擇器練習(xí)第6章 CSS常用屬性
6.1
CSS常用文本屬性
6.1.1
字體、字號(hào)與顏色屬性
6.1.2
文本屬性
6.2
CSS常用背景屬性
6.2.1
背景顏色屬性
6.2.2
背景圖像屬性
6.3
CSS其他常用屬性
6.3.1
列表常用屬性
6.3.2
超鏈接樣式屬性
6.4 章節(jié)案例：實(shí)現(xiàn)素材圖片效果第7章 CSS3新增屬性與選擇器
7.1
CSS3的過(guò)渡與變換
7.1.1
transition：過(guò)渡屬性
7.1.2
transform：變換屬性
7.2
CSS3動(dòng)畫
7.2.1
CSS3動(dòng)畫的@keyframes和animation
7.2.2
CSS3 animation動(dòng)畫屬性
7.3
CSS3其他常用屬性
7.3.1
CSS3漸變效果
7.3.2
CSS3多列屬性
7.4
CSS3新增選擇器
7.4.1
屬性選擇器
7.4.2
結(jié)構(gòu)偽類選擇器
7.4.3
狀態(tài)偽類選擇器
7.4.4
其他選擇器
7.5 章節(jié)案例：飛機(jī)滑翔動(dòng)畫實(shí)現(xiàn)第8章 CSS盒模型與浮動(dòng)定位
8.1 盒模型
8.1.1
盒模型概述
8.1.2
margin：外邊距
8.1.3
border：邊框
8.1.4
padding：內(nèi)邊距
8.2 盒模型相關(guān)屬性
8.2.1
overflow：內(nèi)容溢出控制
8.2.2
outline：外圍線
8.2.3
box-shadow：盒子陰影
8.2.4
border-radius：邊框圓角
8.2.5
border-image：圖片邊框
8.3 浮動(dòng)與清除浮動(dòng)
8.3.1
float：浮動(dòng)
8.3.2
clear：清除浮動(dòng)
8.3.3
子盒子浮動(dòng)造成父盒子高度塌陷
8.4 定位
8.4.1
relative：相對(duì)定位
8.4.2
absolute：絕對(duì)定位
8.4.3
fixed：固定定位
8.4.4
使用定位實(shí)現(xiàn)元素的絕對(duì)居中
8.4.5
z-index
8.5 章節(jié)案例：網(wǎng)頁(yè)布局練習(xí)第9章 移動(dòng)開發(fā)與響應(yīng)式
9.1 移動(dòng)開發(fā)基礎(chǔ)知識(shí)
9.1.1
媒體設(shè)備常用屬性
9.1.2
像素的基礎(chǔ)知識(shí)
9.1.3
viewport：視口
9.2 移動(dòng)開發(fā)常用設(shè)置
9.2.1
移動(dòng)開發(fā)中常用的頭部標(biāo)簽
9.2.2
移動(dòng)開發(fā)中常用的CSS設(shè)置
9.3 網(wǎng)頁(yè)布局方式介紹
9.3.1
網(wǎng)頁(yè)的布局方式
9.3.2
響應(yīng)式布局介紹
9.4 媒體查詢實(shí)現(xiàn)響應(yīng)式
9.4.1
媒體查詢的基本語(yǔ)法
9.4.2
使用媒體查詢的三種方式
9.5 章節(jié)案例：媒體查詢實(shí)例練習(xí)第10章 CSS3彈性布局
10.1
彈性布局簡(jiǎn)介
10.1.1
彈性布局的基本概念
10.1.2
使用彈性布局需要注意的問(wèn)題
10.1.3
彈性布局代碼示例
10.2
作用于容器的屬性
10.2.1
flex-direction：主軸方向
10.2.2
flex-wrap：控制換行
10.2.3
flex-flow：縮寫形式
10.2.4
justify-content：主軸對(duì)齊
10.2.5
align-items：交叉軸單行對(duì)齊
10.2.6
align-content：交叉軸多行對(duì)齊
10.3
作用于項(xiàng)目的屬性
10.3.1
order：項(xiàng)目排序
10.3.2
flex-grow：項(xiàng)目放大比
10.3.3
flex-shrink：項(xiàng)目縮小比
10.3.4
flex-basis：伸縮基準(zhǔn)值
10.3.5
flex：縮寫形式
10.3.6
align-self：自身對(duì)齊第3篇 JavaScript
第11章 JavaScript基礎(chǔ)
11.1
JavaScript簡(jiǎn)介
11.1.1
JavaScript概念
11.1.2
頁(yè)面中使用JavaScript的三種方式
11.2
JavaScript的變量
11.2.1
變量的聲明
11.2.2
聲明變量的注意事項(xiàng)與命名規(guī)范
11.2.3
變量的數(shù)據(jù)類型
11.3
JavaScript中的變量函數(shù)
11.3.1
Number：將變量轉(zhuǎn)為數(shù)值類型
11.3.2
isNaN：檢測(cè)變量是否為NaN
11.3.3
parseInt：將字符串轉(zhuǎn)為整型
11.3.4
parseFloat：將字符串轉(zhuǎn)為浮點(diǎn)型
11.3.5
typeof：變量類型檢測(cè)
11.4
JavaScript中的輸入輸出
11.4.1
document.write：文檔中打印輸出
11.4.2
alert：瀏覽器彈窗輸出
11.4.3
prompt：瀏覽器彈窗輸入
11.4.4
confirm：瀏覽器彈窗確認(rèn)
11.4.5
console.log：瀏覽器控制臺(tái)輸出
11.4.6
JavaScript中的注釋
11.5
JavaScript的運(yùn)算符
11.5.1
算術(shù)運(yùn)算
11.5.2
賦值運(yùn)算符
11.5.3
關(guān)系運(yùn)算與邏輯運(yùn)算
11.5.4
條件運(yùn)算（多目運(yùn)算）
11.5.5
逗號(hào)運(yùn)算符
11.5.6
運(yùn)算符的優(yōu)先級(jí)
11.6
章節(jié)案例：判斷一個(gè)數(shù)是否為水仙花數(shù)第12章 JavaScript流程控制語(yǔ)句
12.1
分支結(jié)構(gòu)
12.1.1
簡(jiǎn)單if結(jié)構(gòu)
12.1.2
if-else結(jié)構(gòu)
12.1.3
多重if結(jié)構(gòu)
12.1.4
嵌套if結(jié)構(gòu)
12.1.5
switch-case結(jié)構(gòu)
12.2
循環(huán)結(jié)構(gòu)
12.2.1
循環(huán)的基本思路
12.2.2
while循環(huán)結(jié)構(gòu)
12.2.3
do-while循環(huán)結(jié)構(gòu)
12.2.4
for循環(huán)結(jié)構(gòu)
12.2.5
循環(huán)嵌套
12.3
流程控制語(yǔ)句
12.3.1
break語(yǔ)句
12.3.2
continue語(yǔ)句
12.3.3
return語(yǔ)句
12.4
章節(jié)案例：打印輸出一個(gè)菱形第13章 JavaScript函數(shù)
13.1
函數(shù)的聲明與調(diào)用
13.1.1
函數(shù)的聲明
13.1.2 函數(shù)的調(diào)用
13.1.3
函數(shù)的作用域
13.1.4
函數(shù)聲明和調(diào)用的注意事項(xiàng)
13.2
匿名函數(shù)的聲明與調(diào)用
13.2.1
事件調(diào)用匿名函數(shù)
13.2.2
匿名函數(shù)表達(dá)式
13.2.3
自執(zhí)行函數(shù)
13.3
函數(shù)中的內(nèi)置對(duì)象
13.3.1
arguments對(duì)象
13.3.2
this關(guān)鍵字
13.4
JavaScript中代碼的執(zhí)行順序
13.5
章節(jié)案例：編寫函數(shù)統(tǒng)計(jì)任意區(qū)間內(nèi)的質(zhì)數(shù)第14章 BOM與DOM
14.1
window對(duì)象
14.1.1
window對(duì)象的屬性
14.1.2
window對(duì)象的常用方法
14.2
瀏覽器對(duì)象模型的其他對(duì)象
14.2.1
screen：屏幕對(duì)象
14.2.2
location：地址欄對(duì)象
14.2.3
history：歷史記錄對(duì)象
14.2.4
navigator：瀏覽器配置對(duì)象
14.3
Core DOM
14.3.1
DOM樹結(jié)構(gòu)分析
14.3.2
操作元素節(jié)點(diǎn)
14.3.3
操作文本節(jié)點(diǎn)
14.3.4
操作屬性節(jié)點(diǎn)
14.3.5
JavaScript修改元素樣式
14.3.6
獲取層次節(jié)點(diǎn)
14.3.7
創(chuàng)建新節(jié)點(diǎn)
14.3.8
刪除/替換節(jié)點(diǎn)
14.4
HTML DOM
14.4.1
HTML DOM操作表格對(duì)象
14.4.2
HTML DOM操作行對(duì)象
14.4.3
HTML DOM操作單元格對(duì)象
14.5
章節(jié)案例：實(shí)現(xiàn)評(píng)論提交展示功能第15章 JavaScript事件
15.1
JavaScript的事件
15.1.1
鼠標(biāo)事件
15.1.2
鍵盤事件
15.1.3
HTML事件
15.1.4
event事件因子
15.2
JavaScript的事件模型
15.2.1
DOM0事件模型
15.2.2
DOM2事件模型
15.3
JavaScript的事件流模型
15.3.1
事件冒泡
15.3.2
事件捕獲
15.3.3
事件委派
15.3.4
阻止事件冒泡
15.3.5
阻止默認(rèn)事件
15.4
章節(jié)案例：對(duì)表格進(jìn)行修改刪除操作第16章 數(shù)組和對(duì)象
16.1
JavaScript的數(shù)組
16.1.1
數(shù)組的概念
16.1.2
數(shù)組的聲明
16.1.3
數(shù)組的訪問(wèn)
16.1.4
數(shù)組常用方法
16.1.5
二維數(shù)組和稀疏數(shù)組
16.2
JavaScript的內(nèi)置對(duì)象
16.2.1
Boolean：邏輯對(duì)象
16.2.2
Number：數(shù)字對(duì)象
16.2.3
String：字符串對(duì)象
16.2.4
Date：日期對(duì)象
16.2.5
Math：算術(shù)對(duì)象
16.3
JavaScript自定義對(duì)象
16.3.1
對(duì)象的概念
16.3.2
對(duì)象的聲明
16.3.3
對(duì)象的屬性與方法
16.4
章節(jié)案例：編寫對(duì)象實(shí)現(xiàn)班級(jí)成績(jī)錄入第17章 JavaScript中的正則表達(dá)式
17.1
正則表達(dá)式基礎(chǔ)
17.1.1
正則表達(dá)式概述
17.1.2
正則表達(dá)式的聲明
17.2
正則表達(dá)式的常用字符
17.2.1
正則表達(dá)式中的元字符
17.2.2
正則表達(dá)式中的特殊字符
17.3
正則表達(dá)式的常用模式
17.3.1
g：全局匹配
17.3.2
i：忽略大小寫匹配
17.3.3
m：多行匹配
17.4
正則表達(dá)式的常用方法
17.4.1
test() 方法
17.4.2
exec() 方法
17.5
章節(jié)案例：使用正則表達(dá)式驗(yàn)證用戶注冊(cè)表單第18章 JavaScript面向?qū)ο缶幊?/p>
18.1
面向?qū)ο缶幊袒A(chǔ)
18.1.1
面向?qū)ο蟾攀?/p>
18.1.2
類與對(duì)象
18.1.3
類和對(duì)象的關(guān)系
18.1.4
JavaScript創(chuàng)建類與對(duì)象的步驟
18.1.5
constructor與instanceof
18.1.6
for-in：對(duì)象的遍歷
18.2
成員屬性、靜態(tài)屬性與私有屬性
18.2.1
成員屬性與成員方法
18.2.2
靜態(tài)屬性與靜態(tài)方法
18.2.3
私有屬性與私有方法
18.3
this關(guān)鍵字
18.3.1
this的指向概述
18.3.2
this指向的規(guī)律
18.3.3
this指向練習(xí)
18.4
原型與原型鏈
18.4.1
__proto__與prototype
18.4.2
原型鏈
18.4.3
原型屬性與原型方法
18.5
封裝
18.5.1
封裝的基本概念
18.5.2
JavaScript模擬實(shí)現(xiàn)封裝
18.6
繼承
18.6.1
繼承的基本概念
18.6.2
擴(kuò)展Object的prototype實(shí)現(xiàn)繼承
18.6.3
使用原型繼承
18.6.4
使用call和apply實(shí)現(xiàn)繼承
18.7
JavaScript中的閉包
18.7.1
閉包的基本概念
18.7.2
閉包的作用
18.7.3
閉包應(yīng)用實(shí)例
18.8
章節(jié)案例：定義一個(gè)URL信息操作類
書單推薦
