1: HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
HTML5 是 HTML 的第五次重大修改,设计目的是为了在移动设备上支持多媒体。
新特性:
- 语义特性
- 本地存储特性(localStorage Indexed DB)
- 设备兼容特性(Geolocation功能)
- 连接特性(实时特性,webSockets)
- 网页多媒体特性(Audio Vedio Canvas SVG)
- 性能与集成特性(XMLHttpRequest2等技术)
- CSS3特性
新增标签:header nav footer article section aside dialog audio vedio
让低版本的 IE 支持 HTML5新标签
方法一:
引入html5.js
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用.
方法二:
在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]-->
题目2: input 有哪些新增类型?
input 标签的新类型:
<h3>email url number range datepicker</h3>
email 输入的邮箱要满足邮箱地址的规范 @...
url 输入的连接要满足连接的规范 http://...
number 输入的是数字才有效,输入其他无效
range 变成一个百分比条
datepicker 直接生成了一个日历
题目3: 浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大(跟浏览器相关)。
有效时间:
cookie 设置的cookie在过期时间之前一直有效,即使窗口或浏览器关闭。
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据。
浏览器支持:
浏览器都支持cookie
IE9以上才支持localStorage
localStorage 如何存储删除数据:
存储:localStorage.setItem("key", "value")
删除:localStorage.removeItem("key")
读取:localStorage.getItem("key")
清除:localStorage.clear()