了得網研究生_HTML5實用教程

產品特色

編輯推薦

《HTML5實用教程》分別介紹了HTML5標準中的不同特性，其中包含大量的實例和實例在瀏覽器中的運行效果展示，以及相關的課後習題，來幫助本書的讀者更好地理解並應用HTML5的相關知識，為讀者今後Web應用的開發做鋪墊。同時，還提供了瀏覽器、代碼編輯器、瀏覽器調試工具和服務器環境相關的教學視頻，供讀者參考學習。

內容簡介

《HTML5實用教程》主要針對Web應用開發的初學者，以及對於Web應用開發感興趣的人士，旨在為讀者提供HTML5基礎的教程，使讀者對HTML5的相關特性以及Web應用的開發有一個基本的認識。

目錄

第1章HTML5
1.1HTML5
1.1.1HTML5的發展歷程
1.1.2瀏覽器支持
1.1.3兼容性考量
1.1.4HTML5新特性

第1章HTML5

1.1HTML5

1.1.1HTML5的發展歷程

1.1.2瀏覽器支持

1.1.3兼容性考量

1.1.4HTML5新特性

1.2Web

1.2.1Web的誕生

1.2.2Web的特點

1.2.3Web的工作原理

1.2.4URL

1.3瀏覽器

1.3.1瀏覽器功能

1.3.2瀏覽器構成

1.3.3瀏覽器工作主流程

1.3.4主流瀏覽器

1.4HTML

1.4.1HTML文檔基本結構

1.4.2H素

1.4.3HTML屬性

1.4.4HTML注釋

1.5CSS

1.5.1CSS引用方法

1.5.2CSS語法

1.5.3盒模型

1.5.4CSS定位

1.5.5CSS3

1.6JavaScript

1.6.1JavaScript的歷史

1.6.2JavaScript的特點

1.6.3JavaScript引用方法

1.6.4JavaScript語法

1.6.5JavaScript DOM

1.7代碼編輯器

1.7.1Notepad

1.7.2Sublime Text

1.7.3Adobe Dreamweaver

1.8使用瀏覽器調試

1.8.1H素

1.8.2CSS樣式

1.8.3JavaScript

1.8.4網絡

1.8.5屏幕展示效果

1.9Web服務器環境

1.10習題

第2章表單

2.1表單形式

2.2傳統輸入控件

2.3新的輸入控件

2.4素

2.5新表單屬性

2.6習題

第3章語義化標簽

3.1HTML5之前的語義化標簽

3.2語義化標簽的作用

3.3HTML5新的語義化標簽

3.3.1語義素

3.3.2details和summary

3.3.3figure和figcaption

3.3.4mark

3.4習題

第4章音頻和視頻

4.1音頻

4.1.1audio標簽

4.1.2音頻格式兼容

4.1.3audio標簽屬性

4.1.4audio標簽方法及應用

4.2視頻

4.2.1video標簽

4.2.2視頻格式兼容

4.2.3video標簽長寬設置

4.2.4video標簽屬性

4.2.5video標簽方法及應用

4.2.6視頻字幕

4.3習題

第5章地理定位

5.1瀏覽器如何獲取地理信息

5.2獲取訪客經緯度信息

5.3錯誤處理

5.4地理定位選項

5.5地理定位追蹤

5.6習題

第6章拖放

6.1拖動(Drag)

6.2放下(Drop)

6.3習題

第7章Canvas畫布

7.1Canvas標簽使用

7.2Canvas坐標繫統

7.3線、路徑與形狀

7.3.1繪制線段

7.3.2繪制路徑

7.3.3繪制形狀

7.3.4繪制曲線

7.4繪制文本

7.5圖像

7.5.1繪制圖像

7.5.2圖像縮放與裁剪

7.5.3像素處理

7.6陰影

7.7填充

7.7.1填充圖案

7.7.2填充漸變

7.8組合圖形

7.8.1透明度

7.8.2合成操作

7.8.3裁剪

7.9坐標變換

7.9.1平移

7.9.2旋轉

7.9.3縮放

7.9.4變形

7.10畫布當前狀態的保存與恢復

