1.2　Web编程基础

1.2.1　HTML5标记语言

HTML（Hyper Text Markup Language）称为超文本标记语言。而HTML5是下一代的HTML，自从2010年正式推出来，就以惊人的速度被迅速地推广，世界各知名浏览器厂商也对HTML5有很好的支持。例如，微软对下一代IE9做了标准上的改进，使其能够支持HTML5，此外，HTML5在老版本的浏览器上也可以正常运行。

1.HTML5文档的基本构成

首先，我们先来看下HTML的基本文档格式，具体代码如下：

【例1.2.1】一个最简单的网页。

以＜HTML＞标签开始，以＜/HTML＞结束。在它们之间，就是HEAD和BODY。HEAD部分用＜HEAD＞……＜/HEAD＞标签界定，一般包含网页标题，文档属性参数等不在页面上显示的网页元素。BODY部分是网页的主体，内容均会反映在页面上，用＜BODY＞……＜/BODY＞标签来界定，其通过各类标签进行内容的定义和组织。

用浏览器将打开它，将会有如图1.2.1所示的页面。

在对HTML文档有一个基本了解后，我们再来看看HTML5页面的各个元素。

（1）文档类型。

一个标准的HTML文档，它的起始元素为制定文档类型的标记，相对于原来的HT-ML文档中，用于指定文档类型的标记代码如下：

而在HTML5的文档中，指定文档类型的代码被简化了，而且更加美观，如下：

（2）根元素。

HTML文档的根元素是＜HTML＞标记。所有HTML文档都是以＜HTML＞……＜/HTML＞作为文档的开始和结束的标记，网页中所有标记都要放置在二者之间，虽然＜HTML＞标记没有实质性的功能，却是不可缺少的部分。（注：HTML标记是不区分大小写的。）

（3）头元素。

HTML文档的头元素是＜HEAD＞标记，作用是存放HTML文档的信息。在＜HEAD＞标记中，可以使用＜TITLE＞标记作为文档的标题，也可以使用＜META＞标记来制定字符编码。

（4）主体元素。

HTML文档的主体元素是＜BODY＞标记。网页中所有的内容都定义在＜BODY＞……＜/BODY＞内。

2.HTML文字排版标记

（1）文件标题标记。

文件标题标记总是加在Head部分，浏览该网页时它会出现在浏览器窗口的标题栏中。标题标记的格式为：

标题是一段文字内容的核心，通常用加强效果来表示。网页中的信息可以通过设置不同大小的标题，区分为主要点、次要点，为文章增加条理，这主要通过标题文字标记来实现，标题文字标记的格式为：

其中，n用来指定标题文字的大小，可以取1～6的整数值，取1文字最大，6最小。

（2）强制换行标记。

＜Br＞放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。强制换行标记的格式为：

（3）段落标记。

段落标记＜P＞放在一段文字的开始，＜/P＞放在文字的结束位置，定义一个段落，且使两段之间多一空行。一个强制换段标记＜P＞可以看作使用两个强制换行标记＜Br＞＜Br＞。强制换段标记的格式为：

（4）分区显示标记。

在浏览器中显示文字段落时有时候需要按照一定的格式显示，这时我们可以使用分区显示标记来设置段落的对齐方式。分区显示标记的格式为：

其中对齐方式有left（左对齐）、center（居中对齐）、right（右对齐）。当对齐方式为居中对齐时还可以使用＜CENTER＞……＜/CENTER＞进行标记。

（5）水平线标记。

在页面中插入一条水平线可以使不同功能的文字分隔开来，看起来就会显得简洁明了。水平线标记的格式为：

（6）文字列表标记。

文字列表标记可以将文字以列表的形式依次排列。通过这种形式可以更加方便网页的访问者。HTML中的列表标记主要有无序列表和有序列表。

无序列表是在每个列表项的前面添加一个圆点符号。通过＜UL＞标记可以创建一组无序列表，其中每一个列表项以＜LI＞标记表示。结构格式如下所示：

有序列表是使用有序列表标记＜OL＞将列表项进行排号，每一个列表项以＜LI＞标记表示。结构格式如下所示：

3.在网页中加入超链接

