第1篇 HTML技術(shù)篇 第1章 網(wǎng)頁(yè)基礎(chǔ)知識(shí)入門(mén) 1 1.1 了解HTML網(wǎng)頁(yè)技術(shù) 1 1.1.1 什么是HTML和HTML 5 1 1.1.2 如何獲取網(wǎng)頁(yè)的源代碼 2 1.1.3 靜態(tài)網(wǎng)頁(yè) 3 1.1.4 動(dòng)態(tài)網(wǎng)頁(yè) 3 1.1.5 網(wǎng)站 3 1.2 了解網(wǎng)頁(yè)技術(shù)的工作原理 4 1.2.1 靜態(tài)HTML的工作流程 4 1.2.2 動(dòng)態(tài)HTML的工作流程 4 1.3 制作一個(gè)完整的HTML 5網(wǎng)頁(yè) 5 1.3.1 搭建上機(jī)練習(xí)環(huán)境 5 1.3.2 完成第一個(gè)網(wǎng)頁(yè) 5 1.4 技術(shù)解惑 6 1.4.1 HTML與HTML 5是兩種網(wǎng)頁(yè)語(yǔ)言嗎 6 1.4.2 如何區(qū)分靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè) 6 第2章 HTML 5網(wǎng)頁(yè)的結(jié)構(gòu) 7 2.1 動(dòng)手解構(gòu)一個(gè)HTML 5頁(yè)面 7 2.2 HTML的基礎(chǔ)知識(shí) 7 2.2.1 HTML的基礎(chǔ)語(yǔ)法 7 2.2.2 HTML文檔的基本骨架 8 2.3 HTML文檔中的標(biāo)簽 8 2.3.1 樣本代碼DOCTYPE 9 2.3.2 開(kāi)始標(biāo)簽＜html＞ 9 2.3.3 頭部標(biāo)簽和頭部標(biāo)簽的對(duì)象 9 2.3.4 標(biāo)題標(biāo)簽＜title＞ 9 2.3.5 主體標(biāo)簽＜body＞ 9 2.3.6 美化HTML文檔 9 2.4 拓展訓(xùn)練 10 2.4.1 訓(xùn)練一：制作一個(gè)HTML網(wǎng)頁(yè)，包含HTML基本標(biāo)記，頁(yè)面顯示 “Hello World!” 10 2.4.2 訓(xùn)練二：制作一個(gè)HTML網(wǎng)頁(yè)，要求在瀏覽器標(biāo)題欄中顯示 “Hello World!” 10 2.5 技術(shù)解惑 11 2.5.1 HTML標(biāo)簽需要死記硬背嗎 11 2.5.2 HTML網(wǎng)頁(yè)的結(jié)構(gòu)中哪些標(biāo)簽是必需的 11 第3章 網(wǎng)頁(yè)中的文本與段落 12 3.1 文本的排版格式 12 3.1.1 寫(xiě)一行換一行 12 3.1.2 在頁(yè)面中使用空格 13 3.1.3 文本的段落要對(duì)齊 14 3.2 文本的屬性樣式 15 3.2.1 不一樣的文本字體大小 15 3.2.2 奇妙的特殊符號(hào) 16 3.2.3 給文本加標(biāo)注 17 3.3 整齊的文本列表 18 3.3.1 無(wú)序列表 18 3.3.2 有序列表 19 3.3.3 定義列表 20 3.3.4 列表嵌套 21 3.4 拓展訓(xùn)練 22 3.4.1 訓(xùn)練一：在頁(yè)面中設(shè)置段落對(duì)齊方式 22 3.4.2 訓(xùn)練二：在頁(yè)面中創(chuàng)建有序列表 23 3.5 技術(shù)解惑 23 3.5.1 文本段落的對(duì)齊方式 23 3.5.2 有序列表與無(wú)序列表 23 第4章 網(wǎng)頁(yè)中的圖像 24 4.1 圖像的基礎(chǔ)知識(shí) 24 4.1.1 常用的位圖圖像 24 4.1.2 在頁(yè)面中常用的位圖格式 24 4.1.3 矢量圖 25 4.1.4 圖像的分辨率 25 4.1.5 認(rèn)識(shí)一些網(wǎng)頁(yè)中常用的Banner尺寸 25 4.2 頁(yè)面中的圖像 26 4.2.1 理解圖像路徑 26 4.2.2 像編輯文本對(duì)齊一樣在頁(yè)面中對(duì)齊圖片 27 4.2.3 圖像與文本的對(duì)齊方式 28 4.2.4 調(diào)整圖像與文本的距離 29 4.3 讓圖像更美觀 30 4.3.1 使用畫(huà)圖工具修改圖像 30 4.3.2 為圖像添加邊框 30 4.3.3 獨(dú)樹(shù)一幟的水平線(xiàn) 31 4.4 改變頁(yè)面的背景 32 4.5 拓展訓(xùn)練 33 4.5.1 訓(xùn)練一：在網(wǎng)頁(yè)中插入圖片并設(shè)置邊框 33 4.5.2 訓(xùn)練二：在頁(yè)面中插入寬度為800px、高度為2px、顏色為藍(lán)色的 水平線(xiàn) 34 4.6 技術(shù)解惑 34 4.6.1 使用圖像的技巧 34 4.6.2 善用水平線(xiàn) 34 第5章 網(wǎng)頁(yè)中的鏈接 35 5.1 認(rèn)識(shí)鏈接 35 5.1.1 初識(shí)頁(yè)面鏈接 35 5.1.2 理解鏈接地址 36 5.2 鏈接的種類(lèi) 37 5.2.1 基本的文本鏈接 38 5.2.2 基本的圖像鏈接 38 5.2.3 把郵箱留給需要聯(lián)系你的人 39 5.2.4 在同一頁(yè)面中快速查找信息 40 5.3 提高頁(yè)面鏈接的友好度 42 5.3.1 美觀鏈接的狀態(tài) 42 5.3.2 特殊的鏈接方式 44 5.3.3 熱點(diǎn)圖像區(qū)域的鏈接 46 5.4 在新窗口中顯示鏈接窗口 48 5.5 拓展訓(xùn)練 49 5.5.1 訓(xùn)練一：在頁(yè)面中使用圖像鏈接 49 5.5.2 訓(xùn)練二：在頁(yè)面中使用熱點(diǎn)圖像區(qū)域鏈接 49 5.6 技術(shù)解惑 49 5.6.1 合理使用錨點(diǎn)鏈接 49 5.6.2 合理使用郵件鏈接 50 第6章 網(wǎng)頁(yè)中的表單 51 6.1 表單的工作原理 51 6.1.1 ＜script＞標(biāo)記 51 6.1.2 創(chuàng)建表單 51 6.1.3 表單域 52 6.2 通過(guò)表單展示不一樣的頁(yè)面 52 6.2.1 input對(duì)象下的多種表單表現(xiàn)形式 52 6.2.2 text文本框的樣式表單 53 6.2.3 password輸入密碼的樣式表單 54 6.2.4 checkbox復(fù)選框的樣式表單 55 6.2.5 radio單選框的樣式表單 57 6.2.6 submit提交數(shù)據(jù)的樣式表單 58 6.2.7 hidden隱藏域的樣式表單 59 6.2.8 image樣式的表單 60 6.2.9 file上傳文件的樣式表單 61 6.2.10 textarea對(duì)象的表單 62 6.2.11 select對(duì)象的表單 64 6.2.12 表單域集合 65 6.3 HTML 5表單的進(jìn)化 66 6.3.1 早期的表單發(fā)展 66 6.3.2 HTML 5表單的問(wèn)世 66 6.3.3 當(dāng)前的支持情況 67 6.3.4 新增的表單輸入類(lèi)型 67 6.4 新增表單特性及元素 68 6.4.1 form特性 68 6.4.2 formaction特性 68 6.4.3 form其他特性 69 6.4.4 placeholder特性 69 6.4.5 autofocus特性 69 6.4.6 autocomplete特性 69 6.4.7 list特性和datalist元素 70 6.4.8 keygen元素 70 6.4.9 output元素 70 6.5 表單驗(yàn)證API 71 6.5.1 與驗(yàn)證有關(guān)的表單元素特性 71 6.5.2 表單驗(yàn)證的屬性 72 6.5.3 ValidityState對(duì)象 72 6.5.4 表單驗(yàn)證的方法 73 6.5.5 表單驗(yàn)證的事件 75 6.6 拓展訓(xùn)練 76 6.6.1 訓(xùn)練一：在頁(yè)面中使用下拉菜單表單元素 76 6.6.2 訓(xùn)練二：在頁(yè)面中使用email表單輸入元素并設(shè)置autofocus屬性 77 6.7 技術(shù)解惑 77 6.7.1 HTML 5新增的表單類(lèi)型有哪些 77 6.7.2 HTML 5新增的表單特性有哪些 77 第7章 音頻和視頻 78 7.1 audio和video基礎(chǔ)知識(shí) 78 7.1.1 在線(xiàn)多媒體的發(fā)展 78 7.1.2 多媒體術(shù)語(yǔ) 79 7.1.3 HTML 5多媒體文件格式 80 7.1.4 功能缺陷及未來(lái)趨勢(shì) 81 7.2 使用HTML 5的audio和video元素 81 7.2.1 在頁(yè)面中加入音頻和視頻 81 7.2.2 使用source元素 82 7.2.3 使用腳本檢測(cè)瀏覽器的標(biāo)簽支持情況 82 7.2.4 audio和video的特性和屬性 83 7.2.5 audio和video的方法 86 7.2.6 audio和video的事件 88 7.3 練習(xí)：做自定義播放工具條 89 7.3.1 案例簡(jiǎn)介 89 7.3.2 網(wǎng)頁(yè)基本元素 90 7.3.3 定義全局的視頻對(duì)象 90 7.3.4 添加播放/暫停、前進(jìn)和后退功能 91 7.3.5 添加慢進(jìn)和快進(jìn)功能 91 7.3.6 添加靜音和音量功能 92 7.3.7 添加進(jìn)度顯示功能 92 7.4 拓展訓(xùn)練 93 7.4.1 訓(xùn)練一：在頁(yè)面中插入音頻格式 93 7.4.2 訓(xùn)練二：在頁(yè)面中插入視頻格式，并在頁(yè)面加載完畢后自動(dòng)播放 93 7.5 技術(shù)解惑 93 7.5.1 如何使用合適的音頻類(lèi)型 93 7.5.2 在網(wǎng)上使用視頻的技巧 94 第8章 在網(wǎng)頁(yè)中拖放內(nèi)容 95 8.1 拖放API 95 8.1.1 新增的draggable特性 95 8.1.2 新增的鼠標(biāo)拖放事件 95 8.1.3 DataTransfer對(duì)象 96 8.1.4 練習(xí)：拖放元素的內(nèi)容 97 8.2 文件API 100 8.2.1 新增的標(biāo)簽特性 100 8.2.2 FileList對(duì)象與File對(duì)象 101 8.2.3 Blob對(duì)象 102 8.2.4 FileReader接口 103 8.3 練習(xí)：把圖片拖入瀏覽器 108 8.3.1 案例簡(jiǎn)介 108 8.3.2 設(shè)計(jì)網(wǎng)頁(yè)基本元素 108 8.3.3 基本函數(shù)的實(shí)現(xiàn) 109 8.3.4 頁(yè)面加載處理 109 8.4 拓展訓(xùn)練 110 8.4.1 訓(xùn)練一：使用文件選擇框可以一次選取多個(gè)文件 110 8.4.2 訓(xùn)練二：在網(wǎng)頁(yè)中設(shè)置一個(gè)層是可以拖動(dòng)的 110 8.5 技術(shù)解惑 110 8.5.1 理解拖放API與文件API 110 8.5.2 如何使用FlieList對(duì)象 111 第9章 網(wǎng)頁(yè)的本地存儲(chǔ) 112 9.1 本地存儲(chǔ)對(duì)象——Web Storage 112 9.1.1 Web Storage簡(jiǎn)介 112 9.1.2 sessionStorage和localStorage 113 9.1.3 設(shè)置和獲取Storage數(shù)據(jù) 115 9.1.4 Storage API的屬性和方法 117 9.1.5 存儲(chǔ)JSON對(duì)象的數(shù)據(jù) 119 9.1.6 Storage API的事件 122 9.1.7 練習(xí)：在兩個(gè)窗口中實(shí)現(xiàn)通信 122 9.2 本地?cái)?shù)據(jù)庫(kù)——Web SQL Database 124 9.2.1 Web SQL Database簡(jiǎn)介 124 9.2.2 操作Web SQL數(shù)據(jù)庫(kù) 124 9.2.3 練習(xí)：基本的數(shù)據(jù)庫(kù)操作 125 9.3 拓展訓(xùn)練 129 9.3.1 訓(xùn)練一：保存并讀取Storage數(shù)據(jù) 129 9.3.2 訓(xùn)練二：使用Web SQL數(shù)據(jù)庫(kù)向名稱(chēng)為User的表中插入一條記錄 129 9.4 技術(shù)解惑 130 9.4.1 理解本地存儲(chǔ)對(duì)象 130 9.4.2 如何使用本地?cái)?shù)據(jù)庫(kù) 130 第10章 繪制圖形 131 10.1 認(rèn)識(shí)Canvas 131 10.1.1 Canvas的歷史 131 10.1.2 Canvas和SVG及VML之間的差異 131 10.2 Canvas基本知識(shí) 132 10.2.1 構(gòu)建Canvas元素 132 10.2.2 使用JavaScript實(shí)現(xiàn)繪圖的流程 133 10.3 使用Canvas繪圖 135 10.3.1 繪制矩形 135 10.3.2 使用路徑 137 10.3.3 圖形組合 142 10.3.4 繪制曲線(xiàn) 144 10.3.5 使用圖像 151 10.3.6 剪裁區(qū)域 153 10.3.7 繪制漸變 157 10.3.8 描邊屬性 159 10.3.9 模式 161 10.3.10 變換 163 10.3.11 使用文本 167 10.3.12 陰影效果 170 10.3.13 狀態(tài)的保存與恢復(fù) 171 10.3.14 操作像素 173 10.4 在Canvas中實(shí)現(xiàn)動(dòng)畫(huà) 175 10.5 拓展訓(xùn)練 179 10.5.1 訓(xùn)練一：使用Canvas繪制矩形 179 10.5.2 訓(xùn)練二：使用Canvas繪制陰影效果 180 10.6 技術(shù)解惑 180 10.6.1 理解Canvas對(duì)象 180 10.6.2 使用JavaScript實(shí)現(xiàn)繪圖 180 第2篇 CSS技術(shù)篇 第11章 CSS基礎(chǔ)知識(shí)入門(mén) 181 11.1 什么是CSS 181 11.2 CSS的寫(xiě)法 181 11.2.1 基本的樣式表的寫(xiě)法 181 11.2.2 使用類(lèi)class和標(biāo)志id鏈接樣式表 182 11.2.3 創(chuàng)建選擇器 183 11.2.4 應(yīng)用CSS樣式表 185 11.3 用CSS來(lái)修飾頁(yè)面文本 186 11.3.1 修飾頁(yè)面文本字體 186 11.3.2 文本的字號(hào) 187 11.3.3 文本段落行高 187 11.3.4 禁止文本自動(dòng)換行 187 11.4 給頁(yè)面對(duì)象添加顏色 187 11.5 CSS 3的發(fā)展 188 11.5.1 模塊化的發(fā)展 188 11.5.2 瀏覽器支持情況 189 11.5.3 CSS 3新特性預(yù)覽 189 11.6 CSS 3增加的選擇器功能 191 11.6.1 屬性選擇器 191 11.6.2 結(jié)構(gòu)偽類(lèi)選擇器 191 11.6.3 UI元素狀態(tài)偽類(lèi)選擇器 192 11.6.4 偽元素選擇器 192 11.7 拓展訓(xùn)練 193 11.7.1 訓(xùn)練一：用CSS為頁(yè)面中的my_c類(lèi)添加樣式 193 11.7.2 訓(xùn)練二：用CSS為頁(yè)面中的輸入框在獲取焦點(diǎn)時(shí)設(shè)置樣式 194 11.8 技術(shù)解惑 194 11.8.1 理解CSS的基本語(yǔ)法 194 11.8.2 掌握各種常用選擇器的使用 194 第12章 美化文本與背景 195 12.1 文本與字體 195 12.1.1 多樣化的文本陰影——text-shadow屬性 195 12.1.2 溢出文本處理——text-overflow屬性 200 12.1.3 文字對(duì)齊——word-wrap和word-break屬性 201 12.1.4 使用服務(wù)器端的字體——@font-face規(guī)則 203 12.1.5 練習(xí)：使用豐富的文字樣式 206 12.2 色彩模式和不透明度 208 12.2.1 HSL色彩模式 208 12.2.2 HSLA色彩模式 211 12.2.3 RGBA色彩模式 212 12.2.4 不透明屬性opacity 213 12.2.5 練習(xí)：設(shè)置半透明的遮蔽層 215 12.3 背景 218 12.3.1 在元素里定義多個(gè)背景圖片 218 12.3.2 指定背景的原點(diǎn)位置 219 12.3.3 指定背景的顯示區(qū)域 222 12.3.4 指定背景圖像的大小 224 12.3.5 練習(xí)：設(shè)計(jì)信紙的效果 227 12.4 邊框 230 12.4.1 設(shè)計(jì)圓角邊框——border-radius屬性 230 12.4.2 設(shè)計(jì)圖像邊框——border-image屬性 235 12.4.3 設(shè)計(jì)多色邊框——border-color屬性 244 12.4.4 練習(xí)：使用新技術(shù)設(shè)計(jì)網(wǎng)頁(yè) 245 12.5 拓展訓(xùn)練 250 12.5.1 訓(xùn)練一：為文本添加陰影效果 250 12.5.2 訓(xùn)練二：為層添加圓角邊框效果 250 12.6 技術(shù)解惑 251 12.6.1 文本的新特性 251 12.6.2 不同色彩模式的使用 251 12.6.3 邊框的使用 251 第13章 DIV+CSS布局 252 13.1 理解塊級(jí)元素的意義 252 13.2 頁(yè)面中的層 252 13.2.1 行＜span＞和層＜div＞ 252 13.2.2 層的基本定位 253 13.2.3 層的疊加 256 13.3 框模型 257 13.3.1 理解框模型 257 13.3.2 空距——padding屬性 258 13.3.3 邊框——border的擴(kuò)展屬性 259 13.3.4 邊距——margin屬性 260 13.3.5 框模型的溢出 260 13.4 定制層的display屬性 260 13.5 CSS Hack 260 13.6 拓展訓(xùn)練 261 13.6.1 訓(xùn)練一：在頁(yè)面中對(duì)一個(gè)層使用絕對(duì)定位 261 13.6.2 訓(xùn)練二：為一個(gè)層設(shè)置邊框樣式 261 13.7 技術(shù)解惑 261 13.7.1 塊級(jí)元素與行內(nèi)元素的區(qū)別 261 13.7.2 如何理解內(nèi)邊距與外邊距 262 第14章 盒布局 263 14.1 靈活的盒布局 263 14.1.1 開(kāi)啟盒布局 263 14.1.2 元素的布局方向——box-orient屬性 265 14.1.3 元素的布局順序——box-direction屬性 267 14.1.4 調(diào)整元素的位置——box-ordinal-group屬性 269 14.1.5 彈性空間分配——box-flex屬性 270 14.1.6 元素的對(duì)其方式——box-pack和box-align屬性 274 14.1.7 練習(xí)：使用新型盒布局設(shè)計(jì)網(wǎng)頁(yè) 278 14.2 增強(qiáng)的盒模型 282 14.2.1 盒子陰影——box-shadow屬性 282 14.2.2 盒子尺寸的計(jì)算方法——box-sizing屬性 286 14.2.3 盒子溢出內(nèi)容處理——overflow-x和overflow-y屬性 288 14.2.4 練習(xí)：設(shè)計(jì)網(wǎng)站服務(wù)條款頁(yè)面 290 14.3 增強(qiáng)的用戶(hù)界面設(shè)計(jì) 292 14.3.1 允許用戶(hù)改變?cè)�素尺寸——resize屬性 292 14.3.2 定義外輪廓線(xiàn)——outline屬性 294 14.3.3 偽裝的元素——appearance屬性 298 14.3.4 為元素添加內(nèi)容——content屬性 300 14.3.5 練習(xí)：設(shè)計(jì)一個(gè)省份選擇盤(pán) 303 14.4 拓展訓(xùn)練 305 14.4.1 訓(xùn)練一：設(shè)置盒元素布局方向?yàn)樗�平布�?305 14.4.2 訓(xùn)練二：在頁(yè)面中創(chuàng)建一個(gè)可以調(diào)整大小的層 306 14.5 技術(shù)解惑 306 14.5.1 如何使用盒布局屬性的兼容性 306 14.5.2 理解盒子溢出內(nèi)容處理的區(qū)別 306 第15章 多列布局 307 15.1 多列布局基礎(chǔ)知識(shí) 307 15.1.1 多列屬性columns 307 15.1.2 列寬屬性column-width 309 15.1.3 列數(shù)屬性column-count 310 15.1.4 列間距屬性column-gap 311 15.1.5 定義列分隔線(xiàn)——column-rule屬性 312 15.1.6 定義橫跨所有列——column-span屬性 314 15.2 練習(xí)：模仿雜志的多列版式 316 15.3 拓展訓(xùn)練 318 15.3.1 訓(xùn)練一：在一個(gè)層中實(shí)現(xiàn)多列布局 318 15.3.2 訓(xùn)練二：在多列布局的基礎(chǔ)上定義列分隔線(xiàn) 318 15.4 技術(shù)解惑 319 15.4.1 如何使用多列布局的快捷設(shè)置 319 15.4.2 使用column-span屬性的注意事項(xiàng) 319 第16章 CSS 3自適應(yīng)布局 320 16.1 媒體查詢(xún) 320 16.1.1 @media規(guī)則的語(yǔ)法 320 16.1.2 使用媒體查詢(xún)鏈接外部樣式表文件 324 16.2 練習(xí)：自適應(yīng)屏幕的樣式表方案 325 16.3 拓展訓(xùn)練 330 16.3.1 訓(xùn)練一：媒體查詢(xún)常用的設(shè)備種類(lèi) 330 16.3.2 訓(xùn)練二：如何使用媒體查詢(xún)鏈接外部樣式表文件 331 16.4 技術(shù)解惑 331 16.4.1 媒體查詢(xún)的作用是什么 331 16.4.2 媒體查詢(xún)中的媒體類(lèi)型有哪些 331 第17章 動(dòng)畫(huà)和漸變 332 17.1 CSS 3變形基礎(chǔ) 332 17.1.1 元素的變形——transform屬性 332 17.1.2 旋轉(zhuǎn) 332 17.1.3 縮放和翻轉(zhuǎn) 334 17.1.4 移動(dòng) 336 17.1.5 傾斜 339 17.1.6 矩陣變形 341 17.1.7 同時(shí)使用多個(gè)變形函數(shù) 343 17.1.8 定義變形原點(diǎn)——transform-origin屬性 345 17.1.9 練習(xí)：設(shè)計(jì)圖片畫(huà)廊 347 17.2 CSS 3過(guò)渡效果 350 17.2.1 實(shí)現(xiàn)過(guò)渡效果——transition屬性 350 17.2.2 指定過(guò)渡的屬性——transition-property屬性 351 17.2.3 指定過(guò)渡的時(shí)間——transition-duration屬性 353 17.2.4 指定過(guò)渡延遲時(shí)間——transition-delay屬性 354 17.2.5 指定過(guò)渡方式——transition-timing-function屬性 355 17.2.6 練習(xí)：制作滑動(dòng)的菜單 356 17.3 CSS 3動(dòng)畫(huà)設(shè)計(jì) 359 17.3.1 關(guān)鍵幀動(dòng)畫(huà)——@keyframes規(guī)則 359 17.3.2 動(dòng)畫(huà)的實(shí)現(xiàn)——animation屬性 360 17.3.3 練習(xí)：永不停止的風(fēng)車(chē) 363 17.4 CSS 3漸變?cè)O(shè)計(jì) 365 17.4.1 線(xiàn)性漸變 366 17.4.2 徑向漸變 369 17.4.3 練習(xí)：設(shè)計(jì)漸變的按鈕 371 17.5 拓展訓(xùn)練 373 17.5.1 訓(xùn)練一：使用CSS 3實(shí)現(xiàn)當(dāng)鼠標(biāo)指針經(jīng)過(guò)鏈接時(shí)放大 373 17.5.2 訓(xùn)練二：使用CSS 3實(shí)現(xiàn)一個(gè)層中有線(xiàn)性漸變背景 373 17.6 技術(shù)解惑 374 17.6.1 元素的變形與布局 374 17.6.2 過(guò)渡效果與變形的區(qū)別 374 第3篇 JavaScript技術(shù)篇 第18章 JavaScript程序基礎(chǔ)知識(shí) 375 18.1 JavaScript的基礎(chǔ)語(yǔ)法 375 18.1.1 字母大小寫(xiě)編寫(xiě)規(guī)范 375 18.1.2 JavaScript代碼編寫(xiě)格式 375 18.1.3 注釋格式 376 18.1.4 保留字 376 18.1.5 基本的輸出方法 376 18.1.6 關(guān)于＜script＞＜/script＞標(biāo)簽的聲明 378 18.2 JavaScript交互基本方法 379 18.2.1 最常用的信息對(duì)話(huà)框 379 18.2.2 選擇對(duì)話(huà)框 380 18.2.3 提示對(duì)話(huà)框 382 18.3 數(shù)據(jù)類(lèi)型和變量 383 18.3.1 數(shù)據(jù)類(lèi)型的理解 383 18.3.2 學(xué)習(xí)幾種基本數(shù)據(jù)類(lèi)型 384 18.3.3 變量的含義 386 18.3.4 變量的聲明與使用 386 18.4 常用的運(yùn)算符 387 18.4.1 運(yùn)算符與表達(dá)式 387 18.4.2 基本運(yùn)算符及其使用 388 18.4.3 關(guān)系運(yùn)算符及其使用 393 18.4.4 邏輯運(yùn)算符及其使用 395 18.4.5 其他常用運(yùn)算符及其使用 396 18.5 拓展訓(xùn)練 398 18.5.1 訓(xùn)練一：在頁(yè)面中插入一段JavaScript代碼 398 18.5.2 訓(xùn)練二：在頁(yè)面中使用一個(gè)選擇框，并根據(jù)選擇輸出不同內(nèi)容 398 18.6 技術(shù)解惑 398 18.6.1 關(guān)于多行注釋的誤區(qū) 398 18.6.2 3種對(duì)話(huà)框的區(qū)別 399 18.6.3 關(guān)于JavaScript中的基本數(shù)據(jù)類(lèi)型 399 第19章 JavaScript核心語(yǔ)法 400 19.1 程序的核心：分支和循環(huán) 400 19.1.1 if條件分支 400 19.1.2 switch條件分支 402 19.1.3 while循環(huán) 404 19.1.4 do...while循環(huán) 405 19.1.5 for循環(huán) 407 19.1.6 for...in循環(huán) 408 19.1.7 如何更合理地控制循環(huán)語(yǔ)句 409 19.2 函數(shù) 413 19.2.1 什么是函數(shù) 413 19.2.2 學(xué)會(huì)使用函數(shù)解決問(wèn)題 415 19.2.3 理解函數(shù)的參數(shù)傳遞 416 19.2.4 函數(shù)中變量的作用域和返回值 417 19.2.5 函數(shù)的嵌套 419 19.3 面向?qū)ο缶幊痰暮?jiǎn)單概念 420 19.3.1 什么是面向?qū)ο?420 19.3.2 如何創(chuàng)建對(duì)象 421 19.3.3 定義對(duì)象的屬性 422 19.3.4 對(duì)象的構(gòu)造函數(shù)和方法 424 19.3.5 關(guān)聯(lián)數(shù)組的概念 426 19.3.6 with語(yǔ)句和for...in語(yǔ)句 428 19.4 拓展訓(xùn)練 431 19.4.1 訓(xùn)練一：使用循環(huán)打印九九乘法表 431 19.4.2 訓(xùn)練二：使用自定義函數(shù)求某個(gè)數(shù)的平方 431 19.5 技術(shù)解惑 431 19.5.1 if與switch的使用時(shí)機(jī) 431 19.5.2 while與for循環(huán)的異同 432 19.5.3 while與do...while循環(huán)的異同 432 19.5.4 關(guān)于自定義函數(shù) 432 19.5.5 如何理解面向?qū)ο?432 第20章 JavaScript核心對(duì)象 433 20.1 數(shù)組對(duì)象 433 20.1.1 創(chuàng)建數(shù)組 433 20.1.2 數(shù)組元素的操作 435 20.1.3 創(chuàng)建多維數(shù)組 437 20.1.4 數(shù)組的方法 438 20.2 日期對(duì)象 444 20.2.1 用日期對(duì)象創(chuàng)建常用日期 445 20.2.2 日期對(duì)象的方法 446 20.2.3 編寫(xiě)一個(gè)時(shí)間計(jì)算程序 449 20.3 數(shù)學(xué)運(yùn)算對(duì)象 451 20.3.1 數(shù)學(xué)運(yùn)算對(duì)象的方法和屬性 451 20.3.2 制作一個(gè)小型計(jì)算器 454 20.4 字符串對(duì)象 456 20.4.1 字符串對(duì)象的屬性 456 20.4.2 字符串對(duì)象的方法 457 20.5 函數(shù)對(duì)象 461 20.6 拓展訓(xùn)練 463 20.6.1 訓(xùn)練一：創(chuàng)建數(shù)組并輸出數(shù)組內(nèi)容 463 20.6.2 訓(xùn)練二：輸出當(dāng)前的日期和時(shí)間 463 20.7 技術(shù)解惑 464 20.7.1 如何理解數(shù)組 464 20.7.2 使用日期對(duì)象的注意事項(xiàng) 464 20.7.3 關(guān)于Math對(duì)象 464 20.7.4 關(guān)于字符串對(duì)象 464 第21章 瀏覽器對(duì)象模型 465 21.1 navigator對(duì)象 465 21.1.1 navigator對(duì)象的管理方法 466 21.1.2 在網(wǎng)頁(yè)上顯示瀏覽者系統(tǒng)的基本信息 466 21.2 window對(duì)象 467 21.2.1 window對(duì)象的管理方法 468 21.2.2 制作可定制的彈出窗口 469 21.2.3 完美地關(guān)閉窗口 471 21.2.4 制作簡(jiǎn)單的網(wǎng)頁(yè)動(dòng)畫(huà) 472 21.2.5 延時(shí)執(zhí)行命令 474 21.3 location對(duì)象 476 21.4 history對(duì)象 478 21.5 screen對(duì)象 480 21.6 拓展訓(xùn)練 481 21.6.1 訓(xùn)練一：在頁(yè)面上輸出瀏覽者的瀏覽器名稱(chēng) 481 21.6.2 訓(xùn)練二：使用setInterval()制作移動(dòng)的文字 481 21.7 技術(shù)解惑 482 21.7.1 描述你理解的window對(duì)象 482 21.7.2 描述你理解的document對(duì)象 482 第22章 文檔對(duì)象模型 483 22.1 文檔對(duì)象模型概念詳解 483 22.1.1 文檔對(duì)象模型簡(jiǎn)介 483 22.1.2 文檔對(duì)象的屬性 484 22.1.3 文檔對(duì)象的方法 486 22.2 form對(duì)象 488 22.2.1 訪問(wèn)表單對(duì)象的方法 488 22.2.2 表單控件 492 22.2.3 制作具備數(shù)據(jù)檢測(cè)功能的注冊(cè)頁(yè)面 499 22.3 image對(duì)象 503 22.4 鏈接對(duì)象 506 22.5 拓展訓(xùn)練 508 22.5.1 訓(xùn)練一：使用文檔對(duì)象模型遍歷頁(yè)面全部圖片 508 22.5.2 訓(xùn)練二：當(dāng)輸入框獲取焦點(diǎn)時(shí)顯示紅色，失去焦點(diǎn)后恢復(fù) 508 22.6 技術(shù)解惑 509 22.6.1 文檔對(duì)象模型是什么 509 22.6.2 文檔對(duì)象模型與HTML標(biāo)簽 509 22.6.3 使用文檔對(duì)象模型的注意事項(xiàng) 509 第23章 事件響應(yīng) 510 23.1 事件響應(yīng)的概念 510 23.1.1 事件和事件處理程序 510 23.1.2 HTML元素常用事件的展示 511 23.2 事件方法的使用 513 23.3 event對(duì)象 514 23.3.1 event對(duì)象的各種屬性 514 23.3.2 網(wǎng)頁(yè)監(jiān)視發(fā)生事件的元素 515 23.3.3 網(wǎng)頁(yè)檢測(cè)用戶(hù)的鼠標(biāo)信息 516 23.3.4 網(wǎng)頁(yè)檢測(cè)用戶(hù)的鍵盤(pán)按鍵信息 518 23.3.5 鼠標(biāo)隨意拖動(dòng)網(wǎng)頁(yè)元素 520 23.4 事件編程訪問(wèn)網(wǎng)頁(yè)元素 523 23.4.1 數(shù)組方式訪問(wèn) 523 23.4.2 id名稱(chēng)和name名稱(chēng)訪問(wèn) 525 23.4.3 HTML標(biāo)簽名稱(chēng)訪問(wèn) 527 23.4.4 DOM節(jié)點(diǎn)方法訪問(wèn) 528 23.5 結(jié)合CSS制作動(dòng)態(tài)頁(yè)面 531 23.5.1 讓HTML元素動(dòng)起來(lái) 531 23.5.2 通過(guò)切換CSS給網(wǎng)頁(yè)換膚 534 23.5.3 動(dòng)態(tài)添加節(jié)點(diǎn) 536 23.6 拓展訓(xùn)練 539 23.6.1 訓(xùn)練一：使用鍵盤(pán)方向鍵移動(dòng)頁(yè)面的層 539 23.6.2 訓(xùn)練二：?jiǎn)螕舭粹o為表格添加一行 540 23.7 技術(shù)解惑 541 23.7.1 理解事件 541 23.7.2 理解事件響應(yīng) 541 第4篇 實(shí)戰(zhàn)篇 第24章 實(shí)戰(zhàn)——使用微信小程序開(kāi)發(fā)充值應(yīng)用 543 24.1 小程序開(kāi)發(fā)介紹 543 24.1.1 小程序開(kāi)發(fā)前景 543 24.1.2 HTML 5、CSS 3、JavaScript在小程序中的對(duì)應(yīng)文件 544 24.1.3 網(wǎng)站HTML標(biāo)簽與小程序wxml組件的異同 544 24.1.4 網(wǎng)站中JavaScript與小程序中JavaScript的異同 546 24.1.5 wxss與CSS 3的不同之處 546 24.2 小程序開(kāi)發(fā)涉及的層次和知識(shí)結(jié)構(gòu) 546 24.2.1 第一層：小程序 547 24.2.2 第二層：Web服務(wù)器 547 24.2.3 第三層：數(shù)據(jù)庫(kù) 547 24.2.4 第四層：第三方服務(wù) 548 24.3 小程序開(kāi)發(fā)前的準(zhǔn)備工作 548 24.3.1 Web服務(wù)器方面的準(zhǔn)備 548 24.3.2 申請(qǐng)開(kāi)通小程序 548 24.3.3 設(shè)置小程序服務(wù)器域名 551 24.4 安裝和使用小程序開(kāi)發(fā)工具 553 24.4.1 下載安裝小程序開(kāi)發(fā)工具 554 24.4.2 小程序開(kāi)發(fā)工具介紹 555 24.5 實(shí)戰(zhàn)——充值小程序開(kāi)發(fā) 558 24.5.1 新建充值小程序工程 559 24.5.2 小程序工程目錄結(jié)構(gòu) 561 24.5.3 小程序單個(gè)頁(yè)面的結(jié)構(gòu) 563 24.5.4 充值小程序頁(yè)面開(kāi)發(fā) 565 24.5.5 小程序與Web服務(wù)器之間如何通信 569 第25章 實(shí)戰(zhàn)——資訊小程序 573 25.1 資訊小程序的主要頁(yè)面 573 25.2 資訊小程序單個(gè)頁(yè)面的開(kāi)發(fā)流程 574 25.3 新建資訊小程序項(xiàng)目 574 25.4 資訊小程序的首頁(yè) 576 25.4.1 js腳本從服務(wù)器獲取數(shù)據(jù) 577 25.4.2 在wxml中展示數(shù)據(jù) 578 25.4.3 wxss控制展示效果 581 25.5 開(kāi)發(fā)資訊小程序分類(lèi)頁(yè)面 582 25.5.1 分類(lèi)頁(yè)面index.js 源代碼分析 583 25.5.2 分類(lèi)頁(yè)面index.wxml源代碼分析 584 25.5.3 小程序的模板文件 585 25.5.4 分類(lèi)頁(yè)面index.wxss源代碼分析 586 25.6 開(kāi)發(fā)資訊小程序列表頁(yè)面 587 25.6.1 列表頁(yè)面index.js源代碼分析 588 25.6.2 小程序中使用第三方j(luò)s腳本模塊 589 25.6.3 列表頁(yè)面index.wxml源代碼分析 590 25.6.4 列表頁(yè)面index.wxss源代碼分析 591 25.7 開(kāi)發(fā)資訊小程序內(nèi)容頁(yè)面 592 25.7.1 內(nèi)容頁(yè)面index.js源代碼分析 594 25.7.2 內(nèi)容頁(yè)面index.wxml源代碼分析 599 25.7.3 內(nèi)容頁(yè)面index.wxss源代碼分析 600