阅读(2472)

HTML 页面内容

最后一次修改 2017年08月03日

HTML页面内容

Article 标签

article元素表示自包含HTML文档中的内容。

以下代码显示了正在使用的 article 元素。

<!DOCTYPE HTML>
<html>
</head>
<body>
  <article>
    <header>
      <hgroup>
        <h1 id="fruitsilike">H1Like</h1>
        <h2>H2</h2>
      </hgroup>
    </header>
    This is a test.
    <section>
      <h1 id="morefruit">XML</h1>
      This is a test.
      <section>
        <h1>HTML</h1>
        This is a test.
      </section>
    </section>
    <footer>
      <nav>
        Nav
      </nav>
    </footer>
  </article>
</body>
</html>

HTML Sections

section元素是HTML5的新功能，表示文档的一部分。

section元素应用于包含内容将在文档的大纲或目录中列出。

段元素通常包含一个或多个内容段落和标题，但标题是可选的。

以下代码显示了正在使用的section元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <section>
    <hgroup>
      <h1>H1</h1>
      <h2>H2</h2>
    </hgroup>
    This is a test.
    <section>
      <h1>H1</h1>
      This is a test.
      <section>
        <h1>More information</h1>
        This is a test.
      </section>
    </section>
  </section>
</body>
</html>

HTML nav

nav 元素表示文档的一个部分包含到其他页面或同一页面的其他部分的链接。

此元素标识文档的主要导航部分。

以下代码显示了使用 nav 元素。

<!DOCTYPE HTML>
<html>
<body>
  <header>
    <hgroup>
      <h1>H1</h1>
      <h2>by www.w3cschool.cn</h2>
    </hgroup>
    <nav>
      <h1>Contents</h1>
      <ul>
        <li><a href="#fruitsilike">XML</a></li>
        <ul>
          <li><a href="#morefruit">HTML</a></li>
        </ul>
        <li><a href="#activitiesilike">CSS</a></li>
        <ul>
          <li><a href="#tritypes">Java</a></li>
          <li><a href="#mytri">Javascript</a></li>
        </ul>
      </ul>
    </nav>
  </header>
  <section>
    <header>
      <hgroup>
        <h1 id="fruitsilike">Section h1</h1>
        <h2>Section h2</h2>
      </hgroup>
    </header>
    This is a test.
    <section>
      <h1 id="morefruit">Inner H1</h1>
      This is a test.
      <section>
        <h1>More information</h1>
        This is a test.
      </section>
    </section>
  </section>
  <section>
    <header>
      <h1 id="activitiesilike">Activities</h1>
    </header>
    <section>
      <p>This is a test.</p>
      <h1 id="tritypes">Java</h1>
      This is a test.
      <section>
        <h1 id="mytri">Javascript</h1>
      </section>
    </section>
  </section>
  <nav>
    More Information: <a href="http://www.html.cn">Learn More About</a>
    <a href="http://www.html.cn">Learn More About</a>
  </nav>
  <footer id="mainFooter">
    &#169;2011, www.html.cn. <a href="http://www.html.cn">Visit</a>
  </footer>
</body>
</html>

HTML Details

details 元素创建一个节，用户可以展开该节以获取有关主题的更多详细信息。

details 元素通常包含一个摘要元素，用于为详细信息部分创建标签或标题。

以下代码显示如何使用摘要和详细信息元素。

<!DOCTYPE HTML>
<html>
<head>
<style>
details {
  border: solid thin black;
  padding: 5px
}

details>summary {
  font-weight: bold
}
</style>
</head>
<body>
  <article>
      <h1>H1</h1>
    </header>
    <section>
      <p>This is a test.</p>
      <details>
        <summary>Summary</summary>
        <ol>
          <li>XML</li>
          <li>HTML</li>
          <li>CSS</li>
        </ol>
      </details>
    </section>
  </article>
</body>
</html>

HTML Headers Footers

header 元素表示节的标题。它可以包含任何您想要表示为头部的内容。

头部元素通常包含一个 h1?h6 元素或一个 hgroup 元素，它还可以包含节的导航元素。

footer 元素是页眉的补充，表示部分的页脚。

页脚通常包含关于版块的摘要信息，并且可以包括作者的详细信息，权限信息。

您可以在以下代码中看到页眉和页脚元素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
  <header>
    <hgroup>
      <h1>H1</h1>
      <h2>by www.html.cn</h2>
    </hgroup>
  </header>
  <section>
    <header>
      <hgroup>
        <h1>Section h1</h1>
        <h2>Section h2</h2>
      </hgroup>
    </header>
    This is a test.
    <section>
      <h1>Inner Section h1</h1>
      This is a test.
      <section>
        <h1>More information</h1>
        This is test.
      </section>
    </section>
  </section>
  <footer id="mainFooter">
    &#169;2015, www.html.cn. <a href="http://www.html.cn">Visit</a>
  </footer>
</body>
</html>

HTML aside

aside 元素表示仅与周围元素相关的内容。这类似于书或杂志中的侧边栏。

内容与页面，文章或部分的其余部分有关，但它不是主要流程的一部分。

下面的代码添加和样式 aside 元素。

<!DOCTYPE HTML>
<html>
<head>
<style>

article {
  border: thin black solid;
  padding: 10px;
  margin-bottom: 5px
}
aside {
  width: 40%;
  background: white;
  float: right;
  border: thick solid black;
  margin-left: 5px;
}

aside>section {
  padding: 5px;
}

aside>h1 {
  background: white;
  color: black;
  text-align: center
}
</style>
</head>
<body>
  <article>
    <header>
      <hgroup>
        <h1 id="fruitsilike">H1</h1>
        <h2>H2</h2>
      </hgroup>
    </header>
    <aside>
      <h1>Why</h1>
      <section>
        This is a test:
        <ol>
          <li>HTML</li>
          <li>CSS</li>
          <li>Javascript</li>
        </ol>
      </section>
    </aside>
  </article>
</body>
</html>