2.1 HTML简介

超文本标记语言或超文本链接语言（HyperText Markup Language，HTML）是目前应用在网络上的较为流行、广泛的标记语言，也是构成网页文档的主要语言，最早起源于标准通用标记语言（Standard Generalized Markup Language，SGML）。确切地说，HTML并不是一种真正的编程语言，它只是一种规范、一种标准，它通过一些规定好的标签符号对文件的内容进行标注，标记着要显示的网页中的各个部分，如字体、字的大小、文字颜色、背景颜色、表格形式以及各部分之间逻辑关系等。当用户浏览Web信息时，浏览器就会自动解释这些标签的含义，同时按照解释的格式在屏幕上显示这些被标记的信息。

可以使用任何能够生成.txt类型源文件的文本编辑来产生HTML文件，用HTML编写的超文本文档称为HTML文档。该文本文件通常带有“html”或“htm”的文件扩展名，是能独立于各种操作系统平台的、可供浏览器解释浏览的网页文件。

2.1.1 HTML基本语法

标准的HTML文档都具有一个基本的整体结构，该基本结构主要包括3个部分：＜html＞＜/html＞、＜head＞＜/head＞和＜body＞＜/body＞，其格式如下。

其中：

1）＜html＞＜/html＞是HTML文档标记，标志文档的开始和结尾。

2）＜head＞＜/head＞是HTML文档头标记，用于包含文档的基本信息，比如文档的标题等，这部分内容不会显示在网页中。在此标签之间可使用＜title＞＜/title＞、＜meta＞、＜script＞＜/script＞等描述HTML文档相关信息的标签对或标签。

3）＜body＞＜/body＞是HTML文档主体标记，用于包含文档的正文信息，该部分所定义的信息主要包括文本、图像等，这些信息将会在网页中显示出来。

注意：＜head＞和＜body＞为独立的两个部分，之间是不允许互相嵌套的。

HTML语言内容丰富，从功能上大体分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作。

2.1.2 HTML格式标签

HTML格式标签是设计HTML页面的主要标签，下面详细介绍几个常用的HTML格式标签。

1．标题标签

在HTML文档中，使用＜hn＞＜/hn＞标签对可以定义不同显示效果的标题，n（取值范围为1～6）表示标题的等级，n取值越小表示标题的字号越大。

在标题标签中可以使用属性align，用于设置标题文字的对齐方式，其取值如下。

1）Left：文字左对齐（默认值）。

2）Right：文字右对齐。

3）Center：文字居中对齐。

【例2-1】利用标题标签对显示不同等级的标题案例。

运行结果如图2-1所示。

2．格式排版标签

（1）＜br＞

该标签的功能是实现强制文本换行，但是行与行之间不会留下空行。

注意：如果把＜br＞加在＜p＞＜/p＞标签对的外边，将创建一个大间距换行，也就是说＜br＞前边和后边的文本行与行之间的距离比较大；如果放在＜p＞＜/p＞标签对的里边，则＜br＞前边和后边的文本的行与行之间的距离将比较小。

（2）＜hr＞

该标签的功能是在网页中加入一条水平线横跨网页，并且具有多个属性，可以通过这些属性来设置水平线的宽度、长度及显示效果等。其属性主要包括：

1）Align：设置水平线的对齐方式（取值有left、right、center（默认值））。

2）Color：设置水平线的颜色（默认值是black）。

3）Noshade：该属性不用赋值，直接加入标签中用来表示取消水平线的阴影。

4）Size：设置水平线的粗细，默认单位是像素。

5）Width：设置水平线的宽度，默认单位是像素，也可以使用相对屏幕的百分比表示。

【例2-2】利用格式排版标签显示网页案例。

运行结果如图2-2所示。

3．文字格式标签

＜font＞＜/font＞标签对的功能是通过设置属性来控制文字的字体、大小、样式和颜色等字体外观，主要属性包括如下。

1）Color：设置字体颜色。

2）Face：设置字体样式。

3）Size：设置字体大小，值为整数，分为7个级别（默认字体大小为3）。

【例2-3】利用font字体对上例进行完善。

运行结果如图2-3所示。

4．段落标签

＜p＞＜/p＞标签对是用来创建一个新的段落，因此在标签对中加入的文本将会按照段落的格式显示在浏览器上。＜p＞表示一个段落的开始，＜/p＞表示段落的结束，该标记可以省略。＜p＞标签可以有多种属性（读者可自行查阅资料）。

5．预定义格式标签

＜pre＞＜/pre＞标签在编辑文档时使用，主要功能是能够将显示内容保留在编辑工具中已经排好的形式原样显示在网页中。

注意：使用该标签时默认字体为10磅。

6．注释标签

＜！--和--＞作为注释标签，在编写HTML文档时，主要是为了提高文档的可读性，

