HTML5筆記-增強版

時間 2019-11-17

標籤 html5 html 筆記增強欄目 HTML5 简体版

原文原文鏈接

新增的語法結構表單驗證

一、新的頁面結構以及寬鬆的語法規範：
<!doctype html>
<meta charset=「utf-8」/>

二、新的結構化元素：語義化標籤：

<header></header> 頁眉。主要用於頁面的頭部的信息介紹，也可用於板塊頭部

<hgroup></hgroup> 頁面上的一個標題組合。一個標題和一個子標題，或者標語的組合
<hgroup>
<h1>妙味課堂</h1>
<h2>帶您進入富有人情味的IT培訓</h2>
</hgroup>

<nav></nav> 導航（包含連接的的一個列表）比ul少了一些默認的侷限性
<nav><a href=「#」>連接</a><a href=「#」>連接</a></nav>
<nav>
<p><a href=「#」>首頁</a></p>
<p><a href=「#」>課堂</a></p>
</nav>

<footer></footer>頁腳頁面的底部或者版塊底部

<section> <section> 頁面上的版塊。用於劃分頁面上的不一樣區域,或者劃分文章裏不一樣的節

<article></ article > 用來在頁面中表示一套結構完整且獨立的內容部分。能夠用來呈現論壇的一個帖子，雜誌或報紙中的一篇文章，一篇博客，用戶提交的評論內容，可互動的頁面模塊掛件等。

<aside></ aside> 元素標籤能夠包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其餘相似的有別與主要內容的部分
aside 的內容應該與 article 的內容相關：
被包含在<article>中做爲主要內容的附屬信息部分，其中的內容以是與當前文章有關的引用、詞彙列表等
在<article>以外使用，做爲頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容能夠是友情連接、附屬導航或廣告單元等。

<figure> < figure > 用於對元素進行組合。通常用於圖片或視頻。

<figcaption> <figcaption> figure的子元素，用於對figure的內容進行說明。
<figure>
<img src=「miaov.png」/>(注意沒有alt)
<figcaption> 妙味課堂 photo © 妙味趣學</figcaption>
</figure>

<time></time>用來表現時間或日期
<p> 咱們在天天早上 <time>9:00</time> 開始營業。</p>
<p> 我在 <time datetime="2008-02-14">情人節</time> 有個約會。 </p>

<datalist></datalist>選項列表。與 input 元素配合使用，來定義 input 可能的值。
當輸入的時候，會出現下拉菜單，裏面有可能的選項。當輸入選項前幾個字母會匹配含有的選項值。
<input type="text" list="valList" />
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html">html</option>
<option value="css">css</option>
</datalist>

<details></details>用於描述文檔或文檔某個部分的細節。該元素用於摘錄引用等，應該與頁面的主要內容區分開的其餘內容
屬性： Open 進入頁面時屬性默認展開

< summary></summary> details 元素的標題
<details>
<summary>妙味課堂</summary> （顯示）
<p>國內將知名的IT培訓機構</p> （隱藏）
</details>

<dialog></dialog>定義一段對話：
<dialog>
<dt>老師</dt>
<dd>2+2 等於？</dd>
<dt>學生</dt>
<dd>4</dd>
<dt>老師</dt>
<dd>答對了！</dd>
</dialog>

<address></address> 定義文章或頁面做者的詳細聯繫信息

<mark></mark> 須要標記的詞或句子（字體的背景默認爲黃色標記）

<keygen>給表單添加一個公鑰
<form action="http://www.baidu.com" method="get">
用戶: <input type="text" name="usr_name" />
公鑰: <keygen name="security" />
<input type="submit" />
</form>

<progress><progress>定義進度條
<progress max="100" value="76">
<span>76</span>%
</progress>

三、IE下的兼容

1）標籤

針對IE6-8這些不支持HTML5語義化標籤的瀏覽器咱們可使用javascript建立標籤來解決他們
方法以下：
在頁面的頭部加下：
<script>
document.createElement(「header」);
document.createElement(「nav」);
document.createElement(「footer」);
……
</script>

