HTML5语义化标签及兼容IE8以下版本

HTML5语义化标签及兼容IE8以下版本

  • nav

    导航标签

  • section

    节点标签

  • header

    页眉 头部标签

  • footer

    页脚 底部标签

  • aside

    主内容之外的内容 比如侧栏

  • article

    文章内容标签

  • main

    主内容标签

  • mark

    重要内容标签

  • details

    详细内容标签

  • summary

    details内的标题标签

  • time

    显示日期时间的标签

  • figure和figcation

    图片和标题组合使用的标签

示例

     <nav>这是导航内容</nav>
     <header>这是页眉内容</header>
     <footer>这是页脚内容</footer>
     <section>这是某一个节点</section>
     <aside>这是一个侧栏</aside>
     <article>这是文章内容</article>
      
     <main>这是主内容</main>
     <mark>这是重要的内容</mark>
     <details>
         <summary>这里是标题</summary>
         这是详细信息
         <time>这里显示时间</time>
     </details>
     <figure>
         <img src="" alt="">
         <figcaption>这是图片标题</figcaption>
     </figure>

 

HTML5兼容IE8以下版本

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 解决IE8以下版本不支持html5语义化标题 -->
    <!--[if lte IE 8]>
        <script src="js/html5shiv.min.js"></script>
        <![endif]-->
    
</head>
<body>
    
     <nav>这是导航内容</nav>
     <header>这是页眉内容</header>
     <footer>这是页脚内容</footer>
     <section>这是某一个节点</section>
     <aside>这是一个侧栏</aside>
     <article>这是文章内容</article>
      
     <main>这是主内容</main>
     <mark>这是重要的内容</mark>
     <details>
         <summary>这里是标题</summary>
         这是详细信息
         <time>这里显示时间</time>
     </details>
     <figure>
         <img src="" alt="">
         <figcaption>这是图片标题</figcaption>
     </figure>
</body>
</html>

 

posted @ 2021-05-11 10:15  小雨漫漫路  阅读(68)  评论(0)    收藏  举报