前端杂谈 · Web

H5语义化标签低版本浏览器兼容-html5shiv.js

•̀.̫•́✧ · 10月28日 · 2019年本文3996字 · 阅读10分钟284

前端项目还在大面积使用div+css来构建页面的时候,可读性极低,也导致维护成本很高,所以有了语义化标签。

从下面例子中总结语义化标签的意义。

比较标签:

<b>  vs  <strong>       <i> vs <em>

先两组标签在页面中的呈现都是相同的效果,第一组显示出来都是文本加粗,第二组则都是显示为斜体,那到底有什么不同呢?

<b>与<i>这两个标签可以被称为物理标签,即浏览器对标签中的内容物理上添加:加粗或者倾斜的样式,并没有任何的意思,只是让内容bold或者italic。

<strong>与<em>这两个标签可以称之为逻辑标签,即浏览器读到这个标签时了解到强调的意思,强调标签中的内容需要加粗来强调,或者斜体来强调其中的内容。它们是强调文档逻辑,而不仅仅只是告诉浏览器应该怎么做。

语义化标签的意义:

  1. 利于网站的SEO;各大网站在抓取网页时,语义化标签更清楚的表达网站的逻辑与内容,搜索引擎更加友好,更利于解析上下文环境,抓取各个关键字的权重
  2. 方便其他设备的解析,比如屏幕阅读器、盲人阅读器、移动设备,能有意义的渲染网页,清晰的表达网页的上下文内容以及强调部分等
  3. 布局的语义化标签,会使得项目在没有css的情况下,页面也能呈现出更好的结构
  4. 代码的可读性与可维护性更强;比较以往的div布局来说,越来越多的语义化标签使得代码更加就见名之意的,带给开发者更好的体验。

HTML 5 中的语义化标签:

1.  <header> 网页或section的头部
    <asider> 网页的侧边栏内容
    <nav> 定义页面的主要导航部分
    <article> 独立完整的内容模块,通常用在博客、论坛、新闻、评论等,区别于section这种分段的标签
    <section> 网页文档中的段、节,通常子元素包括标题:h1-h6
    <footer> 网页或section底部的内容,可能包括:作者或者版权信息等;

    借用一张图:

H5语义化标签低版本浏览器兼容-html5shiv.js-歪?是3.1415926吗

2. <details> 

标签用于描述文档或文档某个部分的细节,summary是details元素的标题

<details>
    <summary>这是一个标题</summary>
    <p>详细描述...</p>
</details>

3. <canvas>

 用来进行canvas绘图,该标签为图形容器,通过js找到标签的操作对象来画图

<canvas id="canvas" style="width:300px;height:300px"></canvas>
<script>
    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#ddd';
    ctx.fillReact(x,y,width,height)
</script>

4. 嵌入<svg>

使用XML技术绘制可缩放矢量图形的语言,可使用扩展名.svg的xml定义,也可以内嵌在html中

//html中内嵌标签  绘制圆形
<svg style="width:300px;height:300px">
    <circle cx="50" cy="50" r="50"></circle>
</svg>

5. <video></video>

定义电影片段或者其他视频流,支持三种类型的视频: Ogg、MPEG4、WebM

<video src='**.mp4' controls>
    您的浏览器暂不支持video标签,请更新浏览器版本。
</video>

6.<audio></audio>

定义音频,可以支持多个source(媒介标签,这里没有写错,这个标签可以省略/),浏览器默认将第一个能识别的格式进行播放(所以,使用source实际是解决个大厂的兼容性问题)

<audio>
    <source src='***.ogg' type='audio/ogg'>
    <source src='***.mp3' type='audio/mp3'>
    您的浏览器暂不支持audio标签,请更新浏览器版本。
</audio>

7.<datalist>

与input配合使用可制作输入值的下拉列表,与select不同的是datalist即可下拉选择,也可以输入值,还有模糊匹配的功能。

<input list="users"/>
<datalist id='users'>
    <option>Jamse</option>
    <option>Jack</option>
    <option>Mary</option>