超链接是网页的核心，超链接技术使我们能够漫游Internet。浏览网页时，如果鼠标移动到网页某处变成小手，单击该处将会链接到全世界范围内的某个WWW服务器上。

HTML语言中用一对标签＜A＞……＜/A＞来设置网页中的超链接，它将引导浏览用户定位到URL地址代表的本地或远程的其他文档，或本文档的某个命名位置。锚标具有属性，其中Href属性表示超文本引用（Hypertext Reference）。在网页中定义超链接可以采用如下锚标格式：

其中URL是统一资源定位地址，即链接的目标位置。例：在网页上设计一个到北京大学主页的链接，可在HTML文档中插入如下语句：

超链接除了Href属性外还有其他一些属性：

（1）hreflang，用于指定超链接位置所使用的语言。

（2）name，用于指定超链接的标识名。

（3）type，用于指定超链接位置所使用的MIME类型。

（4）charset，用于指定超链接位置所使用的编码方式。

（5）target，用于指定超链接的目标窗口，其可选值如表1.2.1所示。

表1.2.1　超链接的目标窗口属性

4.在网页中插入图片

在网页中适当插入图片使得网页更生动活泼，信息更为直观。HTML文档中目前流行的图像文件格式有JPEG和GIF。使用图片标记，可以把一幅图片加入到网页中，其格式为：

标记中的属性说明如下：

（1）Src，定义图像的来源，其值为带路径的图像文件名。

（2）Alt，用来替代图片的字符串。当浏览未显示图片时，通常用该字符串来说明该图片。

（3）Width，定义图片的宽度（像素数或百分数）。

（4）Height，定义图片的高度（像素数或百分数）。

（5）Border，定义图片的边框宽度。

（6）Align，定义图片在页面中的对齐方式。

例如，HTML语句：

要建立图像链接只要在＜A＞和＜/A＞之间嵌入＜IMG＞标签便可实现。

例如，语句：

浏览时，当鼠标移动至该图像的范围内，将会出现代表链接的小手，单击该图像的任何位置，将会链接至文档lib.htm。

5.网页中的注释

网页中注释的格式为：

注释标签的功能起注释作用，它在HTML文件中生成一个空格，容纳不在页面上出现的内容。由于注释标签中的所有内容都是隐蔽的，可以当作个人提示或给同事留言。当然注释标签对于浏览你的源代码的任何人都是可见的。

6.HTML5新增的语义元素

（1）＜/HEADER＞元素。

＜HEADER＞元素（标题）表示页面中一个内容区域或整个页面的标题。可以用来表示一个页面中的第一个元素，包含了站点标题、Logo等。代码如下：

（2）＜FOOTER＞元素。

＜FOOTER＞元素（脚注）表示整个页面或页面中一个内容区域块的脚注。脚注中包含了一些基本信息，如：作者、日期或版本信息等。通常脚注都放在页面或内容区域的最底部，可以根据实际需要放在合理的位置。代码如下：

（3）＜ARTICLE＞元素。

＜ARTICLE＞元素（文章）代表文档、页面或应用程序中的所有“正文”部分，它所描述的内容应该是独立的、完整的、可以独自被外部引用的，可以是一篇文章、一段用户评论或任何独立于上下文中其他部分的内容。

（4）＜ASIDE＞元素。

＜ASIDE＞元素（附属）用来表示当前页面或文章的附属信息部分。可以包含与当前页面或主要内容相关的引用、导航条、侧边栏、广告等信息。

（5）＜SECTION＞元素。

＜SECTION＞元素（区域）表示页面中的一个区域。例如，章节、页眉、页脚或页面中的其他部分。可以与Hn等元素结合起来使用，标识文档结构。代码如下：

（6）＜NAV＞元素。

＜NAV＞元素（导航）用来表示页面中导航链接区域，其中包括一个页面中或一个站点内的链接。但并不是链接的每一个集合都是一个NAV，只需要将主要的、基本的链接组放进NAV元素即可。一个页面中可以拥有有多个NAV元素，作为页面整体或不同部分的导航。

1.2.2　表单、表格与框架

1.表单控制

表单（Form）是HTML实现交互功能的主要接口。表单提供图形用户界面的基本元素，包括按钮、文本框、单选框、复选框等。用户通过表单向服务器提交数据。表单使用包括两部分：一部分是用户界面，提供用户输入数据元件；另一部分是处理程序，可以是客户端程序，在浏览器中执行；也可以是服务器处理程序，处理用户提交的数据，返回结果。

