html5语义化标签

HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。

1. header 标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

<header>
  <h1>公司名称</h1>
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

<body>
  <footer>
    <p>© 2018 xxx 公司</p>
  </footer>
</body>

3. main 表示网页的主体内容，一个页面只能有一个main标签

<body>
<header>页眉</header>
<main>
  <article>文章</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>

5. article 标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）。

<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

6. aside 用来放置与网页或文章主要内容间接相关的部分

<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

<!--文章评注-->
<p>第一段</p>

<aside>
  <p>本段是文章的重点。</p>
</aside>

7. section 标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。

<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

8. nav 用于放置页面或文档的导航信息。

<nav>
  <ol>
    <li><a href="item-a">商品 A</a></li>
    <li><a href="item-b">商品 B</a></li>
    <li>商品 C</li>
  </ol>
</nav>

9. h1 ~ h6 文章标题

10. hgroup 多级标题组合,如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>
posted @ 2019-08-25 17:57  dobeco  阅读(397)  评论(0)  编辑  收藏  举报