Web前端開發(fā)從學(xué)到用完美實(shí)踐：HTML5+CSS3+JavaScript+jQuery+AJAX+AngularJS（第2版）

作者的話

配套光盤使用說明

第1章 概述 1

1.1 Web基礎(chǔ) 2

1.2 Web是如何工作的？ 10

1.3 為什么學(xué)習(xí)Web前端開發(fā)？ 16

1.4 項(xiàng)目管理系統(tǒng) 19

第2章 開發(fā)工具 21

2.1 開發(fā)工具綜述 22

2.2 原型設(shè)計(jì)工具 22

2.3 開發(fā)工具 29

2.4 調(diào)試工具 41

2.5 代碼托管工具 48

2.5.5 案例：使用GitHub開源平臺實(shí)現(xiàn)網(wǎng)站代碼托管 49

第3章 初識HTML5 55

3.1 HTML概述 56

3.2 HTML5的優(yōu)勢 57

3.4 HTML5文檔結(jié)構(gòu) 70

第4章 HTML5結(jié)構(gòu)與屬性 73

4.1 從HTML4到HTML5 74

4.2 HTML5基礎(chǔ) 76

4.3 HTML5結(jié)構(gòu)元素 87

4.4 超鏈接 99

第5章 表單 102

5.1 表單基礎(chǔ) 103

5.2 使用form元素 108

5.3 使用input元素 111

5.4 案例：高考改革方案調(diào)查問卷網(wǎng)頁的實(shí)現(xiàn) 126

5.5 案例：智能表單（用戶注冊） 130

第6章 多媒體 135

6.1 多媒體基礎(chǔ) 136

6.2 HTML5音頻與視頻 139

6.3 播放控制 147

6.4 解決兼容問題 158

6.5 字幕 161

第7章 初識CSS3 167

7.1 CSS3概述 168

7.2 CSS3功能 172

7.3 在HTML中使用CSS 174

7.4 案例：基于終端設(shè)備選擇不同樣式 177

7.5 案例：基于瀏覽器選擇不同樣式 178

第8章 選擇器 179

8.1 認(rèn)識CSS選擇器 180

8.2 基礎(chǔ)選擇器 180

8.3 層次選擇器 186

8.4 偽類選擇器 191

8.5 屬性選擇器 208

第9章 文字樣式 213

9.1 文本樣式 214

9.2 字體樣式 222

9.3 字體圖標(biāo) 226

9.4 文本效果 228

9.5 使用服務(wù)器端字體 231

9.6 案例：詩歌排版 232

9.7 案例：使用服務(wù)器端字體實(shí)現(xiàn)網(wǎng)站圖標(biāo) 234

第10章 背景與邊框 236

10.1 背景屬性 237

10.1.1 基本屬性 237

10.1.2 CSS3新增背景屬性 238

10.1.3 多背景 241

10.1.4 漸變背景 243

10.2 邊框?qū)傩?245

10.2.1 基本屬性 245

10.2.2 CSS3新增邊框?qū)傩?247

10.2.3 圓角邊框 248

10.2.4 圖片邊框 251

10.2.5 漸變邊框 256

10.2.6 盒子陰影 257

10.3 案例：圖片輪轉(zhuǎn)的實(shí)現(xiàn) 264

10.4 案例：網(wǎng)頁課程表的實(shí)現(xiàn) 266

第11章 盒模型 271

11.1 盒子 272

11.1.1 元素盒子 272

11.1.2 尺寸 280

11.2 盒子類型 281

11.2.1 盒子的基本類型 281

11.2.2 CSS3新增的類型 287

11.2.3 瀏覽器對盒子的支持情況 293

11.3 盒子的屬性 294

11.3.1 內(nèi)容溢出 294

11.3.2 自由縮放 299

11.3.3 外輪廓 299

11.3.4 陰影 301

11.4 瀏覽器的盒子調(diào)試 304

11.4.1 在Internet Explorer瀏覽器中進(jìn)行盒子調(diào)試 305

