html5任务,高级任务7(HTML5_CSS3)

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

HTML5是超⽂本标记语⾔的第五次重⼤修改，2014年10⽉29⽇标准规范制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持Localstorage

新的语义化特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

新增的结构元素：

article元素 : 代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，与上下文不相关的独立内容

section元素 :表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分 - 不要为没有标题的内容区块使用section元素

nav元素 :表示页面中导航链接的部分，例如：传统导航条，侧边栏导航，页内导航，翻页等

aside元素 : 表示article元素的内容之外的、与article元素的内容相关的辅助信息，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分

header元素 :表示页面中一个内容区块或整个页面的标题

footer元素 : 表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息

figure元素 :表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题，这个标签经常是在主文中引用图片，插图，表格，代码段等等

元素的调整：

具有boolean值的属性:

低版本的IE支持HTML5：

第一种方式：引用google的html5.js文件。

上面这段代码仅会在IE浏览器下运行，还有一点需要注意，在页面中调用html5.js文件必须添加在页面的head元素内，因为IE浏览器必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。

第二种方式：自己创建这些元素：

(function() {

// 页面头部

var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];

for (var i = 0, j = a.length; i < j; i++) {

document.createElement(a[i]);

}

})();

css 添加属性：

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

题目2： input 有哪些新增类型？

email

url

number

range

color

Date Picker

Date

month

week

time

datatime

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

cookie：

Cook是小甜饼的意思。顾名思义，Cookie是存储在客户端的小型文本文件，可以包含若干键值对，每个键值对可以设置过期时间(默认过期时间为关闭浏览器时)。 Cookie会在每次发送HTTP请求时附加到Cookie头字段，服务器以此得知用户所处的状态。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫userData的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以userData 作为你的 polyfill 的方案是种不错的选择

sessionStorage

sessionStorage与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

三者异同：

使用场景：

因为考虑到每个 HTTP 请求都会带着Cookie的信息，所以Cookie 当然是能精简就精简啦，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。曾经还使用 Cookie来保存用户在电商网站的购物车信息，如今有了localStorage，似乎在这个方面也可以给Cookie放个假了~

而另一方面localStorage接替了 Cookie管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候sessionStorage 的作用就发挥出来了。

Localstorage如何操作数据：

设置值：

localStorage.a=123;

localStorage["a"]=123;

localStorage.setItem("a",123)

获取值：

localStorage.a;

localStorage["a"];

localStorage.getItem("a")

删除值：

localStorage.removeItem("a")

1. 圆角， 圆形

2. div 阴影

3. 2D 转换：放大、缩小、偏移、旋转

4. 3D 转换：移动、旋转

5. 背景色渐变

6. 过渡效果

7. 动画

效果

源码

题目5： 实现如下全屏图加过渡色的效果(具体效果随意)

效果

源码

题目6： 写出如下 loading 动画效果

效果1

源码1

效果2

源码2