美文网首页HTML5HTML5学习笔记HTML5
HTML5部分新语义标签

HTML5部分新语义标签

作者: Rella7 | 来源:发表于2017-04-27 18:25 被阅读43次

语义标签

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

  • HTML4.01
    • 语义标签
      • p标签：段落
      • img标签：图片
      • 。。。等等
    • 语义性不强的：
      • div:作为容器存在
        • 在网站布局中使用广泛
        • 搜索引擎友好，但是搜索引擎更友好的依旧是内容

HTML5部分新语义标签

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

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

实际应用

  • 如果我们布局如下页面
网页布局.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呼出开发者界面->选择仿真->选择浏览器版本
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>

相关文章