【知识疏理】

1. HTML5印象

HTML5是万维网的核心语言，是标准通用置标语言下的一个应用超文本标记语言（HTML）的第五次重大修改，HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG（Web Hypertext Application Technology Working Group）提出，于2007年被万维网联盟（W3C）接纳，并成立了新的HTML工作团队。

HTML 5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。

2012年12月17日，万维网联盟（W3C）宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石”。

2013年5月6日，HTML5.1正式草案公布。该规范定义了第五次重大版本，第一次要修订万维网的核心语言——超文本标记语言（HTML）。在这个版本中，新功能不断推出，以帮助Web应用程序的作者，努力提高新元素互操作性。

本次草案的发布，从2012年12月27日至今，进行了多达近百项的修改，包括HTML和XHTML的标签，相关的API、Canvas等，同时HTML5的图像<img>标签及svg也进行了改进，性能得到进一步提升。

支持HTML5的浏览器包括Firefox（火狐浏览器）、IE9（Internet Exploer）及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

HTML5手机应用的最大优势就是可以在网页上直接调试和修改。原先应用程序的开发人员可能需要花费非常大的力气才能达到HTML5的效果，不断地重复编码、调试和运行。如今基于HTML5标准的Web应用程序开发，开发人员可以轻松地进行调试、修改。

2. CSS3印象

CSS即层叠样式表（Cascading Style Sheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者不同网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

CSS3将完全向后兼容，网络浏览器也还将继续支持CSS2。CSS3主要影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（动态和渐变），而且可以很简单地设计出现在的设计效果（如使用分栏）。

3. HTML5的主要特性

（1）语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

（2）本地存储特性（Class：Offline & Storagf）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache及本地存储功能。

（3）设备兼容特性（Class：Device Access）

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据相连，如视频影音可直接与Microphones及摄像头相连。

（4）连接特性（Class：Connectivity）

更有效的连接工作效率，使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

（5）网页多媒体特性（Class：Multimedia）

支持网页端的Audio、Video等多媒体功能，与网站自带的APPS、摄像头、影音功能相得益彰。

（6）三维、图形及特效特性（Class：3D, Graphics & Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

（7）性能与集成特性（Class：Performance & Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助你的Web应用和网站在多样化的环境中更快速的工作。

（8）CSS3特性（Class：CSS3）

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

4. HTML5的主要变化

HTML5提供了一些新的元素和属性，如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。

（1）取消了一些过时的HTML4标记

其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML 5吸取了XHTML2一些建议，包括一些用来改善文档结构的功能，例如，新的HTML标签<header>、<footer>、<dialog>、<aside>、<figure>等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用<div>。

（2）将内容和展示分离

<b>和<i>标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。<u>、<font>、<center>、<strike>这些标签则被完全去掉了。

（3）一些全新的表单输入对象

包括日期、URL、Email地址，其他的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

（4）全新的、更合理的Tag

多媒体对象将不再全部绑定在object或embed Tag中，而是视频有视频的Tag，音频有音频的Tag。

（5）本地数据库

这个功能将内嵌一个本地的SQL数据库，以加速交互式搜索、缓存及索引功能。同时，那些离线Web程序也将因此获益匪浅。

（6）Canvas对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。

（7）浏览器中的真正程序

将提供API实现浏览器内的编辑与拖放，以及各种图形用户界面的能力。内容修饰Tag将被剔除，而使用CSS。

（8）HTML5取代Flash在移动设备的地位。

（9）HTML5突出的特点就是强化了Web页的表现性，增加了本地数据库。

5. HTML5的发展趋势

HTML5规范开发完成时，将成为主流。据统计，2013年全球约有10亿手机浏览器支持HTML5，同时HTML Web开发者数量已达到200多万。毫无疑问，HTML5将成为未来5～10年内，移动互联网领域的主宰者。

据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。

从性能角度来说，HTML5首先是缩减了HTML文档，使这件事情变得更简单。从用户可读性上说，原先一大堆东西，像初学者第一次看到这些东西是看不懂的，而HTML5的声明方式对用户来说显然更友好一些。

从如今层出不穷的移动应用就知道，在这个智能手机和平板电脑大爆炸的时代，移动优先已成趋势，不管是开发什么，都以移动为主。

