HTML 5

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

• HTML5是超文本标记语言的第五次重大修改

• 目的:将网页语义化,以便更好地被用户和机器阅读,并且更好地支持各种媒体的嵌入

• 新特性:

  • 语义特性:HTML5赋予网页更好的意义和结构.更加丰富的标签将随着对RDFa 微数据 微格式等方面的支持,构建对程序,对用户都更有价值的数据驱动的WEB
  • 本地存储特性:基于HTML5开发的网页app拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 app cache,以及本地存储功能
  • 设备兼容特性:HTML5提供了广泛的数据与应用接入开放接口
  • 连接特性:HTML5具有更有效的连接工作效率,使得基于页面的实时聊天,更快的网页游戏体验,更优化的在线交流得到了实现.HTML拥有更有效的服务器推送技术(Server-Sent和WebSockets)
  • 网页多媒体特性:支持网页端的Audio Video等多媒体功能
  • 三维 图形及特效特性:SVG Canvas WebGL CSS3的3D功能
  • 性能与集成特性:HTML5通过XMLHttpRequest等技术,解决以前的跨域等问题
  • CSS3特性:在不牺牲语义结构和性能的前提下,CSS3中提供了更多的风格和更强的效果.。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

• 新增标签:

  • 页眉 页脚 导航 文章内容等跟结构相关的结构元素标签:
    • header标签:定义文档的页眉，通常是一些引导和导航信息
    • nav标签:用来作为页面导航的链接组
    • article标签:它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。
    • section标签:定义文档中的节。
    • aside标签: 用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。
    • footer标签:定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。
    • figure标签:多用于 图片与图片描述 的组合
  • 多媒体相关标签:
    • audio标签:定义声音内容
    • vedio标签:定义视频内容
    • canvas标签:定义图形,通过javascript在上面进行绘制

• 移除标签:

  • 纯表现的元素:big,center,font,strike
  • 对可用性产生负面影响的元素:frame,frameset,noframes

• 兼容问题的解决

  • IE6/IE7/IE8支持通过document.createElement方法产生标签,利用这一特性让浏览器支持部分HTML5新标签.支持新标签后,还需要添加标签对应的样式

* html5shiv.js:使用JavaScript来使不支持HTML5的浏览器支持HTML标签

2.input有哪些新增类型?

 :定义用于文本输入的单行输入字段（默认宽度为20个字符）
 :定义密码字段
 :定义单选按钮，允许用户在有限数量的选项中选择一个
 :定义复选框
 :定义用于向表单处理程序提交表单的按钮。
 :定义按钮
 :用于应该包含数字值的输入字段
 :用于应该包含日期的输入字段
 :用于应该包含颜色的输入字段，根据浏览器支持，颜色选择器会出现输入字段中。
 :用于应该包含一定范围内的值的输入字段，根据浏览器支持，输入字段能够显示为滑动控件
 :允许用户选择月份和年份，根据浏览器的支持，日期选择器会出现在输入字段中
 :允许用户选择周和年,根据浏览器支持，日期选择器会出现输入字段中。
 :允许用户选择时间（无时区）,根据浏览器支持，时间选择器会出现输入字段中。
 :允许用户选择日期和时间（有时区）,根据浏览器支持，日期选择器会出现输入字段中。
 :允许用户选择日期和时间（无时区）,根据浏览器支持，日期选择器会出现输入字段中。
 :用于应该包含电子邮件地址的输入字段，根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
 :用于搜索字段（搜索字段的表现类似常规文本字段）。
 :用于应该包含电话号码的输入字段，目前只有Safari 8支持该类型
 :用于应该包含URL地址的输入字段，根据浏览器的支持，在提交时能够自动验证url字段。

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

• 相同:都是保存在浏览器端,只有同源页面才能使用

• 区别:

  • cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而localStorage不会自动把数据发给服务器，仅在本地保存
  • 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M左右。
  • 数据有效期不同:localStorage：始终有效，窗口或浏览器关闭也一直保存(直到用JavaScript删除或者用户清除浏览器缓存)，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

• localStorage存储和删除数据:

  • 存储数据:

  localStorage.setItem("name", "xin");
  或者
  localStorage.name = "xin";
  

  • 读取数据:

  localStorage.getItem("name");
  或者
  localStorage.name;
  

  • 删除数据

  localStorage.removeItem("name");
  或者
  delete localStorage.name;