HTML5 简介（一）：新的写法、元素及兼容性 - Blog

来看看和 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，可以帮助我们完整解决这个兼容性问题，推荐使用。