许多游戏开发商都被Facebook或者Zynga推动着发展，而未来的Facebook应用生态系统是基于HTML5的，尽管在HTML 5平台开发出游戏非常困难，但游戏开发商却都愿意那么做。

6. HTML5新增的标签和废除的标签

HTML5中，新增加了多个标签元素，同时也废除了多个标签元素。

（1）HTML5新增的标签

HTML5新增的标签及其功能说明如表1-9所示。

（2）HTML5废除的标签

HTML5废除的标签如表1-10所示

7. HTML5新增和废除的标签属性

HTML5中，在新增加和废除很多标签元素的同时，也增加和废除了很多属性。

（1）HTML5新增的属性

HTML5新增的属性如表1-11所示。

（2）HTML5废除的属性

HTML4中一些属性在HTML5中不再被使用，而是采用其他属性或其他方式进行替代，如表1-12所示。

8. HTML5语义和结构标签实例代码探析

新建example01.html网页文件，该网页的浏览效果如图1-2所示。

网页example01.html对应的HTML代码如表1-13所示。

下面对表1-13中的HTML代码的结构及组成进行探析。

（1）HTML5的文档声明

创建example01.html网页文件，如果用的网页编写工具已经支持HTML5文件类型，那么，应该生成如下的HTML5模板：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>

说明：第一行<!DOCTYPE html>是HTML5对文档类型的简化描述，文档类型的作用是验证器依据它来判断该采用何种规则去验证代码；强制浏览器以标准模式渲染页面。

（2）头部

网页example01.html的头部代码由<header>标签实现，如表1-13中18～20行所示。

<header>标签不能和h1、h2、h3这些标题混为一谈，<header>元素可以包含从公司logo到搜索框在内的各式各样的内容。同一个页面可以包含多个<header>元素，每个独立的区块或文章都可以含有自己的<header>。

（3）尾部

网页example01.html的尾部由<footer>标签实现，如表1-13中39～41行所示。

<footer>元素位于页面或者区块的尾部，用法和<header>基本一样，也会包含其他元素。

（4）导航

网页example01.html的导航由<nav>标签实现，如表1-13中22～29行所示。

网页导航对于一个网页来说至关重要，快速方便的导航是留住访客所必须的。导航可以被包含在<header>或<footer>或者其他区块中，一个页面可以有多个导航。

（5）区块和文章

网页example01.html的区块和文章由<section>和<article>标签实现，如表1-13中21～38行所示。

<section>元素将页面的内容合理归类与布局，可以看到<article>元素还可以包含很多元素。

（6）旁白和侧边栏

网页example01.html的侧边栏由<aside>实现，如表1-13中34～36行所示。

<aside>标签可实现旁白，一般加在<article>中使用，<aside>元素是为主内容添的附加信息，加入引言、图片等。侧边栏不一定是旁白，可以看作是右面的一个区域，包含链接，可用<section>和<nav>实现。

9. HTML5中典型的标记方法

（1）内容类型（ContentType）

HTML5扩展仍然为“.html”或者“.htm”，内容类型（ContentType）仍然为“text/html”。

（2）DOCTYPE声明

HTML5中使用<!DOCTYPE html>声明，该声明方式适用所有版本的HTML，HTML5中不可以使用版本声明。

（3）指定字符编码

HTML5中的字符编码推荐使用UTF-8，HTML5中可以使用<meta>元素直接追加charset属性的方式来指定字符编码：<meta chaarset="UTF-8">。

HTML4中使用<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">继续有效，但不能同时混合使用两种方式。

（4）具有boolean值的属性

当只写属性而不指定属性值时表示属性为true，也可以将属性名设定为属性值或将空字符串设定为属性值；如果想要将属性值设置为false，可以不使用该属性。

（5）引号

指定属性时属性值两边既可以用双引号也可以用单引号。当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性两边的引号可以省略。例：<input type="text"> <input type='text'> <input type=text>。

10. HTML5主要的语义和结构标签说明

HTML5提供新的元素来创建更好的页面结构。

（1）<header>标签

用于定义文档的头部区域，表示页面中一个内容区块或整个页面的标题。

（2）<section>标签

用于定义文档中的节（section、区段），表示页面中的一个内容区块，如章节、页眉、页脚或页面的其他部分。可以和<h1>、<h2>等元素结合起来使用，表示文档结构。

（3）<footer>标签

用于定义文档或节的页脚部分，表示整个页面或页面中一个内容区块的脚注，通常包含文档的作者、版权信息、使用条款链接、联系信息等。可以在一个文档中使用多个<footer>元素，<footer>元素内的联系信息应该位于<address>标签中。

（4）<article>标签

用于定义页面中一块与上下文不相关的独立内容，如一篇文章。<article>元素的潜在来源可能有论坛帖子、报纸文章、博客条目、用户评论等。

（5）<aside>标签

用于定义页面内容之外的内容，表示article元素内容之外的与article元素内容相关的辅助信息。

（6）<hgroup>标签

用于对整个页面或页面中的一个内容区块的标题进行组合。

11. <!DOCTYPE>声明的用法

<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。<!DOCTYPE>声明不是HTML标签，它是指示Web浏览器关于页面应使用哪个HTML版本进行编写的指令。

在HTML 4.01中，<!DOCTYPE>声明引用DTD，因为HTML 4.01基于SGML。DTD规定了标签语言的规则，这样浏览器才能正确地呈现内容。HTML5不基于SGML，所以不需要引用DTD。在HTML 4.01中有3种<!DOCTYPE>声明。在HTML5中只有一种——<!DOCTYPE html>。

<!DOCTYPE>声明没有结束标记，并且对大小写不敏感。应始终向HTML文档添加<!DOCTYPE>声明，这样浏览器才能获知文档类型。

12. HTML的注释标签<!--…-->的用法

网页中HTML的注释标签<!--…-->使用实例如下：

<!--这是一段注释，注释不会在浏览器中显示。-->

所有浏览器都支持注释标签，注释标签用于在源代码中插入注释，注释不会显示在浏览器中。使用注释对代码进行解释，这样做有助于在以后的时间对代码的编辑，当编写了大量代码时尤其有用。

使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯，这样就不会把脚本显示为纯文本。观察以下JavaScript代码：

<script type="text/javascript">
<!--
   function displayMsg()
   {
      alert("Hello World!")
   }
//-->
</script>

注释行结尾处的两条斜杠（//）是JavaScript注释符号，这样可以避免JavaScript执行“-->”标签。

13. 如何插入样式表

浏览网页时，当浏览器读到一个样式表时，浏览器会根据它来格式化HTML文档。插入样式表的方法有以下3种。

（1）外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。

<link>标签通常用在文档的头部，示例代码如下所示：

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件外部样式表mystyle.css中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑，样式表应该以.css扩展名进行保存。外部样式表文件不能包含任何的html标签，下面是一个样式表文件的实例：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

注意不要在属性值与单位之间留有空格。假如使用“margin-left: 20 px”而不是“margin-left:20px”，它仅在IE6中有效，但是在Mozilla/Firefox或Netscape中却无法正常工作。

（2）内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表，示例代码如下所示：

<head>
  <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
  </style>
</head>

（3）内联样式

由于内联样式要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势，应慎用这种方法，当样式仅需要在一个元素上应用一次时可以使用内联样式。

要使用内联样式，需要在相关的标签内使用样式（style）属性，style属性可以包含任何CSS属性。以下代码展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left:20px">
   This is a paragraph
</p>

14. 网页中的多重样式

如果网页中某些属性在不同的样式表中被同样的选择器定义，那么属性值将被继承过来。

例如，外部样式表拥有针对h3选择器的3个属性，代码如下：

h3 {
   color: red;
   text-align: left;
   font-size: 8pt;
   }

而内部样式表拥有针对h3选择器的两个属性，代码如下：

h3 {
   text-align: right;
   font-size: 20pt;
   }

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是：

color: red; text-align: right; font-size: 20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

15. 标记-moz-、-webkit-、-o-和-ms-的解释

（1）-moz-：以-moz-开头的样式代表Firefox浏览器特有的属性，只有Webkit浏览器可以解析。moz是Mozilla的缩写。

（2）-webkit-：以-webkit-开头的样式代表Webkit浏览器特有的属性，只有Webkit浏览器可以解析。WebKit是一个开源的浏览器引擎，Chrome、Safari浏览器即采用WebKit内核。

（3）-o-：以-o-开头的样式代表Opera浏览器特有的属性，只有Opera浏览器可以解析。

（4）-ms-：以-ms-开头的样式代表IE浏览器特有的属性，只有IE浏览器可以解析。