11.4.2 在Firefox瀏覽器中進(jìn)行盒子調(diào)試 307

11.4.3 在Google Chrome瀏覽器中進(jìn)行盒子調(diào)試 307

11.4.4 在Microsoft Edge瀏覽器中進(jìn)行

盒子調(diào)試 308

第12章 布局 311

12.1 定位與布局的基本屬性 312

12.1.1 基本屬性 312

12.1.2 外邊距與內(nèi)邊距 312

12.1.3 浮動布局 313

12.1.4 定位布局 318

12.2 多列布局 325

12.2.1 多列布局的基本知識 325

12.2.2 多列布局的基本屬性 326

12.2.3 多列布局屬性 326

12.2.4 列寬與列數(shù) 326

12.2.5 列邊距與列邊框 326

12.2.6 跨列布局 327

12.2.7 列高 327

12.3 盒布局 329

12.3.1 盒布局的基本知識 329

12.3.2 盒布局的基本屬性 329

12.3.3 使用自適應(yīng)寬度的彈性盒布局 329

12.3.4 改變元素的顯示順序 332

12.3.5 改變元素排列方向 334

12.3.6 使用彈性布局消除空白 335

12.3.7 對多個(gè)元素使用box-flex屬性 336

12.3.8 對齊方式 337

12.3.9 布局方式對比 339

12.4 自適應(yīng)布局 343

12.4.1 自適應(yīng)布局的基本知識 344

12.4.2 自適應(yīng)布局的基本屬性 344

12.4.3 允許網(wǎng)頁寬度自動調(diào)整 344

12.4.4 不使用絕對寬度 344

12.4.5 相對大小的字體 345

12.4.6 流動布局 345

12.4.7 選擇加載CSS 345

12.4.8 CSS的@media規(guī)則 345

12.4.9 圖片的自適應(yīng) 346

12.5 案例：網(wǎng)頁布局 348

第13章 CSS動畫 359

13.1 Web動畫 360

13.1.1 GIF動畫 360

13.1.2 Flash動畫 360

13.1.3 JavaScript動畫 360

13.1.4 CSS3動畫 361

13.2 使用變形屬性 361

13.2.1 進(jìn)行簡單變形 361

13.2.2 變形子屬性 362

13.2.3 2D變形函數(shù) 369

13.2.4 3D變形函數(shù) 372

13.2.5 案例：制作時(shí)鐘 375

13.3 使用過渡屬性 378

13.3.1 設(shè)置元素過渡 378

13.3.2 設(shè)置過渡元素 379

13.3.3 設(shè)置過渡持續(xù)時(shí)間 380

13.3.4 指定過渡函數(shù) 381

13.3.5 規(guī)定過渡延遲時(shí)間 385

13.3.6 過渡觸發(fā) 386

13.3.7 案例：制作動態(tài)網(wǎng)站導(dǎo)航 387

13.4 使用動畫屬性 390

13.4.1 建立基本動畫 390

13.4.2 動畫關(guān)鍵幀 392

13.4.3 動畫子屬性 393

13.4.4 給元素應(yīng)用動畫 395

13.4.5 案例：實(shí)現(xiàn)頁面加載動畫 396

13.5 案例：引人入勝的動態(tài)照片墻 402

第14章 初識JavaScript 405

14.1 JavaScript概述 406

14.1.1 什么是JavaScript？ 406

14.1.2 JavaScript能夠?qū)崿F(xiàn)什么？ 407

14.2 語法 407

14.2.1 調(diào)用方法 407

14.2.2 基本語法 408

14.2.3 函數(shù) 417

14.2.4 對象 418

14.3 DOM 419

14.3.1 什么是DOM？ 419

14.3.2 獲取HTML元素 419

14.3.3 對HTML元素進(jìn)行操作 421

14.4 案例：使用JavaScript進(jìn)行表單驗(yàn)證 423

14.4.1 功能 423

14.4.2 實(shí)現(xiàn)效果 423

14.4.3 代碼 424

14.5 案例：使用JavaScript實(shí)現(xiàn)規(guī)定時(shí)間內(nèi)答題效果 427

