一、HTML5 概要
HTML5 是用于取代1999 年所制定的HTML 4.01  和XHTML 1.0  标准的HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些HTML5  技术。HTML 5 有两大特点：首先，强化了Web  网页的表现性能。其次，追加了本地数据库等Web  应用的功能。广义论及HTML5 时，实际指的是包括HTML、CSS 和JavaScript 在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA），如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX 的需求，并且提供更多能有效增强网络应用的标准集。
在相当长的一段时间内，后继的HTML5 和其他标准被束之高阁，为了推动Web 标准化运动的发展，一些公司联合起来，成立了Web  超文本应用技术工作组（WHATWG，Web Hypertext Application Technology Working Group），他们继续开发HTML5。第一份正式草案于2008 年1 月22 日公布。正式的HTML5 标准预计于2012 年3 月公布（成书日期为2011 年12 月）。其实目前各种最新版的浏览器（Safari5/FireFox/Chrome/Opera/IE9）以及智能手机（iPhone/Android 等）中已经支持HTML5。相对于传统的PC 网站，HTML5 在智能手持式设备上已经得到越来越广泛的应用，使用HTML5 开发的各种移动网站、甚至手机游戏已经越来越多地出现在智能手机上。
目前支持HTML 的浏览器有：最新版本的Safari、Chrome、Firefox  以及Opera  支持某些HTML5  特性。Internet Explorer 9  将支持某些HTML5  特性。
二、HTML5 特性
1．语义特性
HTML5 赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
2．本地存储特性
基于HTML5 开发的网页APP 拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5 本地存储最重要的技术之一）和API 说明文档。
3．设备兼容特性
从Geolocation 功能的API 文档公开以来，HTML5 为网页应用开发者们提供了更多功能上的优化选择，
带来了更多体验功能的优势。HTML5 提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与
HTML/CSS/JavaScript 标准教程实例版（第 5 版）
附录 A    HTML5 基本介绍
344 344
microphones 及摄像头相联
4．连接特性 更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化 的在线交流得到了实现。HTML5 拥有更有效的服务器推送技术，Server-Sent Event 和 WebSockets 就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客 户端的功能。
5．网页多媒体特性
支持网页端的 Audio 、Video 等多媒体功能，与网站自带的 APPS ，摄像头，影音功能 相得益彰。
6．三维、图形及特效特性
基于 SVG 、Canvas 、WebGL 及 CSS3 的 3D 功能，用户会惊叹于在浏览器中，所呈现 的惊人视觉效果。
7．性能与集成特性
没有用户会永远等待你的 Loading ——HTML5 会通过 XMLHttpRequest2 等技术，帮助 您的 Web 应用和网站在多样化的环境中更快速的工作。
8．CSS3 特性
在不牺牲性能和语义结构的前提下，CSS3 中提供了更多的风格和更强的效果。此外， 较之以前的 Web 排版，Web 的开放字体格式（WOFF ）也提供了更高的灵活性和控制性。
三、HTML5 编程的基础
3.1  常用 Web 技术概述
只要提到 Web 网页大家会立即想到 HTML ，事实上现在的 Web 网站除了 HTML 外， 还得到了其他
多种技术的支持。本节将就 HTTP 、HTML 、CSS 、JavaScript 这些技术与 Web 的关系做一些简要介绍。
3.1.1  HTTP
Web 世界中的服务器（Server ）与客户端（Client ）间是按照 HTTP （Hypertext Transfer Protocol ：超文本传输协议）协议确定的规范基础上进行通信的。Web 世界中的服务器与客 户端间的关系与现实世界中的普通商店与顾客间的关系类似。
1．客户端（顾客）使用 Web 浏览器访问任意服务器（商店）。
2．访问成功（商店开门迎客）后，客户端向服务器提出读取服务器中的名为“index.html ” 的文档，或听名为“good.mp3”的音乐的请求（Request ）。
3．服务器会针对客户端提出的请求，以返回应答（Response ）的形式给客户端（顾客） 提供服务。如上所述，HTTP  通信中请求（Request ）与应答（Response ）是最基本的通信 模式。客户端与服务器连接成功后，会向服务器提出某种请求，随后服务器会对此请求做 出应答并切断连接。
HTML/CSS/JavaScript 标准教程实例版（第 5 版） 附录 A    HTML5 基本介绍
345 345
像上述这样的机制，能保证即使有大量客户端访问服务器，也可以维持服务器与客户 端间的通信畅通。而且在不用浪费服务器资源的前提下，有效地保证客户端对服务器内容 的访问。
3.1.2  HTML
大家都知道 HTML 是编辑网页用的标示性（Markup ）语言，通过 HTML 标签来对信 息进行结构化编辑。所谓结构化编辑，对文档来说，就是将文档标题及正文分别用不同的 标签包括起来。例如在<h1>与</h1>之间放置文档的标题，如下例。
<h1>文档标题</h1>
而且，不仅仅是将内容用一个标签括起来，还可以将多个标签以子元素的形式追加进 来，构造数型结构。如下所示。
<div>
<h2>关于 HTML5</h2>
<div>
<p>HTML5 是 HTML4 的下一代标准。</p>
<p>WHATWG 组织于 2008 年 1 月 22 日公布第一份 HTML5 标准草案。</p>
<p> HTML5 的正式标准定于 2012 年 3 月公布。</p>
</div>
</div>
以上 HTML 的树型结构如图 A-1 所示
图 A-1    HTML 的树型结构
3.1.3  CSS
HTML 用于编辑文档的逻辑结构，CSS （Cascading Style Sheets ）则用于控制网页的外 观显示。可以通过 CSS 指定文字的颜、大小、背景等，还可以设置元素的边间距、指 示器等。
HTML4  中存在指定文字颜、大小的<font>标签，以及使文档或图形居中的<center> 标签。使用上述这些标签，就算不通过 CSS 也能调整 HTML 网页的外观。但是在这些本身
HTML/CSS/JavaScript 标准教程实例版（第 5 版） 附录 A    HTML5 基本介绍
346 346
主要负责标示文档逻辑结构的 HTML 文件中加入这些用于外观控制的标签，会让 HTML  文件结构变得越来越复杂，因此 HTML5  标准中已经去掉了这些用于网页外观控制的 <font>、<center>等标签，将网页外观调整的任务全部交给 CSS 来完成。
这样符合 HTML5 标准的 HTML 文件将只是单纯地记述文档逻辑结构的文件了。以下 是追加了 CSS 后的 HTML 代码实例，图 A-2 为在浏览器中显示的效果。
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<style>
div{background-color:blue;color:white;padding:24px;}
h2{font-size:24px;border-bottom:2px solid white;}
p{background-color:red;padding:10px;}
</style>
</head>
<body>
<div>
<h2>关于 HTML5</h2>
<div>
<p>HTML5 是 HTML4 的下一代标准。</p>
<p>WHATWG 组织于 2008 年 1 月 22 日公布第一份 HTML5 标准草案。</p>
<p> HTML5 的正式标准定于 2012 年 3 月公布。</p>
</div>
</div>
</body>
</html>
图 A-2    Firefo 浏览器中的显示结果
3.1.4  JavaScript
JavaScript 是一种脚本类型的语言，所谓脚本类型语言一般指编写的程序代码不用经过 编译器编译，直接解释执行的编程语言。在 Web 网页中使用 JavaScript 后，可实现与印刷
HTML/CSS/JavaScript 标准教程实例版（第 5 版） 附录 A    HTML5 基本介绍
347 347
品相同效果的 Web 网页，或者具有各种动态效果的网页。 现在动态网页已经很普遍了，
svg canvas大多数 Web 应用程序中都会积极的使用 JavaScript 。近
几年非常流行用于异步通信的被称为 Ajax 的技术。使用这种技术后，不用刷新画面就可以 更新网页中的局部内容，可以制作更富有交互性的动态网页。另外还出现了许多提高 JavaScript 编程效率的库或框架（Framework ），如 jQuery 等。所有的这些不仅大大提高 Web 开发的效率，而且还帮助程序员开发出更复杂、功能更强大的 Web 应用。
3.2  HTML5 程序的书写方式
前面我们已经介绍了 HTML5 的各种新功能，那么从 HTML5 开始，HTML 代码到底 会发生什么变化呢？下面从 HTML5 的雏形开始，制作些简单的 Web 网页，让大家了解一 下到底发生了哪些改变。
3.2.1  HTML5 代码文件的雏形
最基本的 HTML5 代码文件如下所示，首先追加 HTML5 文档宣言，接着指定字符编 码方式以及网页的标题。以上可以说是每个 HTML5 网页必须设置的项目。
<!DOCTYPE html>
<meta charset="utf-8" />
<title>最简单的 HTML5 代码</title>
<p>HTML5 是 HTML4 的下一代标准。</p>
显示的结果如图 A-3 所示。
图 A-3    最简单的 HTML5 代码的显示结果
前面已经介绍过 HTML5 的文档类型宣言以及字符代码指定，相对于 HTML4 已经大 大简化了，如果要从兼容 HTML4 的角度来说，以上的雏形代码需要做些修改。毕竟许多 用户可能仍在使用不支持 HTML5  的旧版本浏览器，而 HTML4  的代码中必须明确使用 <html><head><body> 等标签，另外 为了让旧版 本浏览器识 别 HTML5  中新追加的  article>\<section>等标签，因此特意追加上相应的 CSS 样式单。
<!DOCTYPE html>
<html lang="zh">
<head>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。