SOURCE

<header>
  <h1>文件和网站结构</h1>
</header>
<hr>
<nav>
  <ul>
    <li>
      <a href="#">HTML布局元素细节</a>
    </li>
    <li>
      <a href="#">没有特定语义的装饰元素</a>
    </li>
    <li>
      <a href="#">换行与水平分割线</a>
    </li>
    <li>
      <a href="#">主动学习：创建你自己的站点地图</a>
    </li>    
  </ul>
</nav>
<hr>
<main>
  <article>
    <header>
      <h2>HTML布局元素细节</h2>
    </header>
    <p>
      为了实现这样的语义标记，HTML提供了可以用来表示这些部分的专用标签，例如：
    </p>
    <ul>
      <li>
        <p>
          <b>标题：</b><code>&lt;header&gt;</code>.
        </p>
        <p>
          <code>&lt;header&gt;</code> 展现了一系列的介绍性内容。如果它是<code>&lt;body&gt;</code> 的子元素,它就定义了网站的全局页眉。但是如果它是 <code>&lt;article&gt;</code> 或<code>&lt;section&gt;</code> 的子元素，它就定义了这些部分的特定的页眉(不要把这些与titles and headings混淆)
        </p>
      </li>
      <li>
        <p>
          <b>导航栏：</b><code>&lt;nav&gt;</code>.
        </p>
        <p>
          <code>&lt;nav&gt;</code> 包含了页面主要的导航功能。二级链接等，不会进入导航功能部分。
        </p>
      </li>
      <li>
        <p>
          <b>主要内容：</b><code>&lt;main&gt;</code>,具有代表性的内容段落主题可以使用<code>&lt;article&gt;</code>,<code>&lt;section&gt;</code>，和<code>&lt;div&gt;</code>.
        </p>
        <p>
          <code>&lt;main&gt;</code> 展现了页面内容的独特性。只可以在每一个页面上使用一次<code>&lt;main&gt;</code>，直接把它放到<code>&lt;body&gt;</code>中。在理想情况下，不应该把它嵌套进其他的元素中。
        </p>
        <p>
          <code>&lt;article&gt;</code> 闭合一块与自身相关的内容，这块内容能够解释它自身而不是页面上其他的内容（例如一篇单独的博客）。
        </p>
        <p>
          <code>&lt;section&gt;</code> 近似于<code>&lt;article&gt;</code>，但是它更多的是伴随着由一个单独功能构成的页面（例如一个小型的地图，或者是一组文章的标题和摘要）。它被认为最好的实际应用是用标题作为每一部分（section）的开头；也要注意的是你可以把不同的<code>&lt;article&gt;</code>分到不同的<code>&lt;section&gt;</code>中，或者把不同的<code>&lt;section&gt;</code>分到不同的<code>&lt;article&gt;</code>中，这要取决于内容。
        </p>
      </li>
      <li>
        <p>
          <b>侧栏：</b><code>&lt;aside&gt;</code>,经常签到在<code>&lt;main&gt;</code>之中
        </p>
        <p>
          <code>&lt;aside&gt;</code> 包含的内容并不与主要内容有直接的联系，但是它可以提供额外的不直接有联系的信息（术语表条目，作者简介，相关链接等等）。
        </p>
      </li>
      <li>
        <p>
          <b>页脚：</b><code>&lt;footer&gt;</code>.
        </p>
        <p>
          <code>&lt;footer&gt;</code> 包含了页面的页脚部分
        </p>
      </li>
    </ul>
  </article>
  <hr>
  <section>
    <header>
      <h2>没有特定语义的装饰元素</h2>
    </header>
    <p>
      有时候，你会遇到一种情况——你找不到理想的语义元素来包含项目或内容。有时候你可能只想仅仅用CSS或JavaScript将一组元素作为一个单独的实体来修饰。为了应对这种情况，HTML提供了<code>&lt;div&gt;</code>和<code>&lt;span&gt;</code>元素。你应该最好使用class属性来提供一些标签，这样他们就能容易的被找到。
    </p>
    <p>
      <span class="spantest"><code>&lt;span&gt;</code> 是一个行内无语义元素</span>，你应该仅仅当无法找到更好的语义元素包含内容时使用，或者不想增加特定的含义。
    </p>
    <div class="divtest">
      <p>
        <code>&lt;div&gt;</code> 是一个块级无语义元素，你应该仅仅当找不到更好的块级元素时使用，或者不想增加特定的意义。例如，想象当你浏览一个电子商务网站时，有一个购物车部件一直都在你可以选择的地方。
      </p>
    </div>
  </section>
  <hr>
  <section>
    <header>
      <h2>换行与水平分割线</h2>
    </header>
    <p>
      <code>&lt;br&gt;</code> 在一个段落中创建一个换行；在你想要生成一系列的短行的地方，是唯一能够生成这种结构的元素。<br>例如一个邮寄地址或一首诗。
    </p>
    <p>
      <code>&lt;hr&gt;</code>元素在文档中生成一条水平分割线，表示文本中主题的变化（例如主题或场景的变化）。看起来就是一条水平线。像下面的例子：
    </p>
    <hr>
  </section>
  
  <aside>
    <h2>相关说明</h2>
    <ul>
      <li>
        <a href="#">&lt;form&gt;标签</a>
      </li>
      <li>
        <a href="#">&lt;input&gt;标签</a>
      </li>
    </ul>
  </aside>
</main>
<hr>
<footer>
  <p>
    前面的列表代码可以用描述列表<code>&lt;dl&gt;</code>,<code>&lt;dt&gt;</code>,<code>&lt;dd&gt;</code> 更适合
  </p>
</footer>
<!-- ----------------------------- --><br/><br/><br/>
<hr>

code{
  background-color:#eeeeee;
  color:#5887A6;
}
span.spantest{
  color:gray;
}
div.divtest{
  color:gray;
}