HTML5應(yīng)用開發(fā)案例教程完整版ppt整本書教學(xué)教程最全電子教案最新

1、第一章 HTML5 應(yīng)用開發(fā)概述HTML5 應(yīng)用開發(fā)案例教程 目錄1.1 網(wǎng)頁工作原理 1.2 HTML5 概述 1.3 響應(yīng)式設(shè)計 1.4 運行環(huán)境和開發(fā)工具 網(wǎng)頁工作原理1.11.1 網(wǎng)頁工作原理1.1.1 瀏覽器軟件 1.1.2 網(wǎng)頁工作過程1.1.1 瀏覽器軟件瀏覽器是一種軟件，其主要功能是顯示網(wǎng)頁服務(wù)器或者文件系統(tǒng)的 HTML 文件（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）內(nèi)容，并讓用戶與這些文件交互。目前，主流瀏覽器包括 IE、FireFox、Opera、Safari、Chrome 等。瀏覽器由 shell 和內(nèi)核構(gòu)成shell 是指瀏覽器的外殼（用戶接口），它為用戶提供了界面操作，如菜單、地

2、址欄、工具欄、選項參數(shù)設(shè)置等功能內(nèi)核（瀏覽器引擎），是基于標(biāo)記語言顯示內(nèi)容的程序或模塊，包括：渲染引擎（Rendering Engine）負(fù)責(zé)取得網(wǎng)頁的內(nèi)容、解析處理，以及呈現(xiàn)JS（JavaScript）引擎 負(fù)責(zé)解析和執(zhí)行 JavaScript 代碼1.1.2 網(wǎng)頁工作過程網(wǎng)頁文件是由 HTML 命令、CSS 樣式、JavaScript 代碼和字符組合構(gòu)成的以 Webkit 渲染引擎為例講解網(wǎng)頁的渲染過程1.1.2 網(wǎng)頁工作過程什么是HTML解析指對網(wǎng)頁文件進(jìn)行識別、分析，并將其轉(zhuǎn)換為具有一定意義的結(jié)構(gòu)通常為表達(dá)文檔結(jié)構(gòu)的節(jié)點樹，稱為解析樹，HTML 文檔解析的結(jié)果為 DOM節(jié)點樹。 HTM

3、L5概述1.21.2HTML5 概述HTML5 特性兼容性實用性安全性表現(xiàn)與內(nèi)容分離簡化通用訪問性去插件HTML5 新增功能語義元素增強Web 表單音頻和視頻JavaScript 與 Canvas 相結(jié)合進(jìn)行繪圖 響應(yīng)式設(shè)計1.31.3響應(yīng)式設(shè)計什么是響應(yīng)式Web設(shè)計網(wǎng)頁內(nèi)容會隨著訪問它的設(shè)備的視口不同而呈現(xiàn)不同的樣式HTML5 規(guī)范通過 media 等標(biāo)簽，使得網(wǎng)頁可以突破輸出設(shè)備屏幕尺寸的限制響應(yīng)式Web設(shè)計特點以網(wǎng)格為基礎(chǔ)測試驅(qū)動開發(fā)媒體查詢動態(tài)布局響應(yīng)式的旅游網(wǎng)站介紹頁面在PC、移動端的執(zhí)行效果代碼見案例Example1-2 運行環(huán)境和開發(fā)工具1.41.4運行環(huán)境和開發(fā)工具1.4.1運

4、行環(huán)境HTML5 運行需要瀏覽器的支持，有時還需要 Web服務(wù)器環(huán)境。常見瀏覽器對于HTML5的支持情況Chrome、Firefox：已對 HTML5 支持了很多年，而且有自動升級，與其他瀏覽器相比起來支持度最好Safari、Opera：同樣支持 HTML5 很多年，支持度也很高IE：從 IE 10 起，對 HTML5 的支持比較充分1.4.2開發(fā)工具Sublime TextHBuilder（推薦）HBuilder創(chuàng)建項目的步驟經(jīng)創(chuàng)建項目設(shè)置項目路徑和名稱1.4運行環(huán)境和開發(fā)工具HBuilder創(chuàng)建項目的步驟創(chuàng)建項目結(jié)構(gòu)1.4運行環(huán)境和開發(fā)工具1.4運行環(huán)境和開發(fā)工具新建 HTML 文件文件名

5、設(shè)置1.4運行環(huán)境和開發(fā)工具運行程序1.4運行環(huán)境和開發(fā)工具編碼格式設(shè)置第二章 靜態(tài)網(wǎng)頁制作HTML5 應(yīng)用開發(fā)案例教程 目錄2.1 HTML5 頁面的構(gòu)建 2.2 文本標(biāo)簽的應(yīng)用2.3 表格標(biāo)簽的應(yīng)用2.4 表單標(biāo)簽的應(yīng)用2.5 分組標(biāo)簽的應(yīng)用2.6 嵌入標(biāo)簽的應(yīng)用 HTML5 頁面的構(gòu)建2.12.1 HTML5 頁面的構(gòu)建2.1.1 HTML5 基本結(jié)構(gòu)2.1.2 HTML5 新增的結(jié)構(gòu)標(biāo)簽2.1.3 CSS3 技術(shù)2.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面2.1.1 HTML5 基本結(jié)構(gòu) ：文檔類型聲明 ： HTML 文檔開始 ：包含 HTML 文檔的元數(shù)據(jù)開始：聲明

6、HTML 文檔所用的字符編碼 頁面標(biāo)題 ：設(shè)置 HTML 文檔標(biāo)題，即網(wǎng)頁左上角顯示的標(biāo)題：包含 HTML 文檔的元數(shù)據(jù)結(jié)束：表示 HTML 文檔主體內(nèi)容的開始 段落內(nèi)容 ：一個文本段落： HTML 文檔主體內(nèi)容的結(jié)束： HTML 文檔的結(jié)束2.1.1 HTML5 基本結(jié)構(gòu)HTML元素的用法HTML 是一種超文本標(biāo)記語言，它是由 HTML 元素、元素屬性和元素屬性值 3 種基本部分構(gòu)成，元素的屬性定義了元素的樣式和功能HTML 元素的語法形式雙標(biāo)簽： 內(nèi)容單標(biāo)簽：其中，標(biāo)簽名即元素名，屬性可以有一個或多個，也可以沒有，示例如下。語句 1： 測試段落 語句 2：2.1.1 HTML5 基本結(jié)構(gòu)H