2）樣式

HTML5語義化標籤在IE6-8下，咱們用js建立出來以後，他是不會有任何默認樣式的甚至是 display，因此在樣式表裏要對這些標籤訂義一下它默認的display，通常爲display：block

3)直接引入兼容插件

四、表單forms

1）新的輸入型控件：type=" "

email : 電子郵箱文本框，跟普通的沒什麼區別。當輸入不是郵箱的時候，驗證通不過。移動端的鍵盤會有變化。
tel : 電話號碼
url : 網頁的URL
search : 搜索引擎。chrome下輸入文字後，會多出一個關閉的X
range : 特定範圍內的數值選擇器。屬性：min、max、step( 步數 )
number : 只能包含數字的輸入框
color : 顏色選擇器
datetime : 顯示完整日期（UTC）
datetime-local : 顯示完整日期，不含時區
time : 顯示時間，不含時區
date : 顯示日期
week : 顯示周
month : 顯示月

2）新的表單屬性

placeholder : 輸入框提示信息
autocomplete : 是否保存用戶輸入值，下次輸入顯示歷史輸入內容。默認爲on，關閉提示選擇off
autofocus : 指定表單獲取輸入焦點
list和datalist : 爲輸入框構造一個選擇列表
list值爲datalist標籤的id
required : 此項必填，不能爲空
pattern : 正則驗證 pattern="\d{1,5}"
formaction 在submit裏定義提交地址。
保存到草稿：
<input type="submit" value="保存至草稿箱" formaction="http://www.qq.com" />

五、表單驗證

表單驗證
Invalid事件 : 驗證反饋 input.addEventListener('invalid',fn,false)
阻止默認驗證：ev.preventDefault()
formnovalidate屬性 : 關閉驗證

validity對象，經過下面的valid能夠查看驗證是否經過，若是八種驗證都經過返回true，一種驗證失敗返回false

oText.addEventListener("invalid",fn1,false);
ev.preventDefault()

valueMissing : 輸入值爲空時
typeMismatch : 控件值與預期類型不匹配
patternMismatch : 輸入值不知足pattern正則
tooLong : 超過maxLength最大限制
rangeUnderflow : 驗證的range最小值
rangeOverflow：驗證的range最大值
stepMismatch: 驗證range 的當前值是否符合min、max及step的規則
customError 不符合自定義驗證
setCustomValidity(); 自定義驗證

eg:
var oText=document.getElementById("text");
oText.addEventListener("invalid",fn,false);
function fn()
{
alert(this.validity.patternMismatch);// 八種驗證不匹配不一致的時候返回true
ev.preventDefault();
}

HTML5新特性

一、新的選擇器：

querySelector 只能選擇一組中的第一個元素：
var oDiv = document.querySelector('#box'); //也可通.class和[title=box]選擇

querySelectorAll 獲取一組元素：
var aDiv = document.querySelectorAll('.box');

getElementsByClassName：經過class獲取元素
var aDiv = document.getElementsByClassName('box'); //能夠獲取一組元素

獲取class列表屬性：classList：
length : class的長度
add() : 添加class方法
remove() : 刪除class方法
toggle() : 切換class方法

var oDiv = document.getElementById('div1');
alert( oDiv.classList ); //相似與數組的對象
alert( oDiv.classList.length ); //3
oDiv.classList.add('box4');
oDiv.classList.remove('box2');
oDiv.classList.toggle('box2');//當box2存在時則刪除，當box2不存在時則添加

二、JSON的新方法

JSON.parse() : 把字符串轉成js。字符串中的屬性要嚴格的加上引號。
JSON.stringify() : 把json轉化成字符串。會自動的把雙引號加上。

新方法與eval的區別：
eval : 能夠解析任何字符串變成JS
parse : 只能解析JSON形式的字符串變成JS (安全性要高一些)

新方法的應用：能夠深度克隆新對象，爲了防止對象的引用形成互相的影響能夠進行：

淺拷貝：for in
var a = {
name : 'hello'
};

