第 9讲 HTML基础 1
第 9讲 HTML基础
,网页设计与编程,
第 9讲 HTML基础 2
第 9讲 HTML基础
本讲内容
? HTML句法结构
? HTML文档结构和常用元素
? HTML标准单位
? HTML基本元素的使用
? HTML的其他元素
第 9讲 HTML基础 3
第 9讲 教学目标
理解和掌握 HTML句法、文档结构、基本
元素
注意列表、表单、表格等 HTML元素
静态网页设计中值得注意的问题
第 9讲 HTML基础 4
概 述
为了在世界范围内发布信息，需要一种
能够被普遍理解的语言，一种能为所有
的计算机作为信息发布用的母语，这就
是万维网使用的超文本标记语言
（ Hypertext Markup Language,HTML)。
第 9讲 HTML基础 5
HTML句法结构
第 9讲 HTML基础 6
HTML句法结构
Google首页的部分源代码
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
另外还有 HTML文档主体部分的声明。
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()>
<center>
第 9讲 HTML基础 7
HTML句法结构
一个 HTML文档 是普通的 ASCII文本文件，它包
含两类内容：普通的文本、代码或标记。 标记
(Tag)是用一对尖括号, <>”括起来的文本串，
例如第一行的 <html>。标记通常具有如下结
构：
<tagneme attribute1=value1 attribute2=value2… >
在标记定义中,,tagname”是 标记名,定义标
记的类型；而, attributes”为 属性,一般标记
即可以不定义属性，也可以定义若干个属性，
属性 给出了这个 元素的附加信息 。
第 9讲 HTML基础 8
HTML句法结构
在 Google主页文档第二行的 <head>标记
中,head是标记名，没有相关属性。
在文档主体 <body>定义中，定义了若干
属性，属性值为, bgcolor=#ffffff
text=#000000 link=#0000cc
vlink=551a8b alink=#ff0000
onLoad=sf()”。
第 9讲 HTML基础 9
HTML句法结构
注意：虽标记和属性名称与字母大小写无
关，但是 属性值 却往往对大小写敏感。
例如，可以在超链中定义相关的文件名，
尽管在 Windows系统中,href=a1和
href=A1可以指向同一文件，但在 UNIX系统
中，却是指向不同的文件。
重要提示：在网页设计须统一命名方案
第 9讲 HTML基础 10
HTML句法结构
标记和文本结合起来形成 元素 (Element)。
每个元素代表文档中的一个对象，比如
文件头、段落或图片。一个元素可具有
一个或一对标记，通常具有一些相关的
属性。
元素有两种类型：容器（ container）元
素和单个元素（空元素）。
第 9讲 HTML基础 11
HTML句法结构
容器元素 含有文本，它由文本主体（或其他元
素）组成，文本主体在开头和结尾处用一对标
记来确定边界（结尾的标记用标记名前加, /”
来表示，并不带任何属性）。
例如,<title>和 </title >标记把这两个
标记之间的文本定义成一个文档标题 。
第 9讲 HTML基础 12
HTML句法结构
而 单个元素（空元素） 是由不影响任何文本的
单个标记组成的，它会在文档中插入一些对象。
例如 <img src=…>标记就是一个可以在文档中
插入图像的单个元素。
第 9讲 HTML基础 13
HTML句法结构
容器元素与单个元素一起完整地定义了文档的
格式或显示形式。其它一些普通文本格式符号
（如 Tab、连续的空格、回车等）在 HTML中都
被当做 单一的空格 。
例如，在输入 HTML文件时，可以在每个标记后有
若干个空行，或在每个单词之间有 10个空格，但浏览
器对此却, 熟视无睹,,结果显示可能会出乎预料。
第 9讲 HTML基础 14
HTML文档结构和常用元素
这三个元素一起构成完整的 HTML文档结构模
板，所有的 HTML文档都应该遵循这个模板：
<HTML>
<HEAD>
Header element
</HEAD>
<BODY>
body of Document
</BODY>
</HTML>
第 9讲 HTML基础 15
HTML文档结构和常用元素
<HEAD>容器元素中包含的最为常用的
元素有：
? <TITLE>text</TITLE>：这个元素是文档的
抬头，类似书籍的页眉。在浏览器中，标题
通常与文本页分开显示（例如，在窗口的标
题栏中）。
抬头 （ TITLE）在用户保存网页时一般
都作为文件名，所以命名应该注意。
第 9讲 HTML基础 16
HTML文档结构和常用元素
<BODY>容器元素中包含以下几个常用元素：
? <H#>text</H#>：标题把括起来的文本作为标题。
从标记 <H1>,<H2>直到 <H6>，可以有六个层次
的标题（较小的数字标记较重要的标题）。标题通
常用较大的字型编排，并且在该标题的上下各有一
个空行。
? <P>：段落标识文本主体中两个段落之间的间隔。
? <IMG SRC=“URL”>：图像标记把图像插入到文档
中，图像可以在 SRC属性中给出的 URL处找到。
第 9讲 HTML基础 17
<A HREF=URL>text</A>：超文本标记，也称为超
链接。文本用某种特殊方式来显示（用颜色、下划线或
其它类似方法）；当点击屏幕上的超文本链接时，
Web服务器将检索, HREF”属性中的, URL”给出的
文档，并将结果返回给用户浏览器。
<HR>：放置一个横穿浏览器窗口的水平线，通常水平
线的上下各有一个空行。
<BR>：在文本中强制换行，以便后继文本都放在下一
行。
HTML文档结构和常用元素
第 9讲 HTML基础 18
HTML标准单位
长度单位
? 可以用来定义水平线、表格边框、图像等对象的长、
宽、高等一系列属性，同时也能用来定义这些对象
在网页上的位置等属性。
? 长度的表示有两种方式：绝对长度和相对长度。
? 它们的 常用单位 分别为像素（ pixel）和百分比
（％），像素代表屏幕上的各个显像点，而相对长
度则描述了对象在浏览器窗口的所占的比例。
第 9讲 HTML基础 19
HTML标准单位
因为浏览器窗口可随时调整大小，如果
水平线设置为绝对长度很容易造成不协
调，而使用相对长度来描述则对象会随
浏览器窗口大小变化而变化。
<HR WIDTH="400"> <!--绝对长度 -->
<HR WIDTH="50%"> <!--相对长度 -->
第 9讲 HTML基础 20
HTML标准单位
使用绝对单位对保持网页的设计风格不
受浏览器窗口的限制；
在 CSS（层叠样式表）的应用中，绝对单
位大有用武之地。
绝对长度单位分别为表示像素的 px、表
示英寸的 in、表示厘米的 cm、表示毫米
的 mm、表示点数的 pt等
第 9讲 HTML基础 21
HTML标准单位
颜色单位有三种表达的方式：
? 十六进制的颜色代码
<font color=#FF0000>Red
Characters</font>
? 十进制颜色码
<font color=rgb(0,0,255) > Blue </font>
? 颜色名码
<font color="green">Green Characters
</font>
第 9讲 HTML基础 22
HTML标准单位
统一资源定位器 (URL)[1]路径是一种
因特网资源地址的表示法。该数据里中
可以包括链接所需协议、链接主机的域
名或 IP地址、链接主机的通讯端口
（ port）号、主机文件的发布路径和文
件名称等。
[1] 由 W3C对 HTML 4.0的定义中,URL的描述为
,Universal Resource Identifier（ URI）, 。
第 9讲 HTML基础 23
HTML标准单位
在 HTML中,URL路径又分为两种形式：
绝对路径和相对路径。
? 绝对路径是将主机地址和主机上资源发布
目录的路径和资源名称进行完整的描述。
如,
<a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm">
<a href="file:///c:/xitami/webpages/default.htm">
第 9讲 HTML基础 24
HTML标准单位
? 相对路径则是相对于当前的网页所在目录
或站点根目录的路径。如,
<IMG SRC="Snowwhite.jpg">
<!--图像文件 "Snowwhite.jpg"与当前显示的网页在同
一目录下； -->
<IMG SRC="../image/Leaves.jpg">
<!--图像文件 "Leaves.jpg "在与当前显示网页所在目录
同层次的另一子目录 image下； -->
第 9讲 HTML基础 25
块容器 (续 )
标题
<H#>text</H#>
用 <H#>标注的标题和用 <title>标注的
标题是截然不同的，前者是修饰浏览器窗体
内文本的元素，而后者标识的内容将显示在
浏览器的标题栏中。
＃值可以从 1到 6，用以充当文档该节的标
题。 #位置的数字值越小表示的标题就越重
要，相应的字号要大些。
第 9讲 HTML基础 26
块容器 (续 )
段落
Text<P>text
<p>text</p>
在一般网页中，该标记以第一种形式使
用，作为段落的分隔符。因此，它标识正常
文本主体的两个段落之间的界限。
注意不要不要使用 …,<p><h1>的形式，
因为 <h1>隐含着换行，有些浏览器在元素
之间会插入太多的空行。
第二种形式（每个段落都有一个容器）表
示了一个更标准的 SGML结构。
第 9讲 HTML基础 27
块容器 (续 )
扩展引文
< BLOCKQUOTE >text</BLOCKQUOTE>
用于较长的引文，并且作为独立
段落存在。通常用类似普通段落的形式
来表示，但两边的留白采用了缩迸排版
的形式。
第 9讲 HTML基础 28
块容器 (续 )
预先格式化文本
<PRE>text</PRE>
由于 HTML忽略多余的空格、制表符
（ tab）和换行符（ enter），某些具有特殊
格式的文本，如诗歌、表格及计算机程序清
单等都很难标记。
<PRE>元素用于这样的文本，它按照文
本原稿出现的样式格式化所包含的文本，包
括原稿中出现的空格、制表和换行符等。
第 9讲 HTML基础 29
块容器 (续 )
联系地址
<ADDRESS>text</ADDRESS>
特别指邮件地址，这个标记通常
用于标识文章开头的作者名行（作者姓
名）和电子邮箱地址。通常用比较小的
字体或斜体字表示，而且常使用 <BR>
标记把地址的各个行分开。
第 9讲 HTML基础 30
HTML基本元素的使用
分项列表
用 HTML可创建一个包含了几个项目的列表，每
个用 <LI>开头，通常每个项目缩进一个 tab位置。
一般有四种类型：
? <UL> 是无序列表（每个条目前通常加注有实心圆点）；
? <OL> 是有序列表（每个条目都有编号） ;
? <MENU> 是菜单选项（与 <UL>类似，但有时编排得更
紧凑）；
? <DIR> 是目录（显示分成两到三列的列表，象磁盘目录
一样。
第 9讲 HTML基础 31
分项列表 (续 )
分项列表 一般结构如下：
<TYPE>
<LI>text
<LI>text
…
</TYPE>
第 9讲 HTML基础 32
分项列表 (续 )
有序列表
有序列表的 <OL>是在每一个列表项的
前面加上一个编号字符，该字符可以是数字
或字母。它的一般格式为：
<OL TYPE="[1|a|A|i|I]" START=##>
<LI>text
<LI>text
…
</OL>
第 9讲 HTML基础 33
有序列表 (续 )
TYPE属性来指定列表项前面的字符编号，
当其值为：
1 （默认值）数字编号：, 1,2,3…”
a 小写的英文字母，如：, a,b,c…”
A 大写的英文字母，如：, A,B,C…”
i 小写的罗马字母，如：, i,ii,iii…”
I 大写的罗马字母，如：, I,II,III…”
第 9讲 HTML基础 34
分项列表 (续 )
定义列表
<DL [COMPACT]>
<DT> term text
<DD>definition text
<DT> term text
<DD>definition text
</DL>
定义列表 中每个条目有两部分，就像词汇表中
一样：一个术语（跟在 <DT>后面）；一个定
义（跟在 <DD>后面）。
第 9讲 HTML基础 35
HTML基本元素的使用
表单（ form）
HTML的表单特性是给予万维网真正力量、
完成生动的交互式应用的因素之一。
可以把表单看成因特网上通用的一种视窗
（ window）对话框，用于接受用户数据。
第 9讲 HTML基础 36
表单（ form）
HTML表单仅仅是这种特性的一半。
一旦用户填完表单，就把表格提交给一个特殊
的程序或脚本，由这个程序或脚本取出信息，
并用这个表格做一些有用的事（如把用户数据
传递给数据库）。
第 9讲 HTML基础 37
第 9讲 HTML基础 38
表单 (续 )
表单元素
<FORM method ="[GET|POST] action
="URL">form body</FORM>
<FORM>元素括起整个表单，并给出一
些基本定义。表单仅占用 HTML文档的部分空
间；实际上，一个 HTML文档可以包含几个独
立的、完成不同功能的表单。 method指定了
信息传递给 HTTP服务器的方法； action给出
与处理提交信息的脚本相关的 URL（ 如
,scriptname.asp”,,scriptname.php”）。
第 9讲 HTML基础 39
表单 (续 )
表单输入元素
<INPUT name="text" type="string" size=##
value="text" CHECKED>
? <INPUT >用来把不同的字段放在表单里，以便用户输入信
息。
? name属性指定该字段在某个表单中的唯一名称；
? 可选的 value属性给出该标记的默认值。
? 在提交表单时，向 Web服务器呈上以一组用,？, 开头并用
,&”号分开的一组, 名字＝值, 形式的信息，如
http://…/Scriptname?name=me&address=here&
time＝ now
第 9讲 HTML基础 40
表单输入元素 (续 )
type属性给出所使用 <INPUT>标记的样式，
,string”可以是：
? CHECKBOX（复选框）。
? RADIO（单选按钮）
? TEXT（单行的文本输入栏）。
? IMAGE（图像放在表单里）
? SUBMIT（提交按钮）
? RESET(清除按钮 )
? HIDDEN（在表单中保留不供显示的内容）
第 9讲 HTML基础 41
表单输入元素 (续 )
另外：
? SIZE属性用于设置文本字段的窗口大小（以
字符数为计量单位）。
? CHECKED属性与 CHECKBOX和 RADIO类型一
起使用，用于表示按钮在默认状态时是否被
选中。
第 9讲 HTML基础 42
表单 (续 )
选项选择元素（类似 Windows中的组合框）
<SELECT name="text" multiple>
<OPTION value="text" selected>content1
<OPTION value="text" >content2
</SELECT>
? 在选项选择元素中，所有可选项目由 <OPTION>元素逐条
列出；通常用下拉式菜单显示。
? 跟在每个 <OPTION>标记后面的 text在下拉框中显示；如果
没有给出 value属性（可选属性）；当用户选择到某选项时
则随表单呈上相应的 text文本。 multiple属性允许选择多于
一个的选项； selected属性指定默认的选择。
第 9讲 HTML基础 43
选项选择元素 (续 )
选项选择举例：
<SELECT name=“code" multiple>
<OPTION value=“010" selected>Beijing
<OPTION value=“029" >Xi’an
</SELECT>
第 9讲 HTML基础 44
表单输入元素 (续 )
多行文本输入
<TEXTAREA name="text" rows=##
cols=##>text</TEXTAREA>
类似于 <INPUT TYPE="text">标
记，但允许多行文本输入。 name属性
与 <INPUT>的类似，用行和列属性的
数值定义文本输入区域的大小。元素中
text的值将作为默认内容显示在文本区
域中。
第 9讲 HTML基础 45
HTML基本元素的使用
实体
? HTML文档中出现的很多字符不可能通过输入直
接放入 HTML文档中，这些字符包括对 HTML有
特殊意义的字符，如,,<”和, >”字符，以及
许多键盘上找不到的国际字符和印刷字符。
? 可以用实体（ Entities）把这些字符放在文档中，
实体是若干个文本片段，它们一起表示单个字符。
其一般语法包括一个, &”号、一个表示字符的名
字及一个分号。
第 9讲 HTML基础 46
实体（续）
保留字符
? 保留字符是 HTML中用于其它目的的普通
字符，如果按原样输入则会引起混乱。
实体 显示形式 备注
< 小于号（ <）
>； 大于号（ >）
& 与号（ &）
"e; 引号（ "） （通常不用）
不换行空白 见下页
第 9讲 HTML基础 47
保留字符 （续）
在浏览器中浏览 HTML文档时，浏览器根据单
词之间的留白来自动换行，并且 HTML不支持
两个及两个以上的空格。
因此 HTML语言提供了一个不换行空格的标记
,＆ nbsp；,,这样如果需要某几个单词之间
不出现换行的话，就可以在这些单词之间使用
这个换行标记, ＆ nbsp；, 来替代空格，并且
也可以利用这个标记来建立两个或两个以上的
空格效果。
第 9讲 HTML基础 48
实体（续）
国际字符
国际字符指多数除英语外的欧洲语言中使用
的字符，其名字参照 ISO拉丁字符集。
实体 显示形式 备注
Á 带重音的大写 A （ á）
ô 带升降调的小写 o （ ?）
Æ 连字大写 AE （ ? ）
ç 带变音符的小写 c （ ?）
第 9讲 HTML基础 49
Table元素
表格元素是 HTML中最为复杂，同时又是
应用最为广泛的元素之一。
表格元素在网页中以表格形式组织和显
示数据
大量使用在网页布局设计上。在
,Google” 貌似简单的网页上，居然也用
了三个表格来布局。
第 9讲 HTML基础 50
Table元素（续）
第 9讲 HTML基础 51
Table元素（续）
<TABLE>标记的一般形式是：
<TABLE WIDTH="?" BGCOLOR="?"
BACKGROUND="?" BORDER="?"
CELLSPACING="?" CELLPADDING="?">
<TR>
…
<TD> …</TD>
…
</TR>
</TABLE>
第 9讲 HTML基础 52
Table元素（续）
在 <TABLE>标记的属性中：
? Width 表格的宽度，在默认状态下为自动
适应表格内容的宽度，即根据表格中的内容来自动
调节表格的宽度。取值可以是 HTML的绝对或者相
对长度标准单位。
? Bgcolor 表格的背景颜色，在默认状态下表
格无背景色，网页作者亦可使用 HTML的各种颜色
单位进行指定。
? Background 表格的背景图案，须用 URL来指定作
表格背景图片的文件路径。
第 9讲 HTML基础 53
Table元素（续）
? Border 表格边框的风格（在作为布局
使用时往往取其默认值 "0",即不显示表格的
边框），在, Border=1”时，表格的边框成
3D的状态。
? CellSpacing 表格中单元格的边距大小，即
单元格间距，长度单位。
? CellPadding 表格中单元格之间的间距大小，
表中单元格的内容与单元格边框之间的留白
距离，即单元格边距，长度单位。
第 9讲 HTML基础 54
Table元素（续）
TR元素
? TR元素表示表格中的行标记，表格中的每
一行都必须包含在一对 <TR></TR>标记
中。行标记的一般形式是：
<TR ALIGN="?" BGCOLOR="?">… …</TR>
第 9讲 HTML基础 55
TR元素（续）
在 <TR>标记的属性中：
? Align 指定该行中单元格的对齐方式，
可选值如下：
?Left 左对齐（默认值）
?Center 居中对齐
?Right 右对齐
? Bgcolor 指定该行的背景颜色。
第 9讲 HTML基础 56
Table元素（续）
TD元素
? 单元格是表格的基本组成元素，一个 TD元
素表示表格中的一个单元格，由 <TR>标
记对中所圈入的所有 TD元素构成了表格的
一行。单元格标记的一般形式是：
<TD WIDTH="?" HEIGHT="?" ALIGN="?"
VALIGN="?" BGCOLOR="?" BACKGROUND="?"
ROWSPAN="?" COLSPAN="?"> … …</TD>
第 9讲 HTML基础 57
TD元素（续）
? 在 <TD>标记的属性中：
?Width 单元格宽度
?Height 单元格高度
?Align 单元格水平对齐方式
?Valign 单元格垂直对齐方式
?RowSpan 单元格的行跨度
?ColSpan 单元格的列跨度
第 9讲 HTML基础 58
本讲小结
HTML句法结构
HTML文档结构和常用元素
HTML标准单位
HTML基本元素的使用
HTML的其他元素
第 9讲 HTML基础
,网页设计与编程,
第 9讲 HTML基础 2
第 9讲 HTML基础
本讲内容
? HTML句法结构
? HTML文档结构和常用元素
? HTML标准单位
? HTML基本元素的使用
? HTML的其他元素
第 9讲 HTML基础 3
第 9讲 教学目标
理解和掌握 HTML句法、文档结构、基本
元素
注意列表、表单、表格等 HTML元素
静态网页设计中值得注意的问题
第 9讲 HTML基础 4
概 述
为了在世界范围内发布信息，需要一种
能够被普遍理解的语言，一种能为所有
的计算机作为信息发布用的母语，这就
是万维网使用的超文本标记语言
（ Hypertext Markup Language,HTML)。
第 9讲 HTML基础 5
HTML句法结构
第 9讲 HTML基础 6
HTML句法结构
Google首页的部分源代码
<html>
<head>
<META HTTP-EQUIV="content-type" CONTENT="text/html;
charset=GB2312">
<title>Google</title>
...
</head>
另外还有 HTML文档主体部分的声明。
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b
alink=#ff0000 onLoad=sf()>
<center>
第 9讲 HTML基础 7
HTML句法结构
一个 HTML文档 是普通的 ASCII文本文件，它包
含两类内容：普通的文本、代码或标记。 标记
(Tag)是用一对尖括号, <>”括起来的文本串，
例如第一行的 <html>。标记通常具有如下结
构：
<tagneme attribute1=value1 attribute2=value2… >
在标记定义中,,tagname”是 标记名,定义标
记的类型；而, attributes”为 属性,一般标记
即可以不定义属性，也可以定义若干个属性，
属性 给出了这个 元素的附加信息 。
第 9讲 HTML基础 8
HTML句法结构
在 Google主页文档第二行的 <head>标记
中,head是标记名，没有相关属性。
在文档主体 <body>定义中，定义了若干
属性，属性值为, bgcolor=#ffffff
text=#000000 link=#0000cc
vlink=551a8b alink=#ff0000
onLoad=sf()”。
第 9讲 HTML基础 9
HTML句法结构
注意：虽标记和属性名称与字母大小写无
关，但是 属性值 却往往对大小写敏感。
例如，可以在超链中定义相关的文件名，
尽管在 Windows系统中,href=a1和
href=A1可以指向同一文件，但在 UNIX系统
中，却是指向不同的文件。
重要提示：在网页设计须统一命名方案
第 9讲 HTML基础 10
HTML句法结构
标记和文本结合起来形成 元素 (Element)。
每个元素代表文档中的一个对象，比如
文件头、段落或图片。一个元素可具有
一个或一对标记，通常具有一些相关的
属性。
元素有两种类型：容器（ container）元
素和单个元素（空元素）。
第 9讲 HTML基础 11
HTML句法结构
容器元素 含有文本，它由文本主体（或其他元
素）组成，文本主体在开头和结尾处用一对标
记来确定边界（结尾的标记用标记名前加, /”
来表示，并不带任何属性）。
例如,<title>和 </title >标记把这两个
标记之间的文本定义成一个文档标题 。
第 9讲 HTML基础 12
HTML句法结构
而 单个元素（空元素） 是由不影响任何文本的
单个标记组成的，它会在文档中插入一些对象。
例如 <img src=…>标记就是一个可以在文档中
插入图像的单个元素。
第 9讲 HTML基础 13
HTML句法结构
容器元素与单个元素一起完整地定义了文档的
格式或显示形式。其它一些普通文本格式符号
（如 Tab、连续的空格、回车等）在 HTML中都
被当做 单一的空格 。
例如，在输入 HTML文件时，可以在每个标记后有
若干个空行，或在每个单词之间有 10个空格，但浏览
器对此却, 熟视无睹,,结果显示可能会出乎预料。
第 9讲 HTML基础 14
HTML文档结构和常用元素
这三个元素一起构成完整的 HTML文档结构模
板，所有的 HTML文档都应该遵循这个模板：
<HTML>
<HEAD>
Header element
</HEAD>
<BODY>
body of Document
</BODY>
</HTML>
第 9讲 HTML基础 15
HTML文档结构和常用元素
<HEAD>容器元素中包含的最为常用的
元素有：
? <TITLE>text</TITLE>：这个元素是文档的
抬头，类似书籍的页眉。在浏览器中，标题
通常与文本页分开显示（例如，在窗口的标
题栏中）。
抬头 （ TITLE）在用户保存网页时一般
都作为文件名，所以命名应该注意。
第 9讲 HTML基础 16
HTML文档结构和常用元素
<BODY>容器元素中包含以下几个常用元素：
? <H#>text</H#>：标题把括起来的文本作为标题。
从标记 <H1>,<H2>直到 <H6>，可以有六个层次
的标题（较小的数字标记较重要的标题）。标题通
常用较大的字型编排，并且在该标题的上下各有一
个空行。
? <P>：段落标识文本主体中两个段落之间的间隔。
? <IMG SRC=“URL”>：图像标记把图像插入到文档
中，图像可以在 SRC属性中给出的 URL处找到。
第 9讲 HTML基础 17
<A HREF=URL>text</A>：超文本标记，也称为超
链接。文本用某种特殊方式来显示（用颜色、下划线或
其它类似方法）；当点击屏幕上的超文本链接时，
Web服务器将检索, HREF”属性中的, URL”给出的
文档，并将结果返回给用户浏览器。
<HR>：放置一个横穿浏览器窗口的水平线，通常水平
线的上下各有一个空行。
<BR>：在文本中强制换行，以便后继文本都放在下一
行。
HTML文档结构和常用元素
第 9讲 HTML基础 18
HTML标准单位
长度单位
? 可以用来定义水平线、表格边框、图像等对象的长、
宽、高等一系列属性，同时也能用来定义这些对象
在网页上的位置等属性。
? 长度的表示有两种方式：绝对长度和相对长度。
? 它们的 常用单位 分别为像素（ pixel）和百分比
（％），像素代表屏幕上的各个显像点，而相对长
度则描述了对象在浏览器窗口的所占的比例。
第 9讲 HTML基础 19
HTML标准单位
因为浏览器窗口可随时调整大小，如果
水平线设置为绝对长度很容易造成不协
调，而使用相对长度来描述则对象会随
浏览器窗口大小变化而变化。
<HR WIDTH="400"> <!--绝对长度 -->
<HR WIDTH="50%"> <!--相对长度 -->
第 9讲 HTML基础 20
HTML标准单位
使用绝对单位对保持网页的设计风格不
受浏览器窗口的限制；
在 CSS（层叠样式表）的应用中，绝对单
位大有用武之地。
绝对长度单位分别为表示像素的 px、表
示英寸的 in、表示厘米的 cm、表示毫米
的 mm、表示点数的 pt等
第 9讲 HTML基础 21
HTML标准单位
颜色单位有三种表达的方式：
? 十六进制的颜色代码
<font color=#FF0000>Red
Characters</font>
? 十进制颜色码
<font color=rgb(0,0,255) > Blue </font>
? 颜色名码
<font color="green">Green Characters
</font>
第 9讲 HTML基础 22
HTML标准单位
统一资源定位器 (URL)[1]路径是一种
因特网资源地址的表示法。该数据里中
可以包括链接所需协议、链接主机的域
名或 IP地址、链接主机的通讯端口
（ port）号、主机文件的发布路径和文
件名称等。
[1] 由 W3C对 HTML 4.0的定义中,URL的描述为
,Universal Resource Identifier（ URI）, 。
第 9讲 HTML基础 23
HTML标准单位
在 HTML中,URL路径又分为两种形式：
绝对路径和相对路径。
? 绝对路径是将主机地址和主机上资源发布
目录的路径和资源名称进行完整的描述。
如,
<a href="HTTP://ctec.xjtu.edu.cn/bbs/index.htm">
<a href="file:///c:/xitami/webpages/default.htm">
第 9讲 HTML基础 24
HTML标准单位
? 相对路径则是相对于当前的网页所在目录
或站点根目录的路径。如,
<IMG SRC="Snowwhite.jpg">
<!--图像文件 "Snowwhite.jpg"与当前显示的网页在同
一目录下； -->
<IMG SRC="../image/Leaves.jpg">
<!--图像文件 "Leaves.jpg "在与当前显示网页所在目录
同层次的另一子目录 image下； -->
第 9讲 HTML基础 25
块容器 (续 )
标题
<H#>text</H#>
用 <H#>标注的标题和用 <title>标注的
标题是截然不同的，前者是修饰浏览器窗体
内文本的元素，而后者标识的内容将显示在
浏览器的标题栏中。
＃值可以从 1到 6，用以充当文档该节的标
题。 #位置的数字值越小表示的标题就越重
要，相应的字号要大些。
第 9讲 HTML基础 26
块容器 (续 )
段落
Text<P>text
<p>text</p>
在一般网页中，该标记以第一种形式使
用，作为段落的分隔符。因此，它标识正常
文本主体的两个段落之间的界限。
注意不要不要使用 …,<p><h1>的形式，
因为 <h1>隐含着换行，有些浏览器在元素
之间会插入太多的空行。
第二种形式（每个段落都有一个容器）表
示了一个更标准的 SGML结构。
第 9讲 HTML基础 27
块容器 (续 )
扩展引文
< BLOCKQUOTE >text</BLOCKQUOTE>
用于较长的引文，并且作为独立
段落存在。通常用类似普通段落的形式
来表示，但两边的留白采用了缩迸排版
的形式。
第 9讲 HTML基础 28
块容器 (续 )
预先格式化文本
<PRE>text</PRE>
由于 HTML忽略多余的空格、制表符
（ tab）和换行符（ enter），某些具有特殊
格式的文本，如诗歌、表格及计算机程序清
单等都很难标记。
<PRE>元素用于这样的文本，它按照文
本原稿出现的样式格式化所包含的文本，包
括原稿中出现的空格、制表和换行符等。
第 9讲 HTML基础 29
块容器 (续 )
联系地址
<ADDRESS>text</ADDRESS>
特别指邮件地址，这个标记通常
用于标识文章开头的作者名行（作者姓
名）和电子邮箱地址。通常用比较小的
字体或斜体字表示，而且常使用 <BR>
标记把地址的各个行分开。
第 9讲 HTML基础 30
HTML基本元素的使用
分项列表
用 HTML可创建一个包含了几个项目的列表，每
个用 <LI>开头，通常每个项目缩进一个 tab位置。
一般有四种类型：
? <UL> 是无序列表（每个条目前通常加注有实心圆点）；
? <OL> 是有序列表（每个条目都有编号） ;
? <MENU> 是菜单选项（与 <UL>类似，但有时编排得更
紧凑）；
? <DIR> 是目录（显示分成两到三列的列表，象磁盘目录
一样。
第 9讲 HTML基础 31
分项列表 (续 )
分项列表 一般结构如下：
<TYPE>
<LI>text
<LI>text
…
</TYPE>
第 9讲 HTML基础 32
分项列表 (续 )
有序列表
有序列表的 <OL>是在每一个列表项的
前面加上一个编号字符，该字符可以是数字
或字母。它的一般格式为：
<OL TYPE="[1|a|A|i|I]" START=##>
<LI>text
<LI>text
…
</OL>
第 9讲 HTML基础 33
有序列表 (续 )
TYPE属性来指定列表项前面的字符编号，
当其值为：
1 （默认值）数字编号：, 1,2,3…”
a 小写的英文字母，如：, a,b,c…”
A 大写的英文字母，如：, A,B,C…”
i 小写的罗马字母，如：, i,ii,iii…”
I 大写的罗马字母，如：, I,II,III…”
第 9讲 HTML基础 34
分项列表 (续 )
定义列表
<DL [COMPACT]>
<DT> term text
<DD>definition text
<DT> term text
<DD>definition text
</DL>
定义列表 中每个条目有两部分，就像词汇表中
一样：一个术语（跟在 <DT>后面）；一个定
义（跟在 <DD>后面）。
第 9讲 HTML基础 35
HTML基本元素的使用
表单（ form）
HTML的表单特性是给予万维网真正力量、
完成生动的交互式应用的因素之一。
可以把表单看成因特网上通用的一种视窗
（ window）对话框，用于接受用户数据。
第 9讲 HTML基础 36
表单（ form）
HTML表单仅仅是这种特性的一半。
一旦用户填完表单，就把表格提交给一个特殊
的程序或脚本，由这个程序或脚本取出信息，
并用这个表格做一些有用的事（如把用户数据
传递给数据库）。
第 9讲 HTML基础 37
第 9讲 HTML基础 38
表单 (续 )
表单元素
<FORM method ="[GET|POST] action
="URL">form body</FORM>
<FORM>元素括起整个表单，并给出一
些基本定义。表单仅占用 HTML文档的部分空
间；实际上，一个 HTML文档可以包含几个独
立的、完成不同功能的表单。 method指定了
信息传递给 HTTP服务器的方法； action给出
与处理提交信息的脚本相关的 URL（ 如
,scriptname.asp”,,scriptname.php”）。
第 9讲 HTML基础 39
表单 (续 )
表单输入元素
<INPUT name="text" type="string" size=##
value="text" CHECKED>
? <INPUT >用来把不同的字段放在表单里，以便用户输入信
息。
? name属性指定该字段在某个表单中的唯一名称；
? 可选的 value属性给出该标记的默认值。
? 在提交表单时，向 Web服务器呈上以一组用,？, 开头并用
,&”号分开的一组, 名字＝值, 形式的信息，如
http://…/Scriptname?name=me&address=here&
time＝ now
第 9讲 HTML基础 40
表单输入元素 (续 )
type属性给出所使用 <INPUT>标记的样式，
,string”可以是：
? CHECKBOX（复选框）。
? RADIO（单选按钮）
? TEXT（单行的文本输入栏）。
? IMAGE（图像放在表单里）
? SUBMIT（提交按钮）
? RESET(清除按钮 )
? HIDDEN（在表单中保留不供显示的内容）
第 9讲 HTML基础 41
表单输入元素 (续 )
另外：
? SIZE属性用于设置文本字段的窗口大小（以
字符数为计量单位）。
? CHECKED属性与 CHECKBOX和 RADIO类型一
起使用，用于表示按钮在默认状态时是否被
选中。
第 9讲 HTML基础 42
表单 (续 )
选项选择元素（类似 Windows中的组合框）
<SELECT name="text" multiple>
<OPTION value="text" selected>content1
<OPTION value="text" >content2
</SELECT>
? 在选项选择元素中，所有可选项目由 <OPTION>元素逐条
列出；通常用下拉式菜单显示。
? 跟在每个 <OPTION>标记后面的 text在下拉框中显示；如果
没有给出 value属性（可选属性）；当用户选择到某选项时
则随表单呈上相应的 text文本。 multiple属性允许选择多于
一个的选项； selected属性指定默认的选择。
第 9讲 HTML基础 43
选项选择元素 (续 )
选项选择举例：
<SELECT name=“code" multiple>
<OPTION value=“010" selected>Beijing
<OPTION value=“029" >Xi’an
</SELECT>
第 9讲 HTML基础 44
表单输入元素 (续 )
多行文本输入
<TEXTAREA name="text" rows=##
cols=##>text</TEXTAREA>
类似于 <INPUT TYPE="text">标
记，但允许多行文本输入。 name属性
与 <INPUT>的类似，用行和列属性的
数值定义文本输入区域的大小。元素中
text的值将作为默认内容显示在文本区
域中。
第 9讲 HTML基础 45
HTML基本元素的使用
实体
? HTML文档中出现的很多字符不可能通过输入直
接放入 HTML文档中，这些字符包括对 HTML有
特殊意义的字符，如,,<”和, >”字符，以及
许多键盘上找不到的国际字符和印刷字符。
? 可以用实体（ Entities）把这些字符放在文档中，
实体是若干个文本片段，它们一起表示单个字符。
其一般语法包括一个, &”号、一个表示字符的名
字及一个分号。
第 9讲 HTML基础 46
实体（续）
保留字符
? 保留字符是 HTML中用于其它目的的普通
字符，如果按原样输入则会引起混乱。
实体 显示形式 备注
< 小于号（ <）
>； 大于号（ >）
& 与号（ &）
"e; 引号（ "） （通常不用）
不换行空白 见下页
第 9讲 HTML基础 47
保留字符 （续）
在浏览器中浏览 HTML文档时，浏览器根据单
词之间的留白来自动换行，并且 HTML不支持
两个及两个以上的空格。
因此 HTML语言提供了一个不换行空格的标记
,＆ nbsp；,,这样如果需要某几个单词之间
不出现换行的话，就可以在这些单词之间使用
这个换行标记, ＆ nbsp；, 来替代空格，并且
也可以利用这个标记来建立两个或两个以上的
空格效果。
第 9讲 HTML基础 48
实体（续）
国际字符
国际字符指多数除英语外的欧洲语言中使用
的字符，其名字参照 ISO拉丁字符集。
实体 显示形式 备注
Á 带重音的大写 A （ á）
ô 带升降调的小写 o （ ?）
Æ 连字大写 AE （ ? ）
ç 带变音符的小写 c （ ?）
第 9讲 HTML基础 49
Table元素
表格元素是 HTML中最为复杂，同时又是
应用最为广泛的元素之一。
表格元素在网页中以表格形式组织和显
示数据
大量使用在网页布局设计上。在
,Google” 貌似简单的网页上，居然也用
了三个表格来布局。
第 9讲 HTML基础 50
Table元素（续）
第 9讲 HTML基础 51
Table元素（续）
<TABLE>标记的一般形式是：
<TABLE WIDTH="?" BGCOLOR="?"
BACKGROUND="?" BORDER="?"
CELLSPACING="?" CELLPADDING="?">
<TR>
…
<TD> …</TD>
…
</TR>
</TABLE>
第 9讲 HTML基础 52
Table元素（续）
在 <TABLE>标记的属性中：
? Width 表格的宽度，在默认状态下为自动
适应表格内容的宽度，即根据表格中的内容来自动
调节表格的宽度。取值可以是 HTML的绝对或者相
对长度标准单位。
? Bgcolor 表格的背景颜色，在默认状态下表
格无背景色，网页作者亦可使用 HTML的各种颜色
单位进行指定。
? Background 表格的背景图案，须用 URL来指定作
表格背景图片的文件路径。
第 9讲 HTML基础 53
Table元素（续）
? Border 表格边框的风格（在作为布局
使用时往往取其默认值 "0",即不显示表格的
边框），在, Border=1”时，表格的边框成
3D的状态。
? CellSpacing 表格中单元格的边距大小，即
单元格间距，长度单位。
? CellPadding 表格中单元格之间的间距大小，
表中单元格的内容与单元格边框之间的留白
距离，即单元格边距，长度单位。
第 9讲 HTML基础 54
Table元素（续）
TR元素
? TR元素表示表格中的行标记，表格中的每
一行都必须包含在一对 <TR></TR>标记
中。行标记的一般形式是：
<TR ALIGN="?" BGCOLOR="?">… …</TR>
第 9讲 HTML基础 55
TR元素（续）
在 <TR>标记的属性中：
? Align 指定该行中单元格的对齐方式，
可选值如下：
?Left 左对齐（默认值）
?Center 居中对齐
?Right 右对齐
? Bgcolor 指定该行的背景颜色。
第 9讲 HTML基础 56
Table元素（续）
TD元素
? 单元格是表格的基本组成元素，一个 TD元
素表示表格中的一个单元格，由 <TR>标
记对中所圈入的所有 TD元素构成了表格的
一行。单元格标记的一般形式是：
<TD WIDTH="?" HEIGHT="?" ALIGN="?"
VALIGN="?" BGCOLOR="?" BACKGROUND="?"
ROWSPAN="?" COLSPAN="?"> … …</TD>
第 9讲 HTML基础 57
TD元素（续）
? 在 <TD>标记的属性中：
?Width 单元格宽度
?Height 单元格高度
?Align 单元格水平对齐方式
?Valign 单元格垂直对齐方式
?RowSpan 单元格的行跨度
?ColSpan 单元格的列跨度
第 9讲 HTML基础 58
本讲小结
HTML句法结构
HTML文档结构和常用元素
HTML标准单位
HTML基本元素的使用
HTML的其他元素