7、TML元素的用法HTML 是一種超文本標(biāo)記語言，它是由 HTML 元素、元素屬性和元素屬性值 3 種基本部分構(gòu)成，元素的屬性定義了元素的樣式和功能HTML 元素的語法形式雙標(biāo)簽： 內(nèi)容單標(biāo)簽：其中，標(biāo)簽名即元素名，屬性可以有一個或多個，也可以沒有，示例如下。語句 1： 測試段落 語句 2：嚴(yán)格來說，將由尖括號包圍的關(guān)鍵詞，比如 ，稱為 HTML 標(biāo)簽 ；將使用 HTML 標(biāo)簽定義的，從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼，稱為 HTML 元素2.1.2 HTML5 新增的結(jié)構(gòu)標(biāo)簽語義標(biāo)簽：主要用于描述章節(jié)所在位置和作用。根據(jù)用途的不同，語義標(biāo)簽可分為結(jié)構(gòu)標(biāo)簽、文本標(biāo)簽和分組標(biāo)簽。標(biāo)簽語義化是 HTML

8、5 的主要新增內(nèi)容之一。所謂標(biāo)簽語義化是指使用具有一定意義的標(biāo)簽來定義 HTML 元素，如 標(biāo)簽，放在頁面頭部，是一個具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素。HTML5的新增結(jié)構(gòu)標(biāo)簽2.1.3 CSS3 技術(shù)CSS（Cascading Style Sheet）即層疊樣式表。在網(wǎng)頁制作時采用 CSS 技術(shù)，能夠有效地對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的控制CSS3 是CSS 技術(shù)的升級版本，具有模塊化的特性CSS3中主要模塊有：選擇器、盒式模型、背景和邊框、文字特效、2D/3D 轉(zhuǎn)換、動畫、多欄布局和用戶界面CSS 的語法形式：選擇器屬性 1: 值 1; 屬性 2: 值 2; 。其中使用

9、花括號包圍屬性聲明，這里屬性是指樣式屬性，每個屬性需對應(yīng)一個值，屬性與值之間用冒號分隔，每一個屬性聲明之間以分號分隔例如：div color: red; margin: 0; padding:0;其中 div 為選擇器，color 為屬性，red 為 color 屬性的值。類似地，margin、padding為屬性，其值均為 0屬性值的寫法會有多種，如像素，顏色等2.1.3 CSS3 技術(shù)在HTML文檔中引入CSS樣式表的方式1）元素內(nèi)嵌入式：直接在 HTML 標(biāo)簽中使用 style 屬性定義 CSS 樣式，只能控制單個HTML 元素，沒有體現(xiàn) CSS 的優(yōu)勢，因此不推薦使用，如： 這是一段文

10、本 2）文檔內(nèi)嵌入式：嵌入式 CSS 樣式需要放在元素 head 的標(biāo)簽對內(nèi)。對于單個頁面來說，這種方式很方便3）外部導(dǎo)入式：將 CSS 樣式定義全部放在一個文件中，網(wǎng)頁需要使用時，通過關(guān)鍵字 import 來引入外部 CSS 樣式文件4）外部連接式：CSS 樣式定義方法與第 3 種方式相同，也是放在一個獨立的文件中，只是引入CSS 文件的方法有些不同。方式2）方式3）方式4）2.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面問題描述： 創(chuàng)建一個網(wǎng)頁，由上、左、右、下 4 部分組成，每部分都包含有標(biāo)題和正文內(nèi)容。執(zhí)行效果：2.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面問

11、題分析：本例是一個網(wǎng)頁構(gòu)架，將頁面分為 4 個部分，這種布局是一種常見的布局方式，即上面是網(wǎng)站導(dǎo)航，左側(cè)是頁面導(dǎo)航，右側(cè)是頁面主體內(nèi)容，下部是頁面的頁腳。頁面文字是對內(nèi)容區(qū)域的劃分表述，包括了標(biāo)題、段落等，利用 HTML5 標(biāo)簽可以實現(xiàn)2.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面實現(xiàn)步驟：1）創(chuàng)建一個 Web 項目，項目名為 Case2-12.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面2）創(chuàng)建 HTML 文檔2.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面3）編寫代碼2.1.4 實例 2-1 ： 編寫一個簡單的HTML5 頁面3）編寫代碼4）運行代碼

12、文本標(biāo)簽的應(yīng)用2.22.2文本標(biāo)簽的應(yīng)用2.2.1 文本標(biāo)簽 2.2.2 實例 2-2 ： 旅游網(wǎng)站介紹文字的制作2.2.1 文本標(biāo)簽 文本標(biāo)簽用于定義 HTML 文本元素，常用的文本標(biāo)簽有：定義 a 元素，該元素表示超鏈接，用于從一張頁面鏈接到另一張頁面，主要包括如下屬性。 id：元素標(biāo)識號。 href：指定鏈接的目標(biāo)。 name：元素名。 target：指定在何處打開被鏈接文檔，有 2 個屬性值_self（默認(rèn)）和 _blank，前者是改變當(dāng)前頁面，并跳轉(zhuǎn)到超鏈接地址；后者是打開新頁面，并跳轉(zhuǎn)至超鏈接的地址。 download：指定被下載內(nèi)容的保存路徑和文件名。href的用法舉例html5

13、 learning sitedocumentdocumentfooter2.2.1 文本標(biāo)簽 ：用于定義 p 元素，該元素表示一個段落，段落的前后自動空一行。例：html5：用于定義 br 元素，該元素表示換行。例：html5 和 標(biāo)簽定義的 b 元素和 標(biāo)簽定義的 strong 元素均表示對于文本加粗2.2.2實例2-2：旅游網(wǎng)站介紹文字的制作 問題描述：創(chuàng)建一個網(wǎng)頁，由上和下兩部分組成，上面部分是公司簡介，下面部分則是聯(lián)系方式，每個部分均包含標(biāo)題和正文。執(zhí)行效果2.2.2實例2-2：旅游網(wǎng)站介紹文字的制作 問題分析：小城旅行網(wǎng)站的公司介紹頁面，用于介紹該公司概況、旗下 Web 及移動客戶端

14、，并顯示公司的聯(lián)系方式，包括公司地址、電話等信息。本例中，主要利用文本元素，針對文字進(jìn)行處理，不涉及 CSS 樣式。實現(xiàn)步驟：創(chuàng)建HTML項目 Case2-2 創(chuàng)建HTML文檔運行HTML文檔 表格標(biāo)簽的應(yīng)用2.32.3表格標(biāo)簽的應(yīng)用2.3.1 表格標(biāo)簽 2.3.2 實例2-3：旅游網(wǎng)站機票預(yù)訂頁面制作2.3.1 表格標(biāo)簽 表格標(biāo)簽用于定義 HTML 表格元素，標(biāo)簽的作用：2.3.1 表格標(biāo)簽 表格標(biāo)簽應(yīng)用示例：2.3.2實例2-3：旅游網(wǎng)站機票預(yù)訂頁面制作 問題描述：創(chuàng)建一個頁面，能夠讓用戶了解和預(yù)訂機票，即顯示機票信息，并提供預(yù)訂功能。執(zhí)行效果2.3.2實例2-3：旅游網(wǎng)站機票預(yù)訂頁面制作

