HTML5網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)作業(yè)指導(dǎo)書

第1章HTML5基礎(chǔ)入門.............................................................3

1.1網(wǎng)頁(yè)與HTML簡(jiǎn)介..........................................................3

1.1.1網(wǎng)頁(yè)的概念.............................................................3

1.1.2HTML的概念............................................................3

1.2HTML5的發(fā)展歷程.........................................................3

1.3HTML5文檔結(jié)構(gòu)...........................................................4

第2章HTML5文本與排版...........................................................4

2.1文本標(biāo)簽與屬性..........................................................4

2.2標(biāo)題標(biāo)簽與段落標(biāo)簽......................................................5

2.3列表標(biāo)簽.................................................................5

2.4與錨點(diǎn)...................................................................5

第3章HTML5表格與表單...........................................................5

3.1表格標(biāo)簽與屬性..........................................................6

3.2表單標(biāo)簽與屬性...........................................................6

3.3輸入類型與驗(yàn)證...........................................................7

3.4下拉列表與單選、復(fù)選框...................................................7

第4章HTML5多媒體與嵌入.........................................................7

4.1音頻與視頻標(biāo)簽...........................................................7

4.1.1音頻標(biāo)簽<@11優(yōu)0>.......................................................8

4.1.2視頻標(biāo)簽<video>........................................................8

4.2多媒體屬性與方法.........................................................8

4.2.1屬性...................................................................8

4.2.2方法...................................................................9

4.3嵌入第三方內(nèi)容...........................................................9

4.3.1<embed>標(biāo)簽............................................................9

4.3.2<iframe>標(biāo)簽...........................................................9

第5章HTML5圖形與動(dòng)畫...........................................................9

5.1Canvas繪圖基礎(chǔ)..........................................................9

5.1.1Canvas元素概述........................................................9

5.1.2繪制矩形..............................................................10

5.1.3繪制路徑..............................................................10

5.1.4繪制文本..............................................................10

5.1.5圖片處理..............................................................10

5.2SVG矢量圖...............................................................10

5.2.1SVG概述..............................................................10

5.2.2SVG基本圖形..........................................................10

5.2.3SVG路徑..............................................................10

5.2.4SVG文本..............................................................10

5.2.5SVG與CSS、JavaScript的結(jié)合..........................................10

5.3HTML5動(dòng)畫與過(guò)渡效果....................................................10

5.3.1CSS3動(dòng)畫..............................................................11

5.3.2CSS3過(guò)渡效果..........................................................11

5.3.3Canvcis動(dòng)畫............................................................11

5.3.4SVG動(dòng)畫...............................................................11

第6章HTML5客戶端存儲(chǔ)..........................................................11

6.1WebStorage...........................................................................................................................11

6.1.1localStorage.....................................................................................................................11

6.1.2sessionStorage.................................................................................................................11

6.2IndcxedDB數(shù)據(jù)庫(kù).........................................................12

6.2.1IndexedDB的基木概念..................................................12

6.2.2IndexedDB的操作流程..................................................12

6.3離線應(yīng)用................................................................12

6.3.1應(yīng)用緩存(ApplicationCache)..............................................................................12

6.3.2離線資源清單(Manifest)...........................................................................................12

6.3.3離線應(yīng)用的生命周期事件...............................................13

第7章HTUL5地理位置與設(shè)備訪問(wèn).................................................13

7.1地理位置API.........................................................................................................................13

7.1.1地理位置API原理.....................................................13

7.1.2使用地理位置API............................................................................................................13

7.1.3注意事項(xiàng).............................................................14

7.2設(shè)備方向與運(yùn)動(dòng).........................................................14

7.2.1設(shè)備方向與運(yùn)動(dòng)API原理...............................................14

7.2.2使用設(shè)備方向與運(yùn)動(dòng)API................................................................................................14

7.2.3注意事項(xiàng)..............................................................15

7.3訪問(wèn)移動(dòng)設(shè)備功能........................................................15

7.3.1訪問(wèn)攝像頭與麥克風(fēng)...................................................15

7.3.2振動(dòng).................................................................15

7.3.3訪問(wèn)其他設(shè)備功能....................................................15

7.3.4注意事項(xiàng).............................................................15

第8章HTUL5通信與協(xié)作..........................................................15

8.1跨文檔消息傳遞..........................................................15

8.1.1window.postMessage方法..............................................16

8.1.2接收消息..............................................................16

8.2WebWorkers.........................................................................................................................16

8.2.1專用WebWorkers...........................................................................................................16

8.2.2共享WebWorkers...........................................................................................................17

8.3WebSockets.........................................................................................................................18

8.3.1創(chuàng)建WebSocket連接..................................................18

8.3.2使用肥bSockets進(jìn)行通信............................................18

第9章HTML5樣式與布局..........................................................20

9.1CSS3選擇器與屬性.......................................................20

9.1.1CSS3選擇器...........................................................20

9.1.2CSS3屬性.............................................................20

9.2布局與定位..............................................................20

9.2.1常見布局方式.........................................................20

9.2.2定位方式..............................................................21

9.3響應(yīng)式設(shè)計(jì)..............................................................21

9.3.1媒體查詢..............................................................21

9.3.2彈性布局..............................................................21

9.4CSS3動(dòng)畫與過(guò)渡.........................................................21

9.4.1過(guò)渡.................................................................21

9.4.2動(dòng)畫.................................................................22

第10章HTML5實(shí)戰(zhàn)案例..........................................................22

10.1網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)流程....................................................22

