整体结构

基本结构

<body>
  <header>页眉</header>
  <main>主体内容</main>
  <aside>侧边栏</aside>
  <footer>页尾</footer>
</body>

页眉结构

<header>
  <nav>导航</nav>
  <form>搜索</form>
</header>

主体内容结构

<main>
  <article>文章一</article>
  <article>文章二</article>
  <article>文章三</article>
</main>

局部结构

导航结构

<nav>
  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
  </ul>
</nav>

文章结构

<article>
  <header>
    <h1>文章标题</h1>
    <p>作者：Avin Cheng</p>
  </header>

  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>

  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>

  <footer>
    <p>© 禁止转载</p>
  </footer>
</article>

常用网页语义结构

整体结构

基本结构

<body>
  <header>页眉</header>
  <main>主体内容</main>
  <aside>侧边栏</aside>
  <footer>页尾</footer>
</body>

页眉结构

<header>
  <nav>导航</nav>
  <form>搜索</form>
</header>

主体内容结构

<main>
  <article>文章一</article>
  <article>文章二</article>
  <article>文章三</article>
</main>

局部结构

导航结构

<nav>
  <ul>
    <li>AAA</li>
    <li>BBB</li>
    <li>CCC</li>
  </ul>
</nav>

文章结构

<article>
  <header>
    <h1>文章标题</h1>
    <p>作者：Avin Cheng</p>
  </header>

  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>

  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>

  <footer>
    <p>© 禁止转载</p>
  </footer>
</article>

参考文献

PreviousHTML 常用 DTD 声明 NextWeb 技术标准

Last updated 5 years ago

Was this helpful?