15、 問題分析：機票預(yù)訂是旅游網(wǎng)站的附加服務(wù)，機票的信息來源于航空公司，主要展示用戶關(guān)注的信息，并提供相應(yīng)鏈接到售票代理商網(wǎng)站。機票信息包括航班基本信息起止地點、起降時間、價格、準(zhǔn)點率、餐食、航空公司和預(yù)定。本例利用table 元素及其子元素實現(xiàn)實現(xiàn)步驟：創(chuàng)建項目 Case2-3 并創(chuàng)建 HTML 文件運行HTML文件2.3.2實例2-3：旅游網(wǎng)站機票預(yù)訂頁面制作 表格代碼片段2.3.2實例2-3：旅游網(wǎng)站機票預(yù)訂頁面制作 問題總結(jié)：（1）table 元素非常適合于大量數(shù)據(jù)列表，當(dāng)需要列出的信息較多時，為避免加載時間過長，會采用逐步加載的方式，即首次顯示一組信息，在表格尾部設(shè)計一個“加載更多”鏈接

16、，結(jié)合 JavaScript 實現(xiàn)單擊之后再加載一組信息，如此類推不斷增加顯示的信息；對于業(yè)務(wù)數(shù)據(jù)的呈現(xiàn)，如商品信息，則可使用傳統(tǒng)的分頁方式，每次僅顯示一組信息（2）為了提高可讀性，可利用 CSS 來設(shè)置奇偶行不同背景色，以及鼠標(biāo)滑動時位置所在行的背景色（3）table 元素簡單易用，但它會延遲頁面加載時間，且 CSS 樣式設(shè)置更為復(fù)雜，因此不建議使用 table 元素進(jìn)行頁面布局 表單標(biāo)簽的應(yīng)用2.42.4表單標(biāo)簽的應(yīng)用2.4.1 表單標(biāo)簽 2.4.2 實例2-4：旅游網(wǎng)站登錄和注冊頁面制作2.4.1 表單標(biāo)簽 用于定義表單元素及其子元素的標(biāo)簽，常用的標(biāo)簽有： ： 定義 HTML 表單（fo

17、rm）元素，為用戶提供輸入界面，表單元素的屬性較多2.4.1 表單標(biāo)簽 ：定義 input 元素，該元素作用是規(guī)定用戶輸入信息的輸入字段，如通過 type 屬性限定輸入字段的類型，常用的屬性：2.4.1 表單標(biāo)簽 和 ：由 標(biāo)簽定義的 select 和由 標(biāo)簽定義的 datalist 都為下拉列表，功能相近，但使用的場景不同。當(dāng)選項較少時，一般使用前者；否則使用后者 標(biāo)簽應(yīng)用示例 標(biāo)簽應(yīng)用示例2.4.2 實例2-4：旅游網(wǎng)站登錄和注冊頁面制作 問題描述：創(chuàng)建一個頁面，能夠為用戶提供登錄和注冊功能，要求頁面設(shè)計簡潔易用。執(zhí)行效果2.4.2 實例2-4：旅游網(wǎng)站登錄和注冊頁面制作 問題分析：登錄和

18、注冊是網(wǎng)站提供的最常用功能，由于旅游網(wǎng)站注冊僅需要用戶的簡單信息，包括用戶名、郵箱和密碼等，而登錄信息要求用戶名和密碼，因此，可通過控制卡（tab）切換方式，將登錄和注冊用相同的方式呈現(xiàn)，在增加了 CSS 樣式設(shè)置和 JavaScript 代碼后，默認(rèn)顯示為登錄界面，當(dāng)單擊注冊 tab 時，則呈現(xiàn)注冊界面實現(xiàn)步驟：新建項目 Case2-4 并創(chuàng)建 HTML 文件執(zhí)行HTML文件2.4.2 實例2-4：旅游網(wǎng)站登錄和注冊頁面制作 表單代碼片段下拉框代碼片段2.4.2 實例2-4：旅游網(wǎng)站登錄和注冊頁面制作 問題總結(jié)：（1）當(dāng)網(wǎng)站對于用戶信息要求嚴(yán)格時，注冊字段會比較多，可能需要占用整個網(wǎng)頁，就需

19、單獨設(shè)計注冊頁面（2）當(dāng)頁面中需要用戶輸入多個字段時，通常會使用表單元素 form，如查詢購買機票 / 火車票等，它將作為一個頁面中的一個部分出現(xiàn) 分組標(biāo)簽的應(yīng)用2.52.5 分組標(biāo)簽的應(yīng)用2.5.1 分組標(biāo)簽 2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一）2.5.1 分組標(biāo)簽 分組標(biāo)簽用于定義分組元素。分組元素用于組織相關(guān)內(nèi)容的 HTML5 元素，對其進(jìn)行歸類，常用的分組標(biāo)簽有2.5.1 分組標(biāo)簽 ：用于定義 span 元素，span 元素表示對 HTML 文檔中的行內(nèi)元素進(jìn)行組合例： 在 藍(lán)色 的天空中，正放飛著一只 紅色 的風(fēng)箏，畫面非常的美。 ：用于定義 div 元素，該元素表示分隔區(qū)

20、塊例如： 3248 起 滿意度 80% 8039 起 滿意度 95%2.5.1 分組標(biāo)簽 ：用于定義 blockquote 元素，以表示摘自另一個源的內(nèi)容例如執(zhí)行效果：2.5.1 分組標(biāo)簽 ： 用于定義 pre 元素，以表示預(yù)格式化的文本 ：用于定義 hr 元素，其顯示效果為水平線，其作用是分隔頁面中的 2 個部分，從而表示文檔內(nèi)容的變化、 和 ： 分別用于定義 ul、ol 和 li 元素，這 3 個元素都表示列表。其中 ul 和 li 元素組合成為無序列表，而 ol 和 li 元素組合成為有序列表例如2.5.1 分組標(biāo)簽 、 和 ：分別用于定義 dl、dt 和 dd 元素，對應(yīng)表示列表、各項