10.2案例一：靜態(tài)網(wǎng)頁(yè)制作..................................................23

10.3案例二：動(dòng)態(tài)網(wǎng)頁(yè)制作..................................................23

10.4案例三：移動(dòng)端網(wǎng)頁(yè)制作................................................23

第1章HTML5基礎(chǔ)入門

1.1網(wǎng)頁(yè)與HTML簡(jiǎn)介

1.1.1網(wǎng)頁(yè)的概念

網(wǎng)頁(yè)是構(gòu)成萬(wàn)維網(wǎng)的基本單元，是顯示在用戶瀏覽器上的信息頁(yè)面。它通過(guò)

超文本傳輸協(xié)議(HTTP)傳輸，并使用統(tǒng)一資源定位符(URL)進(jìn)行定位。網(wǎng)頁(yè)

主要由文木、圖片、聲音、視頻等多媒體信息組成。

1.1.2HTML的概念

HTML(HyperTextMarkupLanguage,超文本標(biāo)記語(yǔ)言)是一種用于創(chuàng)建網(wǎng)

頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。它通過(guò)一系列的標(biāo)記(也稱為標(biāo)簽)來(lái)描述網(wǎng)頁(yè)內(nèi)容，使瀏

覽器能夠展示出相應(yīng)的頁(yè)面結(jié)構(gòu)。HTML是構(gòu)成網(wǎng)頁(yè)的基礎(chǔ)，與其他技術(shù)(如CSS、

JavaScript等)共同協(xié)作，實(shí)現(xiàn)豐富多彩的網(wǎng)頁(yè)效果。

1.2HTML5的發(fā)展歷程

HTML5是HTML的第五個(gè)版本，由萬(wàn)維網(wǎng)聯(lián)盟(W3C)和WebHypertext

Applica-tiuuTechnologyWorkingGroup(WHATWG)共同開發(fā)。其主要發(fā)展歷程

如下：

(1)2004年，Web瀏覽器開發(fā)商和W3c開始合作開發(fā)HTML5。

(2)2007年，HTML5第一份正式草案發(fā)布。

(3)2012年，W3c發(fā)布HTML5的候選推薦標(biāo)準(zhǔn)。

(4)2014年，W3c正式發(fā)布HTML5推薦標(biāo)準(zhǔn)。

(5)HTML5的不斷發(fā)展，各大瀏覽器廠商對(duì)其支持度不斷提高，HTMI.5已

成為現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)的主流技術(shù)。

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

HTML5文檔結(jié)構(gòu)主要包括以下部分：

(1)文檔類型聲明(Doctype)

文檔類型聲明是HTML文檔的第一行，用于告知瀏覽器當(dāng)前文檔所使用的

HTML版本。HTML5的文檔類型聲明如下：

<!D0CTYPE>

(2)根元素

HTML5文檔的根元素為一，所有其他元素都包含在根元素內(nèi)。

(3)頭部(Head)

頭部元素'<hcad〉,包含文檔的元數(shù)據(jù)，如標(biāo)題、樣式、腳本等.以下是一些

常見的頭部元素：

''：定義文檔標(biāo)題，顯示在瀏覽器的標(biāo)題欄或頁(yè)面標(biāo)簽上。

'<meta>'：定義文檔的元數(shù)據(jù)，如字符編碼、關(guān)鍵詞、描述等。

'<link>'：外部資源，如樣式表、網(wǎng)站圖標(biāo)等。

'〈script),：引入腳本文件。

(4)主體(Body)

主體元素'<body>'包含網(wǎng)頁(yè)的所有內(nèi)容，如文本、圖片、音頻、視頻等。

(5)標(biāo)簽

HTML5提供了豐富的標(biāo)簽，用于表示頁(yè)面中的各種元素，如段落、標(biāo)題、列

表、表格等。

通過(guò)以上結(jié)構(gòu)，HTML5為網(wǎng)頁(yè)設(shè)計(jì)與開發(fā)提供了一個(gè)清晰、靈活的框架。在

此基礎(chǔ)上，開發(fā)者可以充分利用HTML5的新特性，創(chuàng)建出功能強(qiáng)大、兼容性良好

的網(wǎng)頁(yè)。

第2章HTML5文本與排版

2.1文本標(biāo)簽與屬性

在HTML5中，文本內(nèi)容是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ),通過(guò)使用各類文本標(biāo)簽及其屬性,

可以實(shí)現(xiàn)豐富的文本格式與樣式。以下是一些常用的文本標(biāo)簽及其屬性。

（I）＜p＞標(biāo)簽：定義段落，常用屬性包括align（對(duì)齊方式）和slyle（樣

式）。

（2）＜span＞標(biāo)簽：無(wú)語(yǔ)義的行內(nèi)元素，通常用于樣式化文本，其屬性主要

是style。

（3）〈strong）標(biāo)簽：定義重要性較高的文本，如強(qiáng)調(diào)句等。

（4）＜em＞標(biāo)簽：定義強(qiáng)調(diào)文本，與〈strong》標(biāo)簽類似，但強(qiáng)調(diào)程度較輕。

（5）＜mark＞標(biāo)簽：突出顯示文本。

（6）＜del＞和＜ins＞標(biāo)簽：分別表示刪除文本和插入文本。

2.2標(biāo)題標(biāo)簽與段落標(biāo)簽

標(biāo)題標(biāo)簽與段落標(biāo)簽在HTML5中具有明確的語(yǔ)義，用于構(gòu)建文檔結(jié)構(gòu)。

