section

w3c规范规定section是用来划分网页、表示页面中的一个内容区块、比如章节、页眉、页脚或页面的其他部分可以和h1,h2…等其他标签结合起来一起使用，表示文档结构

hgroup

对整个页面/页面中的一个内容区块的标题进行结合

header

一个内容区块或整体页面的头部部分

footer

整个页面或页面区块的尾部

nav

页面中导航链接的部分

article

定义可以独立于内容其余部分的完整独立内容块,artice元素就是专门为摘要设计的，比如一篇文章

aside

表示aside标签内容之处的，与artive标签内容相关的辅助信息，aside元素应该被用于无关内容。

  • 如果你认为应该与主内容分开的内容，那么aside元素是你应该正确考虑使用的元素。
  • 询问你最近aside元素中的内容是否可以独立开来而不会影响文档或者section中主内容的含义
  • 可以用在主要内容相关的引用，侧边栏，广告，nav元素组等
  • 简单来说:aside的内容如果被删除，剩下的内容仍然合理

figure

  • 表示一段独立的流内容，一般表示文章主体流内容的一个独立但愿
  • figure元素经常用于图片

figcaption

  • 代表一个图例的说明
  • 代表figure元素的一个标题或者说是其相关解释
  • 在使用figcaption时，它最好是figure块的第一个或者最后一个元素

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <!--[if It IE 9]><script src="html5.min.js"></script><![endif]-->
  9. </head>
  10. <body>
  11.     <header class="header">
  12.         <h1>xxxx有限公司</h1>
  13.         <nav>
  14.             <a href=""></a>
  15.             <a href=""></a>
  16.             <a href=""></a>
  17.             <a href=""></a>
  18.             <a href=""></a>
  19.             <span>热线电话</span>
  20.         </nav>
  21.     </header>
  22.     <main>
  24.      <aside class="aside">
  26.         <section>
  27.             <h3>产品分类</h3>
  28.             <ul>
  29.                 <li></li>
  30.                 <li></li>
  31.                 <li></li>
  32.             </ul>
  33.         </section>
  35.         <section>
  36.             <h3>联系我们</h3>
  37.             <ul>
  38.                 <li></li>
  39.                 <li></li>
  40.                 <li></li>
  41.             </ul>
  42.         </section>
  44.      </aside>
  46.      <section class="content">
  47.          <section class="company">
  48.              <h3>公司简介</h3>
  49.              <figure>
  50.                  <img src="./company.png" alt="" srcset="">
  51.              </figure>
  52.          </section>
  54.          <section class="address">
  55.             <h3>应用领域</h3>
  56.          </section>
  58.          <section>
  59.             <h3>产品展示</h3>
  60.             <ul>
  61.                 <li><img src="" alt="" srcset=""></li>
  62.                 <li><img src="" alt="" srcset=""></li>
  63.                 <li><img src="" alt="" srcset=""></li>
  64.             </ul>
  65.          </section>
  66.      </section>
  68.     </main>
  69. </body>
  70. </html>

新增标签的兼容问题

  • html5语义化标签在ie6-8下，对于不支持的标签不会有任何的样式，也默认的当成行内元素，所以在样式表里要对这些标签定义一下他默认的display
  • 通过引入如下js来解决ie9以下新增标签的兼容问题
  1. <!--[if It IE 9]>
  2.     <script src="html5.min.js"></script>
  3. <![endif]-->