html5 header和group

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>header元素</title>
  </head>
  <body>
    <!--之前的写法
    <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div>-->
    <header>
      <h1>it最新技术</h1>
      <a href="#">百度</a>
      <nav>
        <ul>
          <li>
            <a href="#">学习</a>
          </li>
          <li>
            <a href="#">学习</a>
          </li>
          <li>
            <a href="#">技术</a>
          </li>
          <li>
            <a href="#">博客</a>
          </li>
        </ul>
      </nav>
    </header>
  </body>
</html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>footer</title>
  </head>
  <body><!--以前的div
    <div class="footer">
      <ul>
        <li>
          <a href="#">版权信息</a>
        </li>
        <li>
          <a href="#">站点地图</a>
        </li>
        <li>
          <a href="#">联系方式</a>
        </li>
      </ul>
    </div>-->
    <footer>      <ul>
        <li>
          <a href="#">版权信息</a>
        </li>
        <li>
          <a href="#">站点地图</a>
        </li>
        <li>
          <a href="#">联系方式</a>
        </li>
      </ul></footer>
      <article><footer>这是一个文章的底部</footer></article>
  </body>
</html>

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>hgroup</title>
  </head>
  <body>
    <article>
      <header>
        <hgroup>
          <h1>这是一个标题</h1>
          <h2>这是一个子标题</h2>
        </hgroup>
        <p>
          <time datetime="2016-9.26">2016-9-26</time>
        </p>
      </header>
    </article>
  </body>
</html>

 

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>address</title>
  </head>
  <body>
    <address>
    <a href="#">amy</a> 
    <a href="#">jane</a> 
    <a href="#">tom</a></address>
    <footer>
      <div>
        <address>
          <a href="#">百度大厦</a>
        </address>
        <time datetime="2016-9-26">2016-9-26</time>
      </div>
    </footer>
  </body>
</html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <title>网页编排示例</title>
  </head>
  <body>
    <header>
      <h1>网页标题</h1>
      <nav>
        <ul>
          <li>
            <a href="#">首页</a>
          </li>
          <li>
            <a href="#">帮助</a>
          </li>
        </ul>
      </nav>
    </header>
    <article>
      <hgroup>
        <h1>文章主标题</h1>
        <h2>文章副标题</h2>
      </hgroup>
      <p>文章正文</p>
      <section>
        <div>
          <article>
            <h1>评论标题</h1>
            <p>评论正文</p>
          </article>
        </div>
      </section>
    </article>
    <footer>
      <small>版权所有</small>
    </footer>
  </body>
</html>
原文地址:https://www.cnblogs.com/Yimi/p/5908287.html