1.2 HTML5基础_HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通-QQ阅读男生轻小说网

上QQ阅读APP看书，第一时间看更新

1.2 HTML5基础

HTML5是近10年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画，以及同电脑的交互都被标准化。尽管HTML5的实现还有很长的路要走，但HTML5正在改变Web。

1.2.1 HTML5概述

W3C在2010年1月22日发布了最新的HTML5工作草案。HTML5的工作组包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera及数百个其他的开发商。制定HTML5的目的是取代1999年W3C所制定的HTML4.01和XHTML1.0标准，希望能够在网络应用迅速发展的同时，网页语言能够符合网络发展的需求。

HTML5实际上指的是包括HTML、CSS样式和JavaScript脚本在内的一整套技术的组合，希望通过HTML5能够轻松地实现许多丰富的网络应用需求，而减少浏览器对插件的依赖，并且提供更多能有效增强网络应用的标准集。

在HTML5中添加了许多新的应用标签，其中包括<video>、<audio>和<canvas>等，添加这些标签是为了使设计者能够更轻松地在网页中添加或处理图像和多媒体内容。其他新的标签还有<section>、<article>、<header>和<nav>，这些新添加的标签是为了能够丰富网页中的数据内容。除了添加了许多功能强大的新标签和属性，还对一些标签进行了修改，以方便适应快速发展的网络应用。同时，也有一些标签和属性在HTML5标准中被去除。

1.2.2 HTML5文档结构

HTML5的文档结构与前面所介绍的HTML的文档结构非常类似，基础的文档结构如下。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
页面主体内容部分
</body>
</html>

HTML5的文档结构非常简洁，第一行代码<!doctype html>声明文档是一个HTML文档，接下来使用<html>标签包含头部内容<head>标签和主体内容<body>标签，从而构成HTML5文档的基本结构。

1.2.3 HTML5的优势

对于用户和网站开发者而言，HTML5的出现意义非常重大。因为HTML5解决了Web页面存在的诸多问题，HTML5的优势主要表现在以下几个方面。

1. 化繁为简

为了做到尽可能简化，HTML5避免了一些不必要的复杂设计。例如，DOCTYPE声明的简化处理，在过去的HTML版本中，第一行的DOCTYPE过于冗长，在实际的Web开发中也没有什么意义，而在HTML5中DOCTYPE声明就非常简洁。

为了让一切变得简单，HTML5下了很大的功夫。为了避免造成误解，HTML5对每一个细节都有着非常明确的规范说明，不允许有任何的歧义和模糊出现。

2. 向下兼容

HTML5有着很强的兼容能力。在这方面，HTML5没有进行颠覆性的革新，允许存在不严谨的写法，如一些标签的属性值没有使用英文引号括起来，标签属性中包含大写字母，有的标签没有闭合等。然而，这些不严谨的错误处理方案在HTML5的规范中都有着明确的规定，也希望未来在浏览器中有一致的支持。当然，对于Web开发者来说，还是遵循严谨的代码编写规范比较好。

对于HTML5的一些新特性，如果旧的浏览器不支持，也不会影响页面的显示。在HTML规范中，也考虑了这方面的内容，如在HTML5中<input>标签的type属性增加了很多新的类型，当浏览器不支持这些类型时，默认会将其视为text。

3. 支持合理

HTML5的设计者们花费了大量的精力来研究通用的行为。例如，Google分析了上百万份的网页，从中提取了<div>标签的ID名称，很多网页开发人员都这样标记导航区域。

<div id="nav">
   //导航区域内容
</div>

既然该行为已经大量存在，HTML5就会想办法去改进，所以就直接增加了一个<nav>标签，用于网页导航区域。

4. 实用性

对于HTML无法实现的一些功能，用户会寻求其他方法来实现，如对于绘图、多媒体、地理位置和实时获取信息等应用，通常会开发一些相应的插件间接地去实现。HTML5的设计者们研究了这些需求，开发了一系列用于Web应用的接口。

HTML5规范的制定是非常开放的，所有人都可以获取草案的内容，也可以参与进来提出宝贵的意见。因为开放，所以可以得到更加全面的发展。一切以用户需求为最终目的，所以，当用户在使用HTML5的新功能时，会发现这正是期待已久的功能。

5. 用户优先

在遇到无法解决的冲突时，HTML5规范会把最终用户的诉求放在第一位。因此，HTML5的绝大部分功能都是非常实用的。用户与开发者的重要性远远高于规范和理论。例如，有很多用户都需要实现一个新的功能，HTML5规范设计者们会研究这种需求，并纳入规范；HTML5规范了一套错误处理机制，以便当Web开发者写了不够严谨的代码时，接纳这种不严谨的写法。HTML5比以前版本的HTML更加友好。

1.2.4 HTML5精简的头部

HTML5避免了不必要的复杂性，DOCTYPE和字符集都极大地简化了。

DOCTYPE声明是HTML文件中必不可少的内容，它位于HTML文档的第一行，声明了HTML文件遵循的规范。HTML 4.01的DOCTYPE声明代码如下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这么长的一串代码恐怕极少有人能够默写出来，通常都是通过复制/粘贴的方式添加这段代码。而在HTML5中的DOCTYPE代码则非常简单，如下所示。

<!DOCYPT html>

这样就简洁了许多，不需要再复制/粘贴代码了。同时这种声明也标志性地让人感觉到这是符合HTML5规范的页面。如果使用了HTML5的DOCTYPE声明，则会触发浏览器以标准兼容的模式来显示页面。

字符集的声明也是非常重要的，它决定了页面文件的编码方式。在过去，都是使用如下的方式来指定字符集的，代码如下。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

HTML5对字符集的声明也进行了简化处理，简化后的声明代码如下。

<meta charset="utf-8">

在HTML5中，以上两种字符集的声明方式都可以使用，这是由HTML5向下兼容的原则决定的。