</datalist>

8.<mark>

在视觉上向那些想要突出的文字,比如搜索结果中向用户高亮显示搜索关键词

9.<meter>

数据区间中绘制一个值的占比与状态,注意区别与进度条progress标签,meter最典型的应用场景有磁盘使用量等。
meter的属性:min max low high optimum(最优值) value
渲染规则是:

  • optimum在min-low区间中,value值如果在min-low显示为绿色,low-high显示为黄色,high以上显示为红色
  • optimum在low-high段,value值如果在min-low显示为黄色,low-high显示为绿色,high以上显示为黄色
  • optimum大于或等于high,value值如果在min-low显示为红色,low-high显示为黄色,high以上显示为绿色

所以,最佳值optimum与value在同一个区间段渲染为绿色,不同区间段向optimum左右两边分别渲染:黄、红色,这里的区间段是指经过low,high属性指定后的四个段。

// min默认是0
<meter max='3000' high='2000' low='1000' optimum="2001" value='999'>
    您的浏览器不支持meter标签,请升级。
</meter>

10.<progress>

进度条,运行中、加载中的进度。

<progress value="50" max="100"></progress> 

11.<time></time>

定义日期或者时间

<time datatime='2019-01-01'>今天元旦</time>

浏览器兼容

由于H5标签低版本浏览器并不支持,所以需要做兼容处理

<!--2.语义化标签的兼容问题-->
<!--2.1 IE9以下不支持H5标签(大部分css3属性,一些H5的api)-->
<!--2.2 IE9以下不认识,把这些标签当做行内元素去看待-->
<!--2.3 语义化标签需要动态创建 document.createElement('header') 同时设置块级元素-->
<!--2.4 有一款插件能帮你完成这件事件  html5shiv.js   -->
<!--2.5 必须引入在头部,在页面结构之前,提前解析h5标签-->
<!--2.6 优化处理:支持H5标签的不需要加载,IE9以下不支持H5加载-->
<!--2.7 js判断客户的浏览器版本可以做到,但是不能做到js提前加载-->
<!--2.8 条件注释:网页的任何地方  根据浏览器版本去加载内容(html标签)-->
<!--2.9 固定语法  lt 小于  gt 大于  lte 小于等于  gte 大于等于 -->

在页面头部引入html5shiv.js文件,并且做高低版本浏览器加载优化处理

    <!--[if lte IE 8]>
        <script src="https://github.com/zhangsixiang/Plug-in-library/commits/master/html5shiv/html5shiv.min.js"></script>
    <![endif]-->

Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        header{
            height: 100px;
            background: hotpink;
        }
        footer{
            height: 200px;
            background: green;
        }
    </style>
    <!--[if lte IE 8]>
        <script src="html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
<!--1.语义化标签的作用-->
<!--1.1 从开发角度考虑是提高代码的可读性可维护性-->
<!--1.2 网站的发布者:seo 搜索引擎优化 -->

<!--2.语义化标签的兼容问题-->
<!--2.1 IE9以下不支持H5标签(大部分css3属性,一些H5的api)-->
<!--2.2 IE9以下不认识,把这些标签当做行内元素去看待-->
<!--2.3 语义化标签需要动态创建 document.createElement('header') 同时设置块级元素-->
<!--2.4 有一款插件能帮你完成这件事件  html5shiv.js   -->
<!--2.5 必须引入在头部,在页面结构之前,提前解析h5标签-->
<!--2.6 优化处理:支持H5标签的不需要加载,IE9以下不支持H5加载-->
<!--2.7 js判断客户的浏览器版本可以做到,但是不能做到js提前加载-->
<!--2.8 条件注释:网页的任何地方  根据浏览器版本去加载内容(html标签)-->
<!--2.9 固定语法  lt 小于  gt 大于  lte 小于等于  gte 大于等于 -->
<header>
1
</header>
<footer>
2
</footer>
<!--[if lt IE 9]>
    <h1>您的版本浏览器太低,请升级</h1>
<![endif]-->
</body>
</html>
0 条回应