1、 HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签
- HTML5是HTML（Hyper Text Markup Language）超文本标记语言的第五个版本
- HTML5新特性如下：
- 语义特性~HTML5赋予了网页更好的意义和结构
- 本地存储特性~基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度
- 设备兼容特性~HTML5提供了前所未有的数据与应用接入开放接口
- 连接特性~更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现
- 网页多媒体特性~支持网页端的Audio、Video等多媒体功能；三维、图形及特效特性；基于SVG、Canvas、WebGl、CSS3的3D功能
- 性能与集成特性~HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助人们在Web应用和网站在多样化的环境中更快速的工作
- CSS3特性~在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果
- 新增加的一些标签如下：
<header></header>
<footer></footer>
<nav></nav>
<aside></aside>
<section></section>
<article></article>
<figure></figure>
<figcaption></figcaption>
<canvas></canvas>
<mark></mark>
<autio></autio>
<video></video>
<source></source>
<datalist></datalist>
<time></time>
- 低版本的IE支持HTML5新标签的方法：
- 方法1，添加下面一段JS
(function() {
// 页面头部
var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
for (var i = 0, j = a.length; i < j; i++) {
document.createElement(a[i]);
}
})();
同时，对于要使用的HTML5新标签，在css上添加属性
section,article,nav,header,footer{
display: block;
}
- 方法2，使用html5shiv，如下代码
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
这个文件必须在head标签中调用，因为IE必须在元素解析这前知道这些元素，才能启作用，也要在css上加上如下属性
section,article,nav,header,footer{
display: block;
}
参考链接：
The HTML5 Shiv
如何解决IE6/IE7/IE8浏览器不兼容HTML5新标签的问题
2、input 有哪些新增类型？
- 有以下新增类型
<form action="" method="get">
<div class="email">
<label for="email">email</label>
<input type="email" id="email">
</div>
<div class="tel">
<label for="tel">tel</label>
<input type="tel" id="tel">
</div>
<div class="url">
<label for="url">url</label>
<input type="url" id="url">
</div>
<div class="number">
<label for="number">number</label>
<input type="number" id="number">
</div>
<div class="range">
<label for="range">range</label>
<input type="range" id="range">
</div>
<div class="date">
<label for="date">date</label>
<input type="date" id="date">
</div>
<div class="month">
<label for="month">month</label>
<input type="month" id="month">
</div>
<div class="week">
<label for="week">week</label>
<input type="week" id="week">
</div>
<div class="time">
<label for="time">time</label>
<input type="time" id="time">
</div>
<div class="datatime">
<label for="datatime">datatime</label>
<input type="datatime" id="datatime">
</div>
<div class="search">
<label for="search">search</label>
<input type="search" id="search">
</div>
<div class="datetime-local">
<label for="datetime-local">datetime-local</label>
<input type="datetime-local" id="datetime-local">
</div>
</form>
-
如下图片所示
input.png
3、 浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据
- 数据的生命周期：
- Cookie--->一般由服务器生成，可设置失效时间；如果在浏览器端生成cookie，默认是浏览器关闭后失效
- localStorage--->除非被清除，否则永久有效
- 存放数据大小：
- Cookie--->4k左右
- localStorage--->一般为5MB
- 与服务器端通信：
- Cookie--->每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题
- localStorage--->仅在客户端（即浏览器）中保存，不参与和服务器的通信
- 易用性：
- Cookie--->需要程序员自己封装，源生的Cookie接口不友好
- localStorage--->源生接口可以接受，亦可再次封装来对Object和Array有更好的支持
- 浏览器支持：
- Cookie--->浏览器都支持cookie
- localStorage--->IE9以上才支持localStorage
- localStorage 存储及删除数据：
- 存储：localStorage.setItem('key', 'value')
- 读取：localStorage.getItem('key')
- 删除：localStorage.removeItem('key')
- 清除：localStorage.clear()
4、写出如下 CSS3效果的简单事例
1. 圆角， 圆形
2. div 阴影
3. 2D 转换：放大、缩小、偏移、旋转
4. 3D 转换：移动、旋转
5. 背景色渐变
6. 过渡效果
7. 动画
网友评论