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