HTML5

HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签

HTML5是HTML的第五次重大修改,设计目的是为了在移动设备上支持更多媒体。
新特性:

  • 语义特性
  • 本地存储特性(localStorage Indexed DB)
  • 设备兼容特性 (Geolocation功能)
  • 连接特性(实时特性,webSockets)
  • 网页多媒体特性(Audio Vedio Canvas SVG)
  • 性能与集成特性(XMLHttpRequest2等技术)
  • CSS3特性

新增标签:<header> <article> <nav> <footer> <section> <aside> <dialog> <audio> <vedio>
让低版本的 IE 支持 HTML5新标签:

  1. 这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用.
<!--[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]-->
  1. 在hmtl 加入(推荐)
    除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。
<!--[if lt IE 9]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()
</script>
<![endif]-->

input有那些新增类型?

input属性多数只针对手机端有特殊效果,并且多数有兼容问题,在使用之前请在Can I Use查明兼容性

  1. email:输入邮箱规范地址
  2. url:只针对苹果手机,输入的链接要满足链接的规范
  3. tel
  4. number:只能输入能参与运算的数字,PC端和手机端都有用
  5. Date Pickers Input类型:iphone手机和PC端有效


    datepickers
  6. 其他类型


    其他类型

浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

特性 Cookie localStorage
数据的生命期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存
存放数据大小 4K左右 一般为5MB
与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性 需要程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

localStorage.setItem():接受一个键值对作为参数,将会把键名添加到存储中,如果键名以存在,则更新其对应的值。
localStorage.removeItem():接受一个键名作为参数,会把该键名从存储中移除。
localStorage.clear():不接受参数,只是简单地清空域名对应的整个存储对象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容