14.5.1 功能 427

14.5.2 實(shí)現(xiàn)效果 427

14.5.3 代碼 428

第15章 jQuery編程 430

15.1 jQuery概述 431

15.1.1 jQuery簡介 431

15.1.2 為什么要使用jQuery？ 432

15.1.3 其他的JavaScript類庫 433

15.2 jQuery基礎(chǔ)應(yīng)用 434

15.2.1 調(diào)用方法 434

15.2.2 基本語法 434

15.2.3 選擇器 435

15.2.4 事件 445

15.2.5 常用效果 449

15.2.6 案例：使用jQuery實(shí)現(xiàn)圖片輪轉(zhuǎn) 456

15.3 jQuery中的DOM操作 459

15.3.1 DOM操作基礎(chǔ) 459

15.3.2 節(jié)點(diǎn)操作 460

15.3.3 屬性操作 467

15.3.4 樣式操作 468

15.3.5 內(nèi)容操作 470

15.3.6 案例：使用jQuery實(shí)現(xiàn)表格排序 472

15.4 jQuery插件 474

15.4.1 什么是jQuery插件？ 474

15.4.2 jQuery UI 475

15.4.3 jQuery Mobile 479

15.5 案例：使用jQuery插件實(shí)現(xiàn)表單驗(yàn)證 483

15.5.1 功能 483

15.5.2 實(shí)現(xiàn)效果 484

15.5.3 代碼 484

15.6 案例：使用JQuery Mobile快速開發(fā)手機(jī)網(wǎng)站 485

15.6.1 功能 485

15.6.2 實(shí)現(xiàn)效果 485

15.6.3 代碼 486

第16章 AJAX 488

16.1 概述 489

16.1.1 什么是AJAX？ 489

16.1.2 為什么使用AJAX？ 489

16.1.3 AJAX的優(yōu)勢 489

16.1.4 AJAX的應(yīng)用場景 489

16.2 基礎(chǔ)知識 490

16.2.1 XML 490

16.2.2 xmlHttpRequest 491

16.2.3 工作原理 491

16.3 AJAX實(shí)現(xiàn) 492

16.3.1 案例：使用AJAX基于本地XML實(shí)現(xiàn)學(xué)生成績冊 492

16.3.2 案例：使用AJAX讀取網(wǎng)易新聞列表 495

16.4 使用jQuery實(shí)現(xiàn)AJAX 497

16.4.1 基本方法 497

16.4.2 jQuery中的全局事件 509

16.5 案例：實(shí)時(shí)表單驗(yàn)證 510

第17章 AngularJS 518

17.1 AngularJS概述 519

17.1.1 AngularJS簡介 519

17.1.2 AngularJS特性 519

17.1.3 AngularJS框架 520

17.2 AngularJS基本概念 520

17.3 AngularJS應(yīng)用 521

17.3.1 AngularJS初始化 521

17.3.2 指令 523

17.3.3 模板 523

17.3.4 表達(dá)式 524

17.3.5 作用域 524

17.3.6 控制器 526

17.3.7 過濾器 526

17.3.8 表單 528

17.3.9 模塊 530

17.3.10 路由 530

17.3.11 服務(wù) 534

17.4 案例：使用AngularJS實(shí)現(xiàn)即時(shí)搜索 537

第18章 文件 540

18.1 文件存儲 541

18.2 處理用戶文件 541

18.2.1 讀取文件 541

18.2.2 讀取文件屬性 543

18.2.3 文件分割 545

18.2.4 處理事件 547

18.3 文件操作 549

18.3.1 本地磁盤操作 549

18.3.2 創(chuàng)建文件 552

18.3.3 創(chuàng)建目錄 553

18.3.4 列出文件 553

18.3.5 處理文件 557

18.3.6 移動 557

18.3.7 復(fù)制 560

18.3.8 刪除 560

18.4 文件內(nèi)容操作 561

18.4.1 寫入內(nèi)容 561

18.4.2 追加內(nèi)容 564