var b = {};

for(var attr in a){
b[attr] = a[attr];
}

b.name = 'hi';

alert( a.name ); //hello

深拷貝：

var a = {
name : { age : 100 }
};

var str = JSON.stringify(a);

var b = JSON.parse(str);

b.name.age = 200;

alert( a.name.age ); //100

如何其餘瀏覽器作到兼容：(IE8如下不支持)
http://www.json.org/去下載json2.js

三、data自定義數據

不少庫都採用自定義數據，使得JS與HTML進行分離，好比jQuery mobile

dataset：

data-name : dataset.name
data-name-first : dataset.nameFirst

eg:

<div id="div1" data-miao="喵" data-miao-all="喵">div</div>

var oDiv = document.getElementById('div1');

//JS獲取自定義屬性：
oDiv.dataset.miao

oDiv.dataset.miaoAll

四、延遲加載JS

JS的加載會影響後面的內容加載。不少瀏覽器都採用了並行加載JS，但仍是會影響其餘內容。

defer : 延遲加載，會按順序執行，在onload執行前被觸發：

<script src="a.js" defer="defer"></script>
<script src="b.js" defer="defer"></script>

async : 異步加載，加載完就觸發，有順序問題，有依賴關係的JS不要異步

<script src="a.js" async ="async"></script>
<script src="b.js" async ="async"></script>

Labjs庫：能夠處理是否有依賴關係的JS，來控制誰應該異步加載。

五、歷史管理 :

觸發歷史管理：

1）經過跳轉頁面

2）onhashchange ：改變hash值來管理

eg : 點擊按鈕隨機產生數字，屢次點擊，能夠點擊瀏覽器後退按鈕進行後退

var json = {};

function randomNum(){ .. .. }//隨機獲取數字的函數

oInput.onclick = function(){

var num = Math.random();

var arr = randomNum(35,7);

json[num] = arr;

oDiv.innerHTML = arr;

window.location.hash = num;

};

window.onhashchange = function(){

oDiv.innerHTML = json[window.location.hash.substring(1)];

};

3）history ：

服務器下運行

pushState : 三個參數：數據標題(都沒實現) 地址(可選)

popstate事件 : 讀取數據 event.state

注意：網址是虛假的，需在服務器指定對應頁面，否則刷新找不到頁面

eg : 點擊按鈕隨機產生數字，屢次點擊，能夠點擊瀏覽器後退按鈕進行後退

function randomNum(){ .. .. }//隨機獲取數字的函數

Input.onclick = function(){

var arr = randomNum(35,7);

history.pushState(arr,'',arr);

oDiv.innerHTML = arr;

};

window.onpopstate = function(ev){

oDiv.innerHTML = ev.state;

};

拖放：

拖放事件：

1）draggable ：設置爲true，元素就能夠拖拽了

2）拖拽元素事件 : 事件對象爲被拖拽元素

dragstart , 拖拽前觸發

drag ,拖拽前、拖拽結束之間，連續觸發

dragend , 拖拽結束觸發

3）目標元素事件 : 事件對象爲目標元素

dragenter , 進入目標元素觸發，至關於mouseover

dragover ,進入目標、離開目標之間，連續觸發

dragleave , 離開目標元素觸發，至關於mouseout

drop , 在目標元素上釋放鼠標觸發

eg：

oDiv.ondragenter = function(){

this.style.background = 'blue';

};

oDiv.ondragover = function(ev){

//enter和leave之間連續觸發

//要想觸發drop事件，就必須在dragover當中阻止默認事件

var ev = ev || window.event;

ev.preventDefault();

};

oDiv.ondragleave = function(){

this.style.background = 'red';

};

oDiv.ondrop = function(){

alert(123);

};

eg：拖放網頁上子圖片資源：

img1.ondragstart = function(e){

e.dataTransfer.setData("imgId","img1");//設置被拖數據的數據類型和值

}

boxDiv.ondragover = function(e){//ondragover 事件規定在何處放置被拖動的數據。

e.preventDefault();//阻止系統默認的事件

}

