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>
相關文章
相關標籤/搜索