HTML5从入门到精通 （第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3 迎接新的Web时代

自从2010年HTML5正式推出以来，它就以一种惊人的速度被迅速推广，就连微软也因此为下一代IE9浏览器做了标准上的改进，使其能够支持HTML5。关于各主流浏览器对HTML5所表现出来的欢迎和支持情况，以及为什么HTML5会如此受欢迎，我们将在后面几节中做详细介绍。目前，业界全体都在朝着HTML5的方向迈进，HTML5的时代马上就要到来了。

1.3.1 部分代替了原来的JavaScript

HTML5增加了一些非常实用的功能，这些功能可以部分代替JavaScript，而这些功能仅通过为标签增加一些属性即可实现。

例如，打开一个页面后立即让某个单行文本框获得输入焦点，在HTML5之前，可能需要通过JavaScript来实现。代码如下：

        <form>
        <p><label>用户名：<input name="search" type="text" id="search"></label></p>
        <script type="text/javascript">
            document.getElementById("search").focus();
        </script>
        </form>

上面的代码片段通过JavaScript来完成这个功能，但在HTML5中则只需要设置一个属性即可。如果使用HTML5，则可以把上面的代码改为如下形式。

        <form>
        <p><label>用户名：<input name="search" autofocus></label></p>
        </form>

在这个示例可以看到，在HTML4中使用了一段JavaScript代码，在HTML5中并没有使用，取而代之的是一个在HTML5中新出现的属性。

把两个代码片段放在一起进行对比，不难发现使用HTML5之后简洁多了。除了这里示范的autofocus可用于自动获得焦点之外，HTML5还支持其他一些属性，如一些输入校验的属性，以前都必须通过JavaScript来完成，但现在都只要一个HTML5属性即可。

1.3.2 更明确的语义支持

在HTML5之前，如果要表达一个文档结构，可能只能通过<div>元素来实现。例如，我们来看一个在HTML4中的一种页面结构，代码如下：

        <div id="header">...</div>
        <div id="nav">...</div>
        <div class="article">
        ...
        </div>
        <div id="aside">...</div>
        <div id="footer">...</div>

在上面的页面结构中，所有的页面元素都采用<div>元素来实现，不同<div>元素的id不同，不同id的<div>元素代表不同的含义，但这种采用<div>布局的方式导致缺乏明确的语义，因为所有内容都是<div>元素。

HTML5则为上面的页面布局提供了更明确的语义元素，此时可以将上面的代码片段改为如下形式：

        <header>...</header>
        <nav>...</nav>
        <article>
        ...
        </article>
        <aside>...</aside>
        <footer>...</footer>

在这个示例中可以看到，在HTML4中常见的用div来划分页面结构的方法，到了HTML5中也被一种新出现的标签代替了。这些标签可以提供更加清晰的语义。

除此之外，以前的HTML可能会通过<em>这样的元素来表示“被强调”的内容，但到底是哪一种强调，HTML却无法表达；HTML5则提供了更多支持语义的强调元素，例如：

        <time>2016-10-10</time>
        <mark>被标记的文本</mark>

上面的第一个<time>元素用于强调被标记的内容是日期或时间，而<mark>元素则用于强调被标记的文本。HTML5新增的这两个元素比<em>元素提供了更丰富的语义。

1.3.3 增强了Web应用程序功能

一直以来，HTML页面的功能被严格地限制着：客户端从服务器下载HTML页面数据，浏览器负责呈现这些HTML页面数据。出于对客户机安全性的考虑，以前的HTML在安全性方面确实做得足够好。

当HTML页面做得太安全之后，我们就需要通过JavaScript等其他方式来增加HTML的功能。换句话来说，HTML对Web程序而言功能太单一了，如上传文件时想同时选择多个文件都不行，前端开发者不得不通过Flash、JavaScript等各种技术来克服这个困难。为了弥补这种不足，HTML5规范增加了不少新的API，而各种浏览器正在努力实现这些API功能，在未来的日子里，使用HTML5开发Web应用将会更加轻松。

1.3.4 HTML5的目标

HTML5的目标主要是为了能够创建更简单的程序，书写出更简洁的代码。例如，为了使Web应用程序的开发变得更加容易，HTML5中提供了很多API。为了使HTML代码变得更简洁，在HTML5中开发出了新的属性、新的元素等。总体来说，HTML5为下一代Web平台提供了许许多多新的功能。

我们先来初步了解一下在HTML5中究竟提供了哪些革命性的新功能。

首先，在HTML5之前，有很多功能必须使用JavaScript等脚本语言才能实现，如在前面的例子中提到，在运行页面时经常使用的让文本框获得光标焦点的功能，如果使用HTML5，同样的功能只要使用元素的属性标签就可以实现了。这样的话，整个页面就变得非常清楚直观，容易理解。因此，Web设计者可以放心大胆地使用这些HTML5中新增的属性标签。由于HTML5中提供了大量的可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。

不但如此，HTML5使页面的结构也变得更加清楚明了。之前使用的div标签也不再使用了，而是使用1.3.2节示例中所提到的更加语义化的结构标签。这样，书写出来的界面结构就会显得非常清晰，页面中的各个部分要展示什么内容也会让人一目了然。

虽然HTML5宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的，使用它所进行的设计也是很简单的，因此，它深受Web设计者与开发者的欢迎。

上一章目录下一章