boxDiv.ondrop = function (e){//處理drop事件接受釋放的元素

showObj(e.dataTransfer);////顯示事件詳細信息

e.preventDefault();

var img = document.getElementById(e.dataTransfer.getData("imgId"));

e.target.appendChild(img);//把被拖元素追加到放置元素（目標元素）中

}

4）事件的執行順序

事件的執行順序：drop不觸發的時候

dragstart > drag > dragenter > dragover > dragleave > dragend

事件的執行順序：drop觸發的時候(dragover的時候阻止默認事件)

dragstart > drag > dragenter > dragover > drop > dragend

不能釋放的光標和能釋放的光標不同

5）dataTransfer對象

解決火狐下的問題:

必須設置dataTransfer對象才能夠拖拽除圖片外的其餘標籤

dataTransfer對象：

setData() : 設置數據 key和value(必須是字符串)

getData() : 獲取數據，根據key值，獲取對應的value

effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

setDragImage 設置拖拽過程當中的背景圖。三個參數：指定的元素，座標X，座標Y。

files 獲取外部拖拽的文件，返回一個filesList列表。filesList下有個type屬性，返回文件的類型。

aLi[i].ondragstart = function(ev){

var ev = ev || window.event;

ev.dataTransfer.setData('name','hello');

ev.dataTransfer.effectAllowed = 'link';

ev.dataTransfer.setDragImage(oImg,0,0);

};

···

oDiv.ondrop = function(ev){

oUl.removeChild( aLi[ev.dataTransfer.getData('name')] );

}

6）FileReader對象(讀取文件信息)

readAsDataURL ：參數爲要讀取的文件對象，將文件讀取爲DataUrl

onload：當讀取文件成功完成的時候觸發此事件。this. result 來獲取讀取的文件數據，若是是圖片，將返回base64格式的圖片數據

拖放外部圖片資源：

