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)    收藏  举报