21、目名字和描述。例如執(zhí)行效果2.5.1 分組標(biāo)簽 和 ：用于定義 figure 元素，以表示獨立的流內(nèi)容（如圖像、圖表、照片和代碼等）：用于定義 figcaption 元素，該元素表示流內(nèi)容的標(biāo)題，可以作為 figure 元素中的第一個子元素或是最后一個例如2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一） 問題描述：創(chuàng)建一個頁面，作為旅游網(wǎng)站首頁面，提供登錄 / 注冊入口、網(wǎng)站導(dǎo)航，以及旅游熱點等信息，且要求具有較好的視覺效果執(zhí)行效果2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一） 問題分析：根據(jù)問題描述，將該頁面分為 4 個部分：頭部、背景圖片、主體內(nèi)容和尾部，其中頭部又包括了頂部導(dǎo)航條、logo

22、/ 搜索框和主導(dǎo)航條；主體內(nèi)容則由多個旅游熱點信息組成；尾部則包含了網(wǎng)站的一些相關(guān)信息及版權(quán)信息等。在這里我們主要關(guān)注頁面結(jié)構(gòu)和內(nèi)容的展示所涉及元素如何應(yīng)用，對于 CSS 樣式不做討論。2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一） 實現(xiàn)步驟：利用頁面元素將頁面劃分為頭部、背景圖片、主體內(nèi)容和尾部，其中頭部采用 header 元素，背景圖片和主體內(nèi)容采用 div 元素，尾部則使用 footer 元素。內(nèi)容部分的旅游熱點標(biāo)題采用 section 元素，而旅游點信息是配圖與說明，使用 figure 元素更為合適。對于一些局部性的文字內(nèi)容組織，還使用了 ul、dl 等元素。打開項目 Case2-5

23、并創(chuàng)建 HTML 文件標(biāo)簽應(yīng)用的代碼片段2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一） 標(biāo)簽應(yīng)用的代碼片段2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一） 標(biāo)簽應(yīng)用的代碼片段標(biāo)簽應(yīng)用的代碼片段2.5.2 實例2-5：旅游網(wǎng)站首頁制作（一） 問題總結(jié)：（1）分組元素是每個頁面中不可缺少的。針對場景需要，選擇適用的分組元素是關(guān)鍵（2）header 元素適用于頁面頭部，首頁頭部除了導(dǎo)航條外，通常會有一些其他內(nèi)容，如 logo、在線客服、登錄 / 注冊等鏈接，可以使用 div 元素來分塊，而導(dǎo)航條則可用 nav 元素制作（3）主體內(nèi)容部分，如果是文字居多，使用 section 和 article 元素；

24、若是以圖片為主，則采用 figure 元素，同時結(jié)合 img 元素顯示圖片、figcaption 元素進(jìn)行配圖說明，會更為方便（4）對于一行內(nèi)需要設(shè)置不同樣式時，使用 span 元素是非常合適的（5）網(wǎng)頁中常出現(xiàn)的一行 / 列文字組合，多會采用 ul 元素，并結(jié)合 CSS 樣式，可達(dá)到一行或一列顯示效果；如果是多行文字組合，則用 dl 元素會令代碼的可讀性和可維護(hù)性更好（6） 標(biāo)簽所定義的 dl 元素，也稱為 dl 表格元素，它不但可以表示一組標(biāo)題加多個列表項，還可以制作小型表格。與傳統(tǒng)表格（table 元素）相比，它更為簡捷和語義化 嵌入標(biāo)簽的應(yīng)用2.62.6 嵌入標(biāo)簽的應(yīng)用2.6.1 嵌入

25、標(biāo)簽2.6.2 實例2-6：旅游網(wǎng)站首頁制作（二）2.6.1 嵌入標(biāo)簽嵌入標(biāo)簽：用于將一些外部資源插入 HTML 頁面中，外部資源包括圖片、視頻、音頻等。嵌入標(biāo)簽及其作用如下：2.6.1 嵌入標(biāo)簽、 和 ： 分別用于定義 img、map 和 area 元素，均用來表示區(qū)域熱點例如：2.6.1 嵌入標(biāo)簽 和 分別用于定義 audio 和 source 元素，這兩個元素組合起來可表示播放音頻例如： 和 ：分別用于定義 video 和 source 元素，兩者組合表示播放視頻例如2.6.1 嵌入標(biāo)簽 和 ：分別用于定義 embed 和 object 元素， 2 個元素均可用來嵌入內(nèi)容， 但objec

26、t 元素僅適用于 IE 瀏覽器，為了兼容不同的瀏覽器，在代碼中可先判斷瀏覽器類型，再動態(tài)加載相應(yīng)的元素，或者將兩者結(jié)合使用例如： 用于定義 progress 元素，以表示任務(wù)進(jìn)度例如 ：2.6.2 實例2-6：旅游網(wǎng)站首頁制作（二）問題描述：創(chuàng)建一個頁面，作為旅游網(wǎng)站首頁面，要求有網(wǎng)站導(dǎo)航，突出網(wǎng)站功能，且具有較好的動態(tài)視覺效果。執(zhí)行效果2.6.2 實例2-6：旅游網(wǎng)站首頁制作（二）問題分析：實例 2-5 已完成了網(wǎng)站首頁的制作，本例從另一角度來突出網(wǎng)站特色將圖片與視頻播放相結(jié)合。網(wǎng)頁的頭部、背景圖片、主體內(nèi)容和尾部各部分基本與實例 2-5 相同，只是在背景圖片部分加入了視頻播放效果。實現(xiàn)步驟

27、：使用 HBuilder 創(chuàng)建項目 Case2-6，HTML 頁面的大部分代碼與實例 2-5 類似2.6.2 實例2-6：旅游網(wǎng)站首頁制作（二）背景圖片代碼部分進(jìn)行擴(kuò)展，對應(yīng)代碼片段2.6.2 實例2-6：旅游網(wǎng)站首頁制作（二）問題總結(jié)： video 元素中加上“你的瀏覽器不支持 HTML5 視頻?！笔菫榱思嫒轂g覽器，當(dāng)瀏覽器不支持時，視頻無法正常播放，則以此提示用戶需要更換瀏覽器第三章 結(jié)合 JavaScript 的交互式網(wǎng)頁制作HTML5 應(yīng)用開發(fā)案例教程 目錄3.1 初識 JavaScript 3.2 JavaScript 基本語法3.3 JavaScript 程序構(gòu)成3.4 JavaS

