html5 好用功能總結

1.表格元素

　　 a.<caption>設置表格標題

　　b.<colgroup> 、 <col> 設置列 　　//style span

2.分組元素

　　a.<blockquote>給大段內容添加換行和首尾縮進（會有一個外邊距）

　　b.<pre>會將編輯器排版展現出來（一般用來展現代碼，代碼在其中不會執行）

　　c.<figure>用於圖片（<figcaption>是他的標題）

3.語義化標籤

　　a.<header>表示首部

　　b.<footer>表示尾部

　　c.<hgroup>對h1-h6進行分組

　　d.<section>對標題進行分組

　　e.<nav>存放導航

　　f.<article>存放文章

　　g.<aside>能夠作文章側欄，h1-h6被加粗，其餘標籤以此顯示

　　h.<adress>存放聯繫信息

4.音頻視頻

　　video音頻　　audio視頻　　//不依賴插件，播放音頻視頻

5.js加載

　　async　　異步加載js(頁面繼續解析，腳本執行)

2 <script src="js1.js" async="async"></script>

 

6.不從新加載頁面的歷史管理

　　 history.back();　　　　    //返回上一頁面

　　history.forward();　　   　//移動到下一頁面

　　history.go(-2);　　　　    //接受一個整數做爲參數，移動到該整數指定的頁面,沒有不返回值

 

　　history.go(0)　　　　　　至關於刷新當前頁面。

　　history.pushState()方法接受三個參數，依次爲：

 

　　　　state：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數。若是不須要這個對象，此處能夠填null。

 

　　　　title：新頁面的標題，可是全部瀏覽器目前都忽略這個值，所以這裏能夠填 " "。

 

　　　　url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址

　　ps:不檢查新網址是否存在，但地址欄會顯示，且加入歷史棧

　　popstate事件：同一個文檔的瀏覽歷史（即history對象）出現變化時，就會觸發popstate事件。

　　　　　　　　　僅僅調用pushState方法或replaceState方法 ，並不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，

　　　　　　　　　或者使用JavaScript調　　用back、forward、go方法時纔會觸發。

　　　　　　　　　另外，該事件只針對同一個文檔，若是瀏覽歷史的切換，致使加載不一樣的文檔，該事件也不會觸發。

7.canvas畫布和SVG

　　可用於小應用，製做出超炫的效果

8.html5 web存儲

　　cookie存儲量小，速度慢，效率低

　　localStorage - 沒有時間限制的數據存儲

　　sessionStorage - 針對一個 session 的數據存儲

9.web workers

　　後臺運行的js,不會影響dom

10.獲取地理位置

 1 <p id="demo">點擊這個按鈕，得到您的座標：</p>
 2 <button onclick="getLocation()">試一下</button>
 3 <script>
 4     var x = document.getElementById("demo");
 5     function getLocation() {
 6         if (navigator.geolocation) {
 7             navigator.geolocation.getCurrentPosition(showPosition);
 8         }
 9         else {
10             x.innerHTML = "Geolocation is not supported by this browser.";
11         }
12     }
13     function showPosition(position) {
14         x.innerHTML = "Latitude: " + position.coords.latitude +
15             "<br />Longitude: " + position.coords.longitude;
16     }
17 </script>