delishcomcn

HTML5部分新语义标签

语义标签

举个例子，语义标签就是标签本身代表了一定的含义

  • HTML4.01

    • div:作为容器存在

    • 在网站布局中使用广泛

    • 搜索引擎友好，但是搜索引擎更友好的依旧是内容

    • p标签：段落

    • img标签：图片

    • 。。。等等

    • 语义标签

    • 语义性不强的：

HTML5部分新语义标签

HTML5中有部分语义标签，在使用时十分简单，但是由于语义性更强，更利于开发者以及搜索引擎对于网页的理解。

  • 语义标签：

标签名作用
nav 表示导航
header 表示页眉
footer 表示页脚
main 文档主要内容
article 文章
aside 主题内容之外,侧边栏

实际应用

  • 如果我们布局如下页面

webp

网页布局.png

  • HTML4.01中代码:

    由于篇幅问题，这里只贴出body内代码

<body><!--头部start--><div class="header">
    <!--导航start-->
    <ul class="nav">
        <li><a href="#">导航1</a></li>
        <li><a href="#">导航2</a></li>
        <li><a href="#">导航3</a></li>
    </ul>
    <!--导航end--></div><!--头部end--><!--主体start--><div class="main">
    <!--文章start-->
    <div class="article"></div>
    <!--文章end-->

    <!--侧边栏start-->
    <div class="aside"></div>
    <!--侧边栏end--></div><!--主体end--><!--底部start--><div class="footer"></div><!--底部end--></body>

  • HTML5中代码：

    • 这里直接使用新学习的语义标签

<body><!--头部start--><header>
    <!--导航start-->
    <nav>
        <a href="#">导航1</a>
        <a href="#">导航2</a>
        <a href="#">导航3</a>
    </nav>
    <!--导航end--></header><!--头部end--><!--主体start--><main>
    <!--文章start-->
    <article></article>
    <!--文章end-->

    <!--侧边栏start-->
    <aside></aside>
    <!--侧边栏end--></main><!--主体end--><!--底部start--><footer></footer><!--底部end--></body>

  • 使用HTML5中新的语义标签,内容更为直观,即使删除了注释,依旧能够看出该标签的作用,语义性更强

  • 说的通俗一些,内容一样,但是代码更少了

H5新语义标签兼容性

虽然HTML5为我们提供了很多一些新的语义标签,但老版本的浏览器并这些内容,比如iE 8 及以下版本就不支持新语义标签

低版本IE显示问题

  • 测试代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{            height: 100px;            background-color: orangered;
        }    </style></head><body>
    <header>
    </header></body></html>

  • 低版本IE测试方式:

    • 如果使用的是高版本的iE,比如ie11其内部能够调节ie的显示版本

    • 打开浏览器->F12呼出开发者界面->选择仿真->选择浏览器版本

webp

ie_test.gif

  • 测试效果:

    • 在版本小于等于ie8时,header标签就无法显示

解决方案

js代码创建标签

  • 在页面中添加创建header标签的代码

  • 修改header的样式,添加display:block

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header{            height: 100px;            background-color: orangered;
        }   
    </style>
    <script type="text/javascript">
        // 使用代码创建header标签,创建后是行内元素
        //在低版本的ie中,如果想要显示h5的新语义标签,需要设置为block
      var headerDom = document.createElement('header');      document.body.appendChild(headerDom);
      headerDom.style.display = 'block';    </script></head><body><!--在老版本的ie中无法查看(ie8)--><header></header></body></html>

优化代码执行--hack写法

无论是js,或者js框架都需要执行js代码才能够解决兼容性问题,但是在高版本的浏览器中,那段js代码就没有必要执行了,所以我们通过一个叫做hack的方式来减少性能的浪费

  • 用法:

    • 使用 hack语法 将需要执行的js的代码包裹起来

    <!--[if lte IE 8]>
    <script>
        <p>您的浏览器版本太低了建议更新,下载更为好用的Chrome浏览器</p>
    </script>
    <![endif]-->

  • 更多语法:
    例如:IE6及IE6以下的IE5.x可识别
    Emmet快捷键为: cc:ie6 +tab 键
    *l:less
    *g:greater
    *t:than
    *e:equal

 <!--[if lte IE 6]>
    <script>
        alert("这段js代码执行了");
    </script>
<![endif]-->
 IE6及IE6以下的IE5.x可识别

js框架

  • 直接导入js框架,js框架内部干的事情类似于帮助我们实现了创建 添加 displayblock的操作,但是处理的逻辑会多一些

  • js框架"html5shiv"获取地址

    • html5shiv.min.js为压缩版js文件,较常用

  • 通过条件注释让这个js文件 在指定的 IE版本中 才被加载

使用js框架来解决html5新语义标签的IE浏览器兼容方法代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        header {            height: 100px;            background-color: #f40;
        }    </style></head><body><!--使用js框架来解决html5新语义标签的兼容方法--><!--[if lte IE 8]>
<script src="js/html5shiv.min.js"></script>
<![endif]--><header></header></body></html>

 

posted on 2023-08-07 08:43  delish  阅读(18)  评论(0)  编辑  收藏  举报

导航