整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5 浏览器支持

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

HTML5 浏览器支持

现代的浏览器都支持 HTML5。

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

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

甚至你可以教会 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>

实例

<!DOCTYPEhtml><html><head><metacharset="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 元素,但是:

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

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

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

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

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

<!--[if lt IE 9]>

<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

<![endif]-->

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

完美的 Shiv 解决方案

实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>渲染 HTML5</title><!--[if lt IE 9]> <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--></head><body><h1>我的第一篇文章</h1><article>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</article></body></html>

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

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

、易用性及代码简洁性

HTML5赋予网页更好的意义和结构。新的HTML标签像<header>, <footer>,<nav>,<section>, <aside>等等,使得阅读者更加容易去访问内容。使用新的语义学的定义标签,你可以更好的了解HTML文档,并且创建一个更好的使用体验。

ARIA是一个W3C的标准主要用来对HTML文章中的元素指定“角色“,通过角色属性来创建重要的页面地形例如,header,footer,navigation或者aritcle很有必要。这一点曾经被忽略掉了并且没有被广泛使用,因为事实上并不验证。然而,HTML5将会验证这样属性。同时,HTML5将会内建这些角色并且无法不覆盖。

二、本地存储特性

HTML5中最酷的特性就是本地存储。有一点像比较老的技术cookie和客户端数据库的融合。它比cooke更好用因为支持多个windows存储,它拥有更好的安全和性能,即使浏览器关闭后也可以保存。

因为它是个客户端的数据库,你不用担心用户删除任何cookie,并且所有主流浏览器都支持。

本地存储对于很多情况来说都不错, 它是HTML5工具中一个不需要第三方插件实现的。能够保存数据到用户的浏览器中意味你可以简单的创建一些应用特性例如:保存用户信息,缓存数据,加载用户上一次的应用状态。如果你对本地存储有兴趣,你可以看看这些文章

三、设备兼容特性(跨浏览器)

从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势

这里有很多的meta标签允许你优化移动:

viewport: 允许你定义viewport宽度和缩放设置
全屏浏览器: ISO指定的数值允许Apple设备全屏模式显示
Home screen icons: 就像桌面收藏,这些图标可以用来添加收藏到IOS和Android移动设备的首页

四、网页媒体特性更好的支持音、视频

支持网页端的Audio、Video等多媒体功能;在发布HTML5之前你需要使用<embed>和<object>标签,并且为了它们能正确播放必须赋予一大堆的参数。你的媒体标签将会非常复杂,大堆得令人迷惑的代码。而且HTML5视频和音频标签基本将他们视为图片:<video src=""/>。但是其它参数例如宽度和高度或者自动播放呢?不必担心,只需要像其它HTML标签一样定义:<video src=”url” width=”640px” height=”380px” autoplay/>。

<video src="movie.ogg" controls="controls">

您的浏览器不支持 video 标签。

</video>

五、三维、图形及特效特性

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果,用户使用<canvas>可以开发游戏。<canvas>元素本身不具备绘制能力,依靠脚本来完成

当然HTML5还有诸多特性,以上简单的总结了一些。更多特效及用法参考w3school提供的手册;现在网络上HTML5相关的视频教程数不胜数。极客还有慕课都是很不错的

需要帮助可以关注公众号:伙拼学习

TML5是HTML最新的修订版本,由万维网联盟(W3C)于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在网际网路应用迅速发展的时候,使网路标准达到符合当代的网路需求。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要外挂程式的丰富性网路应用服务(Plug-in-Based Rich Internet Application,RIA),例如:Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效加强网路应用的标准集。

HTML5添加了许多新的语法特征,其中包括<video>、<audio>和<canvas>元素,同时整合了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素,像<a>、<cite>和<menu>被修改,重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。

发展历史

网页超文本技术工作小组(WHATWG)于2004年开始制定新标准。在当时,HTML 4.01自2000年来没有更新,以及全球资讯网协会(W3C)正在将未来的发展重点放在XHTML 2.0。2009年,W3C允许XHTML 2.0工作组章程结束过期并且决定不再续订。W3C与WHATWG合作共同为发展HTML5而努力。