28、cript 訪問 DOM 節(jié)點 初識 JavaScript3.13.1初識 JavaScript3.1.1 什么是 JavaScript3.1.2 JavaScript 的特點3.1.1 什么是 JavaScript JavaScript 是一種基于對象和事件驅(qū)動的，并具有相對安全性的、解釋型的程序設(shè)計語言（腳本語言）腳本語言程序由一組指令組成，可用文本編輯器編輯，且無須編譯，由解釋器直譯執(zhí)行，而解釋器又被稱為腳本語言引擎（JS 引擎）JavaScript主要用于實現(xiàn)網(wǎng)頁行為，網(wǎng)頁行為是指客戶端請求數(shù)據(jù)的驗證、用戶互動的實現(xiàn)、用戶體驗度的增強等3.1.2 JavaScript 的特點動態(tài)性松散

29、性基于對象基于原型鏈的繼承機制相對安全事件驅(qū)動開發(fā)機制 JavaScript 基本語法3.23.2JavaScript 基本語法3.2.1 JavaScript 的應(yīng)用方法 3.2.2 標(biāo)識符、 數(shù)據(jù)類型和運算符 3.2.3 實例 3-1 ： 貨幣匯率兌換器3.2.1 JavaScript 的應(yīng)用方法 一個動態(tài)網(wǎng)頁文件中，通常包含 HTML、CSS 和 JavaScript 3 類代碼例如：3.2.1 JavaScript 的應(yīng)用方法 HTML 頁面中引入 JavaScript 代碼幾種方式在 標(biāo)簽中嵌入 alert(hello, javascript); 在 標(biāo)簽中嵌入 alert(hell

30、o, javascript); 以文件形式導(dǎo)入3.2.2 標(biāo)識符、 數(shù)據(jù)類型和運算符 ECMAScript 的基本概念ECMAScript（簡稱 ES）是由 ECMA 國際按照 ECMA-262 和 ISO/IEC 16262 標(biāo)準(zhǔn)制定的一種腳本語言規(guī)范。JavaScript 是按 ECMAScript 實現(xiàn)的一種腳本語言幾個基本概念區(qū)分大小寫變量是弱類型的字面量（直接量）每行結(jié)尾的分號可有可無注釋與 Java 等語言相同花括號表明代碼塊3.2.2 標(biāo)識符、 數(shù)據(jù)類型和運算符 標(biāo)識符：是指變量、函數(shù)、屬性的名字，或者函數(shù)的參數(shù)。標(biāo)識符可以是下列規(guī)則組合起來的一個或多個字符標(biāo)識符命名規(guī)則第一字符

31、必須是一個字母、下劃線（_）或一個美元符號（$）其他字符可以是字母、下劃線、美元符號或數(shù)字不能把關(guān)鍵字、保留字、true、false 和 null 作為標(biāo)識符數(shù)據(jù)類型ECMAScript 提供了 5 個簡單數(shù)據(jù)類型：Undefined、Null、Boolean、Number 和 String，以及 1 個復(fù)雜數(shù)據(jù)類型 Object，但不支持任何自定義類型。Undefined：該類型只有一個值，即特殊值 undefinedNull：該類型只有一個值，即特殊值 null。它表示一個空對象引用（指針）Boolean：該類型有兩個值：true 和 falseNumber ：該類型包含 2 種數(shù)值：整型

32、和浮點型String 類型用于表示字符串。即用雙引號（）或單引號（）括起，由零或多個16 位 Unicode 字符組成的字符序列3.2.2 標(biāo)識符、 數(shù)據(jù)類型和運算符 運算符常用運算符為 +（加）、-（減）、*（乘）、/（除）、+（遞增）、-（遞減）、!（非）、（大于）、val); / 利用 比較 2 個數(shù)值， 由于 num 大于 val， 得到結(jié)果為 truealert(num=val); / 利用 = 比較 2 個數(shù)值， 由于 num 大于 val， 得到結(jié)果為 falsevar num=2, val=1;if(num0 & val0)alert(true); /2 個條件同時滿足時， 顯

33、示 trueif(num0 | val0)alert(true); / 只要滿足其中一個條件， 顯示 true3.2.3 實例 3-1 ： 貨幣匯率兌換器 問題描述：創(chuàng)建一個頁面，能實現(xiàn)多個幣種間的金額換算，且要求兌換金額為整數(shù)。執(zhí)行效果3.2.3 實例 3-1 ： 貨幣匯率兌換器 問題分析：要實現(xiàn)對于多個幣種間的任意金額兌換，需要原始金額的輸入框元素，以及原始和目標(biāo)幣種的下拉列表元素。為了實現(xiàn)貨幣的兌換，還需要利用 JavaScript代碼，以獲取用戶輸入數(shù)據(jù)和選項，同時根據(jù)公式計算出兌換后的金額，并顯示結(jié)果。實現(xiàn)步驟選用 input、select、button 和 span 元素，分別創(chuàng)建

34、原始金額輸入框、幣種下拉選項框、“轉(zhuǎn)換”按鈕，以及兌換后的金額通過操作 DOM 節(jié)點獲取用戶輸入的信息，即利用 document 對象的 getElementById 方法得到 input 元素對象創(chuàng)建項目 Case3-1，并在該項目中創(chuàng)建網(wǎng)頁文件運行HTML文件3.2.3 實例 3-1 ： 貨幣匯率兌換器 腳本代碼片段3.2.3 實例 3-1 ： 貨幣匯率兌換器 問題總結(jié)：（1）利用 document 對象 getElementById 方法，獲取與兌換計算相關(guān)的節(jié)點對象；利用 select 元素的 SelectIndex 和 options 屬性得到原始和目標(biāo)幣種，這 2 個屬性常配合使用

35、，其中 options 屬性是一個對象數(shù)組，本例就是使用 options.text 獲得其選擇文本，而它的另一個屬性 options.value，則可得到該選項的 value 值；通過 parseInt 方法將字符數(shù)據(jù)轉(zhuǎn)為整數(shù)，結(jié)合 isNaN 方法，確保參與兌換計算的是整數(shù)（2）本例的計算非常簡單，但代碼卻不少，原因在于計算前需要獲取數(shù)據(jù)，計算后又需要將其顯示到頁面上，準(zhǔn)備和后續(xù)工作的工作量較大。一般情況下，前期準(zhǔn)備工作包括從頁面元素獲取用戶輸入的數(shù)據(jù)，進(jìn)行合法性判斷，以及格式轉(zhuǎn)換等；后續(xù)工作主要是按照需求的格式，將結(jié)果顯示在頁面元素中 JavaScript 程序構(gòu)成3.33.3JavaSc

