您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > H5

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

时间:2021-02-19 11:03:24  来源:  作者:
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="http://Apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->
</head>

<!--[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属性设置视频封面,
-->
<video
src="media/xiaomitv.mp4"
width="300"
height="100"
autoplay="autoplay"
muted="muted"
controls="controls"
loop="loop"
poster="images/a.jpg"
></video>
</body>

还可以采用如下代码,兼容多种格式的视频文件

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>

2)音频标签

audio:用来定义音频内容,支持多种音频格式,包括.mp3、.wav、.ogg等,最常用的是.mp3。

音频标签的用法和视频标签的基本一样,属性及属性值含义也基本一样。

Google的chrome浏览器将音频、视频自动播放给默认禁止了,视频可以通过添加静音播放折中解决,但是音频单独通过html标签和属性是不能解决的,需要js配合使用。

(3)智能表单标签

1)新增input类型

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

 

tel:限制输入电话号码,目前只有 Safari 8 支持 tel 类型;

email:在提交时验证输入内容是否符合邮箱格式;

date:限制输入的内容为日期,浏览器会弹出日期选择器;

time:限制输入的内容为时间,浏览器会弹出日期选择器;

number:限制输入的内容仅为数字;

url:在提交时验证输入内容是否符合url格式;

<form action="">
<ul>
<li>搜索:<input type="search" name="" id="" /></li>
 <li>电话:<input type="tel" /></li>
 <li>邮箱:<input type="email" /></li>
<li>日期:<input type="date" /></li>
<li>时间:<input type="time" /></li>
<li>数量:<input type="number" min="1" max="5"/></li>
<li>网址:<input type="url" /></li>
<li>附件:<input type="file" /></li>
<li><input type="submit" /></li>
</ul>
</form>

 

2)新增input的属性

min和max属性可以限制数字的最值,可以限制日期、时间类型的最值;其属性值为具体内容。

required属性表示必填项;其属性值为required。

placeholder属性表示提示信息,其属性值为提示信息。

multiple属性表示input类型为file时,可以文件多选;其属性值为multiple。

autocomplete属性表示是否显示之前提及过的文本信息;其属性值为on或者off。



Tags:HTML5   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的 HTML5 视频播放器插件&mdash;&mdash;MuiP...【详细内容】
2021-12-16  Tags: HTML5  点击:(22)  评论:(0)  加入收藏
Web项目开发中视频播放是一个非常常见的需求,需要播放器能够支持pc端和移动端的使用,并且支持常见的视频格式。我们从github上精选了5款优秀的Html5 播放器插件分享给大家。(排...【详细内容】
2021-09-17  Tags: HTML5  点击:(99)  评论:(0)  加入收藏
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  Tags: HTML5  点击:(343)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19  Tags: HTML5  点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20  Tags: HTML5  点击:(179)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24  Tags: HTML5  点击:(199)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12  Tags: HTML5  点击:(113)  评论:(0)  加入收藏
在本文中,我列出了十个我过去没用过的HTML5功能,但现在发现它们很有用,废话不多说,让我们开始吧。 detais 标签<details>标签向用户提供按需查看详细信息的效果。如果需要按需...【详细内容】
2020-10-09  Tags: HTML5  点击:(98)  评论:(0)  加入收藏
文章《HTML5语法概述》中,介绍了HTML5文档的组成,HTML5的组成可以用下图来表示: 除了上面的DOCTYPE标记以及html、head、title、meta、body元素外,我们编写HTML5文档时,会经常用...【详细内容】
2020-10-07  Tags: HTML5  点击:(69)  评论:(0)  加入收藏
介绍APlayer是一个简约且漂亮的HTML5音乐播放器,支持多种模式,包括播放列表模式、吸底模式、迷你模式、MSE模式、HLS模式。 Githubhttps://github.com/DIYgod/APlayer安装使...【详细内容】
2020-09-07  Tags: HTML5  点击:(550)  评论:(0)  加入收藏
▌简易百科推荐
前言在刚接触HTML的时候,你是否被它众多的标签所惊讶?尤其是HTNL5的标签,新增了不少,很多HTML4的标签跨版本之后就用不了了,如此多的标签,要记是不可能记完的,我们只需要一些常用的...【详细内容】
2021-08-27  鳌拜的表哥熬夜    Tags:HTML5   点击:(343)  评论:(0)  加入收藏
前言前段时间笔者一直忙于数据可视化方面的工作,比如如何实现拖拽式生成可视化大屏,如何定制可视化图表交互和数据导入方案等,这块需求在B端企业中应用非常大,所以非常有探索价...【详细内容】
2021-08-18  趣谈前端    Tags:H5编辑器   点击:(90)  评论:(0)  加入收藏
前言移动端开发在前端里像神一样地存在,不是说它多难而是说它坑位实在太多了,怎样填都填不完。Android和iOS各显神通,Android的系统版本和屏幕分辨率多得难以一招兼容,iOS的顽固...【详细内容】
2021-03-18      Tags:H5   点击:(228)  评论:(0)  加入收藏
1.HTML5是什么HTML是web开发中三大规范之一,可以参考:Web前端开发-HTML入门干货 。HTML产生于1990年,1997年的HTML4.0成为互联网标准并广泛应用,HTML5是在HTML4.01(1999年发布)的...【详细内容】
2021-02-19      Tags:HTML5   点击:(195)  评论:(0)  加入收藏
HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最...【详细内容】
2021-01-20      Tags:HTML5   点击:(179)  评论:(0)  加入收藏
前言浏览器越来越强大,从文字、图片、到声音、视频、动画与游戏都有了丰富的应用。H5之后,不仅仅是表现层,数据存储与通讯能力也得到大幅度提高,并逐渐取得共识,形成了标准。随着...【详细内容】
2020-12-29      Tags:H5应用   点击:(165)  评论:(0)  加入收藏
今天给大家隆重推荐一款超强功能的H5西瓜视频播放器插件xgplayer。 xgplayer 字节跳动公司西瓜播放器技术团队推出的开源音视频解决方案,star高达3.2K+。实现自定义加载、缓...【详细内容】
2020-11-24      Tags:XGPlayer   点击:(199)  评论:(0)  加入收藏
今天给大家推荐一款超棒的H5可视化网页制作编辑工具H5DS。 h5ds 基于HTML5构建的web网页可视化制作器。通过轻松拖拽元素即可快速生成精美的H5页面。 技术栈 前端:React+Mo...【详细内容】
2020-11-12      Tags:H5DS   点击:(393)  评论:(0)  加入收藏
今天给大家分享一款超全功能的跨浏览器平台甘特图表库DHTMLXGantt。 dhtmlx-gantt DHTMLX公司开源的 JavaScript 甘特图/横道图/条状图类库。用来快速构建显示项目、进度,和...【详细内容】
2020-11-12      Tags:HTML5   点击:(113)  评论:(0)  加入收藏
项目已经在10月底上线,最近又进入到其他项目里,到今天才抽出时间对这个项目总结一下。回顾一下,在项目的初期就设定为轻量级H5 App,上线后已经运行在 原生app、微信小程序、百...【详细内容】
2020-11-10      Tags:app开发   点击:(109)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条