1. HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签
HTML5:
是对 HTML 标准的第五次修订,目前仍未完工。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。
新特性:
- 语义化:它能让你更恰当的描述你的内容是什么。
- 连通性:能够让你和服务器之间通过创新的新技术进行通信。
- 离线&储存:能够让网页在客户端本地储存数据以及更高的离线运行。
- 多媒体:使video和audio成为了在所有web中的一等公民。
- 2D/3D绘图&效果:提供了一个更加分化范围的呈现选择。
- 性能&集成:提供了非常显著的性能优化和更有效率的计算机硬件使用。
- 设备访问:能够处理各种输入和输出设备。
- 样式设计:能让作者创造更复杂的主题
新增标签:
<header>、<main>,<footer>,<figure>,<nav>,<aside>,<svg>,<section>,<article>,<canvas>。都是块级元素,主要体现了标签的语义化。
让低版本的 IE 支持
方法一:
引入html5.js
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
<![endif]-->
方法二:
自己添加一段js代码
缺点:部分css无效
1.
<!--[if lt IE 9]>
<script>
(function(){
var html5 = ["header", "footer", "nav", "section", "article", "aside", "canvas", "audio", "video", "source", "embed", "track", "datalist", "keygen", "output", "bdi", "command", "details", "dialog", "summary", "figure", "figcaption", "mark", "meter", "progress", "ruby", "rt", "rp", "time", "wbr"];
for(var i = 0; i < html5.length; i++){
document.createElement(html5[i]);
}
})()
</script>
<![endif]-->
2.
<!--[if lt IE 9]>
<script>
createHtml5("header", "footer", "nav", "section", "article", "aside", "canvas", "audio", "video", "source", "embed", "track", "datalist", "keygen", "output", "bdi", "command", "details", "dialog", "summary", "figure", "figcaption", "mark", "meter", "progress", "ruby", "rt", "rp", "time", "wbr");
function createHtml5(){
var args = Array.prototype.slice.call(arguments, 0);
for(var i = 0; i < args.length; i++){
document.createElement(args[i]);
}
};
</script>
<![endif]-->
2.input 有哪些新增类型?
1.email
2.url
3.number
4.range
5.Date Picker
- Date
- month
- week
- time
- datatime
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()
4.写出如下 CSS3效果的简单事例
1. 圆角, 圆形
2. div 阴影
3. 2D 转换:放大、缩小、偏移、旋转
4. 3D 转换:移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画