当前位置 : IT培训网 > Web前端 > Web教程 > 哪些浏览器支持HTML5

哪些浏览器支持HTML5

时间:2016-12-06 14:29:45  来源:web前端培训网  作者:IT培训网  已有:名学员访问该课程
随着互联网的发展,浏览器的使用对大家来说非常重要,毕竟一个占用内存小浏览速度快的页面可以提高我们的阅读量。而html5对浏览器的兼容将有助于提高我们浏览网页的速度,你现在使用的是哪一款浏览器呢,是否支持HTML5呢!

你的浏览器支持HTML5吗,你的浏览器兼容HTML5吗,你知道什么是HTML5吗,想要了解它吗,哪些浏览器支持html5呢,今天IT培训网小编就来给大家详细介绍下HTML5支持哪些浏览器。

HTML5 浏览器支持

你可以让一些较早的浏览器(不支持HTML5)支持 HTML5。

HTML5 浏览器支持

现代的浏览器都支持 HTML5。

此外,所有浏览器,包括旧的和最新的,对无法识别的元素会作为内联元素自动处理。

正因为如此,你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。

Note         甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。

将 HTML5 元素定义为块元素

HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元素都是 块级 元素。

为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 block:

实例

header, section, footer, aside, nav, main, article, figure {

    display: block;

}

为 HTML 添加新元素

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素,并为该元素定义样式,元素名为 <myHero> :

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>为 HTML 添加新元素</title>

<script>

document.createElement("myHero")

</script>

<style>

myHero {

    display: block;

    background-color: #ddd;

    padding: 50px;

    font-size: 30px;

}

</style>

</head>

<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

<myHero>我的第一个新元素</myHero>

</body>

</html>

运行结果:

我的第一个标题

我的第一个段落。

我的第一个新元素

JavaScript 语句 document.createElement("myHero") 是为 IE 浏览器添加新的元素。

Internet Explorer 浏览器问题

你可以使用以上的方法来为 IE 浏览器添加 HTML5 元素,但是:

Note         Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>

  <script src=" http://www.alisonhorn.com/templets/default/js/jquery-1.11.3.min.js "></script>

<![endif]-->

以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

注意:国内用户请使用本站静态资源库(Google 资源库在国内不稳定):

<!--[if lt IE 9]>

  <script src=" http://www.alisonhorn.com/templets/default/js/jquery-1.11.3.min.js"></script>

<![endif]-->

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。

完美的 Shiv 解决方案

实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>渲染 HTML5</title>

  <!--[if lt IE 9]>

  <script src=" http://www.alisonhorn.com/templets/default/js/jquery-1.11.3.min.js "></script>

  <![endif]-->

</head>

<body>

<h1>我的第一篇文章</h1>

<article>

IT培训网-学IT技术拿高薪 快速就业不是事!

</article>

</body>

</html>

运行结果:

我的第一篇文章

IT培训网-学IT技术拿高薪 快速就业不是事!

jquery-1.11.3.min.js 引用代码必须放在 <head> 元素中,因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

随着互联网的发展,浏览器的使用对大家来说非常重要,毕竟一个占用内存小浏览速度快的页面可以提高我们的阅读量。而html5对浏览器的兼容将有助于提高我们浏览网页的速度,你现在使用的是哪一款浏览器呢,是否支持HTML5呢!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
Web 教程
1、HTML 教程
1.1 HTML 简介
1.2 HTML 编辑器
1.3 HTML 基础
1.4 HTML 元素
1.5 HTML 属性
1.6 HTML 标题
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 链接
1.10 HTML 头部
1.11 HTML CSS
1.12 HTML 图像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 区块
1.16 HTML 布局
1.17 HTML 表单
1.18 HTML 框架
1.19 HTML 颜色
1.20 HTML 颜色名
1.21 HTML 颜色值
1.22 HTML 脚本
1.23 HTML 字符实体
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 总结
1.27 HTML 简介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 浏览器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 内联 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(视频)
2.10 HTML5 Audio(音频)
2.11 HTML5 Input 类型
2.12 HTML5 表单元素
2.13 HTML5 表单属性
2.14 HTML5 语义元素
2.15 HTML5 Web 存储
2.16 HTML5 Web SQL
2.17 HTML5 应用程序缓存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代码规范
3、HTML 媒体
3.1 HTML 媒体(Media)
3.2 HTML 插件
3.3 HTML 音频(Audio)
3.4 HTML视频(Videos)播放