其语法格式为：

【例2-4】段落标签、预定义格式标签和注释标签的应用案例。

运行结果如图2-4所示。

7．列表标签

列表标签在网页中主要是用来规定文字的排列方式、列举内容等。常用的列表分为3种：有序列表（使用＜ol＞标签），无序列表（使用＜ul＞标签），自定义列表（使用＜dl＞标签）。

（1）有序列表

有序列表是指列表中各项按一定的编号顺序来显示，列表用＜ol＞开始，以＜/ol＞结束，每一个列表项用＜li＞＜/li＞标签对定义，其语法如下。

在＜ol＞中可以对Type、Start等属性进行设置。其中，Type属性用于设置编号的种类，其取值如下。

1）1：编号为数字，如1，2，3，…

2）a：编号为小写英文字母，如a，b，c，…

3）A：编号为大写英文字母，如A，B，C，…

4）i：编号为小写罗马数字，如i，ii，iii，…

5）I：编号为大写罗马数字，如I，II，III，…

Start属性主要是用来设置编号的起始序号，其取值不受Type值所限制，也就是说无论Type取值如何，Start都是取1，2，3等整数（默认值为1）。

在＜li＞中可以对Type、Value等属性进行设置。其中，Type属性的作用与＜ol＞中的Type属性功能一致；Value属性是用来设置该项的编号，其后各项将以此作为起始编号而递增，其值只能是1、2、3等整数，没有默认值。

【例2-5】有序列表标签的应用。

运行效果如图2-5所示。

（2）无序列表

无序列表主要是指各列表项之间没有先后顺序，是并列的关系，但是列表项显示时前面有一个项目符号。无序列表用＜ul＞开始，以＜/ul＞结束，每一个列表项内容同样也使用＜li＞＜/li＞标签对来定义，其语法如下。

在＜ul＞、＜li＞中都可以使用Type属性，其中＜ul＞中的Type属性用于设置列表中所有列表项前的项目符号类型；＜li＞中的Type属性用于设置当前列表项前的项目符号类型。Type属性取值如下。

1）Disc：实心圆点（默认值）。

2）Circle：空心圆点。

3）Square：实心正方形。

【例2-6】无序列表标签的应用。

运行结果如图2-6所示。

（3）自定义列表

在实际应用中往往还会用到自定义列表，用于实现一种分两层的项目清单格式，其语法如下。

自定义列表用＜dl＞开始，以＜/dl＞结束，给每一个列表项加上了一段说明性文字，说明性文字独立于列表项另起一行显示。其中，＜dt＞＜/dt＞标签对用来定义列表项；＜dd＞＜/dd＞标签对用来对列表项进行说明。

【例2-7】自定义列表标签应用。

运行结果如图2-7所示。

8．多媒体和超链接标签

多媒体包括图像、视频、背景音乐等多种形式，多媒体的应用可以使网页更加丰富多彩；超链接的使用可以使包含不同信息的网页链接在一起。因此，多媒体和超链接在网页中起着非常重要的作用。

（1）插入图像

＜img＞标签可以在网页中添加.gif、.jpg、.png等格式的图像，＜img＞主要属性包括如下几个。

1）Align：当文字与图像并行放置时，可指定图像与文本行的对齐方式，其属性值为bottom（默认值）、left、middle、top、right。

2）Alt：该属性用来描述插入图像的文字，若该图像不能显示则将显示该属性值，当鼠标指针移至图像上时，该属性值将会作为提示信息而显示。

3）Border：用于指定图像边框宽度。

4）Height：用于指定图像的高度，单位为像素。

5）Hspace：用于指定图像水平方向的边沿空白距离，以免文字或其他图片过于贴近，影响显示效果，单位为像素。

6）Src：用于指定图像的源文件路径，可以使用相对路径、绝对路径或URL。

7）Vspace：用于指定图像垂直方向的边沿空白距离，单位为像素。

8）Width：用于指定图像的宽度，单位为像素。

【例2-8】插入图像标签的应用。

运行结果如图2-8所示。

（2）插入视频

＜img＞标签也能实现在网页中插入视频的功能，其主要属性包括以下几个。

1）Controls：用于指定在视频窗口下附加播放控制条。该属性只需直接添加，不需要赋值。

2）Dynsrc：用于指定视频的源文件路径。

3）Loop：用于指定视频循环播放次数。值为-1或infinite时，表示无限次循环播放。

4）Loopdelay：用于指定两次播放的时间间隔。

5）Start：用于指定何时开始播放视频。其属性值可取fileopen（默认值）、mouseover。

【例2-9】插入视频标签的应用。

运行结果如图2-9所示。

（3）插入背景音乐

＜bgsound＞标签的功能是实现在网页中添加.wav、.mid、.mp3等格式的背景音乐，主要属性包括以下几个。

