HTML5学习笔记（二）：用于构建页面的语义元素
1、语义元素
大多数HTML5语义元素的用途是标识页面中的一个内容区块，为标注的内容赋予额外的含义，不真正做任何事。
2、使用语义元素的原因
- 容易修改和维护；
- 无障碍性（现代Web设计的一个重要主题）；
- 对搜索引擎的友好性高；
- 适应未来的浏览器和Web设计工具的发展趋势
3、语义元素的来历
在发明HTML5之前，其发明者花很长时间研究已有的网页，还研读了谷歌对十几亿个网页的统计信息。谷歌公布的这个调查分析并列出了Web作者在自己网页中使用的类名，将Web页面中一些共性的东西（比如页面都有页眉、页脚导航菜单等）从人们普通的做法中提取出相应的语义。发明者依据这个调查制定成了规范。
4、浏览器对语义元素的支持情况
HTML5的语义元素基本得到了所有现代浏览器的支持，最大的绊脚石还是IE9之前的Internet Exploer。
浏览器在遇到不认识的元素时，会把它们当成内联（inline）元素挤在一起，为了解决这个问题，可为HTML5的这些语义元素添加一个样式，可转化为块级元素：
article,aside,figure,figcaption,header,footer,nav,main,section,details,summary { display:block; }在支持HTML5元素的浏览器中并不会有影响。
5、用语义元素构建页面
- <article>元素
这个元素表示一个完整的、自成一体的内容块，比如博客文章或者新闻报道。<article>元素应该包含所有相关的内容，包括标题、作者署名以及正文，但不包含<footer>元素。例：
<article> <header> <h1>This is blog's title</h1> </header> <div class="content"> ...... </div> </article> <footer> ...... </footer>
- aside元素：用来添加附注
此元素表示与它周围的文本无密切的内容，可以用此元素介绍另一个相关的话题，或者对主文档提出的某个观点进行解释；另外，也可以用<aside>元素来盛放广告、相关内容或者链接，甚至可以添加醒目引文。
<aside> <img src="quotes_start.png" alt="quote" /> <!--，开始引用符号的图片--> <span>We don't know how the universe started, so we can't be sure it won't just end, maybe today.</span> <img src="quotes_end.png" alt="quote" /><!--结束引用符号的图片--> </aside>
- <figure>+<figcaption>元素
为页面添加插图（与普通图片区分），插图是与文本相关的，文本会提到它，且常常伴有图题（<figcaption>）。
<figure class="FloatFigure"> <img src="human_skull.jpg" alt="Human skull"> <figcaption>Will you be the last person standing if one of these apocalyptic scenarios plays out?</figcaption> </figure>
- <header>元素
一个网页中可以包含多个<header>元素，有两种使用方式，差别并不是很大。
一种是用它标注内容的标题，此种情况除非必要，否则不必使用，只有在内容标题还附带了其他信息的情况下，才有必要，例：
<header> <h1>......</h1> <p>......</p> <p>......</p> </header>
另一种是它标注网页的页眉。
- <footer>元素
HTML5规定，只能在<footer>元素中放一些网站的版权信息、作品来源、法律限制以及链接之类的信息，不能放太多其他内容。
为了不违反HTML5的规定且在页面底部放入更多内容，可用如下：
<div class="fatfooter"> <aside> <img src="..." /> <p>......</p> </aside> <footer> <p>......</p> </footer> </div>
- <nav>元素：标注导航链接
<nav> <ul> <li><a href="#">......</a></li> <li><a href="#">......</a></li> <li><a href="#">......</a></li> </ul> </nav>
- <section>元素
可用于：和页面主体内容并列的小内容块、独立性内容（但并不是文章）、分组内容等。
- <details>和<summary>元素：折叠栏(但目前只有Chrome、Opera和Safari浏览器支持）
<details> <summary>Section #1</summary> <p>......</p> </details>
- <main>元素
用于标识网页的主要内容，一个页面只能有一个此元素，对屏幕阅读器非常重要。
