主体结构元素

article 元素

代表文档或页面，应用程序中独立的，完整的，可以独自被外部引用的内容。 可以是文章，帖子，评论，或其他独立的内容 有自己的标题 可以嵌套使用

article可以看做特殊类型的section元素，比section更强调独立性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       .forecast {
  10.         margin: 0;
  11.         padding: 0.3rem;
  12.         background-color: #eee;
  13.         font: 1rem "Fira Sans", sans-serif;
  14.       }
  16.       .forecast > h1,
  17.       .day-forecast {
  18.         margin: 0.5rem;
  19.         padding: 0.3rem;
  20.         font-size: 1.2rem;
  21.       }
  23.       .day-forecast {
  24.         background: right/contain content-box border-box no-repeat
  25.           url("/media/examples/rain.svg") white;
  26.       }
  28.       .day-forecast > h2,
  29.       .day-forecast > p {
  30.         margin: 0.2rem;
  31.         font-size: 1rem;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <article class="forecast">
  37.       <h1>Weather forecast for Seattle</h1>
  38.       <article class="day-forecast">
  39.         <h2>03 March 2018</h2>
  40.         <p>Rain.</p>
  41.       </article>
  42.       <article class="day-forecast">
  43.         <h2>04 March 2018</h2>
  44.         <p>Periods of rain.</p>
  45.       </article>
  46.       <article class="day-forecast">
  47.         <h2>05 March 2018</h2>
  48.         <p>Heavy rain.</p>
  49.       </article>
  50.     </article>
  51.   </body>
  52. </html>

section 元素

用于对网站或应用程序中页面上的内容进行分块 section 中的内容可以单独储存到数据库中或输出到Word文档中

  1. 不要将section元素用作设置样式的页面容器，这是div元素的工作
  2. 如果article元素，aside元素或nav更符合使用条件，不要使用section元素
  3. 不要为没有标题的内容区块使用section元素

nav 元素

一个用作页面导航的链接组 可用于

  1. 传统导航栏，作用是将当前页面跳转到其他页面上去
  2. 侧边导航栏，作用同上
  3. 页内导航