1）Balance：用于指定音乐的左右均衡。

2）Delay：用于指定播放延时。

3）Loop：用于指定音乐循环播放次数。值为-1或Infinite时，表示无限次播放循环。

4）Src：用于指定音乐源文件的路径。

5）Volume：用于指定音量。

【例2-10】插入背景音乐标签的应用。

运行结果如图2-10所示。

（4）插入超链接

超链接可以实现当前页面与其他页面间的跳转，使用户可以从一个页面直接跳转到另一个页面、图像或服务器。基本格式如下。

其中，＜a＞＜/a＞标签对是用来创建超链接，＜a＞的主要属性包括如下几个。

1）Href：用于指定链接地址。若是链接到网站外部，则必须为目标的URL地址；若是链接到网站内部的页面，则只要指明该页面的绝对路径或相对路径即可。

2）Target：用于指定显示链接目标的窗口，可取值为：_blank、_parent、_self、_top。

【例2-11】超链接标签的应用。

运行结果如图2-11所示。

9．表格标签

表格是由行、列、单元格3部分组成，它不仅可以很好地组织信息，还可以很好地控制页面布局，在网页开发中占用很重要的地位。很多的开发者习惯采用多重表格来构建网站的总体布局，固定文本或图像的输出。同时还可以利用表格任意进行背景和前景颜色的设置。

在HTML中，＜table＞＜/table＞标签对用来进行一个完整表格的声明，＜tr＞＜/tr＞标签对用来定义表格中的一行，＜th＞＜/th＞标签对用来定义表格中列标题单元格，＜td＞＜/td＞标签对用来定义行中的一个单元格。标签对的放置位置是有规定的：＜tr＞＜/tr＞标签对需要放在＜table＞＜/table＞标签对之间使用，＜td＞＜/td＞、＜th＞＜/th＞两个标签对需要放在＜tr＞＜/tr＞标签对之间使用。表格定义的基本格式如下。

（1）＜table＞标签的常用属性

1）Align：用于设置表格在水平方向的对齐方式，可取值为left、right、center。

2）Border：用于设置表格边框的宽度，值为非负整数，单位为像素，若为0则表示边框是不可见的。

3）Bgcolor：用于设置表格的背景色，其值可以是十六进制代码（如：＃FF11CC），也可以是英文字母（如：red）。

4）Bordercolor：用于设置表格边框的颜色，取值方式与Bgcolor一致。

5）Cellpadding：用于设置单元格内文字到单元格边框的距离，单位为像素。

6）Cellspacing：用于设置单元格边框到表格边框的距离，单位为像素。

7）Frame：用于规定外侧边框的哪部分可见，可取值为void、above、below、hsides、vsides、box等。

8）Height：用于设置表格高度，取值方式与Width一致。

9）Valign：用于设置表格在垂直方向的对齐方式，可取值为top、middle、bottom。

10）Width：用于设置表格宽度，其值可为整数（单位为像素），也可以是相对页面宽度的百分比。

（2）＜tr＞标签的常用属性

1）Bordercolor：设置该行的外边框颜色。

2）Bgcolor：设置该行单元格的背景颜色。

3）Height：设置该行的高度。

4）Align：设置该行各单元格的内容在水平方向的对齐方式，其值可为left、right、center。

5）Valign：设置该行各单元格的内容在垂直方向的对齐方式，其值可为top、middle、bottom。

（3）＜td＞标签的常用属性

1）Background：用于设置单元格背景图像。

2）Colspan：用于设置单元格所占的列数，默认值为1。

3）Rowspan：用于设置单元格所占的行数，默认值为1。

4）Width：用于设置单元格宽度。

＜th＞＜/th＞标签对定义的列标题文字是以粗体方式显示，其常用的属性与＜td＞＜/td＞标签对的常用属性一致。在实际应用中，用＜th＞标签定义列标题单元格并不是必需的。

【例2-12】表格标签的应用。

运行结果如图2-12所示。

2.1.3 HTML表单标记

表单一般是由表单标签、表单域、表单按钮组成。表单标签包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；表单域包含了用于用户输入和交互的控件，比如文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等；表单按钮包括提交按钮、复位按钮和一般按钮，用于将数据传送给服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他的一些处理工作。

用户通过表单来填写一些必需的信息，当用户填写完信息后执行“提交”操作，这时表单中的内容就会从客户端浏览器传送到服务器，经过服务器上的处理程序处理后，再将处理结果返回给客户端浏览器。一般是将表单设计在一个HTML文档中。

1．表单标签

＜form＞＜/form＞标签对用来创建一个表单，＜form＞标签用来定义表单的开始，＜/form＞标签用来定义表单的结束。该标签属于容器标签，表单里所有数据采集功能的控件都需要定义在该标签对之间。表单标签基本语法结构如下。