window.onload = function(){

var imgContainer = document.getElementById("imgContainer");

var msgDiv=document.getElementById("msg");

imgContainer.ondragover = function(e){

e.preventDefault();

}

imgContainer.ondrop = function(e){

e.preventDefault();

var f = e.dataTransfer.files[0];

var fileReader = new FileReader();

fileReader.readAsDataURL(f);

fileReader.onload = function(e){

imgContainer.innerHTML=" <img src=\" "+fileReader.result+" \">" // \"爲轉義字符

}

音頻視頻：

controls控件必須寫上

1）爲了兼容瀏覽器添加多個視頻格式：

</video>

2）媒體元素：

controls : 顯示或隱藏用戶控制界面

autoplay : 媒體是否自動播放

loop : 媒體是否循環播放

3）JS設置和只讀元素：

currentTime : 開始到播放如今所用的時間

duration : 媒體總時間(只讀)

volume : 0.0-1.0的音量相對值

muted : 是否靜音靜音爲false 有聲爲true

autobuffer : 開始的時候是否緩衝加載，autoplay的時候，忽略此屬性

paused : 媒體是否暫停(只讀)

ended : 媒體是否播放完畢(只讀)

error : 媒體發生錯誤的時候，返回錯誤代碼 (只讀)

currentSrc : 以字符串的形式返回媒體地址(只讀)

var oA = document.getElementById('a1');

oA.currentTime = 60;

console.log( oA.duration );

console.log( oA.volume );

4）控制函數：

play() : 媒體播放

pause() : 媒體暫停

load() : 從新加載媒體

mozRequestFullScreen()：全屏

var oV = document.getElementById('v1');

var oInput = document.getElementById('input1');

var aS = document.getElementsByTagName('source');

oV.onmouseover = function(){

this.play();

this.mozRequestFullScreen();

};

oV.onmouseout = function(){

this.pause();

};

oInput.onclick = function(){

aS[0].src = 'xxxx.mp4';

aS[1].src = 'yyyy.mp4';

oV.load(); //動態修改播放地址的後要從新加載，執行load()函數，不然修改不生效。

};

5）事件：

loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

oV.addEventListener('ended',function(){ //播放結束後的事件

alert(123);

},false);

6）Video額外特性

poster : 視頻播放前的預覽圖片

width、height : 設置視頻的尺寸

videoWidth、 videoHeight : 視頻的實際尺寸，不管是否修改，顯示默認的尺寸(只讀)

oV.poster = '2.png';

oV.width = 500;

oV.height = 500;

alert( oV.videoWidth );

跨文檔消息通訊、地理信息、本地存儲、離線存儲

一、跨文檔消息通訊

1）同域下的窗口通訊：

iframe方法：

若是咱們要操做一個iframe裏面的dom元素，首先要獲取到iframe引入的頁面的window

var Iframe= document.getElementById('myframe');

Iframe.contentWindow -> 被iframe包含的頁面的window對象

Iframe.contentWindow.document.body.style.background = 'red';

當本頁面和包含頁面不在同一個域名下的時候，這樣操做就會有跨域操做安全限制問題。

若是咱們要在iframe中操做父級頁面：

parent => window 若是當前頁面是頂級，沒有被其餘頁面所包含，那麼parent就是當前頁面的window對象，那麼若是被包含了，則parent就是包含當前頁面的父級頁面的window對象

window : 當前窗口
parent : 父級窗口
top : 頂級窗口（最外面的父級）

parent.document.body.style.background = 'green';

window.open方法：

window.open 返回被打開窗口的window對象

打開以後並改變背景顏色：

window.open('4.window.open.html', '_blank').document.body.style.background = 'red';

window.opener : 返回經過window.open方法打開當前頁面的窗口window

該方法適用在一個頁面（A）用window.open方法打開的新頁面(B)中，來操做以前的頁面(A)

window.opener.document.body.style.background = 'green';

2）跨文檔消息通訊（不一樣域下的窗口通訊）

假設發送消息的域名爲a.com，接收域爲b.com

a.com下:

postMessage對象，能夠經過這個方法給另一個窗口發送信息。

接收消息的window對象.postMessage()

第一個參數：發送的數據
第二個參數：接收數據的域名｛帶上協議（http://）｝

var oMyIframe = document.getElementById('myframe');
oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');

b.com下：

message : 當窗口接收到經過postMessage發送過來的數據的時候觸發

message事件的事件對象下保存了發送過來的內容

ev.data : 發送過來的數據

ev.origin：發送數據的來源

window.addEventListener('message', function(ev) {

alert(ev.data); // 1

alert(ev.origin);// http://www.a.com

alert('我接收到了a.com頁面發送過來的數據，內容是：' + ev.data);

if (ev.data == '1') { // a.com至關於發送指令給b.com，而後b.com確認後做出相應的改變

document.body.style.background = 'red';

}

}, false);

二、ajax新增特性：

同域下的：javascript

var oBtn = document.getElementById('btn');php

oBtn.onclick = function() {css

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText);

}

}

}html

xhr.open('get', 'ajax.php', true);java

xhr.send();git

}web

跨域下的：ajax

在標準瀏覽器下，XMLHttpRequest對象已是升級版本，支持了更多的特性，能夠跨域了。可是，若是想實現跨域請求，還須要後端的相關配合，後端要設置響應頭信息：chrome

<?phpapache

header('Access-Control-Allow-Origin:http://www.a.com'); //這是容許訪問該資源的域

XMLHttpRequest : 增長不少功能，它也不推薦使用onreadystatechange這個事件來監聽，推薦使用新事件onload

XDomainRequest : IE若是想實現跨域請求，則須要使用另一個對象XDomainRequest 去實現

var oXDomainRequest = new XDomainRequest();

oXDomainRequest.onload = function() {

alert(this.responseText);

}

oXDomainRequest.open('get', 'http://www.b.com/ajax.php', true);

oXDomainRequest.send();

ajax實現無刷新頁面上傳（帶進度條）：

進度事件：

upload.onprogress ：上傳過程當中的事件

