html5 好用功能总结
龚超 2018-03-28 来源 : 阅读 1515 评论 0

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>

 

 

 


本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

擅长针对企业软件开发的产品设计及开发的细节与流程设计课程内容。座右铭:大道至简!

  • 370
    文章
  • 45146
    人气
  • 83%
    受欢迎度

已有24人表明态度,83%喜欢该老师!

进入TA的空间
求职秘籍 直通车
  • 资料领取 资料领取 资料领取
  • 答疑解惑 答疑解惑 答疑解惑
  • 技术交流 技术交流 技术交流
  • 职业测评 职业测评 职业测评
  • 面试技巧 面试技巧 面试技巧
  • 高薪秘笈 高薪秘笈 高薪秘笈
TA的其他文章 更多>>
WEB前端必须会的基本知识题目
经验技巧 93% 的用户喜欢
Java语言中四种遍历List的方法总结(推荐)
经验技巧 91% 的用户喜欢
Java语言之SHA-256加密的两种实现方法详解
经验技巧 75% 的用户喜欢
java语言实现把两个有序数组合并到一个数组的实例
经验技巧 75% 的用户喜欢
通过Java语言代码来创建view的方法
经验技巧 80% 的用户喜欢
其他海同师资 更多>>
吕益平
吕益平 联系TA
熟悉企业软件开发的产品设计及开发
孔庆琦
孔庆琦 联系TA
对MVC模式和三层架构有深入的研究
戴懿颢​
戴懿颢​ 联系TA
20年+嵌入式开发经验,精多语言 / 云 / 安全 / 数据库
郭自琦
郭自琦 联系TA
16年物联网经验,涉多项目,多校授课,出版书籍并研发IT教程
余承民
余承民 联系TA
8年开发+5年教学经验,指导数千名学员高薪就业
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式AI+学习就业服务平台 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved