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

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

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

比较标签：

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

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

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

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

语义化标签的意义：

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

HTML 5 中的语义化标签：

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

借用一张图：

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.

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

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>

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

语义化标签的意义：

HTML 5 中的语义化标签：

浏览器兼容

在网页字体加载期间所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

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

语义化标签的意义：

HTML 5 中的语义化标签：

浏览器兼容

在网页字体加载期间 所有文本都保持可见状态

WordPress使用webP格式减少图片体积

微信小程序中组件无法使用全局样式 (app.wxss)

datetimepicker控件在formvalidation框架中的问题

在网页字体加载期间所有文本都保持可见状态