HTML5_CSS3

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

• HTML5 是超文本标记语言的第五次重大修改，它的标准规范于2014年10月29日被制定完成。
• HTML5 的新特性主要体现在以下几个方面：

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

• HTML5 中主要的新增标签如下：

标签	描述
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	规定在文本中的何处适合添加换行符

• 要想让低版本的 IE 支持 HTML5新标签，我们可以在页面中使用html5shiv.js。具体的用法如下：

/*再在css中进行一些相应的设置即可*/
article, aside, dialog, figure, footer, header, menu, nav, section { display: block; }

2、input 有哪些新增类型？

类型	描述
email	用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
url	用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
number	用于应该包含数值的输入域，且能够设定对所接受的数字的限定。
range	用于应该包含一定范围内数字值的输入域。页面显示为滑动条，且能够设定对所接受的数字的限定。
Date pickers	用于日期的选择，拥有多个可供选取的日期和时间的类型。
search	用于搜索域，比如站点搜索或 Google 搜索。search 域显示为常规的文本域。

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

• 数据的有效期不同。cookie一般是由服务器生成的，我们可以为它设置失效时间。如果它在浏览器中生成，则默认会在关闭浏览器之后失效；localStorage中的数据除非被清除，否则始终存在和有效，即使窗口或浏览器被关闭也能一直保存，因此常被用作持久数据。
• 存储大小的限制不同。cookie中的数据大小不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识等；而localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 与服务端的通信方式不同。cookie数据始终被携带在同源的http请求中（即使不需要），即cookie会在浏览器和服务器之间来回传递。如果我们使用 cookie 保存过多的数据，可能会带来一些性能问题。而localStorage不会自动把数据发送给服务器，仅在本地客户端中保存，不参与和服务器之间的通信。
• 用途不同。cookie一般由服务器端生成，用于标识用户身份；而localStorage则常被用于浏览器端缓存数据。

使用localStorage存储和删除数据的方法如下：

//存储数据
LocalStorage.setItem(keyName, keyValue);
//删除数据
LocalStorage.removeItem(keyName);