（1）標(biāo)題標(biāo)簽：＜hl＞至＜h6＞,分別表示從一級(jí)到六級(jí)標(biāo)題。標(biāo)題標(biāo)簽的

align屬性可設(shè)置標(biāo)題對(duì)齊方式°

（2）段落標(biāo)簽：＜p＞,表示一個(gè)段落。段落標(biāo)簽的align屬性同樣可設(shè)置

段落對(duì)齊方式。

2.3列表標(biāo)簽

列表標(biāo)簽用于組織并列信息，包括無(wú)序列表、有序列表和定義列表。

（1）無(wú)序列表：＜ul＞,包含多個(gè)列表項(xiàng)：Qi＞°無(wú)序列表的type屬性可

設(shè)置列表項(xiàng)符號(hào)類型。

（2）有序列表：＜o(jì)l＞,包含多個(gè)列表項(xiàng)：Qi＞。有序列表的type屬性可

設(shè)置列表項(xiàng)編號(hào)類型，如數(shù)字、字母等。

（3）定義列表：＜dl＞,包含多個(gè)定義項(xiàng)：〈dt＞和定義描述：＜dd＞0

2.4與錨點(diǎn)

與錨點(diǎn)在HTML5中通過(guò)＜a＞標(biāo)簽實(shí)現(xiàn)，用于在頁(yè)面之間或頁(yè)面內(nèi)部導(dǎo)航。

（1）：使用＜“＞標(biāo)簽創(chuàng)建超，href屬性指后目標(biāo)地址。

（2）錨點(diǎn)：在同一頁(yè)面內(nèi)創(chuàng)建錨點(diǎn)，通過(guò)1＞標(biāo)簽的name屬性定義錨點(diǎn)名

稱，使用href屬性指向該錨點(diǎn)。

注意：在實(shí)際開發(fā)中，盡量避免使用廢棄的標(biāo)簽和屬性，如align屬性。使

用CSS樣式進(jìn)行文本排版，以實(shí)現(xiàn)更好的頁(yè)面效果和可維護(hù)性。

第3章HTML5表格與表單

3.1表格標(biāo)簽與屬性

在HTML5中，表格通過(guò)以下標(biāo)簽進(jìn)行創(chuàng)建：

<table>：定義表格。

'〈caption>'：定義表格標(biāo)題。

'<thead>'：定義表格的表頭。

'<tbody>'：定義表格的主體。

'<tr>'：定義表格的行。

<lh>：定義表頭單兀格。

'<td>'：定義標(biāo)準(zhǔn)單元格。

表格的屬性包括：

'border'：設(shè)置表格的邊框?qū)挾取?/p>

'collpadding'：設(shè)置單元格內(nèi)容與邊框之間的空白距離.

'cellspacing'：設(shè)置單元格之間的距離。

align'：設(shè)置表格的水平對(duì)齊方式,可以是'left'、'center'或'right'。

'valign'：設(shè)置表格的垂直對(duì)齊方式,可以是top'、middle'、bottom'

或baseline。

3.2表單標(biāo)簽與屬性

表單用于收集用戶輸入，在HTML5中，常用以下標(biāo)簽創(chuàng)建表單：

'<form>'：定義表單。

'〈input>'：定義輸入字段。

'〈textarea)'：定義多行文本輸入字段。

'〈select)'：定義下拉列表。

,〈option)'：定義下拉列表中的選項(xiàng)。

<oplgxoup>'：定義選項(xiàng)組。

'〈button)'：定義按鈕。

'<fieldset>'：將表單中的元素組合在一起。

'〈legend>'：定義字段集的標(biāo)題。

表單屬性包括：

'action'：規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送數(shù)據(jù)。

'method'：規(guī)定用于發(fā)送表單數(shù)據(jù)的HTTP方法，通常是'get'或'post'。

'enctype'：規(guī)定表單數(shù)據(jù)在發(fā)送之前如何迸行編碼，通常用于'post'方法。

name'：規(guī)定表單的名稱,用于在JavaScript中引用。

'autoplete'：規(guī)定表單是否應(yīng)該啟用自動(dòng)完成功能。

3.3輸入類型與驗(yàn)證

HTML5為'〈input〉'元素增加了多種輸入類型，以增強(qiáng)表單的交互性和數(shù)據(jù)

驗(yàn)證功能：

文本輸入類型：text'、password'、e'、、tel'等。

數(shù)字輸入類型:number'>range>datetimedatetimelocalAdate、

monthweek、time'o

其他輸入類型：color'、file'、hidden'。

為了進(jìn)行數(shù)據(jù)驗(yàn)證，HTML5引入了以下屬性：

'required'：指定某個(gè)輸入字段為必填項(xiàng)。

'pattern'：規(guī)定輸入字段的模式,用于驗(yàn)證輸入內(nèi)容是否與指定模式匹配。

'min\'max\step'：用于數(shù)值類型的輸入字段,分別規(guī)定最小值、最

大值和合法數(shù)字間隔。

'maxlcngth'、'ninlength'：規(guī)定文本輸入字段的最大和最小長(zhǎng)度。

3.4下拉列表與單選、復(fù)選框

下拉列表、單選框和復(fù)選框是表單中的常見元素,用于提供多項(xiàng)選擇給用戶：

'〈select>'和'〈option>'：創(chuàng)建下拉列表。

'<optgroup>'：在大型下拉列表中創(chuàng)建分組。

單選按鈕通過(guò)以下方式實(shí)現(xiàn)：

'<input>'元素,設(shè)置'type="radio”'屬性。

