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

news/2024/10/18 23:22:10/

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、新增表单元素和表单属性


http://www.ppmy.cn/news/411456.html

相关文章

IE浏览器相关

1.缓存问题 当2个请求的url完全相同时&#xff0c;IE会自动读取缓存里的页面&#xff0c;而不会去服务器请求新的页面。 当进行页面开发时&#xff0c;这一特性可能会导致页面产生的变化在刷新后看不着。 而当浏览器重启后&#xff0c;请求相同url时&#xff0c;才会向服务器…

关于IE

公司测试需要&#xff0c;得兼容IE8浏览器&#xff0c;于是乎、我得知道点儿关于IE的破事儿。 默认安装路径&#xff1a;C:\Program Files\Internet Explorer

迎接IE 9

最初发表在 QQ空间 迎接IE 9 前段时间安装了IE 9&#xff0c;一周下来多了不少体会。相比于IE 8&#xff0c;IE9具有不少的亮点&#xff0c; 1. UI更漂亮了&#xff0c;还是多tab的模型&#xff0c;tab排列在了address bar的右边&#xff0c;空间更大更简洁。微软的UI历来如此…

微软:别再使用IE浏览器了!!

程序员的成长之路 互联网/程序员/技术/资料共享 关注 阅读本文大概需要 2.8 分钟。 来自&#xff1a;码农学习联盟 微软终于要放弃IE浏览器了。 8月17日微软发布声明&#xff1a;微软将于一年后停止所有微软365&#xff08;原名Office 365&#xff09;办公应用中对IE 11浏览器…

“Microsoft Internet Explorer”,微软的最后一款IE,以此命名——IE6!

目录 IE6 2002年9月9日 2004年8月25日 Windows XP SP2 Webkit内核 Mac OS X系统 IE6 IE6界面2001年8月27日&#xff0c;微软发布IE6供Windows 98/SE、Windows NT4.0、Windows 2000和Windows ME用户升级安装。10月25日&#xff0c;Windows XP正式上市&#xff0c;集成IE6(版…

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

问题概述&#xff1a;IE8浏览器中还没有添加对HTML5新标签的支持&#xff0c;当在页面中使用HTML5新标签时&#xff0c;新标签不兼容 1&#xff09;使用JavaScript新增元素的方法解决 注意&#xff1a;使用javascript新增元素的方法解决&#xff0c;新增的出来的html5标签是行…

IE浏览器-官网下载地址

这里仅列出IE浏览器在微软官网的下载地址&#xff0c;便于日常使用。 WindowsXP | IE6下载地址&#xff1a;http://www.microsoft.com/zh-CN/download/details.aspx?id1 IE7下载地址&#xff1a;http://www.microsoft.com/zh-cn/download/internet-explorer-7-details.aspxhtt…

微软的IE 全称 变为,“Windows Internet Explorer“ ,从IE7 开始了!

目录 IE7 Windows XP 的 IE7(版本7.0.5710.13) 发布 Windows Vista 正式版发布 IE全称变为 "Windows Internet Explorer" Windows XP 系统的浏览器强制升级为 IE7 Windows XP的IE7(版本7.0.5710.13) 发布 2005 年 7 月 27日&#xff0c;伴随着Windows VistaBeta的发…