HTML 5与CSS 3权威指南：HTML 5时代即将来临

第1章 Web时代的变迁

1.1   迎接新的Web时代

1.2   HTML 5会深受欢迎的理由

1.3   可以放心使用HTML 5的三个理由

1.4   HTML 5要解决的三个问题

自从2010年HTML 5正式推出以来，它立刻受到了世界各大浏览器的热烈欢迎与支持。根据世界上各大IT界知名媒体评论，新的Web时代，HTML 5的时代马上就要到来。本章重点介绍什么是HTML 5,HTML 5产生的时代背景，为什么HTML 5会如此深受业界欢迎，以及HTML能够解决什么问题。

学习内容：

初步了解什么是HTML 5,HTML 5与之前版本的HTML大致上有哪些区别。

了解世界各大知名浏览器目前的发展策略，为什么它们都不约而同地把支持HTML 5当成目前的工作重点，就连微软也把全面支持HTML 5作为新版Internet Explorer 9（IE 9）浏览器的开发重点与主要宣传手段。

了解为什么说开发者今后可以放心大胆地使用HTML 5进行Web网站与Web应用程序的开发，HTML 5被正式推广以后之前的Web网站与Web应用程序怎么办。

了解使用HTML 5到底可以解决哪些问题。

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 5要对HTML 4的脚本以及页面代码做这种修改呢？做这种修改的目的又是什么呢？