復(fù)選框通過(guò)以下方式實(shí)現(xiàn)：

'〈input〉'元素，設(shè)置'type—checkbox”'屬性。

這些元素通常結(jié)合使用'name'和'value'屬性來(lái)保證表單數(shù)據(jù)的正確提交和

處理。

第4章HTML5多媒體與嵌入

4.1音頻與視頻標(biāo)簽

HTML5為網(wǎng)頁(yè)提供了原生的音頻和視頻支持，無(wú)需依賴第三方插件。本章首

先介紹音頻與視頻標(biāo)簽的使用。

4.1.1音頻標(biāo)簽〈audio>

<audio>標(biāo)簽用于在網(wǎng)頁(yè)中嵌入音頻內(nèi)容。以下為〈audio》標(biāo)簽的基本用法：

<audiocontrols）

<sourcesrc二〃audio,mp3"type二〃audio/mpeg”>

<sourcesrc二〃audio,ogg“type="audio/ogg〃>

您的瀏覽器不支持audio元素。

</audio>

其中，controls屬性表示顯示默認(rèn)的控件，包括播放、暫停按鈕等。source

標(biāo)簽用于指定不同的音頻文件格式和路徑,type屬性指明音頻文件的MIME類型。

4.1.2視頻標(biāo)簽<、"dec》

〈video》標(biāo)簽用于在網(wǎng)頁(yè)中嵌入視頻內(nèi)容。以下為〈video）標(biāo)簽的基本用法：

<videocontrolswidth="320〃height=〃240〃>

<sourcesrc二〃video.mp4〃type二〃video/mp4〃>

<sourcesrc=〃video.webnTtype=〃video/webm〃>

您的瀏覽器不支持video元素。

</vidco>

與〈audio）標(biāo)簽類似，<video>標(biāo)簽也包含controls屬性和source標(biāo)簽?？?/p>

以通過(guò)width和height屬性設(shè)置視頻播放器的寬度和高度。

4.2多媒體屬性與方法

HTML5為音頻和視頻元素提供了一系列屬性和方法，以便開發(fā)者進(jìn)行更復(fù)雜

的操作。

4.2.1屬性

音頻和視頻元素共有的屬性包括：

controls：顯示或隱藏默認(rèn)控件。

autoplay：自動(dòng)播放媒體。

loop：循環(huán)播放媒體。

muted：靜音。

preload：指定是否預(yù)加載媒體內(nèi)容。

還包括以下屬性：

audio元素特有的屬性：如volume（音量）。

video元素特有的屬性：如width（寬度）、height（高度）。

4.2.2方法

音頻和視頻元素提供了一系列方法，用于控制媒體播放：

play0：開始播放媒體。

pause0：暫停播放媒體。

loadO：重新加載媒體。

canPlayTypcO：檢查瀏覽器是否能播放指定類型的媒體。

4.3嵌入第三方內(nèi)容

除了使用音頻和視頻標(biāo)簽，HTMI.5還支持通過(guò)其他標(biāo)簽嵌入第二方內(nèi)容.

4.3.1<embed>標(biāo)簽

<embed>標(biāo)簽用于嵌入外部?jī)?nèi)容，如Flash動(dòng)畫、PDF文件等。

<embedsre二〃externalcontent,swf”

type-z，application/xshockwaveflashz，>

4.3.2<iframe>標(biāo)簽

<iframo>標(biāo)簽用于在一個(gè)HTML文檔內(nèi)嵌入另一個(gè)HTML頁(yè)面。

<iframesrc=，/://example.width=〃300〃height=〃200〃></iframe>

通過(guò)以上介紹，我們可以看到HTML5為多媒體和嵌入內(nèi)容提供了豐富的標(biāo)簽

和屬性，使得網(wǎng)頁(yè)開發(fā)更加靈活和方便。在實(shí)際開發(fā)過(guò)程中，開發(fā)者可以根據(jù)需

求選擇合適的方法和屬性，實(shí)現(xiàn)多樣化的多媒體展示。

第5章HTML5圖形與動(dòng)畫

5.1Canvas繪圖基礎(chǔ)

Canvas元素是HTML5中新增的一個(gè)非常重要的繪圖機(jī)制，它為網(wǎng)頁(yè)提供了

一個(gè)通過(guò)腳本（通常是JavaScript）在網(wǎng)頁(yè)上繪制圖形的環(huán)境。本節(jié)將介紹

Canvas的基本用法。

5.1.1Canvas元素概述

Canvas元素是〈canvas）標(biāo)簽定義的，它相當(dāng)于網(wǎng)頁(yè)上的一個(gè)畫布，可以在

上面繪制各種圖形。Canvas支持兩種繪圖方式：矩形繪圖和路徑繪圖。

5.1.2繪制矩形

矩形是Canvas繪圖中最基礎(chǔ)的圖形。通過(guò)CanvasAPI,可以繪制填充矩形

和邊框矩形。

5.1.3繪制路徑

路徑繪圖是Canvas的核心功能之一，它可以繪制線段、曲線等復(fù)雜圖形。

路徑繪圖的APT包括moveTo、1ineTo、arcTo等。

5.1.4繪制文本

Canvas也支持繪制文本?？梢酝ㄟ^(guò)設(shè)置字體、顏色等屬性來(lái)控制文本的顯

示效果。

5.1.5圖片處理

Canvas不僅支持繪制基本圖形，還可以用于處理圖片c可以使用CanvasAPI

將圖片繪制到畫布上，并進(jìn)行縮放、旋轉(zhuǎn)等操作。

