HTML5语义化标签

发表于 | 分类于

标签

  • aricle元素

    文档，页面或应用程序中独立的、完整的、可以独自被外部引用的内容。可嵌套，可代替DIV，内嵌页面，可以看成特殊的section元素，比section元素更加强调独立性

  • section元素

    用于对网站或应用程序中页面上的内容进行分块。对文章进行分段，强调分段、分行。
    1.不要将section元素作为设置页面样式的容器。
    2.若article元素、aside元素或nav元素更符合使用条件，不要使用section元素。
    3.不要为没有标题的内容区块使用section元素。

  • nav元素

    可用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
    一个页面可以有多个nav元素。
    注：nav元素是用在一系列发出命令的菜单上的，是一种交互性的元素，使用在WEB应用程序中

    • 传统导航条
    • 侧边导航
    • 页内导航
    • 翻页操作
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      <body marginheight="0px" marginwidth="0px">
      <nav>
          <ul>
              <li><a href="#" title="">主页</a></li>
              <li><a href="#" title="">开发文档</a></li>
          </ul>
      </nav>
      <article>
          <header id="header" class="">
              <h1>HTML与CSS历史</h1>
          <nav>
              <ul>
                  <li><a href="#" title="">HTML历史</a></li>
                  <li><a href="#" title="">CSS历史</a></li>
              </ul>
          </nav>
          </header><!-- /header -->
          <section>
              <h1>HTML5的历史</h1>
              <p>............</p>
          </section>
          <section>
              <h1>CSS的历史</h1>
              <p>............</p>
          </section>
          <footer>
              <a href="mailto:joe@example.com?subject=feedback" "email me">email me</a>
          </footer>
      </article>
      <footer>
          <p><small>版权声明：</small></p>
      </footer>

  • 页面：

    GitHub set up

  • aside元素：

    用来表示当前页面或文章的附属信息部分，他可以包含与当前页面或主要内容的相关引用、侧边栏、广告、导航条，以及其他类似的有区别于主要内容的部分。