HTML 5

Posted 2020-07-03 醉菜鸟

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(html)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

 

基本信息

• 中文名称

  HTML5.0

• 外文名称

  HTML5.0

• 支持浏览器

  IE9+,Chrome25+,Firefox19+

• 标准发布时间

  2014年9月

目录	1简介 2特性 3现状 4优点 5盈利方案	6沿革 7控件 8图表库 9争议 10规范	11发展趋势 12应用须知 13漏洞 14未来趋势 15HTML5优势?

折叠 编辑本段 简介

HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2013年5月6日， HTML 5.1 正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言：超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像img标签及svg也进行了改进，性能得到进一步提升。

支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

折叠 编辑本段 特性

语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

本地存储特性（Class: OFFLINE  STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

三维、图形及特效特性（Class: 3D, Graphics  Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

性能与集成特性（Class: Performance  Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

折叠 编辑本段 现状

在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用javascript引擎。

JavaScript引擎的构建方法让制作手机网页游戏成为可能。由于界面层很复杂，已预订了一个UI工具包去使用。

纯HTML5手机应用运行缓慢并错漏百出，但优化后的效果会好转。尽管不是很多人愿意去做这样的优化，但依然可以去尝试。

HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原生应用的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行，这是首先得解决的一个问题。现在html5的应用已经相当广泛，未来移动互联网都需要用到html5开发应用[2]  

HTML5的移植非常简单，但假设每个人都会让这变成一个自动化操作。 如果你想在移动互联网这一块有所发展，成为web前端大神，你可以来这个群，前面是四一八，中间是355，后面是五三一。连起来就可以了。 这里有很多互联网大牛教你学习，还有免费的课程。不是想学习的就不要加了。

折叠 编辑本段 优点

折叠 网络标准

HTML5本身是由W3C推荐出来的，它的开发是通过谷歌、苹果，诺基亚、中国移动等几百家公司一起酝酿的技术，这个技术最大的好处在于它是一个公开的技术。换句话说，每一个公开的标准都可以根据W3C的资料库找寻根源。另一方面，W3C通过的HTML5标准也就意味着每一个浏览器或每一个平台都会去实现。

折叠 多设备、跨平台

用HTML5的优点主要在于，这个技术可以进行跨平台的使用。比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台非常强大，也是大多数人对HTML5有兴趣的主要原因。

自适应网页设计

很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？

2010年，Ethan Marcotte提出了”自适应网页设计“这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。

这就解决了传统的一种局面——网站为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

折叠 即时更新

游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新。

总结概括HTML5有以下优点：

1、提高可用性和改进用户的友好体验；

2、有几个新的标签，这将有助于开发人员定义重要的内容；

3、可以给站点带来更多的多媒体元素(视频和音频)；

4、可以很好的替代FLASH和Silverlight；

5、当涉及到网站的抓取和索引的时候，对于SEO很友好；

6、将被大量应用于移动应用程序和游戏。

折叠 编辑本段 盈利方案

第一个解决方案，现有的盈利模式可以移植到HTML5.今天游戏通过跟苹果App Store非常赚钱，其实HTML5的模式也可以通过封装把游戏放到App Store一样的分成赚钱。

第二个解决方案，HTML5游戏可以“傍着”平台，比方说Opera的游戏平台或其它浏览器的平台，以及所谓云游戏的游戏平台，都是新的盈利模式的平台。

第三个解决方案，在谈到HTML5游戏与原生应用的表现性能比时，开发者需要考虑清楚要做的究竟是怎样一款游戏，HTML5更适合轻量级的小游戏。而且HTML5在代码保密性方面并不弱于原生应用。

折叠 编辑本段 沿革

HTML5提供了一些新的元素和属性，例如nav（网站导航块）和footer。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如audio和video标记。

1、取消了一些过时的HTML4标记

其中包括纯粹显示效果的标记，如font和center，它们已经被CSS取代。

HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

2、将内容和展示分离

b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

3、一些全新的表单输入对象

包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

4、全新的，更合理的Tag

多媒体对象将不再全部绑定在object或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

5、本地数据库

这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的丰富动画。

6、Canvas 对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

7、浏览器中的真正程序

将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。

8、Html5取代Flash在移动设备的地位。

折叠 重要标记

video标记

定义和用法：

video 标签定义视频，比如电影片段或其他视频流。

