【HTML5】HTML5

HTML5 新元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如:图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

---

<canvas> 新元素

标签描述<canvas>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

---

新多媒体元素

标签描述<audio>定义音频内容<video>定义视频（video 或者 movie）<source>定义多媒体资源 <video> 和 <audio><embed>定义嵌入的内容，比如插件。<track>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。

---

新表单元素

标签描述<datalist>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。<keygen>规定用于表单的密钥对生成器字段。<output>定义不同类型的输出，比如脚本的输出。

---

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

标签描述<article>定义页面独立的内容区域。<aside>定义页面的侧边栏内容。<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比如单选按钮、复选框或按钮<details>用于描述文档或文档某个部分的细节<dialog>定义对话框，比如提示框<summary>标签包含 details 元素的标题<figure>规定独立的流内容（图像、图表、照片、代码等等）。<figcaption>定义 <figure> 元素的标题<footer>定义 section 或 document 的页脚。<header>定义了文档的头部区域<mark>定义带有记号的文本。<meter>定义度量衡。仅用于已知最大和最小值的度量。<nav>定义导航链接的部分。<progress>定义任何类型的任务的进度。<ruby>定义 ruby 注释（中文注音或字符）。<rt>定义字符（中文注音或字符）的解释或发音。<rp>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。<section>定义文档中的节（section、区段）。<time>定义日期或时间。<wbr>规定在文本中的何处适合添加换行符。

---

已移除的元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike><tt>

HTML5新标签

<datalist>指定一个预先定义的输入控件选项列表<keygen>定义了表单的密钥对生成器字段<output>定义一个计算结果

IE9 以下版本浏览器兼容HTML5的方法，使用本站的静态资源的html5shiv包：

<!-- [if lt IE9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif] -->

载入后，初始化新标签的CSS：

/* html5 */ article , aside , dialog , footer , header , section , footer , nav , figure , menu { display: block }

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义（semantic） 元素。所有这些元素都是块级 元素。

为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block:

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

Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素，但是：

Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。

注意：国内用户请使用本站静态资源库（Google 资源库在国内不稳定）：

<!--[if lt IE 9]>   <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。