一,瀏覽器引擎
瀏覽器的內核引擎，基本上是四分天下：
Trident: IE 以Trident 作為內核引擎;
Gecko: Firefox 是基於 Gecko 開發;
WebKit: Safari, Google Chrome,傲游3,獵豹瀏覽器,百度瀏覽器 opera瀏覽器 基於 Webkit 開發。
Presto: Opera的內核，但由於市場選擇問題，主要應用在手機平台--Opera mini
注：2013年2月Opera宣布轉向WebKit引擎
注：2013年4月Opera宣布放棄WEBKIT，跟隨GOOGLE的新開發的
blink引擎
智能手機的web瀏覽器：
大多數都是基於webkit的瀏覽器。webkit實際上是一種瀏覽器引擎。同時也是一個開源的項目。其起源可以追溯到Kool Desktop Environment(KDE)。在桌面瀏覽器中，Chrome,Safari。
這篇博客對webkit內核有更詳細的介紹：http://www.cnblogs.com/jyli/archive/2010/01/31/1660355.html
二。html5新特性學習
1.html5新特性
1.<header> 標簽定義文檔的頁眉（介紹信息）。
2.footer
<footer> 標簽定義文檔或節的頁腳。
<footer> 元素應當含有其包含元素的信息。
頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等。
您可以在一個文檔中使用多個 <footer> 元素。
瀏覽器支持同上。
3.nav
<nav>標簽定義導航鏈接
瀏覽器支持同上。
4.aside
<aside>標簽定義頁面的一個頁面的區域，用來表示和頁面相關的主要內容。其作用主要用來裝載非正文類的內容，例如，廣告，側邊欄等。傳統用來進行2欄或者多欄布局。
瀏覽器支持同上。
5.article
<article> 標簽規定獨立的自包含內容。
一篇文章應有其自身的意義，應該有可能獨立於站點的其余部分對其進行分發。
<article> 元素的潛在來源：
- 論壇帖子
- 報紙文章
- 博客條目
- 用戶評論
6.section
<section>標簽定義文檔中的節。
7.hgroup
對網頁或者區段的標題元素進行組合，通常使用多級別的h1-h6標簽節點進行分組，例如副標題，標簽行等。
8.更多的h5新元素
2.頁面結構與移動設備的布局
3.HTML5規范的本地存儲
2個重要的API:Web Storage ,本地數據庫Web SQL Database,這里主要講解Web Storage的用法。
本地存儲Web Storage實際上是Html4中Cookie存儲機制的一個改進版本。然而2中機制的作用不相同，Web Storage是把把網站中有用的信息存儲到本地計算機和移動設備中。然后根據實際需要從本地讀取數據。
Web Storage提供了2種存儲類型API接口。sessionStorage 和localStorage.
他們的生命周期，sessionStorage是在會話期間內有效。而localStorage就存儲在本地，並且存儲是永久的，除非用戶或者程序對其執行刪除操作。
3.1 移動設備的支持
幾乎所有瀏覽器都支持Web Storage存儲
但是，在代碼嚴謹上看，最好還是做檢查：先判斷瀏覽器是否支持
if(window.localStorage){
//瀏覽器支持localStorage
}
if(window.sessionStorage){
//瀏覽器支持sessionStorage
}
localStorage
域內安全，localStorage是基於域的，任何在域內的所欲頁面，都可以訪問localStorage數據。
但仍然存在一個問題，就是各個瀏覽器存儲是獨立的，就是火狐瀏覽器使用localStorage存儲的數據，Chrome不能訪問。
如何存儲一個數據：
localStorage.setItem("name","飛一般的黑客");
取出數據：
localStorage.getItem("name");
或者如果知道localStorage列表中只有一個數據。那么可以通過localStorage.key(1) ;
同樣，通過length屬性，可以知道localStorage存儲了多少個鍵值對。
removeItem()，clear()刪除item操作。
localStorage.removeItem("name");刪除key為name的item
localStorage.clear();用來刪除所有鍵值對
除了字符串，還能存儲json格式的數據
sessionStorage
sessionStorage存儲的數據生命周期只保存在存儲它的當前窗口或由當前窗口新建的新窗口，直到相關聯的標簽頁關閉。使用方法和localStorage基本一致。
4.storage事件監聽
function showStorageEvent(e){
console.log(e) ;
}
4.移動web的離線應用。
1.離線與緩存
離線就是在沒有網絡訪問的情況下，實際上是訪問已下載的離線文件資源，並使web應用程序正常運行。
離線應用和網絡緩存都是都是為了更好地緩存各種文件以提高訪問速度。按兩者對網絡環境的要求有所差別。
- 網絡緩存依賴於網絡的存在，而離線應用在離線狀態下任然可以使用。
- 網頁緩存主要緩存當前頁面相關的內容，也僅限於當前頁面的讀取。離線應用則主要緩存文件，只要設置緩存該文件的頁面，都能在離線狀態下讀取該頁面。
2.移動設備的支持
基本瀏覽器都支持該功能
判斷：
if(window.applicationCache){
//瀏覽器支持離線應用
}
3.applicationCache和manifest
HTML5提供的離線應用，開發者主要注意一下3點特征：
- 離線資源緩存
開發時需要指定哪些資源可以離線緩存。離線應用將使用manifest類型的文件作為需要配置緩存資源文件的配置文件。
- ApplicationCache對象緩存狀態
ApplicationCache記錄着Web應用程序的緩存狀態，開發者可以根據該緩存狀態手動更新資源文件的緩存。
- 在線狀態檢測
HTML5提供了標准的onLine方法用於檢測當前網絡是否在線。開發者可以根據方法判斷瀏覽器是否在線。
manifest文件
離線應用包含一個manifest文件，此文件記錄着哪些文件需要離線緩存。
<!DOCTYPE html>
<html manifest="cache.manifest">
<head lang="en">
<meta charset="UTF-8">
<title>manifest離線應用演示</title>
</head>
<body>
<h5>
<mark>由於manifest文件的MIME類型是text/cahce-manifest,因此web服務需要配置MIME類型，才能識別manifest文件
。例如在tomcat服務器下，開發者需要在web.xml文件中配置manifest類型。</mark>
</h5>
</body>
<html manifest="cache.manifest">
<head lang="en">
<meta charset="UTF-8">
<title>manifest離線應用演示</title>
</head>
<body>
<h5>
<mark>由於manifest文件的MIME類型是text/cahce-manifest,因此web服務需要配置MIME類型，才能識別manifest文件
。例如在tomcat服務器下，開發者需要在web.xml文件中配置manifest類型。</mark>
</h5>
</body>
</html>
由於manifest文件的MIME類型是text/cahce-manifest,因此web服務需要配置MIME類型，才能識別manifest文件
。例如在tomcat服務器下，開發者需要在web.xml文件中配置manifest類型。
例如，web.xml中需要配置，
<mime-mapping>
<extention>manifest</extention>
<mime-type>text/cache-manifest</mime-type>
</mime-mapping>
################################
#需要緩存的文件都方法CACHE MANIFEST下面
#不需要緩存的：放在NETWORK下面
#不需要緩存的：放在NETWORK下面
#FALLBACK后面是如果不存在則請求轉發到下面的頁面
#########################################
applicationCache對象和事件
applicationCache對象記錄着本地緩存的各種狀態及事件。緩存的狀態可以通過window.applicationCache.status獲得。其狀態包括6種。
監聽資源文件下載中：
applicationCache.addEventListener("updateready",function(){
});
判斷瀏覽器是否在線：
if(window.navigator.onLine){
//當前瀏覽器online
}else{
//不在線offline
}
5.移動設備的常見HTML5表單元素
1.豐富的表單屬性
1）form屬性
2.移動web表單的input類型
6.移動web界面樣式
1，css3
1)屬性選擇器
6.移動設備上顯示問題
1.viewport設置自適應屏幕大小
使用：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
該代碼 的主要作用是定義虛擬窗口，，並指定虛擬窗口width屬性為設備width,初始縮放比例為1，且不允許用戶使用手動縮放功能。
2.midea queries如何工作
適應不同分辨率設備的樣式結構。
7.Geolocation地理定位
api:
首次獲取地理位置：
navigator.geolocation.getCurrentPosition(function(pos){
console.log("當前地理位置的緯度："+pos.coords.latitude);
console.log("當前地理位置的經度："+pos.coords.longitude);
console.log("當前經緯度的經度："+pos.coords.accuracy);
console.log("當前地理位置的緯度："+pos.coords.latitude);
console.log("當前地理位置的經度："+pos.coords.longitude);
console.log("當前經緯度的經度："+pos.coords.accuracy);
})