HTML5(一)——HTML5简介

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依然建议使用引号把这种特殊的属性值引起来。