1. 传统的 HTML 布局

  1. 一直以来，网页设计人员都利用 <div> 元素将页面中的相关元素集中在一起，并使用 class 或 id 特性来指定 <div> 元素在页面结构中的作用。

2. 新的 HTML5 布局元素

  1. HTML5 中引入了一组新的元素，这些元素允许你对页面的各个部分进行分割。它们的名称直接表明了其中包含的内容。

3. 页眉和页脚

  1. <header> 元素可以用作网页中出现在每个页面顶部的主页眉，或单独 <article> 或 <section> 的页眉。
  2. <footer> 元素可以用作网页中出现在每个页面底部的主页脚，或单独 <article> 或 <section> 的页脚。

4. 导航

  1. <nav> 元素专门用来包含网站的主导航块。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html>
    <head>
        <title>页眉、页脚与导航</title>
    </head>
    <body>
        <header>
            <h1>主标题</h1>
            <nav>
                <ul>
                    <li>主页</li>
                    <li>文章</li>
                    <li>更多</li>
                </ul>
            </nav>
        </header>

        <footer>
            &copy;2023 ans20xx
        </footer>
    </body>
</html>

5. 文章

  1. <article> 元素就像页面中任意部分的一个容器。
  2. <article> 元素可以被用作单独的文章、博客日志、评论、帖子等独立的内容。

6. 附属信息

  1. <aside> 元素由两个作用。
  2. 如果 <aside> 元素在 <article> 元素内，它应该包含与当前文章相关的信息，而不涉及页面的整体信息。
  3. 当 <aside> 元素在 <article> 元素外时，它应该包含与整个页面相关的内容。

7. 部分

  1. <section> 元素用于将相关的内容集中到一块，而每个部分通常有一个标题。
  2. <section> 元素不能作为整个页面的容器使用。

8. 标题组

  1. <hgroup> 元素的作用是将一个或者多个 <h1> 到 <h6> 的标题元素组合到一起，将它们看作一个标题。

9. 为块级元素添加链接

  1. HTML5 允许网页设计人员在包含子元素的块级元素周围添加 <a> 元素，这样会使整个块变成一个链接。

10. 小结

  1. 新的 HTML5 元素可以表明一个网页不同部位的用途，还可以描述页面结构。
  2. 新元素提供了更明确的代码。