1.1 HTML5概述

随着时代的发展，统一的互联网通用标准显得尤为重要。在HTML5之前，由于各个浏览器之间的标准不统一，给网站开发人员带来了很大的麻烦。HTML5的目标就是将Web带入一个成熟的应用平台。在HTML5平台上，视频、音频、图像、动画及同电脑的交互都被标准化。本节将针对HTML5发展历程、优势、浏览器支持情况及如何创建HTML5页面进行讲解。

1.1.1 HTML5发展历程

HTML的出现由来已久，1993年HTML首次以因特网的形式发布。20世纪90年代，HTML快速发展，从2.0版到3.2版、4.0版，再到1999年的4.01版。随着HTML的发展，万维网联盟（World Wide Web Consortium, W3C）掌握了对HTML规范的控制权，负责后续版本的制定工作。

然而，在快速发布了HTML的4个版本后，业界普遍认为HTML已经穷途末路，对Web标准的焦点也开始转移到了XML和XHTML上，HTML被放在了次要位置。不过，在此期间HTML体现了顽强的生命力，主要的网站内容还是基于HTML的。为了支持新的Web应用，克服现有的缺点，HTML迫切需要添加新的功能，制定新规范。

为了能继续深入发展HTML规范，在2004年，一些浏览器厂商联合成立了WHATWG工作组。它们创立了HTML5规范，并开始专门针对Web应用开发新功能。Web 2.0也是在那个时候被提出来的。

2006年，W3C组建了新的HTML工作组，明智地采纳了WHATWG的意见，并于2008年发布了HTML5的工作草案。由于HTML5能解决实际的问题，所以在规范还未定稿的情况下，各大浏览器厂家已经开始对旗下产品进行升级以支持HTML5的新功能。这样，得益于浏览器的实验性反馈，HTML5规范也得到了持续地完善，并以这种方式迅速融入到了对Web平台的实质性改进中。

2014年10月29日，万维网联盟宣布，经过8年的艰辛努力，HTML5标准规范终于制定完成，并公开发布。HTML5将会逐渐取代HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的同时，使网络标准达到符合当代的网络需求，为桌面和移动平台带来无缝衔接的丰富内容。

1.1.2 HTML5的优势

从HTML4.0、XHTML到HTML5，从某种意义上讲，这是HTML描述性标记语言的一种更加规范的过程。因此，HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性，下面具体介绍HTML5的一些优势。

1．解决了跨浏览器问题

在HTML5之前，各大浏览器厂商为了争夺市场占有率，会在各自的浏览器中增加各种各样的功能，并且不具有统一的标准。使用不同的浏览器，常常看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需简单地添加JavaScript代码就可以使用新的元素。

2．新增了多个新特性

HTML语言从1.0到5.0经历了巨大的变化，从单一的文本显示功能到图文并茂的多媒体显示功能，许多特性经过多年的完善，已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。

● 新的特殊内容元素，比如header、nav、section、article、footer。

● 新的表单控件，比如calendar、date、time、email、url、search。

● 用于绘画的canvas元素。

● 用于媒介回放的video和audio元素。

● 对本地离线存储的更好支持。

● 地理位置、拖曳、摄像头等API。

3．用户优先的原则

HTML5标准的制定是以用户优先为原则的，一旦遇到无法解决的冲突时，规范会把用户放在第一位。另外，为了增强HTML5的使用体验，还加强了以下两方面的设计。

● 安全机制的设计

为确保HTML5的安全，在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于来源的安全模型，该模型不仅易用，而且对不同的API（Application Programming Interface，应用程序编程接口）都通用。使用这个安全模型，不需要借助于任何不安全的hack就能跨域进行安全对话。

● 表现和内容分离

表现和内容分离是HTML5设计中的另一个重要内容。实际上，表现和内容的分离早在HTML4.0中就有设计，但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题，一些陈旧的表现和内容的代码还是可以兼容使用的。

4．化繁为简的优势

作为当下流行的通用标记语言，HTML5尽可能地简化，严格遵循了“简单至上”的原则，主要体现在这几个方面：

● 新的简化的字符集声明；

● 新的简化的DOCTYPE；

● 简单而强大的HTML5 API；

● 以浏览器原生能力替代复杂的JavaScript代码。

