剛開始學HTML5是從w3school開始的，那只是非常簡單的一些了解，后面開始看一些xiongdilian的HTML5+CSS3的視頻，照着視頻做了一些簡單的demo（需要的童鞋可以聯系我，當然網上也可以下到~~~），后面總感覺還是少了點什么，就開始買書看 看的是唐俊開的《HTML5移動Web開發指南》，以下是一些簡單的知識點，只限於和我一樣的菜鳥瞄兩眼，高手勿入~~~！！！
1 ：
基於HTML5的移動Web應用
Canvas繪圖：通過獲取HTML中的Dom元素Canvas，調用其渲染上下文的Context對象，使用Js進行圖形繪制。
多媒體：Video和Audio （多媒體視頻格式：Ogg MPEG4 WebM）
本地存儲：通過提供key/value方式存儲數據
Web Storage：localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口后，數據會被刪除
Web SQL Database： 通過類似關系數據庫的形式存儲數據（已經是個廢棄的標准了） 三個核心方法 openDatabase transaction executeSql
離線應用：當支持離線應用的瀏覽器檢測到清單文件（Manifest File），中的任何資源文件時，便會下載對應的資源文件，將它們緩存到本地
使用地理位置
移動Web框架：基於jQuery頁面驅動的jQuery Mobile、基於ExtJS架構的Sencha Touch，以及能打通Web和Native兩者之間通道的PhoneGap框架。有兩種開發模式：基於傳統Web的開發（jQuery Mobile）和基於組件式的Web開發（Sencha Touch）
localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲，當用戶關閉瀏覽器窗口后，數據會被刪除
Web SQL Database： 通過類似關系數據庫的形式存儲數據（已經是個廢棄的標准了） 三個核心方法 openDatabase transaction executeSql
離線應用：當支持離線應用的瀏覽器檢測到清單文件（Manifest File）中的任何資源文件時，便會下載對應的資源文件，將它們緩存到本地
使用地理位置 ： Geolocation 地理定位： window.navigator.geolocation 獲取地理定位的訪問 有三個方法 getCurrentPosition() watchPosition() clearWatch();
移動Web框架：基於jQry頁面驅動的jQuery Mobile、基於ExtJS架構的Sencha Touch，以及能打通Web和Native兩者之間通道的PhoneGap框架。有兩種開發模式：基於傳統Web的開發（jQuery Mobile）和基於組件式的Web開發（Sencha Touch）
2： HTML5 中的一些有趣的新特性：
- 用於繪畫的 canvas 元素
- 用於媒介回放的 video 和 audio 元素
- 對本地離線存儲的更好的支持
- 新的特殊內容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
3：
localStorage： 永久保存的數據，是域內安全的，它是基於域的，任何在該域內的所有頁面，都可以訪問localStorage數據。
注意的是 Firefox中使用localStorage存儲的數據在Chorme瀏覽器是無法讀取的，同樣，由於localStorage數據保存在設備中，同一個應用程序在不同設備上保存的數據是不同的，比如Android的數據IOS訪問不了
先來看看Storage的API ：屬性 length；方法：setItem、getItem、removeItem、clear 當然大家看名稱也都能知道這些是什么含義，在這里就不具體贅述各自的具體寫法
sessionStorage： 存儲的數據周期只保存在存儲它的當前窗口或者當前窗口新建的新窗口中，一旦關閉，數據就清除，它承接於Storage的接口，用法和localStorage基本一樣
Storage時間監聽： StorageEvent的API： key、oldValue、newValue、url、StorageArea； Storage時間可以使用addEventListener進行注冊監聽
4:
移動Web離線應用：
一般在使用離線應用功能之前，會先用Js判斷下瀏覽器是否支持： if(window.applicationCache) {//......}
離線應用包含一個manifest文件，此文件記錄着那些資源文件需要離線應用緩存等等信息：<html manifest = "cache.manifest"> 這樣就可以實現支持離線應用了。
實例 - 完整的 Manifest 文件
CACHE MANIFEST # 緩存的文件 /theme.css /logo.gif /main.js NETWORK:
# 不作緩存 login.asp FALLBACK:
# 當無法獲取到前半部分文件的時候，則請求轉為后半部分的文件 /html5/ /404.html
在實際應用中可以通過事件監聽比如： applicationCache.addEventListener('updateready', function() {//...});
HTML5提供了一個屬性，用於判斷當前瀏覽器是否在線： if(window.navigator.onLine){//...}else{//...}
5: 常見的HTML5表單元素：
<form id="test"> form屬性 表單各自的控件元素不再依賴於form元素的位置 既可以脫離form又可以保持從屬關系
<input type="text" />
</form>
<input form=test /> 在form外部的<input>增加form屬性，並制定form的屬性值為id的值，這樣外部的標簽就屬於form表單范圍
placeholder屬性： 在文本框處於為輸入狀態並且內容為空是給出提示內容；
autofocus屬性： 控件自動獲取焦點；
required屬性： 元素值不能為空；
autocomplete屬性： 自動完成功能；（當用戶在自動完成域中開始輸入時，瀏覽器應該在該域中顯示填寫的選項）
novalidate屬性： 在提交表單時，不驗證form或input域；
pattern屬性： 驗證該input域的正則表達式
新增的input類型：search email url tel number range data pickers;
6: HTML5總是和CSS3連在一起的：所以不得不提提CSS3
先回顧一下： E F：所以的子孫元素；E>F: E中的子元素；E+F：E元素之后的最近的選擇器；E~F：E中所以后面兄弟元素（CSS3 不包括自己本身，前面也不包括）
att*=val:只要包含指定的元素符（val1 val2 等等都算）； att^=val：首字符匹配；att$=val：尾字符匹配；att~=val：用空格分隔，且其中一個是val；att|=val：以val開頭並用"-"連接符；
偽類選擇器： first-line first-letter root not empty target before after first-child last-child nth-child(2) nth-last-child(odd) ;
陰影： box-shadow:水平偏移px 垂直偏移px 陰影模糊值 color
box-shadow:3px 4px 2px #000;
text-shadow: 5px -10px 5px red;
背景： background-size:10px 5px; background-clip: 背景的裁剪區域；background-origin:是指定background-position屬性的參考坐標的起始位置；
background: -webkit-gradient(linear, 0, 0, 0, 100%, from(#fff), to(#000));
圓角邊框：border-radius:10px 15px 20px 25px;
border-top-right-radius:水平半徑 垂直半徑（10px/30px）
border-radius:10px/20px 25px;//水平四個為10，垂直兩個20兩個25
橢圓形畫法：把寬度的一半當水平半徑，把高度的一半當垂直半徑
媒體查詢： Media Query：
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/> user-scalable:0不允許手動縮放
<link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="small.css"/> 當屏幕的可視區域的寬度長度在600px和900px之間時，應用該樣式文件
small.css中： @media screen and (min-width:600px) and (max-width:900px) {//...}
<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>當移動設備處於縱向（portrait） 模式下應用該模式； 橫向為landscape
7: Geolocation 地理定位： window.navigator.geolocation 獲取地理定位的訪問 有三個方法 getCurrentPosition() watchPosition() clearWatch();
8: 邊框屬性 border-image-source:url(./***.png);//設圖為81*81，九分法后 每個是27*27
border-image-width: 27px；
border-image-slice：27；//四個角只顯示九分中的一個；若為27*2=54，則顯 示九分中的四個；若為81則顯示9個，切割為寬度的三倍
border-image-outset：0px；//邊框向外擴展的大小
border-image-repeat：strench；//拉伸 repeat 重復模式，中間的2468進行不 停重復
9: 倒影屬性 -webkit-box-reflect:above/below/left/right 100px -webkit-linear-gradient(top,transparent,#fff)
10: 過度 慢慢的從一個到另一個的效果 transition -webkit-transition:padding 1s ease-out,color 1s linear 1s;
四個參數（過度屬性-property，過渡時間-duration，過度形式-timing-function，延遲時間-delay）
11: animation 動畫 參數（名字-name，-duration過渡時間，timing-function過渡形式，-delay延遲時間，-iteration-count循環次數，-direction是否反向，-play-state動畫狀態，-fill-mode動畫時間之外的狀態）
-webkit-animation:demo 2s linear 3s 3
@-webkit-keyframes demo {
0% {opacity:0;transform:translate(0px)} //透明度 平移
20% {opacity:0.2;transform:translate(20px)}
40% {opacity:0.4;transform:translate(40px)}
60% {opacity:0.6;transform:translate(60px)}
100% {opacity:1;transform:translate(100px)}
}
今天暫時只寫這么多，還會一直更新的ing...