7.11畫布的保存

7.12習題

第8章Web Worker工作線程

8.1如果沒有Web Worker

8.2Web Worker的創建和使用

8.3錯誤處理

8.4終止線程

8.5共享線程

8.6習題

第9章數據存儲

9.1Web Storage

9.1.1添加和讀取數據

9.1.2刪除數據

9.1.3查找所有數據

9.1.4響應存儲變化

9.1.5數據保存格式

9.1.6對像的保存

9.1.7Web Storage與Cookie比較

9.2本地數據庫

9.2.1IndexedDB

9.2.2創建並連接數據庫

9.2.3添加數據

9.2.4逐個查詢所有數據

9.2.5刪除單條數據

9.2.6查詢單條數據

9.3習題

第10章文件

10.1通過input標簽上傳文件

10.2讀取文件基本信息

10.3自定義input標簽樣式

10.4多文件選取

10.5讀取文件內容

10.5.1讀取文本內容

10.5.2讀取圖片內容

10.6習題

第11章通信

11.1HTTP協議

11.1.1協議特性

11.1.2通信過程

11.1.3HTTP報文結構

11.1.4瀏覽器查看HTTP報文

11.1.5HTTPS

11.2發送表單信息

11.2.1表單的提交

11.2.2POST與GET比較

11.2.3Post/Redirect/Get設計模式

11.3AJAX

11.3.1XML

11.3.2XMLHttpRequest對像

11.3.3AJAX輪詢

11.4服務器發送事件

11.5WebSocket

11.5.1全雙工通信

11.5.2通信過程

11.6Fetch

11.6.1發起fetch請求

11.6.2自定義請求參數

11.6.3發送數據

11.7習題

第12章Service Worker服務線程

12.1Service Worker

12.2Service Worker的前景

12.3Service Worker的生命周期

12.4本章實例代碼

12.5Register注冊

12.6Install安裝

12.7Activate激活

12.8Fetch

12.9緩存策略

12.9.1緩存優先、其次網絡

12.9.2網絡優先、其次緩存

12.9.3僅用緩存

12.9.4僅用網絡

12.9.5緩存與網絡競爭

12.9.6緩存然後網絡

12.10Promise對像簡介

12.10.1回調函數與Promise

12.10.2Promise的狀態

12.10.3Promise的使用

12.11Cache

12.11.1Caches與Cache

12.11.2創建Cache

12.11.3在Cache內添加

12.11.4在Cache內刪除

12.11.5在Cache內匹配

12.11.6獲取所有已創建Cache命名

12.11.7刪除一個Cache

12.12習題

第13章HTML5實例

13.1網格繫統

13.2繪制貪喫蛇和果實

13.2.1繪制果實

13.2.2繪制貪喫蛇

13.3遊戲的動態過程

13.3.1貪喫蛇移動

13.3.2貪喫蛇轉向

13.3.3貪喫蛇喫果實

13.3.4貪喫蛇喫自己遊戲結束

13.4遊戲音效

13.5遊戲分數記錄

13.5.1記錄分數

13.5.2顯示分數

13.5.3動態化實現排行榜

13.5.4完善遊戲頁面

13.6習題

參考文獻

前言

前言

前言