5.2SVG矢量圖

SVG(SealableVectorGraphics)是一種基于XML的矢量圖形格式，與Canvas

不同，SVG是一種獨(dú)立的圖像格式，可以直接嵌入到HTML頁(yè)面中。本節(jié)將介紹

SVG的基本用法。

5.2.1SVG概述

SVG是一種矢量圖形格式，它可以在不失真的情況下無(wú)限放大和縮小。由于

SVG是基于XML的，因此可以使用文本編輯器創(chuàng)建和編輯。

5.2.2SVG基本圖形

SVG支持多種基本圖形，如矩形、圓形、橢閱、線段、多邊形等。

5.2.3SVG路徑

與Canvas相似，SVG也支持路徑繪圖?？梢酝ㄟ^(guò)＜口口山＞元素定義路徑。

5.2.4SVG文本

SVG可以輕松創(chuàng)建和格式化文本內(nèi)容，支持字體、大小、顏色等屬性。

5.2.5SVG與CSS、JavaScript的結(jié)合

SVG可以與CSS和JavaScript相結(jié)合，實(shí)現(xiàn)豐富的交互效果和動(dòng)畫。

5.3HTML5動(dòng)畫與過(guò)渡效果

HTML5提供了豐富的動(dòng)畫和過(guò)渡效果支持，使得網(wǎng)頁(yè)設(shè)計(jì)更加生動(dòng)有趣。本

節(jié)將介紹HTML5中的動(dòng)畫和過(guò)渡效果。

5.3.1CSS3動(dòng)畫

CSS3引入了動(dòng)畫功能，通過(guò)keyframes規(guī)則定義動(dòng)畫序列，然后使用

animation屬性應(yīng)用到元素上。

5.3.2CSS3過(guò)渡效果

過(guò)渡效果是指在某個(gè)屬性值發(fā)生變化時(shí)，以平滑的方式過(guò)渡到新值?？梢酝?/p>

過(guò)transition屬性實(shí)現(xiàn)。

5.3.3Canvas動(dòng)畫

Canvas動(dòng)畫通常使用JavaScript定時(shí)器(如setinterval或

requestAnimationFrane)來(lái)實(shí)現(xiàn)。

5.3.4SVG動(dòng)畫

SVG動(dòng)畫可以使用SMIL(SynchronizedMultimediaIntegrationLanguage)

實(shí)現(xiàn)，也可以與CSS3動(dòng)畫和JavaScript相結(jié)合。

通過(guò)本章的學(xué)習(xí)，讀者應(yīng)掌握HTML5圖形與動(dòng)畫的基本知識(shí)和技能，為后續(xù)

開發(fā)實(shí)踐打下堅(jiān)實(shí)的基礎(chǔ)。

第6章HTML5客戶端存儲(chǔ)

6.1WebStorage

WebStorage為Web應(yīng)用提供了在客戶端存儲(chǔ)數(shù)據(jù)的手段，相較于傳統(tǒng)的

Cookie存儲(chǔ)方式，其存儲(chǔ)容量更大，功能更優(yōu)。WebStorage包含兩種存儲(chǔ)方式:

localstorage和sessionStorageo

6.1.1localstorage

localStorage提供永久性存儲(chǔ)數(shù)據(jù)的能力，存儲(chǔ)的數(shù)據(jù)在頁(yè)面會(huì)話之間持

久存在，不會(huì)因?yàn)闀?huì)話結(jié)束而清除。

特點(diǎn)：

存儲(chǔ)容量較大，一般達(dá)到5MB左右。

數(shù)據(jù)僅在客戶端存儲(chǔ)，不會(huì)發(fā)送到服務(wù)器。

存儲(chǔ)的數(shù)據(jù)類型為字符串，對(duì)于復(fù)雜類型的數(shù)據(jù)需要先進(jìn)行序列化。

6.1.2sessionStorage

sessionStorage提供臨時(shí)性存儲(chǔ)數(shù)據(jù)的能力，存儲(chǔ)的數(shù)據(jù)僅在當(dāng)前會(huì)話中

有效，一旦會(huì)話結(jié)束，存儲(chǔ)的數(shù)據(jù)將被清除。

特點(diǎn)：

存儲(chǔ)容量與localStorage相當(dāng)。

數(shù)據(jù)僅在當(dāng)前會(huì)話有效，適用于存儲(chǔ)一些臨時(shí)性、敏感性的數(shù)據(jù)。

使用方法與localStorage類似。

6.2IndexedDB數(shù)據(jù)庫(kù)

IndexedDB是一種在瀏覽器中實(shí)現(xiàn)的非關(guān)系圖數(shù)據(jù)庫(kù)，提供了豐富的查詢功

能，支持存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)。IndexedDB適用于需要存儲(chǔ)大量數(shù)據(jù)，并旦對(duì)這些數(shù)

據(jù)進(jìn)行復(fù)雜查詢的場(chǎng)景。

6.2.1IndexedDB的基本概念

數(shù)據(jù)庫(kù)：存儲(chǔ)數(shù)據(jù)的容器C

對(duì)象倉(cāng)庫(kù)：數(shù)據(jù)庫(kù)中的一個(gè)表，用于存儲(chǔ)數(shù)據(jù)。

索引：用于快速查找數(shù)據(jù)。

事務(wù)：一組操作，要么全部成功，要么全部失敗。

6.2.2IndexedDB的操作流程

（1）打開數(shù)據(jù)庫(kù)：使用indexcdDB.open（J方法打開數(shù)據(jù)庫(kù)。