36、ript 程序構(gòu)成3.3.1 流程控制語句 3.3.2 函數(shù) 3.3.3 對象 3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證3.3.1 流程控制語句 ECMAScript 規(guī)定了一組流程控制語句，通常由一個或者多個關(guān)鍵字來完成給定的任務(wù)，如判斷、循環(huán)等。流程控制語句包括 ifelse、switch、for、forin、dowhile 和 while流程控制語句運用示例3.3.2 函數(shù) 函數(shù)的基本用法函數(shù)是 ECMAScript 的一個核心概念。函數(shù)是定義一次卻可以任意多次被調(diào)用或被事件驅(qū)動執(zhí)行的一段JavaScript 代碼。它允許帶參或不帶參，也允許有或無返回值函數(shù)聲明和使用：

37、使用 function 關(guān)鍵字來聲明，后跟一組參數(shù)以及函數(shù)體。函數(shù)的定義和使用主要有以下 2 種方式通過聲明定義函數(shù)，通過函數(shù)名調(diào)用，函數(shù)被執(zhí)行。function myFn() / 定義函數(shù) / 執(zhí)行代碼myFn(); / 函數(shù)被執(zhí)行通過表達(dá)式定義函數(shù)，通過變量名調(diào)用，函數(shù)被執(zhí)行。var x = function(a)return a; / 定義函數(shù)， 該函數(shù)實際上是一個匿名函數(shù)x(2); / 函數(shù)被執(zhí)行3.3.2 函數(shù) 函數(shù)應(yīng)用示例3.3.2 函數(shù) 函數(shù)參數(shù)ECMAScript 函數(shù)對于參數(shù)的值不做任何檢查，但可通過對象 arguments 來獲取實際傳遞進(jìn)來的參數(shù)及值例如3.3.3 對象

38、JavaScript對象 JavaScript 是基于對象的編程語言，這里的對象是屬性變量的容器，其中屬性變量通常表示為健值對 2 種常用的對象創(chuàng)建方法字面量方式原型 + 構(gòu)造函數(shù)方式3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證 問題描述：在實例 2-4 制作登錄注冊頁面的基礎(chǔ)上，要求頁面能夠進(jìn)行用戶登錄和新用戶注冊操作。執(zhí)行效果3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證 問題分析：登錄/注冊的操作流程為 用戶輸入信息系統(tǒng)判斷合法性輸出判斷結(jié)果根據(jù)結(jié)果進(jìn)入下一個頁面或重置當(dāng)前頁面。這里用戶名要求包含字母和數(shù)字，長度為 2 20 位，且首字符只可以是大小寫字母和下劃

39、線；密碼要求包含字母和數(shù)字，不可含空格，長度為 6 10 位；郵箱按照常規(guī)格式；問題回答可包含任意字符，但長度要求為 1 24 位。對于用戶輸入的每項內(nèi)容，利用正則表達(dá)式進(jìn)行格式匹配，所有注冊項內(nèi)容都符合要求，則顯示提示信息“注冊成功”，否則顯示“注冊信息不完整”，并重置出錯項的文本輸入框。實現(xiàn)步驟登錄處理：“登錄”按鈕單擊事件發(fā)生，將觸發(fā)事件處理程序（登錄驗證函數(shù) loginCheck）的執(zhí)行。loginCheck 函數(shù)中將獲取與登錄操作相關(guān)的頁面元素對象，處理“登錄”按鈕單擊事件，判斷登錄信息的合法性注冊處理：與登錄處理類似，創(chuàng)建了一個注冊驗證函數(shù) signup，它將獲取用戶錄入的每個注冊

40、項，并利用正則表達(dá)式作為匹配模式，來判斷是否符合要求3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證 注冊處理的匹配模式有以下 2 種 用戶名 /a-zA-Z_w1,19$/ 表示首個字母為“a-zA-Z_”，從第 2 個字符開始為任意字符，且長度為 119 位 密碼有 2 個表達(dá)式模式，!/s/ 表示非空格，/w/ 表示包含字母數(shù)字下劃線定義一個字面量對象 s_just，其屬性與注冊項相對應(yīng)，以標(biāo)識各注冊項的合法性狀態(tài)。在單擊“注冊”按鈕事件處理的代碼部分，通過遍歷 s_just 中的屬性值來確定注冊項是否全部合法創(chuàng)建項目 Case3-2，在 Case2-4 的網(wǎng)頁代碼基礎(chǔ)上，加入

41、 JavaScript 處理代碼3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證 登錄驗證JavaScript代碼片段3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證 注冊字段驗證JavaScript代碼片段3.3.4 實例 3-2 ： 旅游網(wǎng)站用戶注冊的合法性驗證 問題總結(jié)：（1）本例中采用 2 種方式調(diào)用函數(shù)：一是通過聲明定義函數(shù)，再調(diào)用函數(shù)，使之被執(zhí)行，如函數(shù) loginCheck 和 singup；二是由表達(dá)式定義函數(shù)，并通過事件觸發(fā)函數(shù)的執(zhí)行，而非顯式調(diào)用，如 s_btn.onclick 事件處理函數(shù)，在交互處理過程中，這種方式更為常見。（2）類似于注冊功能，有多

42、個輸入框時，除了本例采用的方式（即按鈕單擊事件中，一次性對各項進(jìn)行判斷），還有一種方式，就是每輸入一項即在輸入框的周邊顯示提示信息，如輸入新用戶的用戶名后，顯示該用戶名是否已有人使用等，這種方式可以利用 input 的失焦（onblur）事件來實現(xiàn)。（3）對象屬性的遍歷方法也有多種，本例通過 Object.keys(s_just) 獲得所有屬性的集合，從中得到屬性名，進(jìn)而判斷對應(yīng)的屬性值是否已改變。還有 2 種方法也可達(dá)到同樣的目的 獲取自身以及原型鏈上的屬性： for(var o in s_just)alert(o); / 依次得到 s_just 的每個屬性 獲取對象自身的全部屬性名：var

43、 props = Object.getOwnPropertyNames(s_obj);for(var i=0; iprops.length; i+) / 依次得到 props 的各屬性及其值 alert(propsi + : + s_objpropsi);JavaScript 訪問 DOM 節(jié)點3.43.4 JavaScript 訪問 DOM 節(jié)點3.4.1 文檔對象模型3.4.2 DOM 節(jié)點的基本操作 3.4.3 DOM 事件機制 3.4.4 實例 3-3 ： 旅游網(wǎng)站的景點查詢動態(tài)生成頁面制作3.4.5 JavaScript 事件處理模型3.4.1 文檔對象模型文檔對象模型（Docume