隨著互聯網進入移動互聯時代，以往的HTML4標準已不再能夠適應現實的需求，且僅靠HTML4並不能構建現實中越來越復雜的Web應用，由此大量的插件隨之而來。為了扭轉這一局面，HTML5應運而生。可以說，這是Web應用標準的一次新的統一，得到了各個主流瀏覽器前所未有的支持。HTML5這一被W3C標準化組織不斷維護的標準，還在實驗著一些新的技術，並且這些前沿的技術也在逐步得到各個瀏覽器廠商的支持。HTML5的問世為Web應用的開發者和使用者提供了很多便利，Web應用不必再試圖通過插件來實現各種基本的功能。在HTML5的框架下，就可進行多媒體的添加、H素的拖放、二維圖像的繪制、地理位置的查詢等操作，各種HTML5的新特性很好地滿足了目前Web應用中對媒體、視覺效果等提出的更高要求。為可貴的是，自HTML5標準問世後，它便受到了各個瀏覽器廠商的鼎力支持，Web應用的標準得到了更好的維護，相信這樣的標準可以讓HTML5比它的前輩更加與時俱進，不斷進行自我更新，以應對現實應用中越來越困難的新挑戰。本書主要針對Web應用開發的初學者，以及對Web應用開發感興趣的人士，旨在為讀者提供HTML5基礎的教程，使讀者對HTML5的相關特性以及Web應用的開發有一個基本的認識。全書分13章，分別介紹HTML5標準中的不同特性，其中包含大量的實例以及實例在瀏覽器中的運行效果展示，另外還有相關的課後習題，來幫助讀者更好地理解並應用HTML5的相關知識，為讀者今後進行Web應用的開發做鋪墊。同時，為了讓讀者更方便地進行HTML5代碼編寫與測試，本書還提供了瀏覽器、代碼編輯器、瀏覽器調試工具和服務器環境相關的教學視頻，供讀者參考學習。本書的作者為呂雲翔、劉猛猛，曾洪立、呂彼佳、姜彥華參與了部分內容的編寫並進行了素材整理及配套資源制作等。由於HTML5的標準本身還在不斷更新和發展，其中的一些內容可能會隨著時間的推移而出現變化，加之我們的水平和能力有限，本書難免有疏漏之處，懇請各位同仁和廣大讀者給予批評指正，也希望各位能就實踐過程中的經驗和心得與我們交流（yunxianglu@hotmail.com）。編者2018年5月

在線試讀

第5章地理定位

第5章地理定位

在如今的互聯網時代，無論對於互聯網企業還是互聯網的使用者，地理位置都是一個十分重要的信息。團購網站可以根據用戶的地理位置信息為用戶提供近的娛樂地點，天氣預報網站也可以根據用戶的地理位置信息提供其所在城市未來兩周的天氣狀況等，許許多多的網站都在使用著用戶地理位置信息，盡管地理定位信息可以說是用戶十分重要的個人隱私，也有很多用戶不願意暴露自己的地理位置相關信息。但在另一方面，用戶的地理位置信息確實讓互聯網相關企業能夠更有針對性地為用戶提供服務。不過還是要提醒讀者，在使用不安全的網站，或是有較大公開性的社交平臺時，在決定是否提供地理位置信息前，請三思而後行。不同瀏覽器對於地理定位(Geolocation)API的提供有所差異，尤其是使用PC瀏覽器的讀者，在試著編寫並運行本章代碼的過程中，有很大可能無法得出相應的結果。在此建議，本章地理定位API的代碼，請部署在服務器端，如有條件盡量使用具有GPS定位繫統的移動設備(如智能手機、智能平板)來訪問服務器相關頁面，這樣有更大的可能性成功運行。對於使用PC進行訪問，可能會出現地理位置獲取失敗的情況，建議更換不同瀏覽器進行嘗試。5．1瀏覽器如何獲取地理信息可以通過HTML5地理定位功能從瀏覽器獲取地理位置信息，那麼瀏覽器又是如何知道地理位置信息的呢？瀏覽器大致會通過以下幾種方式來確定地理位置信息，並根據實際情況調整獲取方式，通常在使用瀏覽器定位服務時無法知道瀏覽器到底是使用哪種方式獲取的地理位置信息。1. GPS全球定位繫統(Global Positioning System，GPS)是由美國國防部研制建立的一種具有全方位、全天候、全時段、高精度的衛星導航繫統，能為全球用戶提供低成本、高精度的三維位置、速度和精確定時等導航信息。目前GPS被廣泛用於導航、防盜等設備中，為大量企業或個人提供定位服務。對於HTML5的學習者來說，需要知道的是，目前市面上大量的智能手機、智能平板、導航設備等都配備有GPS繫統，能夠獲取到較高精度的地理定位信息。而GPS定位繫統在筆記本電腦上的配置情況遠不如移動設備。2. IP地址IP地址是互聯網協議地址(Internet Protocol Address)的簡寫。它為互聯網的每一個網絡和每一臺主機分配一個邏輯地址，大部分普通民用網絡IP地址由互聯網服務提供商(Internet Service Provider，ISP)統一提供和管理。HTML5地理定位相關的API有時會通過IP地址來判斷用戶的地理位置信息，很多從PC所獲取的地理定位信息，很大可能是通過IP地址來確定當地互聯網提供商服務器的位置來確定的。盡管這樣的定位方式不夠精確，但是這種方式還是確定了用戶所在城鎮等信息，可以為天氣預報網站、網絡購物平臺所使用。3. 手機信號基站盡管市面上大量的手機都配備了GPS服務，但是GPS服務耗時較長，有時不夠穩定精確。手機信號基站也是一個獲取地理定位信息的選擇。采用這種方法，可以通過計算手機與相鄰各基站間的方位信息，來確定當前設備的地理坐標信息。4. WiFiWiFi定位通過周圍一個或多個的WiFi熱點信息，再通過一些距離計算可以獲取到地理位置信息。這種方法在室內使用且周圍有多個WiFi熱點時精度相對較高且速度較快，它也是瀏覽器獲取地理定位信息的方式之一。5．2獲取訪客經緯度信息經度與緯度共同組成了地理坐標繫統，這樣就可以確定地球上的一點。通過地理定位相關API，可以獲取訪客的地理坐標信息。請看如下實例，其在瀏覽器中的展示效果如圖5．1所示。

