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(页面继续解析，脚本执行)

<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.获取地理位置

<p id="demo">点击这个按钮，获得您的坐标：</p>
 <button onclick="getLocation()">试一下</button>
 <script>
     var x = document.getElementById("demo");
     function getLocation() {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(showPosition);
         }
         else {
             x.innerHTML = "Geolocation is not supported by this browser.";
         }
     }
     function showPosition(position) {
         x.innerHTML = "Latitude: " + position.coords.latitude +
             "<br />Longitude: " + position.coords.longitude;
     }
 </script>