（1）表单定义。

表单定义的语法如下：

Form标记的属性含义分别如下：

①method（方法）属性，取值为post或get，二者的区别是get方法将在浏览器的URL栏中显示所传递变量的值，而post方法则不显示；在服务器端的数据提取方式也不同。

②action属性指出了用户所提交的数据将由哪个服务器的哪个程序处理，可处理用户提交的数据的服务器程序种类较多，如CGI程序、ASP脚本程序、PHP程序等。

（2）表单的输入域。

不同类型的输入域提供给用户灵活多样的输入数据的方式。表单的输入域有三大类：

①以标记＜input＞定义的多种输入域，包括text, radio, checkbox, password, hidden, button, submit和reset等；

②以标记＜textarea＞定义的文本域；

③以标记＜select＞和＜option＞定义的下拉列表框。

表单输入域的定义方法及使用示例：

2.表格

表格（Table）是日常生活中最常见的文档形式，在HTML文档中，表格的使用不只是信息的一种表现形式，而且常用来实现在页面信息单元的定位和布局，使网页版面美观有序。

（1）表定义。

表由若干行、列的单元格组成，表的第一行称为表头。与表定义相关的标签有：

①＜Table＞……＜/Table＞，用来界定一张表。属性Border设置表格线的粗细，单位是像素点。

②＜Tr＞，定义表的一行。

③＜Th＞，定义表头。其属性Align表示表头内容的对齐方式。

④＜Td＞，定义单元格（Cell）数据，有一个＜Td＞就有一个单元格。＜Td＞也支持Align属性。

在网页中插入表格需要合理使用上述标签。首先要加入＜Table＞标签，然后用＜Tr＞逐行定义表的行数，有一个＜Td＞就有一行；在每个＜Tr＞之后要定义表的Cell, Cell可以是表头，也可以是表的数据，分别采用＜Th＞、＜Td＞。若干个＜Td＞就定义了该行的若干个单元格。

下列HTML语句定义一张表结构：

（2）表的应用。

Internet网页的各种各样的版面布局许多是利用表格来完成的。因为表的单元格里可插入文本数据，图片、图像、音频数据等都可作为单元格Cell的内容，Cell中还可嵌套表，表格的各个单元格可把页面分割成内容相对独立的各个版块，通过设置每个单元格自己独特的属性，如背景颜色、字体风格等，从而非常方便地定义出不同风格的版面布局。

表格标签＜Table＞的一些属性对版面布局非常有用，主要有：

①align=legt/center/right（表的对齐方式）；

②width=像素点/百分比值%（表的宽度）；

③border=像素点（表的边框粗细）；

④cellspacing=像素点（表中单元格间的间隔宽度）；

⑤cellpadding=像素点（表中单元格边界与内容的间隔距离）。有关单元格标签＜Td＞的主要属性有：

①align=legt/center/right（单元格内容的水平对齐方式）；

②valign=top/middle/bottom/baseline（单元格内容的垂直对齐方式）；

③rowspan=n（本单元格占n行）；

④colspan=n（本单元格占n列）；

⑤nowrap（自动换行属性）。

3.框架

使用框架（Frame）可分割窗口。用HTML的＜Frameset＞……＜/Frameset＞标签可以设计显示为多个分栏的效果，每个分栏被称为一个框架。每个框架中显示一个HTML文档。使用框架的HTML文档的结构与其他HTML文档不同，它不使用＜BODY＞标签，而使用＜Frameset＞标签。其基本结构如下：

若将＜Frameset＞的属性Cols改为Rows，则可以将浏览器窗口垂直分割成若干个框架。

4.HTML5增强表单设计

HTML5在原有表单输入元素基础上新增许多输入组件，丰富了表单输入元素的类型和属性。HTML5新增的电子邮件、数值、网址、范围、日期时间、搜索、颜色等多种输入元素，使得可以不再通过大段的JavaScript代码来制作输入元素。HTML5新增组件如下：

（1）Mail邮件输入组件。

（2）URL网址输入组件

（3）Numble数值输入组件。

（4）Range范围输入组件。

