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>元素

　　用于标识网页的主要内容，一个页面只能有一个此元素，对屏幕阅读器非常重要。