44、nt Object Model，DOM）也稱為 HTML 文檔樹，是 W3C組織推薦的處理可擴(kuò)展標(biāo)記語言的標(biāo)準(zhǔn)編程接口，獨立于任何平臺或語言，其中 D（Document）是指瀏覽器加載的網(wǎng)頁頁面，O（Object）是指頁面及頁面中的任何元素，M（Model）則可理解為網(wǎng)頁文檔的樹型結(jié)構(gòu)3.4.2 DOM節(jié)點的基本操作Document 對象HTML頁面被瀏覽器加載后成為文檔節(jié)點對象Document 對象Document 對象是 DOM 樹的根節(jié)點，通過它可以對于樹上所有元素節(jié)點進(jìn)行訪問Document 對象是 window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問例

45、如3.4.2 DOM節(jié)點的基本操作節(jié)點屬性對于 DOM 中的元素、屬性和文本 3 種節(jié)點，均有 nodeName、nodeType 和 nodeValue屬性，元素、屬性和文本節(jié)點對應(yīng)的屬性及值，如下表所示3.4.2 DOM節(jié)點的基本操作操作節(jié)點獲取節(jié)點節(jié)點內(nèi)容或值增刪節(jié)點操作節(jié)點示例遍歷節(jié)點3.4.2 DOM節(jié)點的基本操作操作節(jié)點示例修改節(jié)點內(nèi)容3.4.2 DOM節(jié)點的基本操作操作節(jié)點示例增刪節(jié)點3.4.2 DOM節(jié)點的基本操作改變元素的 CSS 樣式HTML 元素的 CSS 樣式，可以通過元素的 style、class 屬性或是外部 CSS 文件來設(shè)置例如：通過 style 屬性改變元素的

46、 CSS 樣式3.4.2 DOM節(jié)點的基本操作例如：通過 class 屬性來改變元素的 CSS 樣式3.4.2 DOM節(jié)點的基本操作例如：通過外部 CSS 文件改變元素的 CSS 樣式3.4.3 DOM事件機制DOM事件事件是 HTML 元素天生具備的行為方式。當(dāng)用戶操作 HTML 元素時，會觸發(fā)該元素的某個事件；通過 JavaScript 可以為該事件綁定方法，即事件綁定，其目的是使得該事件被觸發(fā)時，會做出一些相應(yīng)的反應(yīng)常用事件鼠標(biāo)事件：單次單擊（click）、雙擊（dblclick，300ms 之內(nèi)連續(xù)兩次單擊）、滑過（mouseover）、滑出（mouseout）、進(jìn)入（mouseent

47、er）、離開（mouseleave）、按下（左鍵）（mousedown）、釋放（左鍵）（mouseup），以及滾輪滾動（mousewheel）事件鍵盤事件：按下鍵（keydown）、釋放鍵（keyup）事件。表單事件：失去焦點（blur）、獲取焦點（focus）、內(nèi)容改變（change）和被選中（select）事件其他事件：加載成功（load）、加載失?。╡rror）、文檔滾動（scroll）和窗口大小改變（resize）事件3.4.3 DOM事件機制事件綁定DOM0 級事件綁定：元素 . 事件類型 = 監(jiān)聽函數(shù) DOM2 級事件綁定（推薦）：標(biāo)準(zhǔn)瀏覽器及 IE 8 以上：obtn.addEv

48、entListener(click,function(),false);標(biāo)準(zhǔn)及 IE 8 以上瀏覽器 ：元素 .addEventListener( 事件類型，監(jiān)聽函數(shù)，事件執(zhí)行順序 )IE 6IE 8 瀏覽器 ：元素 .attachEvent( 事件類型，監(jiān)聽函數(shù) )DOM2 級事件綁定的實現(xiàn)要素事件綁定使用的是 addEventListener/attachEvent 方法，其中 attachEvent 專門用于兼容 IE 6 IE 8 瀏覽器。事件綁定后，瀏覽器會將事件綁定方法置于該事件專用的事件池中對于元素的某一事件可以綁定多個不同方法當(dāng)元素的某一事件被觸發(fā)時，瀏覽器會到對應(yīng)事件池中依次

49、執(zhí)行所有方法如果需要，可以使用 removeEventListener/detachEvent 方法解除綁定3.4.3 DOM事件機制DOM2 級事件綁定示例3.4.4 實例3-3：旅游網(wǎng)站的景點查詢動態(tài)生成頁面制作問題描述：創(chuàng)建旅游網(wǎng)站的內(nèi)容展示頁面，頁面的主體內(nèi)容包括左、右兩部分，當(dāng)用戶搜索某個景點或城市時，在左側(cè)能夠以列表形成顯示相關(guān)的信息；同時右側(cè)顯示網(wǎng)站的微信號、熱門景點，以及推薦線路。執(zhí)行效果3.4.4 實例3-3：旅游網(wǎng)站的景點查詢動態(tài)生成頁面制作問題分析：頁面包括頭部、背景圖片、主體內(nèi)容和尾部，其中主體內(nèi)容由左側(cè)和右側(cè)兩個部分組成，左側(cè)顯示的是主要內(nèi)容，右側(cè)包括輔助和導(dǎo)航信息，

50、可采用 和 標(biāo)簽來組織兩部分內(nèi)容。右側(cè)可再分為 3 個小部分，通過 標(biāo)簽進(jìn)行布局，其中推薦線路仍可采用 和 標(biāo)簽相結(jié)合的方式，熱門景點則可利用 dl 表格來布局；當(dāng)用戶輸入查詢關(guān)鍵字并單擊“搜索”時，需要通過 JavaScript 編程，實現(xiàn)對事件的捕獲和處理，并將結(jié)果以左側(cè)列表的形式顯示。實現(xiàn)步驟：景點查詢：當(dāng)用戶輸入查詢關(guān)鍵字，并單擊“搜索”時，觸發(fā) click 事件，事件處理函數(shù)實現(xiàn)搜索結(jié)果獲取和展示。事件綁定采用 DOM2 方式。結(jié)果展示是通過遍歷左側(cè)列表節(jié)點，并改變其文本節(jié)點內(nèi)容來完成熱門景點列表：采用動態(tài)生成的方式來展示。與景點查詢類似，熱門景點的內(nèi)容也事先定義為對象數(shù)組打開項目