圖5．1經緯度信息

文件名：獲取訪客經緯度信息．html

Geolocation

上面這段代碼首先在HTML頁面中添加了一個按鈕並為其指定單擊事件以及事件處理函數getMyLocation()。當運行這個頁面並單擊按鈕後，就會執行getMyLocation()函數。這個函數首先進行了一次判斷，判斷當前瀏覽器環境下是否能夠提供地理定位服務，如果沒有則提醒用戶。這個判斷語句的條件就是navigator對像是否存在geolocation的相關屬性或方法。其中navigator對像包含瀏覽器相關信息及其所運行環境信息，除了地理位置信息外，還包括瀏覽器名稱、版本、瀏覽器所運行環境的操作繫統以及操作繫統語言等信息。相信很多讀者在下載一些軟件時，會發現單擊下載直接獲取的資源就是當前使用的操作繫統版本；有時我們在國外上網，瀏覽一些本應是英文的網站時，發現網站的語言竟然是中文簡體。這類服務很大程度上是依賴於navigator對像的相關信息來實現的。在確定了當前瀏覽器支持地理定位服務後，就可以通過navigator對像下的geolocation的getCurrentPosition()方法來獲取當前坐標。這個方法所需傳入的是一個函數。通常獲取地理定位的方法會耗費一段時間，盡管隻是幾百毫秒，但相比於頁面其他代碼執行的時間而言可以說是十分漫長的了，所以getCurrentPosition()方法應當是異步的，即執行獲取地理位置信息的相關程序不應影響主頁面的運行，所以需要提供一個函數，當獲取地理位置信息成功後來運行這個函數，通過該函數將所獲取的信息反饋給用戶。在這裡傳入的就是displayLocation()函數。在displayLocation()函數中，傳入的參數即是getCurrentPostion()方法所返回的位置信息position對像。通過這個對像來讀取相應的信息。在displayLocation()函數中，我們訪問position對像的coords(地理坐標)屬性下的latitude(緯度)和longitude(經度)，這樣也就獲取了訪客的經緯度信息。如果需要，也可以通過position對像的timestamp屬性來獲取地理定位服務的相應時間戳，即返回地理定位信息後的時間，應注意這個時間戳信息的格式並不是常見可讀的年、月、日、小時、分鐘、秒，而是相對格林威治標準時間1970年1月1日00∶00∶00．000(格裡高利歷，公歷)的以毫秒為單位的偏移量，即常見於計算機和電子設備的時間，它需要進行一定的換算纔可閱讀並應用。當然對於position對像的coords屬性,其包括的不隻是經緯度信息，也包括海撥altitude、方向heading、速度speed等。不過其他信息的獲取依賴於瀏覽器種類版本以及瀏覽器獲取地理信息的方式。對於配備有GPS服務的智能手機或是智能平板來說，獲取海撥、方向、速度等信息的可能性更大。對於許多互聯網企業來說，獲取訪客的地理位置信息之後，就可以大致判斷出訪客的所在國家、所在城市以及與訪客相關的距離等信息，這為下一步提供差異化、具體化的服務帶來了可能。當然作為用戶，個人地理位置信息屬於個人隱私，對於很多人來說處於“被監視”的狀態會有一些不適。所以在通過瀏覽器試圖獲取地理位置信息坐標前，瀏覽器會主動詢問用戶是否共享個人的坐標位置。用戶可以選擇同意或拒絕，也可以通過瀏覽器調整與個人隱私相關的設置，對於某些或是所有的網站始終提供或不提供獲取地理位置信息的權限，這些選擇的權利始終在用戶一邊。5．3錯誤處理相信不少讀者在測試上述代碼時或多或少遇到了一些困難。地理定位相關的API好的測試方法是將代碼部署在服務器上，然後通過配備有GPS的手機或平板訪問，纔更有可能獲取更為準確的地理位置信息。通過PC的瀏覽器訪問服務器的相關代碼，仍有較大可能無法完成獲取。這其中的原因一方面是各個瀏覽器種類和版本對於同一獲取地理位置信息的具體實現有些區別，在實際應用上，效果可能有些差異；另一方面，地理定位的獲取即便對於那些帶有GPS服務的設備來說，也有很多不穩定性，有時費時較長、有時不夠精確。當然，如果訪客拒絕提供自己的相關地理位置信息，獲取地理信息的過程也不能順利完成。所以對於這些常見的問題，錯誤處理是必不可少的，在出現可能的問題導致獲取過程失敗時，需要將錯誤及時告知用戶和相關服務程序。下面通過具體實例來學習地理定位的錯誤處理方法，其在瀏覽器中的展示效果如圖5．2和圖5．3所示。