（2）創(chuàng)建對(duì)象倉(cāng)庫(kù)：在數(shù)據(jù)庫(kù)中創(chuàng)建一個(gè)對(duì)象倉(cāng)庫(kù)用于存儲(chǔ)數(shù)據(jù)。

（3）創(chuàng)建索引：在對(duì)象倉(cāng)庫(kù)上創(chuàng)建索引，提高查詢效率。

（4）執(zhí)行事務(wù)：在事務(wù)中執(zhí)行增刪改查操作。

（5）關(guān)閉數(shù)據(jù)庫(kù)：使用數(shù)據(jù)庫(kù)實(shí)例的closeO方法關(guān)閉數(shù)據(jù)庫(kù)。

6.3離線應(yīng)用

離線應(yīng)用是指在網(wǎng)絡(luò)不可用的情況下，仍然可以正常使用的Web應(yīng)用。HTML5

提供了離線應(yīng)用的支持，通過(guò)以下技術(shù)實(shí)現(xiàn)：

6.3.1應(yīng)用緩存（ApplicationCache）

應(yīng)用緩存允許Web應(yīng)用將資源緩存到本地，從而在離線狀態(tài)下也能訪問(wèn)這些

資源。

6.3.2離線資源清單（Manifest）

離線資源清單是一個(gè)文本文件，用于指定需要緩存的資源。瀏覽器會(huì)根據(jù)資

源清單并緩存指定的資源。

6.3.3離線應(yīng)用的生命周期事件

離線應(yīng)用可以監(jiān)聽以下生命周期事件：

online：網(wǎng)絡(luò)連接恢復(fù)時(shí)觸發(fā)。

offline：網(wǎng)絡(luò)連接斷開時(shí)觸發(fā)。

updating：瀏覽器正在更新資源時(shí)觸發(fā)。

updated：瀏覽器完成更新資源時(shí)觸發(fā)。

通過(guò)以上技術(shù)，可以開發(fā)出在離線狀態(tài)下仍然可以正常使用的Web應(yīng)用。

第7章HTML5地理位置與設(shè)備訪問(wèn)

7.1地理位置API

HTML5地理位置API允許Web應(yīng)用獲取用戶的地理位置信息。這一功能的實(shí)

現(xiàn)主要依賴于navigator對(duì)象中的gpolocation屬性c本節(jié)將詳細(xì)介紹地理位置

API的原理、用法及注意事項(xiàng)。

7.1.1地理位置API原理

地理位置APT通過(guò)瀏覽器與設(shè)備的GPS、WiFi或移動(dòng)網(wǎng)絡(luò)等模塊交互，獲取

用戶的經(jīng)緯度信息。瀏覽器會(huì)向用戶請(qǐng)求允許獲取地理位置信息的權(quán)限，用戶同

意后，Web應(yīng)用才能獲取到相應(yīng)的數(shù)據(jù)。

7.1.2使用地理位置API

要使用地理位置API,首先需要檢查瀏覽器是否支持該功能：

javascript

if(navigator,geolocation){

//瀏覽器支持地理位置API

}else{

//瀏覽器不支持地理位置API

}

獲取用戶當(dāng)前位置：

javascript

navigator,geolocation.getCurrentPosition(successCalIback,

errorCallback,options);

其中，'successCallback為獲取位置成功的回調(diào)函數(shù)，errorCalIback

為獲取位置失敗的回調(diào)函數(shù)，'options'為可選參數(shù)，用于設(shè)置獲取位置的相關(guān)

選項(xiàng)。

7.1.3注意事項(xiàng)

在使用地理位置API時(shí)，需要關(guān)注以下事項(xiàng)：

(1)用戶隱私：獲取用戶地理位置信息涉及用戶隱私，必須保證用戶同意。

(2)位置精度：地理位置API返回的位置信息可能存在誤差，應(yīng)根據(jù)實(shí)際

需求調(diào)整精度。

(3)跨域限制：出于安全考慮，瀏覽器對(duì)跨域請(qǐng)求獲取地理位置信息有限

制。

7.2設(shè)備方向與運(yùn)動(dòng)

HTMI.5提供了設(shè)備方向與運(yùn)動(dòng)APT,允許Wch應(yīng)用獲取設(shè)備的方向和運(yùn)動(dòng)信

息。本節(jié)將介紹設(shè)備方向與運(yùn)動(dòng)API的原理和使用方法。

7.2.1設(shè)備方向與運(yùn)動(dòng)API原理

設(shè)備方向與運(yùn)動(dòng)APT通過(guò)設(shè)備的陀螺儀、加速計(jì)等傳感器獲取設(shè)備的運(yùn)動(dòng)狀

態(tài)。瀏覽器會(huì)監(jiān)聽設(shè)備的運(yùn)動(dòng)事件，Web應(yīng)用可以通過(guò)這些事件獲取到設(shè)備的相

關(guān)信息。

7.2.2使用設(shè)備方向與運(yùn)動(dòng)API

要使用設(shè)備方向與運(yùn)動(dòng)API,首先需要檢查瀏覽器是否支持該功能：

javascript

if(window.DeviceMotionEvent){

//瀏覽器支持設(shè)備方向與運(yùn)動(dòng)API

}else{

//瀏覽器不支持設(shè)備方向與運(yùn)動(dòng)API

}

監(jiān)聽設(shè)備運(yùn)動(dòng)事件：

javascript

window.addEventListener(tdevicemotion',deviceMotionHandler,

false);

