HTML5_CSS3

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

HTML5是最新的HTML标准，2014年10月29日标准规范制定完成。
新特性：

语义特性
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
设备兼容特性
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性
支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

新增的标签:

标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关
标签定义声音，比如音乐或其他音频流
标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
标签定义命令按钮，比如单选按钮、复选框或按钮。
标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。

若水GIF截图_2017年8月27日10点13分29秒.gif

是与其相关联的图片的说明/标题，用�于描述其父节点元素里的其他数据, figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。。同时 figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。
标签用于对元素进行组合。使用
元素为元素组添加标题。
标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
标签定义 section 或 document 的页眉。
标签定义导航链接的部分。
标签运行中的进程。可以使用标签来显示 JavaScript 中耗费时间的函数的进程。

让低版本的 IE 支持 HTML5新标签：
HTML5 Shiv是JavaScript的一种备选方案，该方案在IE9版本中优先启用HTML5元素样式，但不允许使用没有由JavaScript定义过的元素样式。html5shiv.js用于在IE9以下的浏览器模拟html5的标签。
当使用IE9以下版本的浏览器时，加载html5shiv.js文件，其它的不加载。

input 有哪些新增类型？

email
类型用于验证email的格式，当提交表单时会自动验证email域的值
url
类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值
number
类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持
range
类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100
日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：
date
选取日、月、年
month
选取月、年
week
选取周和年
time
选取时间（小时和分钟）
datetime
选取时间、日、月、年（UTC 时间）
datetime-local
选取时间、日、月、年（本地时间）
search
类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标
tel
类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持
color
类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

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

cookie
cookie是指浏览器存储的少量数据，同时它是与具体的web页面或者站点相关的。cookie的数据会自动在web浏览器和web服务器之间传输的，因此服务端的脚本就可以读、写存储在客户端的cookie的值。在javascript中，cookie用于保存状态以及能够为web浏览器提供一种身份识别机制，因此它们是不安全的。

localStorage
实现了web存储草案标准的浏览器在window对象上定义了两个属性：localStorage 和sectionStorage,这两个属性都代表同一个对象Storage,
都是一个持久化关联的数组，数组使用字符串来索引，存储的值也都是字符串形式的。Storage对象设置它的属性为字符串值，浏览器会将该值存储起来。localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样。

cookie 和 localStorage 的区别：
localStorage拥有setItem getItem RemoveItem clear等方法，其容量有10M，用于持久化的存储。cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效,每个 Cookie 的大小一般不能超过4KB。

localStorage 存储删除数据
localStorage保存的数据，以“键值对”的形式存在,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。
存储数据：

localStorage.setItem("x",1);//以x的名字存储一个变量1
或者
localStorage.x= 1;//设置x为"1"

删除数据：

localStorage.removeItem("x");//删除x项
localStorage.clear();//全部删除

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

    1. 圆角， 圆形
    2. div 阴影
    3. 2D 转换：放大、缩小、偏移、旋转
    4. 3D 转换：移动、旋转
    5. 背景色渐变
    6. 过渡效果
    7. 动画

demo
代码

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