audio 标记

定义和用法

audio 标签定义声音，比如音乐或其他音频流。

实例：

一段简单的HTML 5 音频

audio src=someaudio.mp4

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

/audio

canvas 标记

定义和用法：

canvas 标签定义图形，比如图表和其他图像。

HTML5 的 canvas 元素使用JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

实例：

通过 canvas 元素来显示一个红色的矩形：

canvas id=myCanvas/canvas

script type=text/javascript

var canvas=document.getElementById(‘myCanvas‘);

var ctx=canvas.getContext(‘2d‘);

fillStyle=‘#FF0000‘;

fillRect(0,0,80,100);

/script

折叠 程序接口

除了原先的DOM接口，HTML5增加了更多API,如：

1． 用于即时2D绘图的Canvas标签

2． 定时媒体回放

3． 离线数据库存储

4．文档编辑

5． 拖拽控制

6． 浏览历史管理

折叠 元素变化

新的解析顺序新的元素：section, video, progress, nav, meter, time, aside, canvasinput

元素的新属性：日期和时间，email, url。

新的通用属性：ping, charset, async

全域属性：id, tabindex, repeat。

移除元素：center, font, strike。

折叠 异常处理

HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

折叠 编辑本段 控件

就是Html标注的属性里加上runat=server所构成的控件，至于Html标注和Html控件之间的区别很明显，Html控件是运行于服务器端，Html标注是运行于客户端。

基本Html控件有：HtmlTexAreakongjianHtmlTable\HtmlImage\HtmlButton\HtmlSelect\HtmlForm\HtmlInput。

自定义的Html控件是根据自己的需求定义。当自主开发效率低，可以从技术社区、源码网站下载需要的控件。比如，需要插入table, image, links 等标签。不必自己开发，可以使用：ComponentOne Wijmo Editor等。

免费HTML5图表库

领先的.Net图表控件Chart FX深受大家喜爱，相信大家已经非常熟悉了。不过今天慧都从Chart FX的开发商SoftwareFX获得一个激动人心的消息：该公司近日推出一套为HTML5，jQuery和JavaScript开发者设计的图表库——jChartFX，而且jChartFX是免费的！

折叠 编辑本段 图表库

领先的.Net图表控件Chart FX深受大家喜爱，相信大家已经非常熟悉了。Chart FX的开发商SoftwareFX推出的一套为HTML5、jQuery和JavaScript开发者设计的免费HTML5图表库——jChartFX！

jChartFX亮点：

jChartFX充分利用了HTML5，CSS和SVG，让您能够在浏览器提供美观优越的图表和更丰富的最终用户体验。

jChartFX拥有很多令人振奋的功能，它在无插件纯JavaScript的浏览器上运行，这意味着在提高了网站安全性和速度的同时，最大程度的减少了网站服务器的负荷。

jChartFX还能够自动整合到jQuery UI ThemeRoller，自动读取并解释jQuery的主题和CSS文件，能够快速适应您的页面布局和设计，无需一行代码。

jChartFX支持JSON，JSON能够帮助您实现，任何数据源中的数据都可以展现到图表中。

jChartFX还支持超过40种的2D、3D图表类型，免费的图表控件中支持如此之多的图表展示类型实属难得。

折叠 编辑本段 争议

HTML5在诞生之后，就树立了一个原则，那就是所有的技术必须是开放的，不准有专利限制，在这期间Opera捐献了CSS技术，而Google则提供了视频格式WebM。

可以说大部分的HTML协议在众多网络技术公司中达成共识，但在视频格式方面，世界各大互联网公司正在为具体标准进行争论，这可能影响HTML5标准的分流。纷争的两大阵营分别是Opera、火狐、Google等，另一大阵营则由苹果公司领衔。

WebM阵营认为MPEG格式是具有专利保护的，这违背了HTML5所有技术必须开放的原则。MPEG阵营则更多地是因为自身就在使用这种视频格式。

折叠 编辑本段 规范

HTML5和Canvas 2D规范的制定已经完成，尽管还不能算是W3C标准，但是这些规范已经功能完整，企业和开发人员有了一个稳定的执行和规划目标。

W3C首席执行官Jeff Jaffe表示：“从今天起，企业用户可以清楚地知道，他们能够在未来依赖HTML5。”HTML5是开放Web标准的基石，它是一个完整的编程环境，适用于跨平台应用程序、视频和动画、图形、风格、排版和其它数字内容发布工具、广泛的网络功能等等。

为了减少浏览器碎片、实现于所有HTML工具的应用，W3C从今天开始着手W3C标准化的互操作性和测试。和之前宣布的规划一样，W3C计划在2014年完成HTML5标准。

HTML工作组还发布了HTML5.1、HTML Canvas 2D Context、Level 2以及主要元素的草案，让开发人员能提前预览下一轮标准。

折叠 编辑本段 发展趋势

HTML5规范开发完成时，将成为主流。

据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTML Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。

据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整 合HTML5技术。

12月，万维网联盟宣布已经完成对HTML5标准以及Canvas 2D性能草案的制定，这就意味着开发人员将会有一个稳定的“计划和实施”目标。有很多的文章都在号召使用 HTML5，并大力宣传它的的好处。此前，站长之家曾经做过一期调查，调查显示只有36.16%的站长正在学习中，另外的63.76%表示正在观望中。作为站长，你是否准备开始学习HTML5？

从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。第一，从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东 西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。

折叠 编辑本段 应用须知

它可能会消灭Flash

许多业内人士表示，HTML将会最终代替多媒体框架，如Adobe的Flash，但是短期看来还不是时候。HTML5估计到2014年才能逐步成熟，而且将现有应用Flash的网络开发完全转向HTML5还需要一段时间。尽管HTML5提出了许多优点，但是还可能有某些应用更适合于更灵活的框架。一些主流的大公司都逐步转向使用HTML5，但是这个转变的过程也不是一蹴而就的。

它新并不表示它安全

网络应用开发工程师们在学习新技术的同时需要时刻记住网络安全。HTML5所构建的网页和其他语言编写的网页一样容易泄露一些敏感数据。欧洲网络信息安全机构（European Network and Information Security Agency，ENISA）已经警告说HTML5可能并不够安全。

它承诺带来一个无缝的网络

HTML5会带来一个统一的网络，无论是笔记本，台式机，还是智能手机都应该很方便的浏览基于HTML5的网站。因此在设计网站的时候，开发者需要重新考虑用户体验，网站浏览，网站结构等因素使得这个网站对任何硬件设备都通用。

它会变成企业的SaaS平台

一些重量级的企业，如微软，Salesforce，SAP Sybase正在开发HTML5的开发工具。如果你正在构建企业应用，很可能不久的将来你就要用到HTML5。所以当构建公司的SaaS战略迁移的时候也不要忘记HTML5。

它将会变得很移动

几乎所有人都热衷于开发独立的移动应用，但是HTML5很可能会是独立移动应用的终结者。由于HTML5将应用的功能直接加入其内核，这很可能引导移动技术潮流重新回到浏览器时代。HTML5允许开发者在（移动）浏览器内开发应用，所以如果你正在制定一项桌面或者移动应用的长期发展策略，你可能需要考虑这一点。

折叠 编辑本段 漏洞

2013年3月，HTML5编程语言的一个漏洞被发现：它允许网站利用数GB垃圾数据对用户展开轰炸，甚至会在短时间内将硬盘塞满。多款主流浏览器均会受此影响。

一位名叫菲罗斯·阿伯克哈迪杰哈(Feross Aboukhadijeh)的开发者率先发现了这一漏洞，他表示，多数主流网络浏览器均会受到影响，包括苹果Safari、谷歌Chrome、微软IE和Opera。唯一能够阻止数据大量加载的是Mozilla的火狐浏览器，该产品的数据存储上限为5MB。

该问题的根源在于HTML5存储本地数据的方式。虽然每个浏览器都有不同的存储参数，但很多都支持用户自定义限制，且至少会在用户电脑上存储2.5MB数据。

阿伯克哈迪杰哈发现了一个绕过数据上限的方法，它创建了多个与用户访问过的网站链接的临时网站。由于多数浏览器不会计算这种偶然情况，所以二级网站也可以存储与主网站相同量的数据。通过大批生成这种网站，该漏洞便可向受影响的电脑加载海量数据。

在测试这一漏洞的过程中，阿伯克哈迪杰哈每16秒即可向他的固态硬盘版MacBook Pro中加载1GB数据。他指出，Chrome等32位浏览器可能会在硬盘塞满前崩溃。“一些采用高明代码的网站其实已经取消了用户电脑对数据存储的限制。”阿伯克哈迪杰哈说。阿伯克哈迪杰哈已经发布一组代码来利用该漏洞，并创建了一个名为Filldisk的专用网站来凸显该漏洞的危害。

折叠 编辑本段 未来趋势

1、移动优先

从如今层出不穷的移动应用就知道，在这个智能手机和将平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。

2、游戏开发者领衔“主演”

许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。通过PhoneGap及appmobi的XDK将Web应用游戏打包整合到原生应用中也是一种方式，Facebook差不多就这么干的——基于Web应用及浏览器，但却将之打包整合进原生应用。

折叠 编辑本段 HTML5优势?

HTML5可以提供:

1.提高可用性和改进用户的友好体验;

2.有几个新的标签，这将有主(助?)开发人员定义重要的内容;

3.可以给站点带来更多的多媒体元素(视频和音频);

4.可以很好的替代FLASH和Silverlight;

5.当涉及到网站的抓取和索引的时候，对于SEO很友好;

6.将被大量应用于移动应用程序和游戏。

因此，我们可以说HTML5有一天将使WEB更加的美好，但是有一天并不是现在。我们不能不提到重要的一点：迄今为止，并没有什么流行的浏览器可以完 全的支持HTML5规范的所有功能。需要明确的是，今天的主流浏览器都将趋于支持HTML5，但是仍存在许多不完全的支持或兼容。

谷歌和HTML5

2010年5月22日，谷歌创建了一个涂鸦来纪念Pac Man的视频游戏。这个涂鸦是一个动画，同时也是一个可以玩的Pac Man的游戏。这个涂鸦就是谷歌通过使用HTML5标准制作的，当然谷歌也提供一个FLASH版本来支持不兼容HTML5的浏览器。我敢打赌，这是大多数 互联网网民第一次和HTML5的接触。对于个人来说，这是一个兴奋的消息。以我的观点，这个涂鸦提供了一个机会可以窥视未来互联网、网页、移动应用软件和游戏等发展趋势。对于搜索引擎优化，他开辟了我更多的想象，它让我思考HTML5在SEO领域的潜力。网站转移到HTML5标准对于SEO有什么优势?

HTML 5开发领域的领军人物包括Sencha，Adobe，Appcelerator，appMobi及Facebook，亚马逊，Google三大巨头。不管你是想开发出新型视频应用的开发商如Brightcover还是想开发新型音频应用的开发商如Soundcloud，不论是桌面应用还是移动应用，HTML 5都是创新的主旋律。

HTML5与SEO

一：使搜索引擎更加容易抓取和索引

对于一些网站，特别是那些严重依赖于FLASH的网站HTML5是一个大福音。如果你有一个都是FLASH的站点，你就一定会看到切换到HTML5的 好处。首先，搜索引擎的蜘蛛将能够抓取你的站点和索引你的内容。所有嵌入到动画中的内容将全部可以被搜索引擎读取。在搜索引擎优化的基本理论中，这一方面将会驱动你的网站获得更多的右击流量。

二：提供更多的功能，提高用户的友好体验

使用HTML5的另一个好处就是它可以增加更多的功能。对于HTML5的功能性问题，我们从全球几个主流站点对它的青睐就可以看出。社交网络大亨Facebook已经推出他们期待已久的基于HTML5的iPad应用平台，潘多拉最近也推出他们基于HTML5的音乐播放器的新版本。游戏平台 Zynga最近也在推出了三款新的在移动设备浏览器上运行的基于HTML5的游戏等等。每天都有不断的基于HTML5的网站和HTML5特性的网站被推 出。保持站点处于新技术的前沿，也可以很好的提高用户的友好体验。

三：可用性的提高，提高用户的友好体验

最后我们可以从可用性的角度上看，HTML5可以更好的促进用户于网站间的互动情况。多媒体网站可以获得更多的改进，特别是在移动平台上的应用，使用 HTML5可以提供更多高质量的视频和音频流。到目前为止，事实就是iPhone和iPad将不会支持FLASH，同时ADOBE公司也在近期公开声明将 停止FLASH基于移动平台的开发，现在我们已经可以这么说——移动平台日后视频音频是HTML5的天下![1]