其中，'deviceMotionHandler'為處理設(shè)備運(yùn)動(dòng)事件的函數(shù)。

7.2.3注意事項(xiàng)

在使用設(shè)備方向與運(yùn)動(dòng)API時(shí)，需要注意以下事項(xiàng)：

（1）用戶隱私：獲取設(shè)備運(yùn)動(dòng)信息可能涉及用戶隱私，保證用戶同意。

（2）電池消耗:持續(xù)使用設(shè)備方向與運(yùn)動(dòng)AF1可能導(dǎo)致設(shè)備電池消耗加快。

（3）傳感器誤差：設(shè)備的傳感器可能存在誤差，應(yīng)根據(jù)實(shí)際需求調(diào)整精度。

7.3訪問(wèn)移動(dòng)設(shè)備功能

HTML5提供了一系列APL允許Web應(yīng)用訪問(wèn)移動(dòng)設(shè)備的硬件功能，如攝像

頭、麥克風(fēng)、振動(dòng)器等。本節(jié)將介紹如何使用這些APT。

7.3.1訪問(wèn)攝像頭與麥克風(fēng)

使用'〈inputtype=〃file〃>'標(biāo)簽，可以訪問(wèn)移動(dòng)設(shè)備的攝像頭和相冊(cè)：

<input.captiirp=zzcampra/z>

<inputtype="fi：e〃capture="microphone”）

還可以使用WebRTC技術(shù)實(shí)現(xiàn)實(shí)時(shí)視頻和音頻通信。

7.3.2振動(dòng)

使用VibrationAPI,可以在移動(dòng)設(shè)備上實(shí)現(xiàn)振動(dòng)效果：

javascript

navigator,vibrato（1000）;//振動(dòng)1秒

7.3.3訪問(wèn)其他設(shè)備功能

HTML5還提供了其他API,如訪問(wèn)設(shè)備的聯(lián)系人、短信、電話等。這些API

的使用方法與上述類似，需要檢查瀏覽器支持情況，并根據(jù)相關(guān)API規(guī)范進(jìn)行調(diào)

用。

7.3.4注意事項(xiàng)

在使用訪問(wèn)移動(dòng)設(shè)備功能的API時(shí)，需要注意以下事項(xiàng)：

（1）用戶權(quán)限：保證獲取用戶同意，避免未經(jīng)授權(quán)訪問(wèn)設(shè)備功能。

（2）兼容性：不同移動(dòng)設(shè)備的API支持程度可能不同，需要進(jìn)行充分測(cè)試。

（3）安全性：避免濫用設(shè)備功能，保證用戶隱私和數(shù)據(jù)安全。

第8章HTML5通信與協(xié)作

8.1跨文檔消息傳遞

跨文檔消息傳遞（CrossOriginMessaging）是HTML5中的一項(xiàng)重要特性,

允許來(lái)自不同源（協(xié)議、域名和端口）的文檔之間進(jìn)行安全的通信。本節(jié)將介紹

如何使用window.postMessage方法實(shí)現(xiàn)跨文檔消息傳遞。

8.1.1window.postMessage方法

window.postMessage方法允許一個(gè)窗口向另一個(gè)窗口發(fā)送消息，無(wú)論這兩

個(gè)窗口是否屬于同一個(gè)域。其基本語(yǔ)法如下：

targetWindow.postMessage（message,targetOrigin,[transfer]）;

其中，targelWindow表示目標(biāo)窗口的引用；message是要發(fā)送的消息內(nèi)容；

largelOrigin指定目標(biāo)窗口的源，可以是字符串"〃表示不限制源；transfer（可

選）是一個(gè)數(shù)組，包含一系列Transferable對(duì)象，用于向目標(biāo)窗口傳遞所有權(quán)。

8.1.2接收消息

要接收通過(guò)postMpssagp發(fā)送的消息，需要在窗口中監(jiān)聽massaga事件八以

下是一個(gè)示例：

javascript

window.addEventListener（^message^,function（event）{

//僅處理來(lái)自預(yù)期源的消息

if（event,origin!==〃預(yù)期源〃）{

return;

}

//處理接收到的消息

console,log（〃收到消息：〃，event,data）;

}）；

8.2WebWorkers

WebWorkux-5是HTML5中引入的一項(xiàng)特性，允許開發(fā)者在瀏覽器后臺(tái)運(yùn)行

JavaScript腳本，而不影響頁(yè)面功能。WebWorkers可以分為兩種類型:專用

WebWorkers和共享WebWorkerso

8.2.1專用WebWorkers

專用WebWorkers僅能被創(chuàng)建它的頁(yè)面訪問(wèn)。創(chuàng)建專用WebWorker的步驟

如下:

(1)創(chuàng)建一個(gè)JavaScript文件，包含要在后臺(tái)運(yùn)行的腳本。

(2)在主頁(yè)面中創(chuàng)建一個(gè)WebWorker實(shí)例，加載該腳本文件。

以下是一個(gè)示例：

javascript

//創(chuàng)建專用WebWorker

