江苏龙网

  1. 主页 > 生活百科 > >

HTML5新增常用标签及浏览器版本兼容性问题解决

HTML5


HTML5新增常用标签及浏览器版本兼容性问题解决

文章插图
 
1.html5是什么HTML是web开发中三大规范之一，可以参考：Web前端开发-HTML入门干货  。
HTML产生于1990年，1997年的HTML4.0成为互联网标准并广泛应用，HTML5是在HTML4.01（1999年发布）的基础上发展而来，在2008年正式发布，在2012年形成了稳定版本 。
其实在HTML4.01之后，W3C组织除了HTML5之外，为了严格html编写规范，发布了XHTML 。经过了跌宕起伏的分歧、融合之路，本来预计要逐步被XHTML替代的HTML5，最终成了W3C组织确认的html规范 。
在HTML5规范中添加了很多新元素及功能，比如： 更好的页面结构（语义化标签）、图形的绘制（画布）、多媒体（音频、视频）内容、智能表单、地理位置、数据存储以及多线程等 。
2.支持HTML5的浏览器版本可以通过html5test.com网站，测试HTML5各标签在各类浏览器中支持程度 。
HTML5新增常用标签及浏览器版本兼容性问题解决

文章插图
html5test.com

HTML5新增常用标签及浏览器版本兼容性问题解决

文章插图
PC浏览器各版本支持HTML5考量

HTML5新增常用标签及浏览器版本兼容性问题解决

文章插图
移动浏览器各版本支持HTML5考量
对于IE6、7、8来讲，支持极少部分的HTML5新标签，IE9也是部分支持 。
HTML5新增常用标签及浏览器版本兼容性问题解决

文章插图
 
3.如何解决低版本浏览器兼容HTML5标签在低版本浏览器中兼容使用HTML5标签，有两种方案，一：自定义标签；二：使用第三方js插件
（1）自定义标签
可以利用添加自定义标签的方式为IE 浏览器添加 HTML5 元素 。
<script>//可以使用自定义标签document.createElement("header");document.createElement("article");document.createElement("aside");document.createElement("section");document.createElement("footer");</script>但是Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式，所以采用以下方式 。
（2）利用第三方js插件
html5shiv.js是第三方插件，能够解决IE9以下浏览器对html5新增标签的不识别，并导致css不起作用的问题 。
<head><meta charset="utf-8"><title>渲染 HTML5</title><!-- 专门针对IE浏览器的语句，且只能被IE9识别，其他浏览器将以下if endif语句认为是注释 --> <!--[if lt IE 9]> <script src=https://www.isolves.com/it/cxkf/ydd/html5/2021-02-19/"http://Apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"> <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
4.新增常用的HTML5标签（1）语义化标签
相对于无具体含义的div和span标签，语义化标签的优点是方便搜索引擎能识别页面结构，有利于seo 。
header：该标签定义了页面的头部区域；
nav：该标签定义了页面的导航链接区域；
footer：该标签定义了页面或section的页脚；
section：该标签定义了页面区域；
article：该标签定义了页面的内容区域；
HTML5新增常用标签及浏览器版本兼容性问题解决

文章插图
 
（2）多媒体标签
1）视频标签
video：用来定义视频内容，支持多种视频格式，包括.mp4、.ogg、.webm等，最常用的是.mp4 。
<body> <!-- src属性设置视频源，width、height设置视频大小，单位是像素，autoplay属性设置自动播放，对于google浏览器需要添加muted属性,表示静音播放，controls属性设置播放控件，包括播放、暂停等，loop属性设置视频循环播放，poster属性设置视频封面，--><videosrc=https://www.isolves.com/it/cxkf/ydd/html5/2021-02-19/"media/xiaomitv.mp4"width="300"height="100"autoplay="autoplay"muted="muted"controls="controls"loop="loop"poster="images/a.jpg">还可以采用如下代码，兼容多种格式的视频文件
<video width="320" height="240" controls="controls"><source src=https://www.isolves.com/it/cxkf/ydd/html5/2021-02-19/"movie.mp4" type="video/mp4" />Your browser does not support the video tag.


推荐阅读


上一篇：白毫银针香气特点,白毫银针十不采

下一篇：Linux怎么查看进程资源使用情况