HTML 5与CSS 3权威指南ch1精编.pdf

第1章 Web 时代的变迁 1.1 迎接新的Web 时代 1.2 HTML 5会深受欢迎的理由 1.3 可以放心使用HTML 5 的三个理由 1.4 HTML 5要解决的三个问题 2 HTML 5与CSS 3权威指南 自从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 plabelUsername: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 plabelSearch:input name=search autofocus/label/p /form 第1章　Web 时代的变迁 3 我们来看一下在HTML 4 中常见的一种页面结构，代码如代码清单1-3所示： 代码清单1-3 div标签示例（用HTML 4实现） div id=header.../div div id=nav.../div div class=aritcle /div div id=side-bar.../div div id=footer.../div 页面中有关该部分的结构示意图如图1-1所示： 图1-1 HTML 4中的页面结构 那么，在HTML 5 中，又会用怎样的页面代码来描述这种结构呢？具体如代码清单1-4 所示：