第 2章 超文本标记语言（ HTML）
本章主要讲解：
超文本标记语言 HTML的概念
HTM文档结构特征，编写一般网页的 HTM文档
HTML各类标记的使用方法
网上商店实例中的基本网页编写方法
2.1 HTML概述
HTML（ 超文本标记语言）是一种描述文档结构的标
注语言，它使用一些约定的标记对 WWW上的各种
信息进行标注。当用户通过网页浏览 WWW上的信
息时，浏览器会自动解释存在于网页源代码中的这
些标记的含义，并按照这些标记约定的格式在屏幕
上显示这些被标记的内容，从而形成网页。
2.1 HTML概述
HTML文件内容实际上是由一系列的标记段相互嵌套,
或者相互并列形成, 在每一个标记段之中包含着网
页显示时需要的文字, 资源地址, 脚本语言程序 。
因此, 从文档结构上看, HTM文档由标记段组成,
每一个标记段称为文档元素 。
2.1 HTML概述
组成 HTM文档的元素有许多种，用于组织文件的内容和指导文件
的输出格式。绝大多数元素是, 容器,, 即它有起始标记和结
尾标记。元素的起始标记叫做起始链接签（ Start Tag）,元素
结束标记叫做结尾链接签（ End Tag）,在起始链接签和结尾链
接签中间的部分是元素体。 每一个元素都有名称和可选择的属
性，元素的名称和属性都在起始链接签内标明。以下是一个简单
的 HTM文档, p2-1.htm”内容，而将它在 IE浏览器中打开显示
的结果如图所示。
2.1 HTML概述
<HTML>
<HEAD>
<TITLE>武汉工业学院 </TITLE>
</HEAD>
<BODY bgcolor=yellow>
<P>以此表示一份简单 HTM文档的结构以及网页显示形式 </P>
</BODY>
</HTML>
2.1 HTML概述
用于创建或者编辑 HTM文档的软件工具很多, 既可以选用具
有简单文本文件编辑功能的文字处理软件, 如 Microsoft
NotePad（ 记事本 ）, Microsoft WordPad（ 写字板 ）,
Microsoft Word等等；也可以选用具有网页文件编辑功能
的专用软件, 如 MicrosoftFrontPage,DreamWear等等 。
具有网页文件编辑功能的专用软件无疑是编辑 HTM文档最方
便的工具 。 书中所有 HTM文档源代码均采用 Microsoft
NotePad（ 记事本 ） 格式给出 。
2.2 HTM文档结构
一个基本 HTM文档的结构应该如图所示。
2.2.1 <HTML>标记段
在 <HTML>… </HTML>标
记段中, 应该并列嵌
套
< HEAD>… </HEAD>
标 记 段 和
<BODY>… </BODY>
标记段, 分别用以显
示网页窗口标题及其
网页正文 。 其最简单
的常用形式为：
<HTML>
<HEAD>
<TITLE>
浏览器窗口标题写在这里
</TITLE>
</HEAD>
<BODY>
HTM 文档的正文写在这里
</BODY>
</HTML>
2.2.2 <HEAD>标记段
<HEAD>… </HEAD>标记段用于标记 <HTML>… </HTML>标记段首，其间
可以包含若干个 <META>标记和一个 <TITLE>… </TITLE>标记段。
<META>标记的典型用法为：
<METAhttp-equiv="Content-Language"content="zh-cn">
<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">
分别表示本 HTM文档使用中国语言、其文本字符集为, GB2312”。
2.2.3 <BODY>标记段
<BODY>… </BODY>标记段用于标记 HTM文档正文, 即, 浏览
器窗口中显示的所有内容均应该书写在 <BODY>… </BODY>
标记段中 。 凡是涉及整个网页的属性设置, 包括网页背景色彩
或者背景图案, 网页上的各类文本色彩等等, 均可在 <BODY>
标记中通过设置相关属性来设定 。 <BODY>标记的常用文法格
式为：
<BODY bgcolor=# text=# link=# alink=# vlink=#
background=“imageURL”>
2.3 HTML的格式标记
HTML的格式标记分为文本格式标记与图像格
式标记两类 。 其中, 文本格式标记用于指定网
页显示时, 网页上文字的显示字体, 字型, 字
号以及背景, 前景色彩等特征；图像格式标记
则用于指定网页显示时, 网页上图像的显示位
置, 尺寸边框, 以及当图像无法显示时的代替
文字等特征 。
2.3.1 文本格式标记符
在网页的文字显示中, 如何指定标题文字, 指
定正文的显示格式, 指定换行, 指定关键文字
的斜体, 加粗, 下划线, 指定文字的字体, 字
型, 字号和色彩, 等等, 就需要应用 HTML的文
本格式标记符号 。
1．标题文字标记 <Hn>… </Hn>
<HTML>
<HEAD>
<TITLE>标题文字标记实例
</TITLE>
</HEAD>
<BODY>
<h1>第一级文字标题 </h1>
<h2>第二级文字标题 </h2>
<h3>第三级文字标题 </h3>
<h4>第四级文字标题 </h4>
<h5>第五级文字标题 </h5>
<h6>第六级文字标题 </h6>
</BODY>
</HTML>
2．预格式化文本标记 <pre>… </pre>
<HTML>
<HEAD>
<TITLE>预格式化文本标记实例 </TITLE>
</HEAD>
<BODY>
段首预置的空格被取消了, 且行尾的
回车符也被忽略了 。
<pre> 段首预置的空格被保留着, 且行尾的
回车符也被保留着 。
</pre>
</BODY>
</HTML>
3．强制换行标记 <br>和段落标记 <p>… </p>
段落标记 <p>… </p>的作用是通知浏览器：位于 <p>… </p>标
记之间的文本形成一个段落, 需要置于下一段落的开始处
显示 。 常用的段落标记属性是 align,一般语法格式为：
<p align=str>… </p>
其中, str的取值可以为：, left”,“center”或, right”分
别指定本段落显示在页面窗口的居左, 居中或居右 。
4．文本修饰标记
<HTML>
<HEAD>
<TITLE>换行标记, 段落标记与文本修饰标记实例 </TITLE>
</HEAD>
<BODY>
<strong>位于 strong标记对之间的文字 </strong>被 <br>加重了 !
<u>由于 br的作用 </u>导致
<p align="center">换了一行 。 p标记导致此处自成一段且居中 。 </p>
<b>由于段落标记 </b>
<s>又换行了 。 </s><br>
<i>请注意几种文字修饰 </i>的效果 。
</BODY>
</HTML>
5．字体型号标记 <font>… </font>
<HTML>
<HEAD>
<TITLE>字体型号标记实例 </TITLE>
</HEAD>
<BODY>
<fontface="宋体 "size=10color=#ff0000>10号红色宋体文字 </font><br>
<fontface="黑体 "size=10color=#00ff00>10号绿色黑体文字 </font><br>
<fontface="隶书 "size=10color=#0000ff>10号蓝色隶书文字 </font><br>
<fontface="宋体 "size=6color=#808000>6号橄榄色宋体文字 </font><br>
默认文字显示效果
</BODY>
</HTML>
2.3.2 图像格式标记符
<HTML>
<HEAD>
<TITLE>图像格式标记实例 </TITLE>
</HEAD>
<BODY>
<image src="fh.gif">
忽略其它属性赋值, 图像显示无边框, 以原始尺寸居左, 同行文字居下 。 <br>
<image src="fh.gif" border=5height=60width=110align=middle>
指定图框, 指定图像显示尺寸, 指定同行文字居中 。 <br>
<image alt="图像无法显示 " src="fh.gif" border=5align=right>
指定替换文字, 指定图框, 指定图像居右显示, 由于能够显示图像, 替换文字不显示 。 <br>
<image alt="图像无法显示 " src="fh.gtf" border=5>
由于图像文件名拼写错误, 不能显示图像, 因而显示替换文字 。 <br>
</BODY>
</HTML>
2.3.3 滚动对象标记符
网页上的滚动对象是指在网页上左右移动的文字或者
图像, 这些对象的存在增添了网页的生动性 。 设定滚动对
象的方法是, 应用 <marquee>… </marquee>标记段将需
要滚动的对象括起来 。
<marquee>… </marquee>标记段的一般文法为：
<marquee direction=# bihavior=# loop=# scrollamount=#
scrolldelay=#align=#bgcolor=#>… </marquee>
2.4 HTML的超文本链接标记符
所谓包含超文本链接是指, 在 HTM文档中含有可直接
转移至网络上任一指定资源的指针, 而这个指针
则称为超文本链接指针 。
使用 <a>… </a>标记段即可在 HTM文档中设置超文本链
接指针 。
2.4.1 统一资源定位器 URL
所有的网络资源均具有唯一标识, 均可采用统一资源定位器
（ URL,Uniform Resource Locator） 予以定位 。
在网络系统中, 资源的唯一标识须以如下形式确定：
protocol://machine.name[:port]/directory/filename
一个典型的 URL为 http://www.whpu.edu.cn/,它表示武汉工
业学院 WWW服务器上的起始 HTML文件 。
2.4.2 在文本上设定超文本链接指针
超文本链接指针可以 Web页上任一对象作为载体，使得
操作者通过鼠标单击着一载体来实现指定网络资源的调用。
在文本上设定超文本链接指针是指，将超文本链接指针的
载体设定在 Web页中的文字上。
1．链接到其他 HTM文档
在 HTML文档中设定超文本链接指针的标记为,<a>… </a>。 其基
本文法格式为：
<a href= URLtarget=locate>text</a>
其中, text可以是文字或其他媒体形式的信息, 构成超文本链接
指针的载体 。 当用户鼠标单击 text时, 浏览器就会调用由 href
属性值, URL”所定位的目标 。 因此, href称为 <a>… </a>标记
的资源定位属性 。 <a>… </a>标记中的 target属性称为目标属
性, 用于指定新引用的资源显示在哪一个窗口中 。
2．链接到同一个文件中的其他文本处
设定一个本地链接需要两个步骤, 首先为跳转目的地设定标识
（ Name）, 文法一般格式为：
<a name=str>… </a>
其中, str属性取值为一个字符串, 为跳转目的地名称 。 跳转目的地
可以是 HTM文当中的任一位置, 参见本节 HTM文档源代码第 7
行和第 15行 。
在设定好跳转目的地后, 即可在跳转起始处设定超文本链接指针,
将 <a>标记中的 href属性值设定为需要跳转的目的地址名称, 参
见本节 HTM文档源代码第 11行 。
2.4.3 在图像上设定超文本链接指针
在 HTM文档中, 超文本链接指针还可以放置在图像对象上 。
操作者可以通过在图像上单击鼠标左键来实现网络资源的
引用 。 其一般文法格式为：
<a href=URL><imagesrc=imageURL></a>
其中, <image>标记设置承放超文本链接指针的图像对象 。
关于各种常用超文本链接标记应用的实例, 请阅读以下 HTM文
档源代码, p2-7.htm”,对照图所示的浏览器输出效果领
会 <a>… </a>标记设置的意义 。
<HTML>
<HEAD> <TITLE>超文本链接标记实例 </TITLE> </HEAD>
<BODY>
<image src="fh.gif">
<aname="A1">跳转目的地 1。 </a><br><br><br><br><br><br><br>
<image src="fh.gif" border=2height=60 width=110align=middle>
<ahref="p2-4.htm">在本窗口中引用, 文本修饰标记实例, 。 </a><br>
<ahref="p2-4.htm" target="_blank">在新窗口中引用, 文本修饰标记实例, 。 </a><br>
<ahref="#A1">向前跳转至目的地 1。 </a>,<ahref="#A2">向后跳转至目的地 2。 </a>
<ahref="p2-4.htm" target="_blank"><imagesrc="fh.gif"></a><br>
<br><br><br><br><br>
<image alt="图像无法显示 " src="fh.gtf" border=5>
<aname="A2">跳转目的地 2。 </a><br>
</BODY>
</HTML>
2.5 HTML的表格标记符
一般而言, 表格总是成批具有相同结构数据的最佳显示形式 。 在网络数
据库应用系统中, 诸如商店管理中的商品清单, 客户关系管理中的
订货清单等等, 都属于这种成批的, 具有相同结构的数据集合, 因
此, 适合于表格形式显示 。
另外, 网络数据库应用系统常常采用关系数据库管理系统进行数据库管
理, 而关系数据库本身即以二维表作为组织数据的基本单元 。 因此,
在网络数据库应用系统中采用表格形式提供数据的显示与操作界面,
也就最为顺理成章了 。
2.5.1 <TABLE>标记段
<TABLE>… </TABLE> 标 记 段 必 须 完 整 地 嵌 套 在
<BODY>… </BODY>标记段中 。 不同于关系数据库中的
二维表, HTM文档中的表格对象中可以包含表格 。 也就
说, < TABLE>… </TABLE> 标 记 段 可 以 嵌 套 着
<TABLE>… </TABLE>标记段 。
<TABLE>标记的一般文法格式为：
<TABLE border=# cellpadding=# cellspacing=# align=#
width=# height=# vspace=# hspace=# >
2.5.2 表格元素标记符
1,表格行标记 <tr>… </tr>
<tr>标记定义一个表格行的开始, </tr>标记结束一个表格行
的定义 。 <tr>标记的一般文法格式为：
<tr align=# valign=#>
2．表格单元标记 <th>… </th>和 <td>… </td>
（ 1） <th>… </th>标记
<th>… </th>标记定义作为表格标题栏的表头单元, 文法格式为：
<th bgcolor=# width=# height=# align=# valign=# colspan=#
rowspan=#>… </th>
（ 2） <td>… </td>标记
<td>… </td>标记定义表格中的数据单元, 文法格式为：
<td bgcolor=# width=# height=# align=# valign=# colspan=#
rowspan=#>… </td>
2.5.3 表格标题标记 <caption>… </caption>
<caption>… </caption>标记的一般文法格式为：
<captionalign=#valign=#>标题文字 </caption>
align属性设定标题文字相对表格对象的水平对齐方式, 可以取值为：, left”定义
标题文字相对表格对象左对齐,, center”定义标题文字相对表格对象居中对
齐,, right”定义标题文字相对表格对象右对齐 。
valign属性设定标题文字相对表格对象的垂直位置, 可以取值为：, top”定义标
题文字位于表格对象之上,, bottom”定义标题文字位于表格对象之下 。 请
察看下一节中的 HTM文档源代码 。
2.5.4 表格对象应用举例
2.6 HTML的框架标记符
HTML 的框
架标记符
用于将一
个 Web页设
定为若干
个框架,
允许每一
个框架内
显示一个
HTM文档 。
<HTML>
<HEAD> <TITLE>框架结构实例 </TITLE> </HEAD>
<FRAMESETcols=280,*>
<noframes>此处为左部框架 </noframes>
<framesrc=p2-7.htm>
<FRAMESETrows=40%,*>
<noframes>此处为右上框架 </noframes>
<framesrc=p2-9.htm>
<noframes>此处为右下框架 </noframes>
<framesrc=p2-5.htmname=right_down>
</FRMASET>
</FRAMESET>
</HTML>
,p2-10.htm”文档代码在浏览器窗口中的运行效果
2.6.1 <FRAMESET>标记段
定义框架必须首先定义框架集合, 使用的标记符为：
<FRAMESET>… </FRAMESET>。
<FRAMESET>… </FRAMESET>标记段的一般结构形式为：
<FRAMESET>
<noframes>… </noframes>
<framesrc=“URL”>
…
</FRAMESET>
2.6.1 <FRAMESET>标记段
其中, <FRAMESET>标记的一般文法格式有两种：
（ 1） <FRAMESETcols=#framespacing=#
bordercolor=#>… </FRAMESET>
（ 2） <FRAMESET rows=# framespacing=#
bordercolor=# >… </FRAMESET>
1,Cols属性说明
文法格式 （ 1） 含有 cols属性, 用于将页面垂直划
分为若干个框架, 其框架个数由 cols属性的参数
个数确定, 各个框架尺寸从左至右由 cols属性的
相关参数值确定 。
2,Rows属性说明
文法格式 （ 2） 含有 rows属性, 用于将页面水平划分
为若干个框架, 其框架个数由 rows属性的参数个数
确定, 各个框架尺寸从上至下由 rows属性的相关参
数值确定 。
3,framespacing和 bordercolor属性说明
在 文 法 格 式 （ 1 ） 和 文 法 格 式 （ 2 ） 中 都 含 有
framespacing和 bordercolor属性, 且其含义与作用都
是相同的 。
framespacing属性用于定义框架集中各个框架之间的
间距 。 最小间距为 0,若为 framespacing属性赋值小
于 0,则相邻两个框架会产生部分重叠 。
bordercolor属性用于定义框架集中各框架间距的颜
色 。 颜色值的设定, 采用 RGB方式完成 。 若框架间距
≤ 0,则不会出现设定的颜色 。
2.6.2 <frame>标记和 <noframes>… </noframes>标记段
1,<frame>标记
<frame>标记的一般文法格式为：
< frame src=# name=# noresize frameborder=#
marginwidth=#marginheight=#scrolling=#>
2,<noframes>… </noframes>标记段
页面框架的概念出现在较晚一些时候, 因此, 至今仍
有浏览器不予支持 。 于是, 那些使用不支持页面框架
浏览器的操作者在遇到带有框架的 Web页面时, 可能
什么也看不到 。
2.7 HTML的表单标记段
在 HTML中, 接受网页上传信息的主要
对象是表单对象, 网页上的表单对象
采用 <FORM>… </FORM>标记段定义 。
2.7.1 表单标记段 <FORM>… </FORM>
表单标记段的一般结构形式为：
<FORMaction="url"method=*>
<selectname=*><option>...</select>
<textarea>...</textarea>
<inputtype=*>
</FORM>
2.7.2 表单标记段中使用的标记
1,<input>标记
HTML中的 INPUT标记用于在表单中设置文本框, 复选
框, 单选框, 图像对象和命令按钮等控件 。 一般文法格
式如下：
<inputtype=#name=#value=#size=#maxlength=#>
<input>标记具有五个属性：
（ 1） type属性
为 type属性设置不同的值, 导致在表单中设置
不同控件 。 对应 input标记可以设置的 5种控件,
type属性值可以分别设置为如下 7种：
text,password,checkbox,radio,image,
submit,reset
（ 2） name属性
由于可以在一个表单中设置多个 input控件, 因此需要为每
一个 input控件设定一个在表单中唯一的标识, 称为
input控件名称 。 如此, 当表单信息提交给服务器以后,
位于服务器端的对应程序方能通过指定的控件名称准确地
获取对应的表单信息 。 在 <input>标记中设置 name属性即
为该 input控件命名, 从而使得接收表单信息的程序可以
通过该名称准确处理对应的表单信息 。
（ 3） value属性
value属性值具有两种不同的含义：在单行文本
框控件中, 用于为 input控件设定最初显示的
信息；在单选框控件和多选框控件中, 用于
设定被选项的上传信息 。 value属性值可以是
任意字符组成的串 。
（ 4） size属性和 maxlength属性
size属性用于设定单行文本框控件的尺寸，
以字符个数为单位。
maxlength属性仅用于设定单行文本控件中
所能接受的最大字符个数。该数值可以大
于 size属性值，也可以小于 size属性值。也
就是说，无论单行文本框尺寸有多大，其
间所能接受的最大字符个数由 maxlength
属性值控制。
2,<textarea>… </textarea>标记段
<input>标记仅能设置单行文本框控件, 当需
要接受较多的输入文字时, 可能就需要在表
单中设置一个能够接受多行文本的控件 。
<textarea>… </textarea>标记段用于在表单上
设置多行文本框控件, 一般文法格式为：
<textarea name=# rows=# cols=#
wrap=#>,.,<textarea>
3,<select>… </select>标记段
<select>… </select>标记段用于在表单中设置列表框控
件, 一般文法格式为：
<selectname=#size=#multiple>
<option>选项一
<option>选项二
<option>选项三
……
</select>
2.8 网上商店用户登录页面设计
本章主要讲解：
超文本标记语言 HTML的概念
HTM文档结构特征，编写一般网页的 HTM文档
HTML各类标记的使用方法
网上商店实例中的基本网页编写方法
2.1 HTML概述
HTML（ 超文本标记语言）是一种描述文档结构的标
注语言，它使用一些约定的标记对 WWW上的各种
信息进行标注。当用户通过网页浏览 WWW上的信
息时，浏览器会自动解释存在于网页源代码中的这
些标记的含义，并按照这些标记约定的格式在屏幕
上显示这些被标记的内容，从而形成网页。
2.1 HTML概述
HTML文件内容实际上是由一系列的标记段相互嵌套,
或者相互并列形成, 在每一个标记段之中包含着网
页显示时需要的文字, 资源地址, 脚本语言程序 。
因此, 从文档结构上看, HTM文档由标记段组成,
每一个标记段称为文档元素 。
2.1 HTML概述
组成 HTM文档的元素有许多种，用于组织文件的内容和指导文件
的输出格式。绝大多数元素是, 容器,, 即它有起始标记和结
尾标记。元素的起始标记叫做起始链接签（ Start Tag）,元素
结束标记叫做结尾链接签（ End Tag）,在起始链接签和结尾链
接签中间的部分是元素体。 每一个元素都有名称和可选择的属
性，元素的名称和属性都在起始链接签内标明。以下是一个简单
的 HTM文档, p2-1.htm”内容，而将它在 IE浏览器中打开显示
的结果如图所示。
2.1 HTML概述
<HTML>
<HEAD>
<TITLE>武汉工业学院 </TITLE>
</HEAD>
<BODY bgcolor=yellow>
<P>以此表示一份简单 HTM文档的结构以及网页显示形式 </P>
</BODY>
</HTML>
2.1 HTML概述
用于创建或者编辑 HTM文档的软件工具很多, 既可以选用具
有简单文本文件编辑功能的文字处理软件, 如 Microsoft
NotePad（ 记事本 ）, Microsoft WordPad（ 写字板 ）,
Microsoft Word等等；也可以选用具有网页文件编辑功能
的专用软件, 如 MicrosoftFrontPage,DreamWear等等 。
具有网页文件编辑功能的专用软件无疑是编辑 HTM文档最方
便的工具 。 书中所有 HTM文档源代码均采用 Microsoft
NotePad（ 记事本 ） 格式给出 。
2.2 HTM文档结构
一个基本 HTM文档的结构应该如图所示。
2.2.1 <HTML>标记段
在 <HTML>… </HTML>标
记段中, 应该并列嵌
套
< HEAD>… </HEAD>
标 记 段 和
<BODY>… </BODY>
标记段, 分别用以显
示网页窗口标题及其
网页正文 。 其最简单
的常用形式为：
<HTML>
<HEAD>
<TITLE>
浏览器窗口标题写在这里
</TITLE>
</HEAD>
<BODY>
HTM 文档的正文写在这里
</BODY>
</HTML>
2.2.2 <HEAD>标记段
<HEAD>… </HEAD>标记段用于标记 <HTML>… </HTML>标记段首，其间
可以包含若干个 <META>标记和一个 <TITLE>… </TITLE>标记段。
<META>标记的典型用法为：
<METAhttp-equiv="Content-Language"content="zh-cn">
<METAhttp-equiv="Content-Type"content="text/html;charset=gb2312">
分别表示本 HTM文档使用中国语言、其文本字符集为, GB2312”。
2.2.3 <BODY>标记段
<BODY>… </BODY>标记段用于标记 HTM文档正文, 即, 浏览
器窗口中显示的所有内容均应该书写在 <BODY>… </BODY>
标记段中 。 凡是涉及整个网页的属性设置, 包括网页背景色彩
或者背景图案, 网页上的各类文本色彩等等, 均可在 <BODY>
标记中通过设置相关属性来设定 。 <BODY>标记的常用文法格
式为：
<BODY bgcolor=# text=# link=# alink=# vlink=#
background=“imageURL”>
2.3 HTML的格式标记
HTML的格式标记分为文本格式标记与图像格
式标记两类 。 其中, 文本格式标记用于指定网
页显示时, 网页上文字的显示字体, 字型, 字
号以及背景, 前景色彩等特征；图像格式标记
则用于指定网页显示时, 网页上图像的显示位
置, 尺寸边框, 以及当图像无法显示时的代替
文字等特征 。
2.3.1 文本格式标记符
在网页的文字显示中, 如何指定标题文字, 指
定正文的显示格式, 指定换行, 指定关键文字
的斜体, 加粗, 下划线, 指定文字的字体, 字
型, 字号和色彩, 等等, 就需要应用 HTML的文
本格式标记符号 。
1．标题文字标记 <Hn>… </Hn>
<HTML>
<HEAD>
<TITLE>标题文字标记实例
</TITLE>
</HEAD>
<BODY>
<h1>第一级文字标题 </h1>
<h2>第二级文字标题 </h2>
<h3>第三级文字标题 </h3>
<h4>第四级文字标题 </h4>
<h5>第五级文字标题 </h5>
<h6>第六级文字标题 </h6>
</BODY>
</HTML>
2．预格式化文本标记 <pre>… </pre>
<HTML>
<HEAD>
<TITLE>预格式化文本标记实例 </TITLE>
</HEAD>
<BODY>
段首预置的空格被取消了, 且行尾的
回车符也被忽略了 。
<pre> 段首预置的空格被保留着, 且行尾的
回车符也被保留着 。
</pre>
</BODY>
</HTML>
3．强制换行标记 <br>和段落标记 <p>… </p>
段落标记 <p>… </p>的作用是通知浏览器：位于 <p>… </p>标
记之间的文本形成一个段落, 需要置于下一段落的开始处
显示 。 常用的段落标记属性是 align,一般语法格式为：
<p align=str>… </p>
其中, str的取值可以为：, left”,“center”或, right”分
别指定本段落显示在页面窗口的居左, 居中或居右 。
4．文本修饰标记
<HTML>
<HEAD>
<TITLE>换行标记, 段落标记与文本修饰标记实例 </TITLE>
</HEAD>
<BODY>
<strong>位于 strong标记对之间的文字 </strong>被 <br>加重了 !
<u>由于 br的作用 </u>导致
<p align="center">换了一行 。 p标记导致此处自成一段且居中 。 </p>
<b>由于段落标记 </b>
<s>又换行了 。 </s><br>
<i>请注意几种文字修饰 </i>的效果 。
</BODY>
</HTML>
5．字体型号标记 <font>… </font>
<HTML>
<HEAD>
<TITLE>字体型号标记实例 </TITLE>
</HEAD>
<BODY>
<fontface="宋体 "size=10color=#ff0000>10号红色宋体文字 </font><br>
<fontface="黑体 "size=10color=#00ff00>10号绿色黑体文字 </font><br>
<fontface="隶书 "size=10color=#0000ff>10号蓝色隶书文字 </font><br>
<fontface="宋体 "size=6color=#808000>6号橄榄色宋体文字 </font><br>
默认文字显示效果
</BODY>
</HTML>
2.3.2 图像格式标记符
<HTML>
<HEAD>
<TITLE>图像格式标记实例 </TITLE>
</HEAD>
<BODY>
<image src="fh.gif">
忽略其它属性赋值, 图像显示无边框, 以原始尺寸居左, 同行文字居下 。 <br>
<image src="fh.gif" border=5height=60width=110align=middle>
指定图框, 指定图像显示尺寸, 指定同行文字居中 。 <br>
<image alt="图像无法显示 " src="fh.gif" border=5align=right>
指定替换文字, 指定图框, 指定图像居右显示, 由于能够显示图像, 替换文字不显示 。 <br>
<image alt="图像无法显示 " src="fh.gtf" border=5>
由于图像文件名拼写错误, 不能显示图像, 因而显示替换文字 。 <br>
</BODY>
</HTML>
2.3.3 滚动对象标记符
网页上的滚动对象是指在网页上左右移动的文字或者
图像, 这些对象的存在增添了网页的生动性 。 设定滚动对
象的方法是, 应用 <marquee>… </marquee>标记段将需
要滚动的对象括起来 。
<marquee>… </marquee>标记段的一般文法为：
<marquee direction=# bihavior=# loop=# scrollamount=#
scrolldelay=#align=#bgcolor=#>… </marquee>
2.4 HTML的超文本链接标记符
所谓包含超文本链接是指, 在 HTM文档中含有可直接
转移至网络上任一指定资源的指针, 而这个指针
则称为超文本链接指针 。
使用 <a>… </a>标记段即可在 HTM文档中设置超文本链
接指针 。
2.4.1 统一资源定位器 URL
所有的网络资源均具有唯一标识, 均可采用统一资源定位器
（ URL,Uniform Resource Locator） 予以定位 。
在网络系统中, 资源的唯一标识须以如下形式确定：
protocol://machine.name[:port]/directory/filename
一个典型的 URL为 http://www.whpu.edu.cn/,它表示武汉工
业学院 WWW服务器上的起始 HTML文件 。
2.4.2 在文本上设定超文本链接指针
超文本链接指针可以 Web页上任一对象作为载体，使得
操作者通过鼠标单击着一载体来实现指定网络资源的调用。
在文本上设定超文本链接指针是指，将超文本链接指针的
载体设定在 Web页中的文字上。
1．链接到其他 HTM文档
在 HTML文档中设定超文本链接指针的标记为,<a>… </a>。 其基
本文法格式为：
<a href= URLtarget=locate>text</a>
其中, text可以是文字或其他媒体形式的信息, 构成超文本链接
指针的载体 。 当用户鼠标单击 text时, 浏览器就会调用由 href
属性值, URL”所定位的目标 。 因此, href称为 <a>… </a>标记
的资源定位属性 。 <a>… </a>标记中的 target属性称为目标属
性, 用于指定新引用的资源显示在哪一个窗口中 。
2．链接到同一个文件中的其他文本处
设定一个本地链接需要两个步骤, 首先为跳转目的地设定标识
（ Name）, 文法一般格式为：
<a name=str>… </a>
其中, str属性取值为一个字符串, 为跳转目的地名称 。 跳转目的地
可以是 HTM文当中的任一位置, 参见本节 HTM文档源代码第 7
行和第 15行 。
在设定好跳转目的地后, 即可在跳转起始处设定超文本链接指针,
将 <a>标记中的 href属性值设定为需要跳转的目的地址名称, 参
见本节 HTM文档源代码第 11行 。
2.4.3 在图像上设定超文本链接指针
在 HTM文档中, 超文本链接指针还可以放置在图像对象上 。
操作者可以通过在图像上单击鼠标左键来实现网络资源的
引用 。 其一般文法格式为：
<a href=URL><imagesrc=imageURL></a>
其中, <image>标记设置承放超文本链接指针的图像对象 。
关于各种常用超文本链接标记应用的实例, 请阅读以下 HTM文
档源代码, p2-7.htm”,对照图所示的浏览器输出效果领
会 <a>… </a>标记设置的意义 。
<HTML>
<HEAD> <TITLE>超文本链接标记实例 </TITLE> </HEAD>
<BODY>
<image src="fh.gif">
<aname="A1">跳转目的地 1。 </a><br><br><br><br><br><br><br>
<image src="fh.gif" border=2height=60 width=110align=middle>
<ahref="p2-4.htm">在本窗口中引用, 文本修饰标记实例, 。 </a><br>
<ahref="p2-4.htm" target="_blank">在新窗口中引用, 文本修饰标记实例, 。 </a><br>
<ahref="#A1">向前跳转至目的地 1。 </a>,<ahref="#A2">向后跳转至目的地 2。 </a>
<ahref="p2-4.htm" target="_blank"><imagesrc="fh.gif"></a><br>
<br><br><br><br><br>
<image alt="图像无法显示 " src="fh.gtf" border=5>
<aname="A2">跳转目的地 2。 </a><br>
</BODY>
</HTML>
2.5 HTML的表格标记符
一般而言, 表格总是成批具有相同结构数据的最佳显示形式 。 在网络数
据库应用系统中, 诸如商店管理中的商品清单, 客户关系管理中的
订货清单等等, 都属于这种成批的, 具有相同结构的数据集合, 因
此, 适合于表格形式显示 。
另外, 网络数据库应用系统常常采用关系数据库管理系统进行数据库管
理, 而关系数据库本身即以二维表作为组织数据的基本单元 。 因此,
在网络数据库应用系统中采用表格形式提供数据的显示与操作界面,
也就最为顺理成章了 。
2.5.1 <TABLE>标记段
<TABLE>… </TABLE> 标 记 段 必 须 完 整 地 嵌 套 在
<BODY>… </BODY>标记段中 。 不同于关系数据库中的
二维表, HTM文档中的表格对象中可以包含表格 。 也就
说, < TABLE>… </TABLE> 标 记 段 可 以 嵌 套 着
<TABLE>… </TABLE>标记段 。
<TABLE>标记的一般文法格式为：
<TABLE border=# cellpadding=# cellspacing=# align=#
width=# height=# vspace=# hspace=# >
2.5.2 表格元素标记符
1,表格行标记 <tr>… </tr>
<tr>标记定义一个表格行的开始, </tr>标记结束一个表格行
的定义 。 <tr>标记的一般文法格式为：
<tr align=# valign=#>
2．表格单元标记 <th>… </th>和 <td>… </td>
（ 1） <th>… </th>标记
<th>… </th>标记定义作为表格标题栏的表头单元, 文法格式为：
<th bgcolor=# width=# height=# align=# valign=# colspan=#
rowspan=#>… </th>
（ 2） <td>… </td>标记
<td>… </td>标记定义表格中的数据单元, 文法格式为：
<td bgcolor=# width=# height=# align=# valign=# colspan=#
rowspan=#>… </td>
2.5.3 表格标题标记 <caption>… </caption>
<caption>… </caption>标记的一般文法格式为：
<captionalign=#valign=#>标题文字 </caption>
align属性设定标题文字相对表格对象的水平对齐方式, 可以取值为：, left”定义
标题文字相对表格对象左对齐,, center”定义标题文字相对表格对象居中对
齐,, right”定义标题文字相对表格对象右对齐 。
valign属性设定标题文字相对表格对象的垂直位置, 可以取值为：, top”定义标
题文字位于表格对象之上,, bottom”定义标题文字位于表格对象之下 。 请
察看下一节中的 HTM文档源代码 。
2.5.4 表格对象应用举例
2.6 HTML的框架标记符
HTML 的框
架标记符
用于将一
个 Web页设
定为若干
个框架,
允许每一
个框架内
显示一个
HTM文档 。
<HTML>
<HEAD> <TITLE>框架结构实例 </TITLE> </HEAD>
<FRAMESETcols=280,*>
<noframes>此处为左部框架 </noframes>
<framesrc=p2-7.htm>
<FRAMESETrows=40%,*>
<noframes>此处为右上框架 </noframes>
<framesrc=p2-9.htm>
<noframes>此处为右下框架 </noframes>
<framesrc=p2-5.htmname=right_down>
</FRMASET>
</FRAMESET>
</HTML>
,p2-10.htm”文档代码在浏览器窗口中的运行效果
2.6.1 <FRAMESET>标记段
定义框架必须首先定义框架集合, 使用的标记符为：
<FRAMESET>… </FRAMESET>。
<FRAMESET>… </FRAMESET>标记段的一般结构形式为：
<FRAMESET>
<noframes>… </noframes>
<framesrc=“URL”>
…
</FRAMESET>
2.6.1 <FRAMESET>标记段
其中, <FRAMESET>标记的一般文法格式有两种：
（ 1） <FRAMESETcols=#framespacing=#
bordercolor=#>… </FRAMESET>
（ 2） <FRAMESET rows=# framespacing=#
bordercolor=# >… </FRAMESET>
1,Cols属性说明
文法格式 （ 1） 含有 cols属性, 用于将页面垂直划
分为若干个框架, 其框架个数由 cols属性的参数
个数确定, 各个框架尺寸从左至右由 cols属性的
相关参数值确定 。
2,Rows属性说明
文法格式 （ 2） 含有 rows属性, 用于将页面水平划分
为若干个框架, 其框架个数由 rows属性的参数个数
确定, 各个框架尺寸从上至下由 rows属性的相关参
数值确定 。
3,framespacing和 bordercolor属性说明
在 文 法 格 式 （ 1 ） 和 文 法 格 式 （ 2 ） 中 都 含 有
framespacing和 bordercolor属性, 且其含义与作用都
是相同的 。
framespacing属性用于定义框架集中各个框架之间的
间距 。 最小间距为 0,若为 framespacing属性赋值小
于 0,则相邻两个框架会产生部分重叠 。
bordercolor属性用于定义框架集中各框架间距的颜
色 。 颜色值的设定, 采用 RGB方式完成 。 若框架间距
≤ 0,则不会出现设定的颜色 。
2.6.2 <frame>标记和 <noframes>… </noframes>标记段
1,<frame>标记
<frame>标记的一般文法格式为：
< frame src=# name=# noresize frameborder=#
marginwidth=#marginheight=#scrolling=#>
2,<noframes>… </noframes>标记段
页面框架的概念出现在较晚一些时候, 因此, 至今仍
有浏览器不予支持 。 于是, 那些使用不支持页面框架
浏览器的操作者在遇到带有框架的 Web页面时, 可能
什么也看不到 。
2.7 HTML的表单标记段
在 HTML中, 接受网页上传信息的主要
对象是表单对象, 网页上的表单对象
采用 <FORM>… </FORM>标记段定义 。
2.7.1 表单标记段 <FORM>… </FORM>
表单标记段的一般结构形式为：
<FORMaction="url"method=*>
<selectname=*><option>...</select>
<textarea>...</textarea>
<inputtype=*>
</FORM>
2.7.2 表单标记段中使用的标记
1,<input>标记
HTML中的 INPUT标记用于在表单中设置文本框, 复选
框, 单选框, 图像对象和命令按钮等控件 。 一般文法格
式如下：
<inputtype=#name=#value=#size=#maxlength=#>
<input>标记具有五个属性：
（ 1） type属性
为 type属性设置不同的值, 导致在表单中设置
不同控件 。 对应 input标记可以设置的 5种控件,
type属性值可以分别设置为如下 7种：
text,password,checkbox,radio,image,
submit,reset
（ 2） name属性
由于可以在一个表单中设置多个 input控件, 因此需要为每
一个 input控件设定一个在表单中唯一的标识, 称为
input控件名称 。 如此, 当表单信息提交给服务器以后,
位于服务器端的对应程序方能通过指定的控件名称准确地
获取对应的表单信息 。 在 <input>标记中设置 name属性即
为该 input控件命名, 从而使得接收表单信息的程序可以
通过该名称准确处理对应的表单信息 。
（ 3） value属性
value属性值具有两种不同的含义：在单行文本
框控件中, 用于为 input控件设定最初显示的
信息；在单选框控件和多选框控件中, 用于
设定被选项的上传信息 。 value属性值可以是
任意字符组成的串 。
（ 4） size属性和 maxlength属性
size属性用于设定单行文本框控件的尺寸，
以字符个数为单位。
maxlength属性仅用于设定单行文本控件中
所能接受的最大字符个数。该数值可以大
于 size属性值，也可以小于 size属性值。也
就是说，无论单行文本框尺寸有多大，其
间所能接受的最大字符个数由 maxlength
属性值控制。
2,<textarea>… </textarea>标记段
<input>标记仅能设置单行文本框控件, 当需
要接受较多的输入文字时, 可能就需要在表
单中设置一个能够接受多行文本的控件 。
<textarea>… </textarea>标记段用于在表单上
设置多行文本框控件, 一般文法格式为：
<textarea name=# rows=# cols=#
wrap=#>,.,<textarea>
3,<select>… </select>标记段
<select>… </select>标记段用于在表单中设置列表框控
件, 一般文法格式为：
<selectname=#size=#multiple>
<option>选项一
<option>选项二
<option>选项三
……
</select>
2.8 网上商店用户登录页面设计
