2.2 HTML和HTML5技术
2.2.1 HTML
1. HTML文档结构
HTML是一种超文本语言，也是在因特网上常见的网页制作标注性语言，HTML通过浏览器的翻译，将网页中内容呈现给用户。HTML中用于标记的标签通常被称为HTML标签，它是HTML语言中最基本的单位，由尖括号包围的关键词组成，通常成对出现，如<div>和</div>。而一对标签和该对标签中的内容就形成一个元素。
HTML文档主要由4个主要标签组成，这4个主要标签由<html>标签、<head>标签、<title>标签、<body>标签组成。
<html>标签是HTML文件的开头。所有HTML文件都是以<html>标签开头，以</html>标签结束。
<head>标签是HTML文件的头标签，作用是放置HTML文件的信息，如CSS。
<title>标签为标题标签，可将网页的标题定义在<title>和</title>之间。
<body>标签是HTML页面的主体标签。页面中所有内容都定义在该标签中。
HTML页面的例子如图2.1所示。
图2.1 HTML页面的例子
2. HTML文本标签
HTML提供了很多文本标签，可以用来设计页面中的文字、图片，定义超链接等。
<br>换行标签：使页面中文字实现换行。
<p>段落标签：实现在段前和断后各添加一个空行。
<h1>…<h6>标题标签：创建不同级别的标题。
<center>居中标签：使页面中的内容在页面的居中位置显示。
<ul><ol><li>文字列表标签：<ul>可以创建一组无序列表，无序列表是在每个列表项的前面添加一个圆点符号，其中每一个列表项以<li>表示；有序列表的标记为<ol>，使用有序列表标记可以将列表项进行排号，每一个列表项前使用<li>。
<span>和<div>区域标签，用来组合文档中的行内元素和块内元素。
3. HTML表格标签
表格是网页中十分重要的组成元素，用来表示和存储数据。在HTML中定义表格，有以下几个标签。
表格标签<table>：表示整个表格。
标题标签<caption>。
表头标签<th>。
表格行标签<tr>。
单元格标签<td>。
HTML表格例子如图2.2所示。
运行该例子，结果如图2.3所示。
图2.2 HTML表格的例子
图2.3 HTML表格显示结果
4. HTML表单标签
在登录页面中，网站会提供给访客用户名文本框与密码文本框以供访客输入信息。这里的用户名文本框和密码文本框就属于HTML的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。
（1）<form>…</form>表单标签
<form>标签的基本语法如下。
<form action="url"method="get"|"post"name="name"onSubmit=""target=""> </form>
<form>标记的各属性说明如下。
action：用来指定处理表单数据程序的URL地址。
method：用来指定数据传送到服务器的方式。该属性有两种属性值，分别为get与post。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，将输入的数据按照HTTP中post传输方式传送到服务器。
name：指定表单的名称，该属性值程序员可以自定义。
onSubmit：onSubmit属性用于指定当用户单击提交按钮时触发的事件。
target：target属性指定输入数据结果显示在哪个窗口中，该属性的属性值可以设置为“_blank”“_self”“_parent”“_top”。其中，“_blank”表示在新窗口中打开目标文件；“_self”表示在同一个窗口中打开，这项一般不用设置；“_parent”表示在上一级窗口中打开，一般使用框架页时经常使用；“_top”表示在浏览器的整个窗口中打开，忽略任何框架。
（2）<input>表单输入标签
通过这个标签可以向页面中添加单行文本、多行文本、按钮等。语法如下。
<input type=""…disabled="" checked="" width="" height="" maxlength="" readonly="" size="" src=""… usemap="" alt="" name="" value="">
<input>标签的属性如表2.1所示。
表2.1 <input>标签的属性
除了上述表单标签外，还有<select>下拉菜单标签、<textarea>多行文本标签，限于篇幅不再赘述。
5. 超链接和图片标签
超链接标签<a>：在网站中实现从一个页面跳转到另一个页面。
图像标签<img>：实现添加图片。
下面通过一个例子来说明这两个标签的使用，如图2.4所示。
图2.4 图片和超链接的使用
2.2.2 CSS样式表
层叠样式表（CSS，Cascading Style Sheets）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体、字号样式，拥有对网页对象和模型样式编辑的能力。
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式并更新与之相关的所有页面元素。总体来说，CSS具有以下特点。
1 丰富的样式定义：CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，定义元素边框与其他元素间的距离以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2 易于使用和修改：CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，还可以将样式声明放在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
3 另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，或将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
4 多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以被引用，这样就可以实现多个页面风格的统一。
5 层叠：简单来说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后设置的样式效果。
6 页面压缩：在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大减小页面的大小，这样在加载页面时使用的时间也会大大减少。另外，CSS样式表的复用更大程度地缩减了页面的大小，减少下载的时间。
CSS是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名_css的外部样式单文档中。
样式规则是可应用于网页中的元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及属性值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。
名称CSS中的层叠（Cascading）表示样式单规则应用于HTML文档元素的方式。具体地说，CSS样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定，从而实现级联效果。
1. CSS规则
在CSS样式表中包括三部分内容：选择符、属性和属性值。语法格式为：选择符{属性：属性值}。语法说明如下。
选择符：又称选择器，是CSS中很重要的概念，所有HTML语言中的标签都是通过不同的CSS选择器进行控制的。
属性：主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属性等内容。其中一些属性只有部分浏览器支持，因此使CSS属性的使用变得更加的复杂。
属性值：为某属性的有效值。属性与属性值之间以“:”号分隔。当有多个属性时，使用“；”分隔。
2. CSS选择器
CSS选择器常用的是标记选择器、类别选择器、ID选择器等。使用选择器即可对不同的HTML标签进行控制，从而实现各种效果。下面对各种选择器进行介绍。
1 标签选择器：HTML页面是由很多标签组成，例如图片标签<img>、超链接标签<a>、表格标签<table>等。而CSS标签选择器就是指声明页面中哪些标签采用何种CSS样式。例如a选择器，就是用于声明页面中所有<a>标签的样式风格，如下所示。
<style>
a{
font-size:9px;
color:#F93;
}
</style>
2 类别选择器：使用标签选择器非常快捷，但会有一定的局限性，页面如果声明标签选择器，那么页面中所有该标签内容会有相应的变化。假如页面中有三个<h2>标签，如果想要每个<h2>标签的显示效果不一样，使用标签选择器就无法实现了，这时就需要引入类别选择器。类别选择器的名称由用户自己定义，并以“.”号开头，定义的属性与属性值也要遵循CSS规范。要应用类别选择器的HTML标记，只需使用class属性声明即可。一个使用类别选择器的HTML代码如下。
<html>
<head>
<style>
.one
font-family:宋体;
font-size:24px;
color:red;
}
.two{
font-family:宋体;
font-size:16px;
color:red;
}
.three{
font-family:宋体;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h2 class="one"> 应用了选择器one </h2
<p> 正文内容1
<h2 class="two">应用了选择器two
<p>正文内容2
<h2 class="three">应用了选择器three
<p>正文内容3
</body>
</html>
运行结果如图2.5所示。
图2.5 类别选择器控制页面文字样式
3 ID选择器：ID选择器是通过HTML页面中的ID属性来选择样式，与类别选择器不同的是由于HTML页面中不能包含有两个相同的ID标记，因此定义的ID选择器也就只能被使用一次。命名ID选择器要以“#”号开始，后加ID属性值。
3. 在页面中包含CSS
实现在页面中包含CSS样式的几种方式包括：行内样式、内嵌式样式表、链接式样式表。
1 行内样式：比较直接的一种样式，直接定义在HTML标签之内，通过style属性来实现，如：<td><p style="color:#F00;font-size:36px;">行内样式一</p></td>。
2 内嵌式样式表：在页面中使用<style></style>标记将CSS样式包含在页面中，如上文代码所示。
3 链接式样式表：最常用的一种引用样式表的方式，将CSS样式定义在一个单独的文件中，然后在HTML页面中通过<link>标记引用。语法结构为：
<link rel='stylesheet'href='path'type='text/css'>。
2.2.3 HTML5
HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，功能如下：
1 新的解析规则增强了灵活性；
2 新属性；
3 淘汰过时的或冗余的属性；
4 一个HTML5文档到另一个文档间的拖放功能；
5 离线编辑；
6 信息传递的增强；
7 详细的解析规则；
8 多用途互联网邮件扩展（MIME）和协议处理程序注册；
9 在SQL数据库中存储数据的通用标准（Web SQL）。
HTML5在2007年被万维网联盟（W3C）新的工作组采用。这个工作组在2008年1月发布了HTML5的首个公开草案。HTML5的新特性如下。
1 语义特性（Class：Semantic）：HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa、微数据与微格式等方面的支持，构建对程序、用户都更有价值的数据驱动的Web。
2 本地存储特性（Class:OFFLINE&STORAGE）：基于HTML5开发的网页App拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 App Cache，以及本地存储功能、Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
3 设备兼容特性（Class:DEVICE ACCESS）：从Geolocation功能的API文档公开以来，HTML5为网页应用开发者提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与Microphones及摄像头相连。
4 连接特性（Class:CONNECTIVITY）：更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得以实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据推送到客户端的功能。
5 网页多媒体特性（Class:MULTIMEDIA）：支持网页端的Audio、Video等多媒体功能，与网站自带的App、摄像头、影音功能相得益彰。
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）也提供了更高的灵活性和控制性。
HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。这种标签有利于搜索引擎的索引整理，同时更好地帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。
（1）取消了一些过时的HTML4标记。
一些过时的HTML4标记其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。
HTML5吸取了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对象。
Canvas对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash和Silverlight，直接在浏览器中显示图形或动画。
（7）浏览器中的真正程序。
将提供API实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag将被剔除，而使用CSS。
（8）HTML5取代Flash在移动设备的地位。
（9）其突出的特点就是强化了Web页的表现性，追加了本地数据库。
为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，例如：图形的绘制、多媒体内容、更好的页面结构、更好的形式处理和几个API拖放元素、定位、网页应用程序缓存、存储等。小结如下：
1 <canvas>标签：定义图形，如图表和其他图像，该标签基于JavaScript的绘图API；
2 <audio>：定义音频内容；
3 <video>：定义视频（video或者movie）；
4 <source>：定义多媒体资源<video>和<audio>；
5 <embed>：定义嵌入的内容，如插件；
6 <track>：为诸如<video>和<audio>元素之类的媒介规定外部文本轨道；
7 <datalist>：定义选项列表，与input元素配合使用该元素，来定义input可能的值；
8 <keygen>：规定用于表单的密钥对生成器字段；
9 <output>：定义不同类型的输出，如脚本的输出；
10 <article>：定义页面的侧边栏内容；
11 <aside>：定义页面内容之外的内容；
12 <bdi>：允许您设置一段文本，使其脱离其父元素的文本方向设置；
13 <command>：定义命令按钮，如单选按钮、复选框；
14 <details>：用于描述文档或文档某个部分的细节；
15 <dialog>：定义对话框，如提示框；
16 <summary>：标签包含details元素的标题；
17 <figure>：规定独立的流内容（图像、图表、照片、代码等）；
18 <figcaption>：定义<figure>元素的标题；
19 <footer>：定义section或document的页脚；
20 <header>：定义文档的头部区域；
21 <mark>：定义带有记号的文本；
22 <meter>：定义度量衡，仅用于已知最大和最小值的度量；
23 <nav>：定义运行中的进度（进程）；
24 <progress>：定义任何类型的任务的进度；
25 <ruby>：定义ruby注释（中文注音或字符）；
26 <rt>：定义字符（中文注音或字符）的解释或发音；
27 <rp>：在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容；
28 <section>：定义文档中的节（section、区段）；
29 <time>：定义日期或时间；
30 <wbr>：规定在文本中的何处适合添加换行符。
以下的HTML 4.01元素在HTML5中已经被删除：<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>。