（5）Data pickers日期时间输入组件。

（6）Search搜索输入组件。

（7）Color颜色输入组件。

HTML5新增输入组件的属性如下：

autofocus属性：用于设置组件在页面加载完成后自动获取焦点。

form属性：当组件放在表单外时，通过form属性指定组件所属的表单。

form overrides（formaction, formenctype, formmethed, formnovalidate, formtarget）属性：表单重写属性，应用于提交按钮，当该提交按钮被按下时，可以重写表单的对应属性。

height和width属性：只适应于图片按钮，指定宽度与高度。

list属性：指定输入域的选项列表。

min, max和step属性：用于数字和日期类型输入域的验证，可验证最大值、最小值和间隔。

multiple属性：适用于email和file类型的输入域，可进行多项。

pattern属性：用于设置pattern中的正则表达式对输入域的内容进行验证。

placeholder属性：用于设置文本占位符，显示输入域的初始提示文本。

required属性：用于设置输入框是否必须输入信息，必选验证属性。

以下HTML5.html实例演示了部分新增HTML5表单组件元素。

例：HTML5＿01.html

执行代码后，效果如图1.2.2所示。

1.2.3　HTML5多媒体元素

HTML5提供了两个用来播放音频和视频的标记＜AUDIO＞和＜VIDEO＞。可嵌入音视频多媒体元素到HTML中，使用起来相对于HTML5出现之前的使用＜OBJECT＞和＜EMBED＞标记简单得多。显著降低了多媒体网页开发的难度。

1.＜AUDIO＞标记

＜AUDIO＞标记专门用来播放音频数据。它的使用方法比较简单，例如，要播放网络中的一首MP3音乐，代码如下：

＜AUDIO＞支持多种音频格式，包括Ogg、MP3、AAC和WAV等，不同浏览器支持的音频格式也不尽相同。例如，IE 9支持MP3和ACC；Firefox 3.6+支持Ogg和WAV；Chrome 10+支持Ogg、MP3、AAC和WAV；Opera 11+支持Ogg和WAV。

由于不同浏览器支持的音频格式不尽相同，所以在应用＜AUDIO＞标记在页面中播放音频需要根据不同的浏览器提供不同格式的音频文件，才能让音频数据在不同的浏览器中正常播放。代码如下：

2.＜VIDEO＞标记

＜VIDEO＞标记用来播放视频数据。它的语法格式如下：

＜VIDEO＞标记的一些属性用来设置播放器，主要有：

●src属性：用于指定要播放的视频，它的属性值为视频的URL地址。

●width属性：用于指定播放器的宽度。

●height属性：用于指定播放器的高度。

●autoplay属性：用于指定是否自动播放视频，属性值为true或false。为true时表示自动播放，否则为不自动播放。

●controls属性：用于指定是否显示播放控制组件，属性值为true或false。为true时表示显示播放控制组件，否则为不显示播放控制组件。

以下演示HTML5中的播放视频实例HTML5＿02.html。

例：HTML5＿02.html

执行代码后，效果如图1.2.3所示。

1.2.4　CSS

CSS（Cascading Style Sheets, CSS），层叠样式表。它是一套扩展样式标准。CSS标准重新定义了HTML中原来的文字显示样式，增加了类、层等新概念，提供了可以对文字重叠、定位等更为丰富多彩的样式，同时可进行集中样式管理。CSS的重要思想是把显示的内容和显示的样式定义分离。它允许将样式定义单独存储于样式文件中，便于多个HTML文件共享样式定义，或一个HTML文件引用多个CSS样式文件中的样式定义。实际上，层叠样式的意义在于将显示样式独立于显示的内容，进行分类管理，需要使用样式的HTML文件可以灵活引用并依据层次顺序进行处理。

1.样式表的定义

样式表的定义就是使用CSS思想控制浏览器如何呈现文档。下面是一个使用CSS样式定义对文字显示特性进行控制的HTML文件例子。

【例1.2.2】CSS使用示例。

本例在浏览器中的显示结果如图1.2.4所示。

本例中使用了一个新的标记＜style＞，这是CSS对样式进行集中管理的方法。在＜style＞标记中定义了h1对象的样式和一个类选择器.text，在body中＜h1＞和＜h1＞

