HTML5浏览器

你可以学会如何使用旧的浏览器正确处理新的HTML5.

HTML5 浏览器支持

HTML5 支持所有现代浏览器.

此外，所有的浏览器，旧的和新的，自动处理未被识别的元素作为内联元素.

因为这样，你可以“告诉”的旧的浏览器来处理“未知”的HTML元素.

甚至可以教IE6（XP 2001）如何处理未知的HTML元素.

定义语义元素作为块元素

HTML5定义八个新的语义元素。所有这些都是块级元素。.

在旧浏览器中确保正确的行为,你可设置元素的 display属性为block:

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

加入新的元素到HTML

你也能添加新的元素到HTML页面.

这个实例添加一个新的元素叫做 <myHero> 到HTML页面, 并且定义了一个样式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>享学课堂</title>
  <script>document.createElement("myHero")</script>
  <style>
    myHero {
        display: block;
        background-color: #dddddd;
        padding: 50px;
        font-size: 30px;
    }
  </style>
</head>
<body>

  <h1>一个标题</h1>
  <myHero>我的英雄元素</myHero>

</body>
</html>

让我试试

JavaScript 语句 document.createElement("myHero") 需要创建在IE 9或更早的版本中.

使用IE8的问题

你可以使用上面描述的解决方案为所有新的HTML5元素.

然而, IE8 (和更早的版本) 不允许未知元素的样式!

幸运的是, Sjoerd Visscher 创建了 HTML5Shiv! HTML5Shiv 是一个JavaScript类库，可以使IE9或者更早的版本识别新的HTML5元素。

为了兼容IE9或者更早的版本，你将需要html5shiv.

HTML5Shiv 语法

HTML5Shiv 被放在<head> 标签里面.

HTML5Shiv 是一个javascript文件，通过<script>标签引用.

当你使用新的HTML5元素，例如: <article>, <section>, <aside>, <nav>, <footer>时，你可以使用HTML5Shiv来兼容旧的IE浏览器。

语法

<head>
  <!--[if lt IE 9]>
    <script src="/js/html5shiv.js"></script>
  <![endif]-->
</head>

HTML5Shiv 实例

如果你不想下载和存储html5shiv在您的网站上，你可以参考在CDN网站的版本.

HTML5Shiv 脚本必须放在<head>元素里面, 样式如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <![endif]-->
  <title>享学课堂</title>
</head>
<body>

  <section>

  <h1>著名城市</h1>

  <article>
    <h2>伦敦</h2>
    <p>伦敦是英国的首都。它是英国人口最多的城市，拥有超过1300万居民的大都市.</p>
  </article>

  <article>
    <h2>巴黎</h2>
    <p>巴黎是法国首都和人口最多的城市.</p>
  </article>

  <article>
    <h2>东京</h2>
    <p>东京是日本的首都，东京大区的中心，也是世界上人口最多的大都市区.</p>
  </article>

  </section>

</body>
</html>

让我试试