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新标签:
- 这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用.
<!--[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]-->
- 在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查明兼容性
- email:输入邮箱规范地址
- url:只针对苹果手机,输入的链接要满足链接的规范
- tel
- number:只能输入能参与运算的数字,PC端和手机端都有用
-
Date Pickers Input类型:iphone手机和PC端有效
-
其他类型
浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
特性 | Cookie | localStorage |
---|---|---|
数据的生命期 | 可设置失效时间,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 |
存放数据大小 | 4K左右 | 一般为5MB |
与服务器端通信 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 |
易用性 | 需要程序员自己封装,源生的Cookie接口不友好 | 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持 |
localStorage.setItem()
:接受一个键值对作为参数,将会把键名添加到存储中,如果键名以存在,则更新其对应的值。
localStorage.removeItem()
:接受一个键名作为参数,会把该键名从存储中移除。
localStorage.clear()
:不接受参数,只是简单地清空域名对应的整个存储对象。