varworker=newWorker("worker.js〃)；

//監(jiān)聽來(lái)自WebWorker的消息

worker.addEventListener(^message^,function(event){

console.log("收到來(lái)自WebWorker的消息：〃，event,data);

})；

//向WebWorker發(fā)送消息

workpr.post.Mpssagp(^HPIIO,WebWcrker!”);

8.2.2共享WebWorkers

共享WebWorkers可以被同一域名下的多個(gè)頁(yè)面訪問(wèn)。創(chuàng)建共享WebWorker

的步驟如下：

(1)創(chuàng)建一個(gè)共享的JavaScript文件，包含要在后臺(tái)運(yùn)行的腳本。

(2)在每個(gè)頁(yè)面中創(chuàng)建一個(gè)共享呢bWorker實(shí)例，加載該腳本文件。

以下是一個(gè)示例：

javascript

//創(chuàng)建共享WebWorker

varsharedWorker=newSharedWorker(^sharedWorker.jsz，);

//連接到共享WebWorker

sharedWorker.port,start0;

//監(jiān)聽來(lái)自共享呢bWorker的消息

sharedWorker.port.addEventListener(，，message，z,function(event){

console.log("收到來(lái)自共享WebWorker的消息：〃，event,data);

})；

//向共享WebWorker發(fā)送消息

sharedWorker.port.postMessageC'Hello,SharedWebWorker!”);

8.3WebSockets

WebSockets是一種全雙工通信協(xié)議，允許瀏覽器和服務(wù)器之間進(jìn)行實(shí)時(shí)、

雙向通信。與傳統(tǒng)的HTTP請(qǐng)求/響應(yīng)模式不同，WebSockets在客戶端和服務(wù)器

之間建立一個(gè)持久的連接，從而實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)傳輸。

8.3.1創(chuàng)建WebSocket連接

要?jiǎng)?chuàng)建WebSocket連接，需要使用WebSocket構(gòu)造函數(shù)，并提供服務(wù)器的

WebSocketURL。以下是一個(gè)示例：

javascript

//創(chuàng)建WebSocket連接

varsocket=newWebSocket(〃ws:〃examp：c./sockctServcr");

//連接打開時(shí)觸發(fā)

sockpt.,onoppn=function(pvont.){

console.log(，，WebSocket連接己打開：〃，event);

//向服務(wù)器發(fā)送消息

socket,send(^Hello,Server!”);

)；

//接收到服務(wù)器消息時(shí)觸發(fā)

socket,onmessage=function(event){

console,log(〃收到服務(wù)器消息：〃，event,data);

)；

//連接關(guān)閉時(shí)觸發(fā)

socket,onclose二function(event){

console.log(，，WebSocket連接已關(guān)閉：〃，event);

);

//連接出錯(cuò)時(shí)觸發(fā)

socket,onerror=function(error){

console.log(z，WebSocket連接出錯(cuò):",error);

}；

8.3.2使用WebSockets進(jìn)行通信

通過(guò)WebSockets,可以在客戶端和服務(wù)器之間傳輸文本和二進(jìn)制數(shù)據(jù)，以

下是一個(gè)簡(jiǎn)單的示例，展示如何通過(guò)WebSockets發(fā)送和接收文本消息。

服務(wù)器端(Node,js)：

javascript

constWebSocketServer=require(^ws^).Server;

constwss=newWebSocketServer({port:8080);

wss.on("connection”,function(socket)[

socket,on("message”,function(message){

console.log("收到客戶端消息："，message);

//回復(fù)客戶端消息

socket,send(，zHello,Client!/z);

1):

})；

客戶端：

javascript

//創(chuàng)建WebSocket連接

varsocket=newWebSocket(z，ws://localhost:8080^);

//監(jiān)聽打開、消息、關(guān)閉事件

socket,onopen=function(event){

console,log(〃連接已打開：〃，event);

//向服務(wù)器發(fā)送消息

socket.sendC'Hello,Server!z，);

)；

socket,oi皿cssugc=fuiiclion(event){

console.log(〃收到服務(wù)器消息："，event,data);

}；

socket,enclose=function(event){

console,log(〃連接已關(guān)閉：〃，event);

}；

第9章HTML5樣式與布局

9.1CSS3選擇器與屬性

CSS3提供了豐富的選擇器與屬性，使得網(wǎng)頁(yè)樣式設(shè)計(jì)更加靈活和多樣化。

本節(jié)將詳細(xì)介紹CSS3的選擇器與屬性。

9.1.1CSS3選擇器

CSS3選擇器主要包括以下幾類：

(1)標(biāo)簽選擇器：通過(guò)HTML標(biāo)簽名來(lái)選擇元素。

(2)類選擇器：通過(guò)元素的class屬性值來(lái)選擇元素。

(3)TD選擇器：通過(guò)元素的id屬性值來(lái)選擇元素。

(4)屬性選擇器：通過(guò)元素的屬性及其值來(lái)選擇元素。

(5)偽類選擇器：通過(guò)元素的特定狀態(tài)來(lái)選擇元素，如：hover、：focus

等.

(6)組合選擇器：將多個(gè)選擇器組合在一起，實(shí)現(xiàn)更復(fù)雜的選擇功能。

9.1.2CSS3屬性

CSS3屬性主要包括以下幾類：

(1)文本與字體屬性:如fontsize、fontfamily、textalign^lineheight

等。

(2)顏色與背景屬性：如color>backgroundcolor、backgroundimage、

backgroundposition等。

(3)盒模型屬性:如margin、padding、border、width、height等。

(4)布局屬性：如display、float、position、flex等。

(5)變形與動(dòng)畫屬性:如transform、animation、transition等。

9.2布局與定位

布局與定位是網(wǎng)頁(yè)設(shè)計(jì)中非常重要的一環(huán)，合理的布局與定位可以使網(wǎng)頁(yè)內(nèi)

容更加清晰、易于閱讀。

9.2.1常見布局方式

(1)流式布局：元素按照文檔流從左到右