web HTML5新标签对IE低版本浏览器的兼容处理

1）使用JavaScript新增元素的方法解决

注意：使用javascript新增元素的方法解决，新增的出来的html5标签是行级元素，需要css把行内元素转为块
//js创建html5标签document.createElement("header");document.createElement("nav");document.createElement("article");document.createElement("section");document.createElement("aside");document.createElement("footer");</script>
最后在css样式中将新建的header元素转为块级元素
header,nav,article,section,aside,footer {display: block;}


<header>我说头部信息</header>

2）使用谷歌提供的html5shiv.js解决

插件功能：用于解决IE8及以下版本的浏览器对HTML5新增元素的不兼容问题
写在网页头部（写在head标签内部）
<script src="js/html5shiv.min.js"></script>

可以使用本地文件也可以使用外部资源库

- 百度静态资源库：（国内推荐使用）http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

4、html5里废弃的一些标签

● <acronym> 定义只取首字母缩写
● <applet> 规定 Java applet 的文件名
● <basefont> 定义文档中所有文本的默认颜色、大小和字体
● <big> 呈现大号字体效果
● <center> 标签控制文本的居中显示
● <dir> <dir> 标签定义目录列表
● <font> 标签规定文本的字体、字体尺寸、字体颜色
● <frame> 标签定义 frameset 中的一个特定的窗口（框架）
● <frameset> frameset 元素可定义一个框架集
● <noframes> noframes标签向浏览器显示无法处理框架的提示文本
● <strike> strike 标签可定义加删除线文本定义。

注意：由于H5是向后兼容的，所以在H5中使用这些标签也不会报错或出现异常，但这些元素在H5中已不被W3C标准推荐，建议尽量不要使用。

5、新增的多媒体元素

HTML5 规定了网页包含视频、音频的标准方法

1、音频audio

HTML5种新增的音频的标准方法
IE8及更早版本的浏览器中不支持
HTML5中支持的音频格式
- ogg audio/ogg 支持浏览器 chrome、Firefox、Opera10+
- MP3 audio/MPEG 支持浏览器 chrome、firefox、OPera10+、IE9+、safari
- wav audio/wav 支持浏览器 chrome、Firefox、Opera、Safari
语法

<audio src="音频文件路径"></audio>
加controls属性才可以播放
<audio src="./file/zhoujie.mp3" controls loop muted></audio>
行内块标签

常用属性
- src属性：音频文件的路径
- controls属性：浏览器为音频提供播放控件
- loop属性；循环播放
- muted属性；静音

2、视频video

HTML5中视频标准方法
IE8及更早版本的浏览器中不支持video标签
HTML5支持的视频格式：
- ogg 支持的浏览器chrome、Firefox、Opera
- MPEG4--mp4 支持的浏览器chrome、Firefox、Safari、IE9+
- WebM 支持的浏览器chrome、Firefox、Opera
语法

加controls属性才可以播放
<video src="./file/movie.mp4" controls></video>
行内块标签

常用属性
- src属性：视频文件的路径
- controls属性：视频播放控件
- loop属性：循环播放
- muted属性：静音
- width属性、height属性：视频播放器的宽度和高度
- poster属性：预览图片,视频正在下载时显示的图像
- autoplay属性：自动播放，必须静音后在播放

 <video controls poster="./img/01.jpg" width="200" height="200"></video><videosrc="https://vd2.bdstatic.com/mda-mjvzirggcr2a3c17/sc/cae_h264/1635637675078235418/mda-mjvzirggcr2a3c17.mp4?v_from_s=hkapp-haokan-hbe&auth_key=1637133051-0-0-593bc07d93a97bc192aa780d14e008e7&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=3000186_1&klogid=2451088368"controls></video>

3、source音频媒介标签

允许使用source标签引入多个音频、视频资源，浏览器使用第一个可以被识别的格式

     <source src="" type="audio/ogg"><source src="" type="video/mp4">
<!-- 音频 --><audio controls><source src="../file/movie.ogg" type="audio/ogg"><source src="../file/zhoujie.mp3" type="audio/mp3"></audio>
<!-- 视频 --><video controls><source src="../file/guo.mp4" type="video/mp4"><source src="../file/movie.webm" type="video/webm"><source src="../file/movie.ogg" type="video/ogg"></video>

6、新增表单元素和表单属性

web HTML5新标签对IE低版本浏览器的兼容处理相关推荐

HTML5新标签对IE低版本浏览器的兼容处理
问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法解决注意:使用javascript新增元素的方法 ...
解决html5语意标签在IE低版本浏览器下的兼容问题：
方法一:手动改写. 1.在body中写入h5语意标签,这里用nav标签举例子:<nav></nav> 2.在js中手动创建h5的语意标签:document.createElem ...
HTML5新标签及特性
HTML5 html经过了第5次重大改版,增加了一些语义化的标签高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的标签仍然可以用 1.新特性新增语义化元素新增表单相 ...
低版本浏览器兼容处理
1.HTML5新标签对IE低版本浏览器的兼容处理问题概述:IE8浏览器中还没有添加对HTML5新标签的支持,当在页面中使用HTML5新标签时,新标签不兼容 1)使用JavaScript新增元素的方法 ...
css3低版本浏览器兼容性问题
css3低版本浏览器兼容性问题什么是浏览器兼容性问题? 浏览器内核不同,对同一段代码会有不同的解析,就会造成页面效果不统一的情况,进而造成浏览器兼容性问题. 各个浏览器内核: 浏览器类型内 ...
解决ie8及低版本浏览器不支持html5标签属性
html5新标签<head>.<nav>.<footer>兼容性 - 经验小结,处理方案 IE支持: IE8或更早的版本不支持HTML5的<nav>标签 ...
【Day05】Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5？
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
html5中新增标签的兼容性如何设置,HTML5新标签的兼容性处理
普通浏览器普通不支持HTML5新标签的浏览器 -- 能正常解析,但会当初成 inline 元素对待在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只 ...
HTML5新标签与特性（笔记）
HTML5新标签与特性前言新增语义化标签新增标签属性新增的input的type属性值多媒体标签 embed audio video 字体图标前言 HTML5 : HTML 标准的最新版 ...

web HTML5新标签对IE低版本浏览器的兼容处理

1）使用JavaScript新增元素的方法解决

2）使用谷歌提供的html5shiv.js解决

4、html5里废弃的一些标签

5、新增的多媒体元素

1、音频audio

2、视频video

3、source音频媒介标签

6、新增表单元素和表单属性

web HTML5新标签对IE低版本浏览器的兼容处理相关推荐

最新文章

热门文章