HTML5秘籍——第二章（用语义元素构造网页）

背景：<div>加样式的技术既简明又强大，还非常灵活——但不够touming.在查看别人源代码时，不知道哪个<div>表示什么，是页眉、侧边面板、导航条还是其他的。HTML5为此引用了一组构造页面的新元素，实现了Web开发人员的这一夙愿。

语义元素背景：

所有语义元素都有一个显著的特点：不真正做任何事。

兼容性：IE9+

腻子脚本：Modernizr，自动完成语义元素的修补工作

目的是：①容易修改和维护 ：很容易理解整体布局和不同区块的重要程度

②无障碍性：让任何人（包括残疾人、搜索机器人、屏幕阅读器、设计工具、浏览器）都能无障碍地访问网页。

③搜索引擎优化：比如Google的search bot，这些搜索机器人会自动在Web中爬行并获取每个网页。如果Google能更好地理解你的站点，那搜索者的查询就会越容易与你的内容匹配，因此你的网站列在搜索结果中的可能性也就越大。搜索机器人已经在检查一些HTML5的语义元素，这样可以收集到它们索引的页面的更多信息。

④未来的功能：新浏览器和Web编辑工具一定会利用语义元素。例如，<nav>区块中的内容可以方便访客赚到页面中适当的区块

语义元素：

<time>元素：标注一个有效的日期或时间。没有任何内置的样式

<article>元素：表示一个完整的、自成一体的内容快，比如博客文章或新闻报道，包含内容：标题、作者署名以及正文（注意HTML5没有'content'元素，还是使用<div>元素），不包含footer

<figure>元素：插图，被旁边的文本围绕的插图，也可包含插图文本<figcaption>

<figcaption>元素：图题，插图中的文本，而不是旁边的文本，但也可以是任何HTML元素，比如连接、小图标等

注意：图片中的alt文本不能设为空字符串，因为这就意味着你的图片纯粹是装饰用的，屏幕阅读器会忽略不读

<aside>元素：表示与它周围的文本没有密切关系的内容。可以介绍其他话题，也可以盛放广告、相关内容链接

<header>元素：包含标注内容的标题区块、页眉

<nav>元素：标注导航链接，可以和<aside>元素一起配合放在侧边栏

<section>元素：比<div>元素更具体一点，它适合任何以标题开头的内容区块

<main>元素：标识主要内容

语义元素使用规则：浏览器在遇到不认识的元素时，会把它们当成内联(inline)元素。因此，我们可以对不识别HTML5语义元素的浏览器使用

article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {   
  display: block;   
}

上面这条规则对于能够识别HTML5元素的浏览器没有作用，因为它们的display属性已经被默认设成了block

对于大多数浏览器而言，上面的规则可以解决兼容问题，但IE8-会拒绝给无法识别的元素应用样式。好在有个变通方案：通过Javascript创建新元素，就可以骗过IE，让它识别外来元素

<script>
  document.createElement('header');
</script>

不过已经有人帮我们写好轮子，但记住该腻子脚本应该是有条件的

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

轮子链接：html5.js

当然还有个一站式解决方案：Modernizr（内置了HTML5垫片脚本，不用再使用html5.js或者添加什么样式规则）