HTML5 简介(一):新的写法、元素及兼容性

来看看和 HTML 4 相比,HTML 5 有哪些最基本的变化吧。

doctype

HTML 5 的 doctype 是这样的:

<!DOCTYPE html>

非常简洁,同时所有浏览器(包括 IE6)都支持。

根元素

HTML 5 的根元素也有所简化。当然你可以只写一个<html>;不过如果愿意指明语言,这样写即可:

<html lang="zh-CN">

字符编码

来回顾一下 HTML 4 时代的写法:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

忘掉它吧。HTML 5 的标准写法是这样的:

<meta charset="utf-8">

外部 CSS 文件

HTML 5 中,可以省略type="text/css"部分:

<link rel="stylesheet" href="style.css">

新增元素

HTML 5 新增了几个语义化的标签,分别为:section, nav, article, aside,time, header, footer等。

例子

<!-- 页面头部 -->
<header>
    <h1>My Site</h1>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <li> ... </li>
            <li> ... </li>
        </ul>
    </nav>
</header>

<!-- 单篇文章 -->
<article>
    <header>
        <time datetime="2014-12-10" pubdate>Dec 10, 14'</time>
        <h1>Hello, World!</h1>
    </header>
    <p>Lorem ipsum ...</p>
</article>

<!-- 页脚 -->
<footer>
    <p class="copyright">Copyright &copy; 2013</p>
</footer>

几点说明

  • nav元素一般包括一列导航链接,但是并非所有的「一列链接」都应该放在这个标签中。
  • section元素一般用途是包含一个有共同主题的部分,比如多个 Tab 框的每个页面、网站的主页里的个人介绍、联系方式等分区,或者一篇文章的不同章节,等等;section内部应该有标题。通用容器不应该使用section,而应该继续使用div
  • 如果是相对独立的文章、帖子、留言等,则可使用article元素。内部可以包含time标签指明发表时间。
  • aside元素用来包含一些和主题相关(单并非不可或缺的)内容,典型的使用场景是网页的「侧边栏」。

浏览器兼容性

主流浏览器都兼容 HTML 5 的新标签。对于 IE8 及以下版本,它不认识 HTML 5 的新元素,会把它们默认渲染为display:inline并且拒绝为它们添加任何样式。同时,渲染未知元素时,会把它们作为一个「没有后代的空元素」插入到 DOM 中。

解决方法很简单,使用 JavaScript 创建一个「没用的」元素即可,例如:

<script>document.createElement("article");</script>

然后,我们就可以把他们的样式设置为display:block并正常使用了。有一个项目叫做 HTML5 Shiv,可以帮助我们完整解决这个兼容性问题,推荐使用。

本文作者为,最后修订于

讨论