码迷,mamicode.com
首页 > Web开发 > 详细

html5 好用功能总结

时间:2018-02-28 12:53:56      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:pst   分组   排版   style   数据   show   变化   header   figure   

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>

html5 好用功能总结

标签:pst   分组   排版   style   数据   show   变化   header   figure   

原文地址:https://www.cnblogs.com/paradise-zzz/p/8477505.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!