2004年6月,Mozilla基金会和Opera软体公司在全球资讯网协会(W3C)所主办的研讨会上提出了一份立场文件,其重点是开发与现有浏览器向后相容的技术,包括Web Forms 2.0最初草案规范。研讨会最后以——8票赞成,14票反对——否决继续对HTML的开发工作。这引起一些人的不满,在研讨会之后,网页超文本技术工作小组(WHATWG)立即根据该立场文件成立,第二个草案,Web Applications 1.0也公布了。后来这两种规范合并形成HTML5。2007年,获得W3C接纳,并成立了新的HTML工作团队。2008年1月22日,第一份公开工作草案发布。

尽管HTML5已经在网络开发人员中非常出名了,但是它成为主流媒体的一个话题是在2010年的4月,当时苹果公司的CEO乔布斯发表一篇题为“对Flash的思考”的文章,指出随着HTML5的发展,观看影片或其它内容时,Adobe Flash将不再是必须的。这引发了开发人员间的争论,包括HTML5虽然提供了加强的功能,但开发人员必须考虑到不同浏览器对标准不同部分的支持程度的不同,以及HTML5和Flash间的功能差异。

特点

标记

HTML5提供了一些新的元素和属性,反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签,但有一定含义,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理、小萤幕装置和视障人士使用。同时为其他浏览要素提供了新的功能,通过一个标准接口,如<audio>和<video>标记。一些过时的HTML 4.01标记将取消,其中包括纯粹用作显示效果的标记,如<font>和<center>,因为它们已经被CSS取代。还有一些透过DOM的网络行为。

尽管和SGML在标记上的相似性,HTML5的句法并不再基于它了,而是被设计成向后兼容对老版本的HTML的解析。它有一个新的开始列看起来就像SGML的文档类型声明,<!DOCTYPE HTML>,这会触发和标准兼容的渲染模式。在2009年1月5日,HTML5添加了Web Form 2.0的内容,HTML5开始发展起来。

新的API

HTML5相关APIs

除了原先的DOM接口,HTML5增加了更多样化的应用程序接口(API):

Canvas

定时媒体播放

离线

可编辑内容

拖放

历史

MIME和协议处理程序时表头登记

微数据

网路讯息

网路存储

以上技术尽管是WHATWG HTML说明文档的内容,但并没有全部包括在W3C HTML5的说明文档里。一些相关的技术,像下面所列的,并没有包括在这2份文档中的任何一份中。W3C给这些技术单独出版了说明文档。

地理位置

网页SQL数据库 ─ 本地SQL数据库(不再维护)

IndexedDB

文件─ 处理文件上传和操纵文件

目录和文件系统 ─ 这个API是为了满足客户端在没有好的数据库支持情况下存储要求

文件写入 ─ 从网络应用程序向文件里写内容

网路音频

ClassList

网路加密

WebRTC

一个普遍的误解是HTML5能够在网页中提供动画效果,这是不对的,动画效果是需要配合JavaScript和CSS。然而静态HTML5配合CSS可以表示出覆杂的排版结构而且原生支援与影片的混合与控制(控制一般由JavaScript执行),因此简单可以把HTML5单位时间的状态理解为动画的关键影格。

XHTML5(XML-serialized HTML5)

XHTML5是对HTML5的XML序列化。XML文档必须被设置为XML互联网文件类型,像application/xhtml+xml或者application/xml。XHTML5要求像XML一样严格的格式化的语法。在XHTML5中,HTML5的<!DOCTYPE HTML>可有可无的。

XHTML5并非XHTML的第5版,没有自己独立的标准规范,而是HTML5的一种序列化方式。XHTML1.x和2.0使用的名字是Extensible HyperText Markup Language,不同于XHTML5。

异常处理

HTML5在设计时保证旧的浏览器能够安全地忽略掉新的HTML5代码。与HTML4.01相比,HTML5给出了解析的完整规则,让不同的浏览器即使在发生语法错误时也能返回完全相同的结果。

普及率

根据2011年9月30日发布的一份报告,全球排名前100的网站中有34个网站使用HTML5──主要是搜寻引擎与社群网站。2013年8月发布的另一份报告显示,财富美国500强企业中已有多达153家采用HTML5。

HTML 4.01和XHTML 1.x的差异

以下为大略的不同之处,与例子:

文件类型声明(<!DOCTYPE>)仅有一型:<!DOCTYPE HTML>。

新的解析顺序:不再基于SGML。

新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr。

input元素的新类型:date, email, url等等。

新的属性:ping(用于a与area), charset(用于meta), async(用于script)。

全域属性:id, tabindex, repeat。

新的全域属性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。

移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt。