浅析HTML5发展及趋势
武良呈
摘 要 HTML5是新一代的WEB规范，其简单实用和向下兼容的良好设计理念，为设计人员提供极大的便利。富媒体的支持以及表单元素的新标签和属性的添加将使的HTML5更好的满足设计人员和用户的需求使用。新添加的语义标签使得更利于搜索引擎的检索服务和设计人员的布局。随着各大IT公司的鼎力支持和HTML5的诸多优点，其将有极其广阔的发展前景。
关键词 HTML5，HTML，Web Forms 2.0，富媒体
中图法分类号 TP3 文献标识码 A
Development and Trends of HTML5
Wu Alex
(Class No.081-1, School of Computer, Yantai University, YanTai, Shandong, 264005,China)1
Abstract HTML5 is a new generation of wev specification, its simple, practical and down-compatible provide designers with great convenience. rich media support, new form tags and attributes in HTML5 will be better To meet the needs of designers and the needs of users. the newly added semantic tags makes it conducive to the search service and design layout.With the major IT companies support and advantages of HTML5, HTML5 will have an extremely broad development prospects.
Keywords HTML5，HTML，Web Forms 2.0，Rich Media
1 HTML5概况
近几年HTML5发展迅速，随着国内外网页设计者对新标准的呼吁，以及各大IT公司及浏览器产商的积极配合支持，HTML5已经成为实质的新一代Web标准。HTML5的前身名为Web Applications 1.0。於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。
HTML5的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化[1]。尽管 HTML 5 的实现还有很长的路要走，但 HTML 5 正在改变 Web。 虽然标准并未完全正式确立，但新特性已经大部分公布于众，并被主流浏览器所支持接受。其中许多新特性给网页设计者极大的鼓励，并将改善和推动Web的发展现状。
2 HTML5发展详情
2.1 HTML 标准发展简史
HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等[2]。
IETF（互联网工程工作小组）于1993年6月以工作草案形式发布了超文本置标语言，虽然没有作为标准发布，但这亦是HTML的前身。HTML2.0是其首个官方版本，后HTML的定制和发布工作由著名的W3C（World Wide Web Consortium）接替，并于1996,1997年分别发布了HTML3.2和HTML4.0两个版本。
但是后来W3C并未如人所料推出HTML5，从1997年到1999年，HTML的版本从3.2到4.0到4.01，经历了非常快的发展。问题是到了4.01的时候，W3C的认识发生了倒退，他们说“好了，这个版本就这样了，HTML也就这样了；HTML 4.01是HTML的最后一个版本了，我们用不着HTML工作组了。”[3]
而后，W3C于2000年1月26日发布了XHTML 1.0。XHTML，eXtensible HyperText Markup Language，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集[4]。虽然整体标签变化不大，但规范上要求更加严格，XHTML语言必须符合XML的格式，而且属性名称必须为小写，所有的标记都必须要有一个相应的结束标记。业界有人比较看好这种改变，编写规范更加利于阅读，程序本身的运行也降低了运行代价。
但更多人对这种转变表示了消极的态度，随着XHTML2.0的开发提上W3C进程，这种态度愈发强烈，在HTML5 for Web Designers[5]一书中，Jeremy Keith认为：
"Although the name XHTML 2 sounded very similar to XHTML 1, they couldn’t have been more different. Unlike XHTML 1, XHTML 2 wasn’t going to be backwards compatible with existing web content or even previous versions of HTML. Instead, it was going to be a pure language, unburdened by the sloppy history of previous specifications. It was a disaster."
而后，随着OPERA,APPLE,MOZILLA等浏览器厂商及部分界内人士成立了Web Hypertext Applications Technology Working Group（Web超文本应用技术工作组，WHATWG）展开了新的HTML工作，后W3C非官方形式宣布XHTML的胎死腹中，并重新组建HTML工作组，而后W3C公布HTML5语言规范和HTML设计原理，自此，HTML5的道路已拨开云雾，洒满阳光。
2.2 HTML5 设计理念
2.2.1 简约
HTML5保证了文档的简约优雅，举个简单的例子，在HTML 4.01规范中doctype是这样写的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
而在XHTML1.0中doctype则是这样：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
前面这两个版本复杂难记，几乎没有人会在编程中逐字写出，但是在HTML5中，将复杂的部分一并去掉，doctype简化成了：<!DOCTYPE html>，即使你不用刻意去记，只要见过一次，下次也能很轻松的写出来。当然，之所以HTML5能够保证这样的简单的doctype也是因为HTML5能够很好的向下兼容。
这样的例子并不少见，例如HTML中的字符集声明，在HTML 4.01中我们经常看到这样的声明方式：<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
而在XHTML 1.0中稍微复杂些：
<?xml version="1.0" encoding="UTF-8" ?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
但是在HTML5中你要做的就轻松多了：<meta charset="utf-8">
同样，当你在试图引用javascript或者css的文件时，你同样可以看到HTML5对保证简约所做的努力，这里就不一一列举了。
2.2.2 兼容
在XHTML中，对其编写规范做了比较严格的要求，例如属性名称必须为小写，所有的标记都必须要有一个相应的结束标记，而且这个规范也已经沿用多年并且为设计人员所接受，但是在HTML5中，对大小写和结束标记的约束降低，以保证兼容老版本的文档内容。
例如以下写法：
<div CLASS=CONTENT></DIV>
<DIV class="CONTENT">
这些在XHTML中都是会报错的，而在HTML5总则没有问题。对于这种改变是否合适不置可否，但我认为，在一个团队中进行项目操作，保证严格的编写规范还是有必要的，而大小写随意或许仅是为了向下兼容而设计。
2.2.3 符合需求
HTML5的设计为现实考虑了许多，例如在链接标签<a>中，以前是不能同时包含h,p,pre等多个元素，而现在则没有问题，考虑到我们或许需要整个块都作为一个超链接，这确实是一个较人性的转变。当然，HTML5令人关注的富媒体，Web Forms 2.0和新的语义标签都是符合现实需求的积极改进，我们将在下面段落详细提到。
2.3 HTML5 富媒体
在HTML5广泛推广之前，设计人员比较多使用SVG等技术进行Web绘图操作，但这些基于 XML 的绘图语言声明式的绘图方式对复杂绘图操作支持不够好，例如Web游戏所需要的像素级别的绘图能力。HTML5新提出了<canvas>标签，开发人员可以使用 JavaScript ，调用JavaScript API，在canvas中进行一系列基于命令的图形绘制操作，使得HTML5对图形绘制操作更加得心应手。
HThIL5所推出的诸多新特性中，canvas，video和audio这几个标签对互联网多媒体技术的发展即将掀起巨大的浪潮，结合脚本技术将原本只能在系统级别的视频处理，音效处理等功能带入到了互联网应用的范围内[6]。
在现有的网站，对视频音频的控制多采用第三方插件，例如Adobe公司大名鼎鼎的Flash，除此之外，Microsoft的Silverlight和Apple的Quicktime也都是比较常见的第三方视频音频插件，但第三方插件也确实有许多不尽人意的地方。例如任何公司都可以开发出自己的第三方插件，不能保证规范。而浏览器对插件的支持也同样不能保证，例如Apple旗下的一系列产品对Flash都是不兼容的。市场占有率最大的第三方插件Flash的不稳定，耗电量大以及安全漏洞多都是既定事实。当然，还有一个最主要的因素，HTML5对视频音频的调用都将是原生的，而不再需要第三方介入，对资源以及使用代价来说都是极大的节省。正是这一系列的原因，使得HTML5的富媒体出现变得极为必要。
2.4 HTML5 Web Forms 2.0
表单是网页中几乎最常用的元素。担负着网页与用户交互的大部分任务。HTML5 Web Forms 2.0是对目前Web表单进行了全面的提升，在简约易用的前提下，增加了许多新的标签和属性来满足用户的需求，并减少了开发人员的编程负担。
下面将提供几个简单实例供参考。
2.4.1 autofocus属性
例如，在HTML5中添加了autofocus属性，以支持自动对焦：
<input id="status" name="status" type="text" autofocus>
autofocus属性不仅能支持input，同样还能支持多种表单标签，例如textarea和select，但在每一个文档中仅能使用一次[7]。
2.4.2 datalist标签
datalist标签与input标签结合起来将会起到自动完成的效果，当你将焦点置于input上，将会出现列表，显示可能填的内容，代码如下：
<input type="text" name="yourname" id="yourname" list="tepname">
<datalist id="tepname">
<option value="小红">
<option value="小明">
<option value="小李">
<option value="小王">
<option value="小杜">
</datalist>
2.4.3 input类型和格式验证
HTML5为input提供了更多type，以满足用户需求，部分type有search(搜索框),email(电子邮箱),url(地址路径)，代码如下：
<input id="searchcontent" name="searchcontent" type="search">
<input id="email" name="email" type="email">
<input id="weburl" name="weburl" type="url">
甚至提供了颜色采集器：
<input id="getcolor" name="getcolor" type="color">
更让人高兴的是，input不再需要javascript支持而能直接支持正则表达式的格式验证，代码如下
匹配身份证：<input id="id" name="id" pattern="/d{17}[/d|X]|/d{15}">
2.5 HTML5 新的语义标签
在以前版本的HTML设计中，多采用DIV对界面进行布局分割，例如以下例子：
<body>
<div id="header">HTML5</div>
<div id="navigation">导航</div>
<div id="article">HTML5相关内容</div>
<div id="sidebar">HTML5相关链接</div>
<div id="footer">制作人及版权声明</div>
</body>
不错，这样设计的确简单明了，采用div的id也方便css对其样式进行控制，这确实是一个可行的网页布局策略。而且这种策略也确实沿用多年。但是HTML5显然不满足全屏都是div标签的布局方式，并提出乐更加人性化的语义标签，更令人高兴的是，新的语义化标签更加利于搜索引擎对网页的信息提取和检索，而不再是走迷宫般的蒙头乱撞。将上面的例子采用HTML5规范进行书写，则是以下形式：
<body>
<header>HTML5</header>
<nav>导航</nav>
<article>HTML5相关内容</article>
<aside>HTML5相关链接</aside>
<footer>制作人及版权声明</footer>
</body>
你甚至在标签中看不到div的身影！每一块内容都有其固定含义。这确实是一种很棒的改进，提供了有限数量的可能会常用的语义标签，对HTML5文档的整体构架确实优化不少。
2.6 HTML5 离线存储
HTML5为web的离线存储制定一套标准，这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索、缓存以及索引功能。同时，那些离线web程序也将因此获得更方便的使用。HTML5引入基于浏览器的程序缓存，将应用数据在本地缓存，这不仅能加速web程序的运行，还可以使一些程序在离线时仍可使用[8]。
2.7 HTML5 未来在何方？
这将是一个需要时间检验的问题，没有人知道HTML5将来是否会怎样，但随着google，微软，apple，IBM等一批超级IT公司的积极支持，以及浏览器制造商的积极响应和配合，可以预料到HTML5将会有一个非常光明的前景。更重要的是，HTML5本身的优雅实用和简易性等优点，也使得设计人员和用户更易于接受。当然，HTML5目前只是一个初生的婴儿，还有些许不足需要逐步完善，但是只要我们能以积极开放和乐于改变的心态去接受和实践HTML5，那么它的前程将走的更加顺畅。
3 总结
通过上述文献，可以发现HTML5有着简单实用和向下兼容的良好设计理念，富媒体的支持以及表单元素的丰富也将使的HTML5如虎添翼，新添加的语义标签使得设计人员使用HTML5时更加得心应手，也更利于搜索引擎的检索服务。HTML5将来的发展将会十分迅猛，各大IT公司的努力配合以及设计人员的积极推广，HTML5的发展趋势将是一片大好，阳光明媚。
参 考 文 献
［1］百度.百度百科-HTML5［EB/OL］.(2011-04-26)[2011-05-26].http://baike.baidu.com/view/951383.htm .
［2］百度.百度百科-HTML［EB/OL］.(2011-05-26)[2011-05-27].http://baike.baidu.com/view/692.htm .
［3］Jeremy Keith.The Design of HTML5(Jeremy Keith在 Fronteers 2010 上的主题演讲)［R/OL］.(2010-10-21)[2011-05-28].http://adactio.com/articles/1704/ .
［4］百度.百度百科-XHTML［EB/OL］.(2011-04-13)[2011-05-28].http://baike.baidu.com/view/15906.html.
［5］Jeremy Keith.HTML5 for Web Designers［M］.New York: A Book Apart, 2010：4.
［6］李朔,谷振宇,聂昶等.HTML5与未来的WEB应用平台 [J].阴山学刊（自然科学版）, 2010, 24 (2)：46.
［7］Jeremy Keith.HTML5 for Web Designers［M］.New York: A Book Apart, 2010：44.
［8］刘天寅.浅析HTML5在多媒体上的应用前景[J].硅谷, 2010, (20)：89.
1548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