圖5．2錯誤處理—不可用錯誤

圖5．3錯誤處理—用戶拒絕

文件名：錯誤處理方法．html

Geolocation

上述實例在運行過程中產生了兩個錯誤，分別是地理位置不可用以及用戶拒絕提供地理位置信息。還是之前的navigator對像下geolocation的getCurrentPosition()方法，不同的是這次傳入了兩個函數，來處理這個方法的返回對像。getCurrentPosition()方法有兩個可選的完成函數：個默認是成功之後的完成函數，另一個可選的就是出現錯誤時的完成函數。在實例中，指定完成函數為displayError()並編寫函數的代碼。
function displayError(error){
var errorTypes = {
0:"未知錯誤",
1:"地理定位請求被用戶拒絕",
2:"當前地理定位不可用",
3:"請求超時"
};
var errorMessage = errorTypes［error.code］;
//在以下兩種情況下，錯誤信息還包括一些具體內容
if (error.code == 0 || error.code == 2){
errorMessage = errorMessage "
error.message;
}
var div = document.getElementById("myLocation");
div.innerHTML = errorMessage;
}
在這個displayError()函數中，傳入的參數即是getCurrentPosition()方法在執行出錯時所返回的error對像。error對像包含屬性code，error．code的標準即是errorTypes內所指定的幾種錯誤，在這裡將錯誤信息中文寫入errorTypes數組。如果不寫這一步也可以直接通過error．message來直接獲取相應的錯誤信息。應注意，當錯誤代碼為0或2時，error．message會包含一些具體可能的錯誤，在這裡需要在所構造的錯誤信息字符串的基礎上連接error．message來構成一個完備的錯誤信息。5．4地理定位選項除了上述的兩個成功獲取定位與錯誤處理的完成函數外，getCurrentPosition()方法還可以傳入其他的地理定位選項，分別是enableHighAccuracy、timeout以及maximumAge。可以在上述實例中添加類似如下的代碼片段來具體使用。
options = {
enableHighAccuracy: true,
maximumAge: 60000,
timeout: 30000
};
navigator.geolocation.getCurrentPosition(displayLocation,displayError,options);
這段代碼向getCurrentPosition()方法中傳入了自行定義的options對像。它由enableHighAccuracy、timeout以及maximumAge三個屬性值組成。enableHighAccuracy屬性可選true或false，表示是否要求高精度的地理定位檢測。這個設定的具體執行效果依賴於發起請求的設備是否具有GPS定位繫統服務，否則意義不大。這個屬性的默認值是false，即不執行高精度定位。在沒有具體應用場景的情況下，也盡量避免將其設定為true來支持高精度定位。高精度的定位首先費時；其次對於移動設備來說，還會消耗一些額外的電量。maximumAge屬性設定了緩存地理定位信息的時間長度，以毫秒為單位。在上面的代碼中，maximumAge： 60000代表了一次地理定位數據從獲取到失效的持續時間為60000ms，即60s。這樣就避免了在實際應用中反復調用費時費電的地理定位服務，但在另一方面，當進行類似導航這樣的追蹤服務時，maximumAge的屬性值設定越高，追蹤的效果就越差，可能就不能滿足實際應用場景的需要。默認情況下，maximumAge的屬性值為0，即不進行坐標的緩存，每一次的調用意味著重新向瀏覽器請求地理信息服務，而不是直接使用不久前剛剛獲取的數據。timeout屬性設定了等待地理定位信息服務的時間上限，以毫秒為單位。在上面的代碼中，timeout： 30000即代表了從用戶同意共享地理位置信息開始計時，經過30000ms，即30s後，若還未獲取地理位置信息就會提前結束這一過程，返回一個error對像，且對應的error．code為3，即請求超時。默認情況下一般是沒有請求時間上限的，具體情況可能因瀏覽器種類和版本而異。5．5地理定位追蹤之前我們使用的是navigator下geolocation對像的getCurrentLocation()方法。這個方法在每一次調用之後都會返回發出請求的用戶的地理位置信息。這種方法大部分時候被應用於獲取用戶某一時刻的固定地理位置信息。而在很多的應用場景中，需要持續地對用戶的位置進行跟蹤，比如導航的過程。這時若想完成對目標的追蹤，就不僅僅需要一次地理位置信息獲取，而是需要不斷地獲取地理定位信息。geolocation對像的watchPosition()就可以注冊監聽器，並在設備的地理位置發生變化後被調用，這個方法具體傳入的參數和getCurrentLocation()一樣，需要傳入一個獲取定位成功的回調函數，可選參數分別是之前所提到的錯誤處理函數以及其他三個地理定位選項。大致使用方法如下。
options = {
enableHighAccuracy: true,
maximumAge: 60000,
timeout: 30000
};
if (navigator.geolocation){
id = navigator.geolocation.watchPosition(displayLocation,displayError,options);
}else{
alert("您的瀏覽器不支持地理定位");
}
可以看出，watchPosition()方法與getCurrentLocation方法的使用幾乎相同。所不同的首先是二者的調用次數，watchPosition()在設備地理位置發生改變時會被調用，而getCurrentLocation()方法則是一次性的。然後的一大區別是，watchPosition()方法注冊了一個監聽器，用來監聽地理定位是否變化。當然這個監聽器會占用一些額外的運算資源，所以在一次監測行為結束後，要關閉監聽器，並釋放相應資源。在上述代碼中我們發現，在調用watchPosition()方法時返回了一個id指代當前的監聽行為。所以當我們要取消這次地理定位追蹤時，隻需調用clearWatch()方法並傳入這個id值，即可完成取消。
navigator.geolocation.clearWatch(id);
5．6習題1．分別站在服務提供者和用戶的角度思考地理位置信息所帶來的好處與隱患。2．解釋地理坐標繫的定義與應用。3．瀏覽器可能通過怎樣的方式來獲取用戶的地理位置信息？4．任意選擇地球上的一個城市，通過網絡查詢到這座城市的坐標，構建Web小應用來計算這個城市與當前位置的距離。5．自行搜索地圖廠商所提供的地圖組件，在瀏覽器中展示基於地圖的當前位置，並構建簡單的應用。

書摘插畫

商品搜索

商品分类

【醫學】

【各大出版社】