FormData對象，經過FormData來構建二進制，提交數據

ev.total(發送的總量)

ev.loaded(已發送的數量)

<!DOCTYPE HTML>

<html>

<head>

<title>無標題文檔</title>

<style>

#div1 {width: 300px; height: 30px; border: 1px solid #000; position: relative;}

#div2 {width: 0; height: 30px; background: #CCC;}

#div3 {width: 300px; height: 30px; line-height: 30px; text-align: center; position: absolute; left: 0; top: 0;}

</style>

window.onload = function() {

var oBtn = document.getElementById('btn');

var oMyFile = document.getElementById('myFile');

var oDiv1 = document.getElementById('div1');

var oDiv2 = document.getElementById('div2');

var oDiv3 = document.getElementById('div3');

oBtn.onclick = function() {

//alert(oMyFile.value); //獲取到的是file控件的value值，這個內容是顯示給你看的文字，不是咱們選擇的文件

//oMyFile.files ：file控件中選擇的文件列表對象

//alert(oMyFile.files);

//咱們是要經過ajax把oMyFile.files[0]數據發送給後端

var xhr = new XMLHttpRequest();

xhr.onload = function() {

//var d = JSON.parse(this.responseText);

//alert(d.msg + ' : ' + d.url);

alert('OK,上傳完成');

oDiv2.style.background = "green";

}

var oUpload = xhr.upload;

oUpload.onprogress = function(ev) {

//console.log(ev.total + ' : ' + ev.loaded);

var iScale = ev.loaded / ev.total;

oDiv2.style.width = 300 * iScale + 'px';

oDiv3.innerHTML = iScale * 100 + '%';

}

xhr.open('post', 'post_file.php', true); // 大數據量的用post

xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest'); //設置請求頭信息

var oFormData = new FormData(); //經過FormData來構建二進制，提交數據

oFormData.append('file', oMyFile.files[0]); //file爲後端要接收文件設置的值

xhr.send(oFormData);

}

}

</script>

</head>

<body>

<input type="file" id="myFile" /><input type="button" id="btn" value="上傳" />

<div id="div1">

<div id="div2"></div>

<div id="div3">0%</div>

</div>

</body>

</html>

三、applicationCache離線存儲：

搭建離線應用程序：

①服務器設置頭信息 : （在apache下的配置文件httpd中寫上這一句）

AddType text/cache-manifest .manifest

② html標籤加 :

manifest=「xxxxx.manifest」

③寫manifest文件 : 離線的清單列表（在同目錄下建立xxxxx.manifest）

先寫 :

CACHE MANIFEST

其餘：

FALLBACK : 第一個網絡地址沒獲取到，就走第二個緩存的

NETWORK ：不管緩存中存在與否，均從網絡獲取

eg:

CACHE MANIFEST

2.png

FALLBACK

style1.css style2.css

四、Web Workers:

什麼是worker?

JS的單線程（放入UI隊列的個數，利用定時器解決）

可讓web應用程序具有後臺處理能力，對多線程的支持很是好。

Worker API:

new Worker(‘後臺處理的JS地址’)

利用postMessage傳輸數據

importScripts(‘導入其餘JS文件’)

Worker運行環境:

navgator : appName、appVersion、userAgent、platform

location : 全部屬性都是隻讀的

self : 指向全局 worker 對象

全部的ECMA對象，Object、Array、Date等

XMLHttpRequest構造器

setTimeout和setInterval方法

close()方法，馬上中止worker運行

importScripts方法

五、websocket

互聯網協議：

http://www.ruanyifeng.com/blog/2012/05/internet_protocol_suite_part_i.html
TCP/IP協議
定義了電子設備如何連入因特網，以及數據在它們之間傳輸的標準(如何傳輸)
傳輸數據（協議）類型:Email,www,FTP等
HTTP協議
瀏覽器和萬維網服務器之間互相通訊的規則

HTTP協議特色
功能很強大
採用請求、響應模式，單項通訊
短鏈接，響應完成鏈接就斷開