间的文字的显示套用h1对象的样式，而＜span＞和＜/span＞之间的文字因定义了其类名为text，故其显示套用类选择器.text定义的样式。

CSS样式表定义的基本语法为：

（1）选择符是指要引用样式的对象，它可以是一个或多个HTML标记（各个标记之间以逗号分开）；也可以是类选择符、ID选择符或上下文选择符。

（2）规则表是由一个或多个样式属性组成的样式规则，各个样式属性间由分号隔开，每个样式属性的定义格式为：

样式名：值

样式定义中可以加入注解，格式为：

2.样式表的引用

HTML文件中的样式引用方式主要有：链接到外部样式表、引入外部样式表、嵌入样式表和内联样式四种。

（1）链接到外部样式表。

如果多个HTML文件要共享样式表（这些页面的显示特性相同或十分接近），则可以将样式表定义为一个独立的CSS样式文件，使用该样式表的HTML文件在头部用＜link＞标记链接到这个CSS样式文件即可。

【例1.2.3】样式引用示例。

首先，将样式定义存放于文件style.css（CSS样式文件的扩展名为.CSS），style.css文件中包含的内容如下所示：

其次，在HTML文件中引用该样式表，其文件内容如下所示：

通过浏览器浏览到的结果如图1.2.5所示。

在HTML文件头部使用多个＜LINK＞标记就可以链接到多个外部样式表。＜LINK＞标记的属性主要有REL、HREF、TYPE、MEDIA。REL属性用于定义链接的文件和HT-ML文档之间的关系，通常取值为stylesheet（CSS样式文件不包含＜style＞标记，因为＜style＞不是CSS样式而是HTML标记）。HREF属性指出CSS样式文件。TYPE属性指出样式的类别，通常取值为text/css。MEDIA属性用于指定接受样式表的介质，默认值为screen（显示器），还可以是print（打印机）、projection（投影机）等。

（2）引入外部样式表。

引入外部样式表方式在HTML文件的头部的＜STYLE＞、＜/STYLE＞标记之间，利用CSS的@import声明引入。格式为：

引入外部样式表的使用方式与链接到外部样式表都是将样式定义单独保存为文件，在需要使用的HTML文件中进行说明。两者差别在于：引入外部样式表方式在浏览器下载HTML文件时就将样式文件的全部内容拷贝到@import关键字所在位置，以替换该关键字。而链接到外部样式表方式在浏览器下载HTML文件时并不替换，而仅在HTML文件需要引用CSS样式文件中的某个样式时，浏览器才链接样式文件读取需要的内容。

（3）嵌入样式表。

嵌入样式表方式利用＜style＞标记将样式表嵌在HTML文件的头部。

＜style＞标记的属性type，指明样式的类别，因为对显示样式的定义标准除了有CSS外，还有Netscape的JSS（JavaScript Style Sheets），其样式类别为type=“text/JavaScript”。type的默认值为text/css。＜style＞标记内定义的前后加上注释符＜！——……——＞的作用是用来使不支持CSS的浏览器忽略样式表定义。嵌入样式表的作用范围是本HTML文件。

（4）内联样式。

内联样式方式是在HTML标记中引用样式定义，方法是将标记的style属性值赋为所定义的样式规则。这样，样式定义的作用范围仅限于此标记范围之内。由于样式是在标记内部使用，故称为“内联样式”。例如：

style样式定义可以和原HTML属性一起使用。例如：

style属性可以应用于除basefont、script和param之外的体部标记。若要在一个HT-ML文件中使用内联样式，必须在该文件的头部对整个文档进行单独的样式表语言声明。即

因为内联样式将样式和要展示的内容混在一起，它将失去一些样式表的优点，如样式定义和内容不能分离。故这种方式少用，主要用于样式仅适用于单个页面元素的情况。

3.相关的标记和属性

CSS弥补了HTML在显示属性设计上的不足，已有许多新的HTML标记和属性被增加到HTML中，这使得样式表与HTML文档更简易地组合起来，它们是：类选择符和class属性、id选择符和id属性、上下文选择符、伪类、span标记和div标记。

4.CSS属性

CSS属性可分为字体属性、颜色及背景属性、文本属性、方框属性、分类属性和定位属性等几大部分。