51、Case3-3 并創(chuàng)建 HTML 文件執(zhí)行HTML文件3.4.4 實例3-3：旅游網(wǎng)站的景點查詢動態(tài)生成頁面制作綁定事件方法和解除綁定方法的代碼片段3.4.4 實例3-3：旅游網(wǎng)站的景點查詢動態(tài)生成頁面制作為“搜索”按鈕節(jié)點對象綁定事件的代碼片段3.4.4 實例3-3：旅游網(wǎng)站的景點查詢動態(tài)生成頁面制作問題總結(jié)：（1）本例中有 2 個事件：window 的 load 事件和 button 的 click 事件，window 綁定的語句是 bindEvent(window, load, readyDo)，而 button 綁定的是 bindEvent(o_search_btn, click, f

52、unction()，前者是非匿名函數(shù)，參數(shù)要求的是函數(shù)名，而不是調(diào)用函數(shù)，所以切不可寫成 readyDo()。（2）動態(tài)生成頁面內(nèi)容。一般都需要對 DOM 節(jié)點對象進(jìn)行操作，包括增、刪、改和查。appendChild 方法是按順序增加子節(jié)點的，如果需要特別指定增加的位置，可采用 insertBefore(childnode, targetnode)，將 childnode 加到 targetnode 之前。（3）更新節(jié)點內(nèi)容前的判斷?？筛鶕?jù)實際情況，靈活借助節(jié)點的各種屬性，如標(biāo)簽名 tagName、樣式類名 className、節(jié)點類型 nodeType 和節(jié)點名稱 nodeName。3.4.

53、5 JavaScript 事件處理模型這部分作為拓展內(nèi)容，將講解 JavaScript 的事件冒泡、事件捕獲、JSON 格式數(shù)據(jù)處理和 JavaScript Ajax 的內(nèi)容。請讀者掃描二維碼學(xué)習(xí)第四章 CSS3 界面美化HTML5 應(yīng)用開發(fā)案例教程 目錄4.1 CSS3 選擇器4.2 CSS3 邊框和背景4.3 CSS3 文本和字體4.4 CSS3 盒式與多欄布局4.5 CSS32D 變換與動畫 CSS3 選擇器4.14.1 CSS3 選擇器4.1.1 CSS3選擇器的用法4.1.2 實例4-1：旅游網(wǎng)站的后臺訂單管理頁面制作4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：ph3bac

54、kground:#f00;HTML 代碼： 這是一個標(biāo)題 這是一個文字段落 這是一個文字段落 這是一個標(biāo)題 這是一個文字段落 這是一個標(biāo)題 這是一個文字段落 這是一個文字段落 關(guān)系選擇器例如：將緊跟在 p 后的 h3 背景設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：liclass=abackground:#f00;HTML 代碼： 列表項目 列表項目 列表項目 列表項目 段落元素 屬性選擇器Eattribute=value：選擇具有 attribute 屬性，且屬性值為以 value 開頭的字符串的 E 元素例如：將 class 屬性以 a 開頭的 li 元素背景設(shè)置為紅色

55、4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：liclass=abackground:#f00;HTML 代碼： 列表項目 列表項目 列表項目 列表項目 Eattribute$=value：選擇具有 attribute 屬性，且屬性值為以 value 結(jié)尾的字符串的 E 元素例如：將 class 屬性以 a 結(jié)尾的 li 元素背景設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：liclass*=abackground:#f00;HTML 代碼： 列表項目 列表項目 列表項目 列表項目 列表項目 Eattribute*=value：選擇具有 attribute 屬性且屬性

56、值包含 value 字符串的 E元素例如：將 class 屬性中包含 a 的 li 元素背景設(shè)置為紅色4.1.1 CSS3選擇器的用法偽類選擇器E:not(selector)：匹配不含有 s 選擇器的 E 元素，即滿足括號中條件以外的 E 元素。E 元素也可以省略，省略后就匹配所有的標(biāo)簽元素例如：將 class 屬性不是“abc”的 p 元素的背景均設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：p:not(.abc)background:#f00;HTML 代碼：class=abc 的段落 id=abc 的段落 class=abcd 的段落 無 class 的段落 參考代碼C

57、SS 樣式：li:last-childbackground:#f00;HTML 代碼： 結(jié)構(gòu)性偽類選擇器 E:last-child 結(jié)構(gòu)性偽類選擇器 E:last-child 結(jié)構(gòu)性偽類選擇器 E:last-child 結(jié)構(gòu)性偽類選擇器 E:last-childE:root：匹配 E 元素在文檔的根元素。用來設(shè)置全局的 CSS 樣式E:last-child：匹配父元素的最后一個子元素 E。要使該屬性生效，E 必須是某個對象的子元素例如：假設(shè) li 是其父節(jié)點的最后一個 li 子元素，將 li 的背景設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：li:only-childbac

58、kground:#f00;HTML 代碼： 只有唯一一個子元素 第 4 章CSS3 界面美化 077筆 記 結(jié)構(gòu)性偽類選擇器 E:only-child 有多個子元素 結(jié)構(gòu)性偽類選擇器 E:only-child 結(jié)構(gòu)性偽類選擇器 E:only-child 結(jié)構(gòu)性偽類選擇器 E:only-childE:only-child：匹配父元素僅有的一個子元素 E。其中，E 必須是某個對象的子元素，且是唯一的子元素例如：假設(shè) li 為其父元素的唯一子節(jié)點，將 li 背景設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：li:nth-child(2), p:nth-child(2)backgro

59、und:#f00;HTML 代碼： 列表 1 列表 2 列表 3 列表 4 第 1 個段落 第 2 個段落 E:nth-child(n) ：匹配父元素的第 n 個子元素 E。其中，E 必須是某個對象的子元素。 n 可以是數(shù)字，也可以是函數(shù)關(guān)系，如 2n，3n-1。如果 n 為奇偶數(shù)，就可表示為 nth-child(odd) 和 nth-child(even)，且第 1 個節(jié)點數(shù)為 1例如：假設(shè) li 和 p 均為其父元素的第 2 個子元素，將 li 和 p 的背景設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：p:first-of-type,div:first-of-typeb

60、ackground:#f00;HTML 代碼： 我是 1 個 div 元素 我是 1 個 p 元素 我是 1 個 p 元素 我是 2 個 div 元素 E:first-of-type：匹配同類型中的第 1 個同級兄弟元素 E。與 first-of-child 不同的是，范圍限定在同類型的元素例如：將同一層級下第 1 個 p 和 div 的背景設(shè)置為紅色4.1.1 CSS3選擇器的用法參考代碼CSS 樣式：li:only-of-type ,p:only-of-typebackground: #f00;HTML 代碼： 列表 1 列表 2 列表 3 列表 4 段落文本 E:only-of-type