18.4.3 讀取內(nèi)容 564

18.5 案例：用戶本地資源管理 567

　　

第19章 繪圖 575

19.1 Canvas基礎(chǔ)知識 576

19.1.1 Canvas 576

19.1.2 繪圖方法 577

19.1.3 繪圖屬性 578

19.2 圖形繪制 579

19.2.1 矩形 579

19.2.2 線條 581

19.2.3 多邊形 581

19.2.4 圓角矩形 583

19.2.5 圓形 584

19.2.6 曲線 586

19.2.7 文字 588

19.2.8 圖像 592

19.3 圖形變換與控制 600

19.3.1 坐標(biāo)變換 600

19.3.2 矩陣變換 604

19.3.3 設(shè)置陰影 605

19.3.4 疊加風(fēng)格 607

19.3.5 填充風(fēng)格 608

19.4 案例：用Canvas繪制統(tǒng)計(jì)報(bào)表 612

第20章 本地存儲 616

20.1 基礎(chǔ)知識 617

20.1.1 本地存儲簡介 617

20.1.2 本地存儲類型 617

20.2 Cookie 619

20.2.1 Cookie概述 619

20.2.2 數(shù)據(jù)操作 619

20.2.3 案例：在網(wǎng)站中自動記錄用戶狀態(tài) 621

20.3 Web Storage 623

20.3.1 sessionStorage 623

20.3.2 localStorage 626

20.3.3 對比分析 628

20.4 本地?cái)?shù)據(jù)庫 628

20.4.1 存儲原理 628

20.4.2 數(shù)據(jù)操作 629

20.5 案例：使用本地存儲減少服務(wù)器數(shù)據(jù)庫請求 635

第21章 地理定位 641

21.1 常見地理定位方式 642

21.1.1 IP定位 642

21.1.2 GPS定位 642

21.1.3 Wi-Fi定位 642

21.1.4 手機(jī)基站定位 642

21.2 使用HTML5實(shí)現(xiàn)地理定位 642

21.2.1 瀏覽器支持性檢查 643

21.2.2 位置請求 643

21.2.3 隱私保護(hù) 646

21.3 案例：使用百度地圖展示當(dāng)前位置 646

21.4 案例：使用百度地圖展示運(yùn)動軌跡 648

第22章 Web測試 652

22.1 概述 653

22.1.1 什么是Web測試？ 653

22.1.2 測試內(nèi)容 653

22.1.3 測試目的 654

22.2 用戶界面測試 654

22.2.1 導(dǎo)航測試 654

22.2.2 圖形測試 655

22.2.3 內(nèi)容測試 655

22.2.4 整體界面測試 655

22.3 兼容性測試 655

22.3.1 平臺兼容性測試 655

22.3.2 瀏覽器兼容性測試 657

22.3.3 分辨率兼容性測試 658

22.4 功能測試 659

22.5 性能測試 662

22.5.1 連接速度測試 663

22.5.2 壓力測試 667

第23章 網(wǎng)站發(fā)布 676

23.1 概述 677

23.2 域名注冊 677

23.2.1 什么是域名注冊？ 677

23.2.2 如何注冊域名？ 677

23.2.3 實(shí)訓(xùn)：通過阿里云進(jìn)行域名注冊 677

23.3 Web服務(wù)器構(gòu)建 680

23.3.1 什么是Web服務(wù)器？ 680

23.3.2 如何構(gòu)建Web服務(wù)器？ 680

23.3.3 實(shí)訓(xùn)：使用阿里云構(gòu)建Web服務(wù)器 680

23.4 網(wǎng)站上傳 686

23.5 網(wǎng)站備案 686

23.5.1 什么是網(wǎng)站備案？ 686

23.5.2 實(shí)訓(xùn)：通過阿里云進(jìn)行網(wǎng)站備案 686

23.6 域名解析 688

23.6.1 什么是域名解析？ 688

23.6.2 實(shí)訓(xùn)：在阿里云上配置域名解析 689

參考文獻(xiàn) 691