1.1 迎接新的Web时代
1.1.1 HTML 5时代即将来临
自从2010年HTML 5正式推出以来，它就以一种惊人的速度被迅速推广着，就连微软也因此为下一代IE 9做了标准上的改进，使其能够支持HTML 5。关于各主流浏览器对于HTML 5所表现出来的积极支持的详细情况，以及为什么HTML 5会如此受欢迎，我们将在后面几节中详细介绍，这里，笔者要告诉大家的是，目前业界全体都步调一致地朝着HTML 5的方向迈进着，HTML 5的时代马上就要到来了。
在全面介绍HTML 5的相关知识之前，我们先来认识一下HTML 5中的部分代码，对HTML 5有个初步的了解。
首先，我们来看一段HTML 4中常见的JavaScript代码，如代码清单1-1所示。
代码清单1-1 HTML 4中的JavaScript代码示例
<form>
<p><label>Username:<input name=search type="text" id="search"></label></p>
<script type="text/javascript">
document.getElementById ('search').focus()
</script>
</form>
在HTML 5中，这段代码将会以怎样的形式出现呢？具体如代码清单1-2所示。
代码清单1-2 用HTML 5实现代码清单1-1中的JavaScript代码
<form> <p><label>Search:<input name=search autofocus></label></p> </form>
我们来看一下在HTML 4中常见的一种页面结构，代码如代码清单1-3所示。
代码清单1-3 div标签示例（用HTML 4实现）
<div id="header">...</div> <div id="nav">...</div> <div class="article"> </div> <div id="side-bar">...</div> <div id="footer">...</div>
页面中有关该部分的结构示意如图1-1所示。
图1-1 HTML 4中的页面结构
那么，在HTML 5中，又会用怎样的页面代码来描述这种结构呢？具体如代码清单1-4所示。
代码清单1-4 HTML 5中的新型结构示例
<header>...</header> <nav>...</nav> <article> </article> <aside>...</aside> <footer>...</footer>
页面中有关该部分的结构示意图如图1-2所示。
图1-2 HTML 5中的页面结构
怎么样？看出区别来了吗？在第一个示例中，我们可以看见，在HTML 4中的一段JavaScript代码，在HTML 5中消失了，取而代之的是一个在HTML 5中新出现的属性。在第二个示例中，我们可以看见，在HTML 4中常见的用div来划分页面结构的方法，到了HTML 5中，也被一种新出现的标签给替代了。那么究竟为什么HTML 5要对HTML 4的脚本以及页面代码做这种修改呢？做这种修改的目的又是什么呢？
1.1.2 HTML 5的目标
HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素，等等。总体来说，为下一代Web平台提供了许许多多新的功能。
那么让我们先来初步接触一下在HTML 5中究竟提供了哪些革命性的新功能。在第2章中，我们会针对这些功能做一个全面介绍。
首先，在HTML 5之前，有很多功能必须要使用JavaScript等脚本语言才能实现，譬如前面例子中提到，登录画面中经常使用的让文本框获得光标焦点的功能。如果使用HTML 5，同样的功能只要使用元素的属性标签就可以实现了。这样的话，整个页面就变得非常清楚直观，容易理解。因此，Web设计者可以非常放心大胆地使用这些HTML 5中新增的属性标签。由于HTML 5中提供了大量的这种可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。
不但如此，HTML 5使页面结构也变得清楚明了。之前使用的div标签也不再使用了，而是使用前面HTML 5示例中所提到的更加语义化的结构标签。这样的话，书写出来的界面结构显得非常清晰，各部位要展示什么内容也让人一目了然。
虽然HTML 5宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的，使用它所进行的设计也是很简单的，因此，它深受Web设计者与Web开发者的欢迎。
1.1.3 HTML5的小版本更新
2016年11月，W3C对长期行使的HTML 5标准进行了更新。许多最开始提出的HTML 5功能特性都因为设计上的缺陷和缺乏浏览器厂商的支持而去掉了。
尽管有一些元素和功能提升被带进了HTML 5.1里面，但这仍然是一个小的更新。其中有一些新的元素包含了组合标签，现在这样的元素包括dialog元素、details元素、summary元素及picture元素，这样就为开发者提供了更多表达创意和内容的空间。
2017年12月14日，W3C发布了HTML 5.2更新版本，且官方建议用户使用。此次更新增加了dialog标签等新功能，弃用了HTML插件系统等原有功能。该版本的HTML规范还提供了对ES6 JavaScript模块的官方支持。目前各主流浏览器都已经实现了这一功能。