1）Action属性：用于设置服务器上用来处理表单数据的处理程序地址，处理程序可以是JSP程序、CGI程序、ASP.NET程序等，该属性值可以是URL地址也可以是电子邮件地址。

例如：action=＂http://localhost:8080/ch02/***.jsp＂，表示当用户提交表单后，将调用服务器上的JSP页面“***.jsp”来处理用户的输入。

另外，采用电子邮件地址的格式是action=＂mailto：...＂接收用户输入信息的邮件地址。

例如：action=＂mailto：sunnyday1213@163.com＂，表示把用户的输入信息发送到电子邮件地址sunnyday1213@163.com。

2）Method属性：用于设置处理程序从表单中获得信息的方式，取值可为Get或Post。

Get方式在浏览器的地址栏中以明文形式显示表单中各个表单域的值，对数据的长度有一定的限制。实现的方法是：将表单中的输入信息作为查询字符串附加在Action执行的地址后（中间用“？”隔开）传送到服务器。查询字符串使用key=“value”的形式定义，如果有多个域，中间用&隔开，如：http://localhost:8080/ch02/***.jsp？id=＂001＂&size=＂10＂。

Post实现方法与Get不同，它是将表单中用户输入的数据进行封装，按照HTTP中的Post方式传送到服务器上，且对数据的长度基本上没有限制，目前使用此方法的居多。

3）Name属性：用于设置表单的名称。

4）Onsubmit、Onreset属性：用于设置在单击Submit或Reset按钮后要执行的脚本函数名称。

5）Target属性：用于设置显示表单内容的窗口名称。

注意：HTML对表单的数量没有限制，但在一个页面中如果有太多的表单将不易于阅读，因此需要适量。

2．表单域标签

（1）单行输入域标签

＜input＞标签用来定义单行输入域，用户可在其中输入单行信息。主要属性如下。

1）Type属性：用于设置输入域的类型，可取值为：

●Text：单行文本输入区域，包含两个属性Size和Maxlength，Size属性用来定义此区域显示的尺寸大小，Maxlength属性用来定义此区域输入的最大字符数。

●Submit：该按钮主要实现的是将表单中的内容提交给服务器。

●Reset：该按钮主要实现的是将表单中的内容全部清除，然后重新填写。

●Checkbox：复选框，包括一个Checked属性用来设置该复选框默认状态是否被选中。

●Hidden：隐藏区域，用户不能在其中输入，用来预设某些要传送的信息。

●Image：使用图像来代替Submit按钮，图像的源文件名由子属性Src属性来设定。

●Password：输入密码的区域，当用户输入密码时，区域内将会显示“*”取代用户输入的内容。

●Radio：单选按钮，包括一个Checked属性用来设置该单选框默认状态是否被选中。

2）Name属性：用于设置输入域的名称。

3）Value属性：用于设置输入域的默认值。

4）Align属性：用于设置输入域的位置，可取值为：left、right、middle、top、bottom。

5）Onclick属性：用于设置单击按钮后执行的脚本函数名称。

（2）多行输入域标签

＜textarea＞＜/textarea＞标签对是用来定义多行文本输入域，主要属性包括：

1）Name属性：用于设置输入域的名称。

2）Rows属性：用于设置输入域的行数。

3）Cols属性：用于设置输入域的列数。

4）Wrap属性：用于设置是否自动换行，属性值可取值为：off（不自动换行）、hard（自动硬回车换行，换行标记一同被传送到服务器）、soft（自动软回车换行，换行标记不会被传送到服务器）。

（3）选择域标签

＜select＞＜/select＞标签对用来建立一个下拉列表，＜option＞标签用来定义下拉列表中的一个选项，用户可以从列表中选择一项或多项。

1）＜select＞＜/select＞标签对的主要属性包括：

●Name属性：用于设置下拉列表的名称。

●Size属性：用于设置下拉列表中选项个数（默认值为1）。

●Multiple属性：用于表示下拉列表支持多选。

2）＜option＞标签的主要属性包括：

●Selected属性：用于表示当前选项被默认选中。

●Value：用于设置当前选项的值，在该项被选中之后，其值将被送到服务器上。

3．表单按钮标签

＜botton＞＜/botton＞标签对用于定义提交表单内容给服务器的按钮，主要属性有Type和Accesskey。

1）Type属性：用于设置按钮类型，可取值为：Button（一般按钮）、Reset（复选按钮）、Submit（提交按钮）。它们与＜input＞中同名的属性具有相同的功能。

2）Accesskey属性：用于设置按钮的热键，即按下〈Alt〉键的同时按下该属性值所对应的键便可以快速定位到该按钮。

2.1.4 案例——使用HTML设计注册表单

【例2-13】表单标签的应用案例（register.html）。

运行结果如图2-13所示。