HTML 5时代的到来,对所有的前端开发人员来说是一种福音,HTML 5致力于解决跨浏览器问题,可以部分取代原来的JavaScript;HTML 5致力于把浏览器变成一个前端执行环境,而不是简单的视图呈现工具。借助于HTML 5,前端开发人员可以花费更少的时间,开发出功能更加强大的人机界面。
一、HTML的发展历史
在HTML语言的发展历史中,大致经历了如下发展历史:
- HTML(第1版):1993年6月由互联网工程工作小组发布的HTML工作草案。
- HTML 2.0:1995年11月作为RFC 1866发布。
- HTML 3.2:1996年1月14日由W3C组织发布,是HTML文档第一个被广泛使用的标准。
- HTML 4.0:1997年12月18日由W3C组织发布,也是W3C推荐标准。
- HTML 4.01:1999年12月24日由W3C组织发布,是HTML文档另一个重要的、广泛使用的标准。
- XHTML 1.0:发布于2000年1月26日,是W3C组织推荐标准,后来经过修订于2002年8月1日重新发布。
在HTML 3.2之前,HTML的发展极为混乱,各软件厂商经常自行增加HTML标记(又叫HTML标签),而各浏览器厂商为了保持最好的兼容性,总是尽力支持各种HTML标记。在HTML发展历史中,最广为人知的是HTML 3.2和HTML 4.01。
二、HTML 4.01规范与XHTML规范
XHTML的全称是(eXtensible Hyper Text Markup Language,扩展的超文本标记语言),XHTML和HTML 4.01具有很好的兼容性,而且XHTML是更严格、更纯净的HTML代码。由于之前HTML发展极度混乱,所以W3C组织制订了XHTML,目标是逐步取代原有的HTML。
<html>
<head>
<title>混乱的HTML文档</title>
<body>
<h1>混乱的HTML文档
上面代码中<html>、<head>、<body>、<h1>
4个标签都没有正确结束,这显然违背了结构化文档的规则,但使用浏览器来浏览这份文档时,依然可以看到浏览效果——这就是HTML不规范的地方。而XHTML致力于消除这种不规范,XHTML要求HTML文档首先必须是一份XML文档。
XML文档是一种结构化文档,它有如下4条基本规则:
- 整个文档有且仅有一个根元素。
- 每个元素都由开始标签和结束标签组成(例如
<a>
和</a>
就是开始标签和结束标签),除非使用空元素语法(例如<br />
就是空元素语法)。 - 元素与元素之间应该合理嵌套。例如
<a><b>疯狂Java讲义</b></a>
,可以很明确地看出<b.../>
元素时<a.../>
元素的子元素,这就是合理嵌套。 - 元素的属性必须有属性值,而且属性值应该用引号(单引号和双引号都可以)引起来。
XHTML可以被所有的支持XML的设备读取,在其余的浏览器升级至支持XML之前,XHTML强制HTML文档具有更加良好的结构,保证这些文档可以被所有的浏览器解释。
三、HTML与DTD语义约束
四、HTML 5出现的缘由
大量调查表明,即使在一些比较正规的网站中,也很少有网站能通过验证。
虽然互联网上绝大部分HTML页面都是不符合规范的,但各种浏览器却可以正常解析、显示这些页面,在这样的局面下,HTML页面的制作者甚至感觉不到遵守HTML规范的意义。于是出现了一种非常尴尬的局面:一方面,W3C组织“声嘶力竭”地呼吁大家应该制作遵守规范的HTML页面;另一方面,HTML页面制作者却根本不太理会这种呼吁。
可能是处于“存在即合理”的考虑,WHATWG组织开始制定一种“妥协式”的规范:HTML 5。由于HTML 5规范十分宽松,因此HTML 5甚至不再提供文档类型定义(DTD)。到2008年,WHATWG的努力终于被W3C认可,W3C已经制定了HTML 5草案。
五、HTML 5的强大功能
从HTML 4.01、XHTML到HTML 5,并不是一种革命性的升级,而是一种规范向习惯的妥协,因此HTML 5并不会带给开发者过多的冲击,开发者会发现从HTML 4.01过渡到HTML 5非常轻松。但另一方面,HTML 5也增加了很多非常实用的新功能,这些新功能将吸引开发者投入HTML 5的怀抱。
1. 解决跨浏览器问题
对有过实际开发经验的前端程序员来说,跨浏览器问题绝对是一个永恒的“噩梦”:明明在一个浏览器中可以正常运行的HTML+CSS+JavaScript页面,但换一个浏览器之后,可能会出现很多问题,比如页面布局混乱、JavaScript运行出错……
HTML 5的出现可能会改变这种局面,目前各种主流浏览器如Internet Explorer、Chrome、Firefox、Opera、Safari都表现出对HTML 5的极大热情。
在HTML 5以前,各浏览器对HTML、JavaScript的支持很不统一,这样就造成了同一个页面在不同浏览器中的表现不同。HTML 5的目标是详细分析各浏览器所具有的功能,并以此为基础指定一个通用规范,并要求各浏览器能支持这个通用标准。
就目前形势来看,各浏览器厂商对HTML 5都抱着极大地热情,尤其是微软因为对HTML 5的支持不够积极,导致Internet Explorer市场份额下滑的事实,更成为各浏览器厂商的前车之鉴。如果各浏览器都能统一地遵守HTML 5规范,以后前端程序员开发HTML+CSS+JavaScript页面时将会变得更加轻松。
2. 部分代替了原来的JavaScript
HTML 5增加了一些非常实用的功能,这些功能可以部分代替JavaScript,而这些功能只要通过为标签增加一些属性即可。
例如,打开一个页面后立即让某个单行文本框获得输入焦点,在HTML 5以前,可能需要通过JavaScript来实现。看如下页面片段。
<body>
图书:<input type="text" name="book" id="name" /><br />
价格:<input type="text" name="price" id="price" />
<script type="text/javascript">
document.getElementById("price").focus();
</script>
</body>
但在HTML 5中则只需要设置一个属性即可。如下页面片段。
<body>
图书:<input type="text" name="book" /><br />
价格:<input type="text" autofocus name="price" />
</body>
如此对比,不难发现HTML 5简洁多了。
除了这里示范的autofocus可用于自动获得焦点之外,HTML 5还支持其他一些属性,比如一些输入校验的属性,以前都必须通过JavaScript来完成,但现在都只要一个HTML 5属性即可。
3. 增强了Web应用程序的功能
一直以来,HTML页面的功能被死死地限制着:客户端从服务器下载HTML页面数据,浏览器负责呈现这些HTML页面数据。处于对客户机安全性的考虑,以前的HTML在安全性方面确实做得足够安全。
当HTML页面做得太安全之后,于是我们就需要通过JavaScript等其他方式增加HTML的功能。换句话说,HTML对Web程序而言功能太单薄了,比如上传文件时同时想选择多个文件都不行(前端开发者不得不通过Flash、JavaScript等各种技术来克服这个困难),为了弥补这种不足,HTML 5规范增加了不少新的API,而各种浏览器正在努力实现这些API功能,今后,使用HTML 5开发Web应用将会更加轻松。
六、HTML 5更明确的语义
在HTML 5之前,如果要表达一个文档结构,可能只能通过<div.../>
元素来实现。例如,我们定义如下页面结构:
<div id="header">...</div>
<div id="nav">...</div>
<div id="article">
<div id="section">
</div>
</div>
<div id="aside">...</div>
<div id="footer">...</div>
在上面的页面结构中,所有的页面元素都采用<div.../>
元素来实现,不同<div.../>
元素的id不同,不同id的<div.../>
元素代表不同含义,但这种采用<div.../>
布局的方式导致缺乏明确的语义——因为所有内容都是<div.../>
元素。
HTML 5则为上面的页面布局提供了更明确的语义元素,此时可以将上面的页面片段改为如下形式:
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
上面的页面片段就可以提供更清晰的语义了,而不是通过语义不清的<div.../>
元素来完成布局。
除此之外,以前的HTML可能会通过<em.../>
元素来表示“被强调”的内容,但到底是哪一种强调,HTML却无法表达;HTML 5则提供了更多支持语义的强调元素,例如:
<time>2012-12-12</time>
<mark>被标记的文本</mark>
上面第一个<time.../>
元素用于强调被标记的内容是日期或时间,而<mark.../>
元素则用于强调被标记的文本。HTML 5新增的这两个元素比<em.../>
元素提供了更丰富的语义。
七、HTML 5基本结构的变化
HTML 5中只要报HTML 4的DTD电柜改为如下形式即可。
<!DOCTYPE html>
上面的DTD定义并不符合XML文档的DTD语法——这也正好符合HTML 5的设计哲学:HTML 5并不是“规范优先”的设计,HTML 5是“妥协式”的规范,它照顾了互联网上大量不规范的HTML页面。因此HTML 5并不需要严格意义上的DTD。
HTML 5对元素大小写不再严格区分,开发者可以随意使用大小写字符来定义HTML元素。
对于一份基本的HTML 5文档而言,它总有如下结构:
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- 此处还可插入其他meta、样式单等信息 -->
</head>
<body>
页面内容部分
</body>
</html>
HTML 5支持两种方式来指定页面的字符集。
- 使用Content-Type指定页面所用的字符集。例如以下代码:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- 直接使用charset指定页面所有的字符集。例如以下代码:
<meta charset="gb2312" />
八、HTML 5的语法变化
如果说HTML 5的语法发生了一些变化,这些变化的最大特征就是:HTML 5更宽容了!HTML 5规范的设计初衷就是最大限度地“兼容”互联网上随处可见的不规范页面。
归纳起来,HTML 5存在如下几点语法变化
1.标签不再区分大小写
为了验证一份HTML页面是否符合规范,W3C提供了一个在线验证页面,页面地址是http://validator.w3.org/ ,如果把这份页面上传到该页面进行验证,可以看到如下图所示的验证结果。
2.元素可以省略结束标签
具体来说,HTML 5中的省略标签可分为如下三种。
- 空元素语法的元素:area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr。
HTML 5中<img.../>
元素写成如下形式也是正确的:
<img src="a.gif" alt="a">
- 可以省略结束标签的元素:colgroup、dt、dd、li、optgroup、option、p、rt、rp、thead、tbody、tr、td、th。
- 可以省略全部标签的元素:html、head、body、tbody。
3.允许省略属性的属性值
HTML 5再次回归“松散”的语法,允许部分“标志性”的属性可以省略属性值。例如,如下写法完全符合HTML 5的规范。
<input checked type="checkbox" />
<input readonly type="text" />
<input disabled type="text />
<option value="1" selected />
下表列出了HTML 5中允许省略属性值的属性
4.允许属性值不使用引号
HTML 5允许直接给出属性值,即时不放在引号中也是正确的。需要说明的是,如果某个属性值包含空格等容易引起浏览器混淆的属性值,那么HTML 5依然建议使用引号把这种特殊的属性值引起来。