为了实现这些简化操作，HTML5规范需要比以前更加细致、精确。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。

1.1.3 HTML5浏览器支持情况

现今浏览器的许多新功能都是从HTML5标准中发展而来的。目前常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，如图1-1所示。通过对这些主流Web浏览器的发展策略的调查，发现它们都在支持HTML5上采取了措施。

1.IE浏览器

2010年3月16日，微软于MIX10技术大会上宣布，其推出的IE9浏览器已经支持HTML5。同时还声称，随后将更多地支持HTML5新标准和CSS3新特性。

2．火狐浏览器

2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版。该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多HTML5形式的控制等。从官方文档来看，Firefox4对HTML5是完全级别的支持。目前，包括在线视频、在线音频在内的多种应用都已在该版本中实现。

图1-1 常见浏览器图标

3.Google浏览器

2010年2月19日，谷歌Gears项目经理伊安·费特通过微博宣布，谷歌将放弃对Gears浏览器插件项目的支持，以重点开发HTML5项目。据费特表示，目前在谷歌看来，Gears应用与HTML5的诸多创新非常相似，并且谷歌一直积极发展HTML5项目。因此，只要谷歌不断以加强新网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。另外，Gears面临的需求也在日益下降，这也是谷歌做出调整的重要原因。

4.Safari浏览器

2010年6月7日，苹果在开发者大会的会后发布了Safari5，这款浏览器支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajax历史和WebSocket字幕。

5.Opera浏览器

2010年5月5日，Opera软件公司首席技术官，号称“CSS之父”的Hakon Wium Lie认为，HTML5和CSS3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷研发HTML5相关产品，Web的未来属于HTML5。

综上所述，目前这些浏览器纷纷朝着HTML5的方向迈进，HTML5的时代即将来临。

1.1.4 创建第一个HTML5页面

网页制作过程中，为了开发方便，通常我们会选择一些较便捷的工具，如Editplus、notepad++、sublime、Dreamweaver等。实际工作中，最常用的网页制作工具是Dreamweaver。本书中的案例将全部使用Adobe Dreamweaver CS6。接下来使用Dreamweaver CS6来创建一个HTML5页面，具体步骤如下。

（1）打开Dreamweaver CS6，选择菜单栏中的“文件”→“新建”命令，弹出“新建文档”对话框，如图1-2所示。在“页面类型”列表中选择“HTML”选项，并在右下角的“文档类型”下拉菜单中选择“HTML5”，如图1-3所示。

图1-2 执行“文件”→“新建”命令

图1-3 新建HTML5默认文档

（2）单击“创建”按钮，将会新建一个HTML5默认文档。切换到“代码”视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-4所示。

图1-4 HTML5文档代码视图窗口

（3）修改HTML5文档标题，将代码<title>与<title>标记中的“无标题文档”，修改为“第一个网页”。然后，在<body>与</body>标记之间添加一段文本“这是我的第一个HTML5页面哦”，具体代码如例1-1所示。

例1-1 example01.html

    1   <! doctype html>
    2   <html>
    3   <head>
    4   <meta charset="utf-8">
    5   <title>第一个网页</title>
    6   </head>
    7   <body>
    8     这是我的第一个HTML5页面哦
    9   </body>
    10  </html>

（4）在菜单栏中选择【文件】→【保存】选项，其快捷键为Ctrl+S。接着，在弹出来的“另存为”对话框中选择文件的保存地址并输入文件名即可保存文件。例如，本书将文件命名为example01.html，保存在D盘“HTML5+CSS3”文件夹下“教材案例”的“chapter01”文件夹中，如图1-5所示。

图1-5 “另存为”对话框

（5）在谷歌浏览器中运行example01.html，效果如图1-6所示。

图1-6 第一个HTML5页面效果

此时，浏览器窗口中将显示一段文本，第一个简单的HTML5页面创建完成。

注意：

由于谷歌浏览器对HTML5及CSS3的兼容性支持较好，而且调试网页非常方便，所以在HTML5网页制作过程中谷歌浏览器是最常用的浏览器。本书涉及的案例将全部在谷歌浏览器中运行。

本周热推：
SAS数据统计分析与编程实践Flink入门与实战Python深度学习新一代通用视频编码H.266/VVC：原理、标准与实现C语言程序设计案例式教程
上一章目录下一章