HTML5语义标签的实践

<article> 定义一篇文章

• 论坛发帖
• 博客文章
• 一篇文章

<article>
  <h1>标题</h1>
  <p>内容</p>
</article>

 

<aside> 侧边栏

<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

<details> 附加详细信息

<summary> 摘要

<details>
  <summary>Copyright 1999-2014.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>

除了summary其他内容默认隐藏，当details元素添加了open属性的时候p标签的内容才会显示。

<figcaption> 图片标题
<figure> 定义图片分组

<figure>
  <img src="pic_mountain.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - The Pulpit Rock, Norway.</figcaption>
</figure>

<footer> 页脚

<footer>

　　<p>底部</p>

</footer>

<header> 定义头部

<header>
    <h1>标题</h1>
    <p>内容</p>
</header>

通常我们会用到文章的简介里面

<article>
  <header>
    <h1>标题</h1>
    <p>简介</p>
  </header>
  <p>内容</p>
</article>

<main> 定义主体内容

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome, Firefox, and Internet Explorer are the most used browsers today.</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome is a free, open-source web browser developed by Google,
    released in 2008.</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox is a free, open-source web browser from Mozilla, released in 2004.</p>
  </article>
</main>

<mark> 定义标记，高亮，需要突出的文字

<p>Do not forget to buy <mark>milk</mark> today.</p>

<nav> 定义一组链接

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<section> 定义块，通常包含一个标题和一段内容

<section>
  <h1>标题</h1>
  <p>内容</p>
</section>

<time> 定义时间

<p>We open at <time>10:00</time> every morning.</p>

<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>

 

<hgroup> 定义标题组

<hgroup>
　　<h1> Recall Fan Page </h1>
　　<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>