HTML5之浏览器支持、新元素

浏览数：19 / 时间：2015年06月09日

HTML5之浏览器支持、新元素

现代的浏览器都支持HTML5。此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素（即让一些较早的浏览器（不支持HTML5）支持 HTML5）。

1、将 HTML5 元素定义为块元素

HTML5 定了8个新的HTML 语义（semantic）元素。所有这些元素都是块级元素。为了能让旧版本的浏览器正确显示这些元素，你可以设置 CSS 的 display 属性值为 block：

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

2、为 HTML 添加新元素

你可以为 HTML 添加新的元素。该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 <myHero> ：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Creating an HTML Element</title>
    <script>document.createElement("myHero")</script>
    <style>
        myHero {
            display: block;
            background-color: #ddd;
            padding: 50px;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <myHero>我的第一个新元素</myHero>
</body>
</html>

运行结果：

注：JavaScript 语句 document.createElement("myHero") 是为了为 IE 浏览器添加新的元素。

3、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://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

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

4、完美的 Shiv 解决方案

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Styling HTML5</title>
    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js">
    </script>
    <![endif]-->
</head>

<body>

<h1>我的第一篇文章</h1>

<article>
    London is the capital city of England. It is the most populous city in the United Kingdom,
    with a metropolitan area of over 13 million inhabitants.
</article>

</body>
</html>

运行结果：

注：html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

5、HTML5 新元素

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

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

6、<canvas> 新元素

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

7、新多媒体元素

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

8、新表单元素

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

9、新的语义和结构元素

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