實時web交互：
股票、聊天室、網遊等應用
若是實現實時應用？服務器推送

什麼是web socket?
基於TCP的雙向的、全雙工的數據鏈接
雙向的：客戶端、服務器端
全雙工：數據的發送與接收，二者同步進行

創建socket應用?
服務器必須支持web socket.
Nodejs的簡介：
Ryan Dahl基於GoogleV8引擎建立的一套用來編寫高性能網絡服務器的JavaScript工具包
Nodejs : 用js去寫服務器應用

一個簡單的web服務器
建立HTTP服務
監聽客戶端HTTP請求鏈接
處理請求響應，向客戶端輸出返回內容
Websocket鏈接
客戶端發送Websocket鏈接請求
服務器監聽來自Websocket鏈接請求
當鏈接成功後，客戶端和服務器能夠隨時接收和發送數據

地理位置與本地存儲

地理位置：

一、地理位置：

經度 : 南北極的鏈接線
緯度 : 東西鏈接的線

二、位置信息從何而來：

IP地址
GPS全球定位系統
Wi-Fi無線網絡
基站

三、地理位置對象navigator.geolocation：

1）單次定位請求：getCurrentPosition(請求成功，請求失敗，數據收集方式)

2）請求成功函數
經度 : coords.longitude
緯度 : coords.latitude
準確度 : coords.accuracy
海拔 : coords.altitude
海拔準確度 : coords.altitudeAcuracy
行進方向 : coords.heading
地面速度 : coords.speed
時間戳 : new Date(position.timestamp)

3）請求失敗函數：
失敗編號：code
0 : 不包括其餘錯誤編號中的錯誤
1 : 用戶拒絕瀏覽器獲取位置信息
2 : 嘗試獲取用戶信息，但失敗了
3 : 設置了timeout值，獲取位置超時了

4）數據收集 : json的形式：
enableHighAcuracy : 更精確的查找，默認false
timeout : 獲取位置容許最長時間，默認infinity
maximumAge : 位置能夠緩存的最大時間，默認0

5）屢次定位請求 : watchPosition(像setInterval)
移動設備有用，位置改變纔會觸發
配置參數：frequency 更新的頻率

6）關閉更新請求 : clearWatch(像clearInterval)

四、百度地圖API<script src="http://api.map.baidu.com/api?v=1.3"></script>

本地存儲：

Cookie：

數據存儲到計算機中，經過瀏覽器控制添加與刪除數據
Cookie的特色：存儲限制，域名100個cookie,每組值大小4KB。客戶端、服務器端，都會請求服務器（頭信息）。頁面間的cookie是共享。

Storage：

sessionStorage：session臨時回話，從頁面打開到頁面關閉的時間段
窗口的臨時存儲，頁面關閉，本地存儲消失
localStorage：永久存儲（能夠手動刪除數據）

Storage的特色：
存儲量限制 ( 5M )。客戶端完成，不會請求服務器處理。sessionStorage數據是不共享、 localStorage共享。

Storage API：

setItem():
設置數據，key\value類型，類型都是字符串
能夠用獲取屬性的形式操做
getItem():
獲取數據，經過key來獲取到相應的value
removeItem():
刪除數據，經過key來刪除相應的value
clear():
刪除所有存儲的值

存儲事件:
當數據有修改或刪除的狀況下，就會觸發storage事件
在對數據進行改變的窗口對象上是不會觸發的
Key : 修改或刪除的key值，若是調用clear(),key爲null
newValue : 新設置的值，若是調用removeStorage(),key爲null
oldValue : 調用改變前的value值
storageArea : 當前的storage對象
url : 觸發該腳本變化的文檔的url
注：session同學口才能夠,例子：iframe操做

HTML5其餘功能:

內容編輯 (至關於都變成了輸入框) ：

contenteditable="true「

語言輸入：

桌面提醒：

window.webkitNotifications.requestPermission();

statue = window.webkitNotifications.checkPermission();

var notification =window.webkitNotifications.createNotification("[imgurl]","Title","Body");

notification.show();