web前端-css3

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

1. HTML5是什么？
   1、HTML5 是对 HTML 标准的第五次修订，2014年10月29日标准规范制定完成。
   2、HTML5的设计目的是为了在移动设备上支持多媒体。
   3、HTML5赋予网页更好的意义和结构。
2. 有哪些新特性？
   1、语义：能够让你更恰当地描述你的内容是什么。
   2、连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
   3、离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
   4、多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
   5、2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
   6、性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
   7、设备访问 Device Access：能够处理各种输入和输出设备。
   8、样式设计: 让作者们来创作更加复杂的主题吧！
3. 新增标签？

元素	描述
canvas	标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API
audio	定义音频内容
video	定义视频（video 或者 movie）
source	定义多媒体资源
embed	定义嵌入的内容，比如插件
track	为诸如
datalist	定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值
keygen	规定用于表单的密钥对生成器字段
output	定义不同类型的输出，比如脚本的输出
article	定义页面正文内容
aside	定义页面内容之外的内容
bdi	设置一段文本，使其脱离其父元素的文本方向设置
command	定义命令按钮，比如单选按钮、复选框或按钮
details	用于描述文档或文档某个部分的细节
dialog	定义对话框，比如提示框
summary	标签包含 details 元素的标题
figure	规定独立的流内容（图像、图表、照片、代码等等）
figcaption	定义 元素的标题
footer	定义 section 或 document 的页脚
header	定义了文档的头部区域
mark	定义带有记号的文本
meter	定义度量衡。仅用于已知最大和最小值的度量
nav	导航
progress	定义任何类型的任务的进度
ruby	定义 ruby 注释（中文注音或字符）
rt	定义字符（中文注音或字符）的解释或发音
rp	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容
section	定义文档中的节（section、区段）
time	定义日期或时间
wbr	规定在文本中的何处适合添加换行符

4. 如何让低版本的 IE 支持 HTML5新标签
   1、简单的办法是创建元素，然后添加css属性。

(function() { 
    // 页面头部 
    var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */]; 
    for (var i = 0, j = a.length; i < j; i++) {
        document.createElement(a[i]); 
    }    
})();
//或者用数组：
function createHtml5Mark(){
    // arguments 序列化，成为真下的数组
    var args   = Array.prototype.slice.call(arguments,0);
    argLen = args.length,
    doc    = document;
    // 循环数据创建元素
    for(var i=0;i

同时，需要在css添加属性：

section,article,nav,header,footer{display:block;}

2、我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:
将以下代码放在中

2、input 有哪些新增类型？

类型	含义
color	用于指定颜色的控件。
date	用于输入日期的控件（年，月，日，不包括时间）。
datetime	基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local	用于输入日期时间控件，不包含时区。
email	用于编辑 e-mail 的字段。 合适的时候可以使用 :valid 和 :invalid CSS 伪类。
month	用于输入年月的控件，不带时区。
number	用于输入浮点数的控件。
range	用于输入不精确值控件。
search	用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel	用于输入电话号码的控件；换行会被自动从输入的值中移除A,，but no other syntax is enforced。可以使用属性，比如 pattern 和 maxlength 来约束控件输入的值。恰当的时候，可以应用 :valid 和 :invalid CSS 伪类。
time	用于输入不含时区的时间控件。
url	用于编辑URL的字段。 The user may enter a blank or invalid address. 换行会被自动从输入值中移队。可以使用如：pattern 和 maxlength 样的属性来约束输入的值。 恰当的时候使可以应用 :valid 和 :invalid CSS 伪类。
week	用于输入一个由星期-年组成的日期，日期不包括时区。

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

1. cookie是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
2. 而localStorage不会自动把数据发给服务器，仅在本地保存。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据生命周期不同，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 。
4. localStorage Storage接口的实现，它没有到期时间，可以通过JavaScript来清除，或者通过清除浏览器缓存（Browser Cache ）/本地存储数据（Locally Stored Data）来清除。

4、写出如下 CSS3效果的简单事例

1. 圆角， 圆形 2. div 阴影 3. 2D 转换：放大、缩小、偏移、旋转 4. 3D 转换：移动、旋转 5. 背景色渐变 6. 过渡效果 7. 动画
   预览
   （注意：1、当rotate旋转时，坐标系也跟着转的。2、transform多值时，translateZ要写在rotate后面的，注意transform多值的时候的顺序问题）

5、实现如下全屏图加过渡色的效果（具体效果随意）DEMO188

预览

6、写出如下 loading 动画效果 DEMO1197 DEMO2183

预览
预览

(mission 7)