计算机文化与应用技术（三）

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
HTML语言
HTML（Hyper Text Markup Language 超
文本标记语言）：是网页设计最基础的语言。
HTML1.0、2.0、3.0、4.0
HTML语言的基本内容
HTML语言中最基本的标记

1
一、HTML语言的基本内容
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
HTML最基本的元素是“标记”（也称“元素”）
例：

<html>
<head>


<meta http-equiv="Content-Type“ content="text/html; charset=gb2312">
<title>第一个网页</title>
</head>
<body>
嗨！你好！这是我的第一个网页！
</body>
</html>





2

上
海
大
学
计
算
中
心
（一） HTML标记的基本格式



HTML文件中有些标记规定必须以“<标记>”开始，
而以“</标记>”结束，这些标记称之为“成对标记”；
有些标记并不需要确定作用域，称之为“非成对标
记”。
1、成对标记

<标记参数1 参数2 参数3……>内容</标记>

手
机
请
调
震
动
档
P6


标记与参数、参数与参数之间用空格分隔，参数可省略。
标记的作用域从“<标记>”开始到“</标记>”结束。
如：<I>上海大学</I>
3
上
海
大
学
计
算
中
心


2、非成对标记

<标记参数1 参数2 参数3……>内容

如：<HR>
HTML标记可大、小写或混写。

手
机
请
调
震
动
档

如：<HTML>、<html>或<HtmL>
如果不特别注明，浏览器会忽略HTML文
件中的空格（多个空格认作一个空格）、
制表符和回车。
4
（二）HTML文件的基本标记
上
海
大
学
计
算
中
心
P12
标准HTML文件的一般结构：
手
机
请
调
震
动
档
5

1、<HTML>标记

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

2、<HEAD>标记


一个完整的HTML文件是以<HTML>标记开始，以</HTML>标记结束
的。
<HEAD>和</HEAD>标记之间的内容是HTML文件的头部分，用来规
定该文件的标题（出现在Web浏览器窗口的标题栏中）和文件的
一些属性。
3、<META>标记


位于<HEAD>标记之间，用以记录当前页面的一些重要信息，如
网页的字符集、作者、版本、网页关键字等
<META>标记可以告诉浏览器网页所识别的文件类型及语言类型。
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312">
6
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

<META>标记中可以加入关键字属性，可以被Web服务器抽
取出来作为索引，给搜索引擎提供网页索引。
<Meta Name="Keywords" Content="网页关键字">

< META> 标记中也可以加入网页简述属性。与关键字
（Keywords）属性一样，网页简述是给搜索引擎提供关于
当前网页的大致简介。
<Meta Name="Description" Content="网页描述文字">

<META>标记还有如下形式，用以说明该HTML文件的编辑工
具。
<Meta Name="Generator" Content="Microsoft FrontPage 4.0">
 用来说明HTML文件是用Microsoft FrontPage 2000制作的。
7

4、<TITLE>标记

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

用以规定HTML文件的标题。位于该成对标记之间的内容将显示在
Web浏览器窗口的标题栏中。
5、<BODY>标记


P13
该标记之间的内容将显示在Web浏览器窗口的用户区内，是HTML文
件的主体部分。
<BODY>标记有一些重要的参数：
BGCOLOR：设置HTML文件的背景色。
 TEXT：设置HTML文件中文字的颜色。
 LINK：设置HTML文件中链接的颜色。
 ALINK：设置HTML文件中被激活时链接的颜色。
 VLINK：设置HTML文件中访问过的链接的颜色。
 BACKGROUND：设置HTML文件的背景图片。
 BGSOUND 
BGSOUND应该放在HEAD标记中用于设置背景音乐。


颜色设置可以直接使用英文或者用“#RRGGBB”（参见表2－1）
P8
8

（三）特殊字符与注释

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
P14
特殊字符
P8
特殊或专用字符
<
>
&
"


空格
例： Let’s learn &quot You
Very Good &gt<BR>
Version &lt 1.1 &gt &copy
字符代码
&lt
&gt
&amp
&quot
&copy
&reg
&nbsp
&amp
me
&quot
&nbsp
&lt
9
浏览器中看到：
Let’s learn " You & me "
Version <1.1> 
上
海
大
学
计
算
中
心

< Very Good >
注释标记格式：



如：

手
机
请
调
震
动
档
10
二、文本格式标记
上
海
大
学
计
算
中
心

P15
在HTML文件中，文本的字体、大小、颜
色等都是由标记控制的。
手
机
请
调
震
动
档
11
（一）设置标题字体标记
格式：<H#>内容</H#> 其中#=1，2，3，4，
5，6
说明：

上
海
大
学
计
算
中
心


手
机
请
调
震
动
档
1．设置标题字体标记<H#>是成对标记，首标
记和尾标记之间的内容是以黑体字显示的。
2．<H#>标记将在标记内容的前后各自自动
插入一个空行，因此不必使用换行标记进行
换行。同时在一行中也无法使用不同大小的
标题字体。
12
（二）设置字体大小标记
格式：<FONT SIZE="#"> 内容 </FONT> 其
中#=1，2，3，4，5，6，7 或 +#、-#
说明：

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

<FONT>标记是成对标记，其中参数SIZE用
来指定字体的大小，数值范围在1~7。SIZE
参数值也可用“+”或“-”设置相对大小，如
SIZE=“+3”表示采用比当前默认字体大3号的
字体；SIZE=“-2”表示采用比当前默认字体小
2号的字体。由于默认值为3，所以能选择的
值是：-2、-1、+1、+2、+3、+4。
13
（三）设置字体颜色标记
格式：<FONT COLOR="#"> 内容 </FONT>
说明：

上
海
大
学
计
算
中
心

其中#的值是六位十六进制代码或是常用颜
色的英文单词
手
机
请
调
震
动
档
14
（四）设置物理字体标记
格式：
<B></B>
粗体标记
<I></I>
斜体标记
<U></U>
加下划线标记
<TT></TT>
打字机风格的字体
<SUP></SUP>
上标标记
<SUB></SUB>
下标标记
<S></S>
加删除线标记
说明：

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
P10

物理字体是指使用一些标记来改变字体显示时的形
状，以产生某种强调和突出的效果。物理字体标记
均为成对标记。
15
（五）设置逻辑字体标记
格式：

<EM></EM>
<STRONG></STRONG>
<CODE></CODE>
<SAMP></SAMP>
<KBD></KBD>
<VAR></VAR>
<DFN></DFN>
<CITE></CITE>
<SMALL></SMALL>
<BIG></BIG>
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

强调文本(通常是斜体)
加重文本(通常是黑体)
代码标记
式样文本标记
键盘字标记
变量值标记
术语定义标记
引用标记
小字体（比周围的字体小）
大字体（比周围的字体大）
说明：逻辑字体是指使用一些标记来改变字体的
形态和式样，以便产生一些公众习惯的或约定俗
成的显示效果。逻辑字体标记均是成对标记。 16
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
<HTML>
<HEAD>
<TITLE>网页设计范例之一（文本格式）</TITLE>
</HEAD>
<BODY>
正常体 <BR>
<B>粗体字</B> <BR>
<I>斜体字</I> <BR>
<U>加下划线</U> <BR>
<TT>打字机风格字体</TT> <BR>
<SUP>上标字体</SUP> <BR>
<SUB>下标字体</SUB> <BR>
<S>加删除线</S> <BR>
<EM>强调文本</EM> <BR>
<STRONG>加重文本</STRONG> <BR>
<SMALL>小字体</SMALL> <BR>
<BIG>大字体</BIG> <BR>
<H1>第1标题字体</H1> <BR>
<H2>第2标题字体</H2> <BR>
<H3>第3标题字体</H3> <BR>
<H4>第4标题字体</H4> <BR>
<H5>第5标题字体</H5> <BR>
<H6>第6标题字体</H6> <BR>
<FONT SIZE="6" COLOR="red">红色6号字体</FONT> <BR>
<FONT SIZE="+3" COLOR="#0000ff">蓝色6号字体</FONT> <BR>
</BODY>
</HTML> ：
17
<HTML>
<HEAD>
<TITLE>网页设计范例之一（文本格式）</TITLE>
</HEAD>
<BODY>
正常体<BR>
正常体  <B><B>粗体字</B></B><BR>
正常体  <I><I>斜体字</I></I><BR>
上
正常体  <U><U>加下划线</U></U><BR>
海
正常体  <TT><TT>打字机风格字体</TT></TT><BR>
大
正常体  <SUP><SUP>上标字体</SUP></SUP><BR>
学
正常体  <SUB><SUB>下标字体</SUB></SUB><BR>
计
正常体  <S><S>加删除线</S></S><BR>
算
正常体  <EM><EM>强调文本</EM></EM><BR>
中
正常体  <STRONG><STRONG>加重文本</STRONG></STRONG><BR>
心
正常体  <SMALL><SMALL>小字体</SMALL></SMALL><BR>
正常体  <BIG><BIG>大字体</BIG></BIG><BR>
<H1>第1标题字体</H1><BR>
<H2>第2标题字体</H2><BR>
手
<H3>第3标题字体</H3><BR>
<H4>第4标题字体</H4><BR>
机
<H5>第5标题字体</H5><BR>
请
<H6>第6标题字体</H6><BR>
调
正常体<FONT SIZE="6" COLOR="red"><FONT SIZE="6" COLOR="red">红色6号字体
震
</FONT></FONT><BR>
动
正常体<FONT SIZE="+3" COLOR="#0000ff"><FONT SIZE="+3" COLOR="#0000ff">蓝
档
色6号字体</FONT></FONT><BR>
</BODY>
18
</HTML>
三、布局标记
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

（一）换行标记 <BR>


P18
相当于插入一个回车符
（二）分段标记




<P ALIGN="value">内容</P>
1．成对标记，用于设定段落。作用是换行并插入一个
空白行。
2．分段标记<P>若无ALIGN参数时，</P>标记可省略。
3．ALIGN参数用来设定段落中内容的对齐方式。
其中value值可设为：left（左对齐）、right（右对
齐）、center（置中对齐）之一。
19

（三）居中标记

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

<CENTER>内容</CENTER>
成对标记，用来设置图文置中对齐。
（四）预定义格式标记

<PRE>内容</PRE>
成对标记，作用是让文字的编排，如空格、
制表符和回车等都能按照用户的设定显示，
也就是说屏幕上显示的文字排列和在编辑
HTML文件时的版面格式一模一样。
20
上
海
大
学
计
算
中
心
（五）水平分隔标记 <HR>


非成对标记，作用是换行并在该行下面插入一条水平直线，
直线的上下两端都会留出一定的空白。
<HR>标记有如下参数。


手
机
请
调
震
动
档



（1）ALIGN参数：当水平线宽度小于浏览器窗口宽度时，使用该属性规
定水平线在浏览器窗口的对齐方式。其属性值有：left、center和right。
缺省值为center。
（2）WIDTH参数：用来控制水平线的宽度。可用数字设置（表示像素点
数）或百分数（表示百分比）。缺省时占据整个浏览器窗口宽度。
（3）SIZE参数：用来控制水平线的粗细，参数值用数字设置。缺省值为
“2”。
（4）COLOR参数：用来设置水平线的颜色。
（5）NOSHADE参数：产生一条普通的二维线条，没有三维效果。
例： < HR ALIGN="right"
COLOR="green">
WIDTH="500"
SIZE="4"
21

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（六）引文标记


P19
<BLOCKQUOTE>内容</BLOCKQUOTE>
成对标记，用来建立一个引文，适合于较长文本的
引用。显示时，浏览器自动在两边缩排引文，以示
区别。
（七）署名标记

<ADDRESS>内容</ADDRESS>
成对标记，一般放在文件体的首部或尾部。该标记
之间的内容一般是有关作者的信息，如作者的姓名、
身份、地址等等。在浏览器窗口中用斜体显示。
22
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
<HTML>
<HEAD>
<TITLE>网页设计范例之二（布局标记）</TITLE>
</HEAD>
<BODY>
<CENTER>
静夜思<BR>
床前明月光<BR>
疑是地上霜<BR>
举头望明月<BR>
低头思故乡<BR>
</CENTER>
<P ALIGN="right">大家一定很熟悉这首诗，
<BR>请大家再欣赏一首诗：
<BLOCKQUOTE>
<PRE>
<FONT SIZE="3" COLOR="green">
日照香炉生紫烟
遥看瀑布挂前川
飞流直下三千尺
疑是银河落九天
</FONT>
</PRE>
</BLOCKQUOTE>
您知道诗的作者是谁吗？
<HR ALIGN="left" WIDTH="50%">
<ADDRESS>作者：李白</ADDESS>
</BODY>
</HTML>
23
四、列表标记
P20
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
24
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档



建立一个完整的网页，合理、灵活地使
用列表标记是十分重要的。
使用HTML中提供的列表标记，可使
HTML文件内容在显示时按一定的规则和
格式排序。
HTML的三种列表标记：

无序列表、有序列表、定义列表。
25


上
海
大
学
计
算
中
心

手
机
请
调
震
动
档
（一）无序列表
无序列表标记<UL>是成对标
记，在其中可使用<LH>列表
主题标记和<LI>列表项标记。
格式：
<UL TYPE="value">
<LH>
列表主题标记<LH>是成对标记，但
列表主题
尾标记</LH>可省略。用于显示该列
表的主题，列表主题标记可省略。
</LH>
<LI>
列表项标记<LI>是成对标记，但尾标记
列表项
</LI>可省略。该标记用于指定列表中
</LI>
的每一项。浏览时，浏览器会在每一个
</UL>
列表项前加上一个列表项目符号。同一
说明：
级别列表项前的项目符号相同，不同级
别列表项前使用不同的项目符号。

TYPE参数：设置项目符号，其value值可设为：



disc：设定一个实心圆点项目符号（默认值）。
circle：设定一个空心圆点项目符号。
square：设定一个方形实心项目符号。
26


上
海
大
学
计
算
中
心
（二）有序列表
P21
格式：
<OL TYPE="value">
<LH>
列表主题
</LH>
<LI>
列表项
</LI>
</OL>
有序列表标记<OL>是成对标记，
在其中同样可使用<LH>列表主
题标记和<LI>列表项标记。
“1”：表示列表项用数字为序号
（默认值）。
“a”：表示列表项用小写字母为
序号。
“A”：表示列表项用大写字母为
序号。
“i”：表示列表项用小写罗马字母
为序号。
“I”：表示列表项用大写罗马字母
为序号。

手
机
请
调
震  说明：
动
档 TYPE参数：设置列表项的有序编号。
27


上
海
大
学
计
算
中
心

（三）定义列表
格式：
<DL>
<DT>定义标题
<DD>定义内容
</DL>
说明：

手
机
请
调
震
动
档
P22


成对标记，使用<DT>定义标题标记和<DD>定义内容标
记，也可使用<LH>标记，作用同上。
定义标题标记<DT>是非成对标记，用于指定标题。
定义内容标记<DD>是非成对标记，用于指定相关标
题的具体解释或说明。一般有一条<DT>标记，就有
一条<DD>标记相对应。
28
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
<HTML>
<HEAD>
<TITLE> 网页设计范例之三（列表标记）</TITLE>
</HEAD>
<BODY>
<UL>
<LH>上海大学基础课程设置</LH>
<LI>高等数学</LI>
<LI>计算机</LI>
<UL TYPE="square">
<LI>计算机文化与应用技术</LI>
<OL>
<LI>Windows的应用基础</LI>
<LI>办公自动化Office 2000</LI>
<LI>网页设计及网站建设</LI>
</OL>
<LI>计算机专业课</LI>
</UL>
<LI>英语</LI>
<OL TYPE="A">
<LI>大学英语四级</LI>
<LI>大学英语六级</LI>
</OL>
</UL>
<DL>
<DT>Windows的应用基础
<DD>主要介绍计算机文化的基本知识和Windows的应用。
<DT>办公自动化Office 2000
<DD>主要介绍办公自动化软件Office 2000的应用。
<DT>网页设计及网站建设
<DD>主要介绍网页设计的基本知识，及利用这些知识进行网站的建设。
</DL>
</BODY>
</HTML>
29
五、表格标记
上
海
大
学
计
算
中
心



手
机
请
调
震
动
档

P23
表格是网页设计中一个很重要的元素。
在网页制作中，表格除了用来制作一般表格
外，也可以用来分割网页的版面。能够实现
文本、图形、图像等对象的定位
在网页设计中适当地使用表格将不同性质的
部分加以区分，不但能使整个网页看起来整
齐，而且可提高网页的可读性。
表格可以嵌套。
30

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（一）创建表格标记
格式：<TABLE>内容</TABLE>
P24


说明：创建表格标记是成对标记，用来界定
表格的范围。
<TABLE>标记的参数主要有BORDER、WIDTH、
HEIGHT、ALIGN、CELLSPACING和
CELLPADDING，都是可选参数。
31
上
海
大
学
计
算
中
心




手
机
请
调
震
动
档

BORDER参数：设置表格边框线的宽度，用数字设置。默认值为0，
即表格没有边框。
WIDTH和HEIGHT参数：这两个参数分别设置表格的宽度和高度。
可用数字或百分数设置。
ALIGN 参数：设定表格的对齐方式。参数值为left、center和
right之一，默认值为left。
CELLSPACING参数：在单元格与单元格之间有间隔线，称为格框
线。用来设置格框线的宽度。该参数的值取像素值，默认值为2。
CELLPADDING参数：设定单元格内容与格框线之间的距离。该参
数的值取像素值，默认值为1。
32

上
海
大
学
计
算
中
心
（二）表格标题标记
格式：<CAPTION>内容</CAPTION>
P24

说明：成对标记，用来设置表格的标题，该标记必须置
于<TABLE>标记范围内。<CAPTION>标记有两个参数：
ALIGN和VALIGN，它们是可选项。


ALIGN参数：设定表格标题与表格之间的对齐方式。参数值为
left、center和right之一，默认值为center。
VALIGN参数：设定表格标题位于表格的上方或下方。参数值为
top和bottom，默认值为top。
手
机
请
调
震
动
档
33

上
海
大
学
计
算
中
心
（三）表头标记<TH>和表元标记<TD>
格式：
<TH>内容</TH>
<TD>内容</TD>



说明：都是成对标记，规定单元格的内容。
表头元素是以黑体显示的。<TH>和<TD>标记的所有参数
及相应的参数功能是完全一样的。
<TH>和<TD>标记的参数有：ROWSPAN、COLSPAN、ALIGN和
VALIGN，都是可选的。


手
机
请
调
震
动
档
P24


ROWSPAN参数：设定该单元格所跨的行数。参数值用数字设置，默认值
为1。
COLSPAN参数：设定该单元格所跨的列数。参数值用数字设置，默认值
为1。
ALIGN 参数：设定指定单元格内容水平对齐方式。参数值为 left、
center和right之一，默认值为left。
VALIGN 参数：设定指定单元格内容垂直对齐方式。参数值为 top、
middle和bottom之一，默认值为middle。
34

（四）行标记
格式：<TR>内容</TR>
P25
上
海
大
学
计
算
中
心

手
机
请
调
震
动
档



说明：成对标记。
HTML中的表格是按行组织的。一个表格由几行
组成，就要有几个行标记与之相对应。
行标记要与<TH>或<TD>标记配套使用，后者在
使用时嵌套在行标记的首标记<TR>和尾标记
</TR>之间，用于规定该行中各单元格的内容。
<TR>标记有两个参数：ALIGN和VALIGN，都是
可选的。
35
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
<HTML>
<HEAD>
<TITLE>网页设计范例之四（表格标记）</TITLE>
</HEAD>
<BODY>
<TABLE ALIGN="center">
<CAPTION> 学生成绩单 </CAPTION>
<TR ALIGN="left">
<TH>系别</TH> <TH>姓名</TH> <TH>课程</TH> <TH>成绩</TH>
</TR>
<TR>
<TD>计算机</TD> <TD>王鹏</TD> <TD>网络基础</TD> <TD>87</TD>
</TR>
<TR>
<TD>文学院</TD> <TD>赵萍</TD> <TD>程序设计</TD> <TD>68</TD>
</TR>
</TABLE>
<TABLE BORDER="2" WIDTH="400" CELLSPACING="4" CELLPADDING="4">
<CAPTION ALIGN="left">学生成绩单</CAPTION>
<TR ALIGN="center">
<TH>系别</TH> <TH>姓名</TH> <TH>课程</TH> <TH>成绩</TH>
</TR>
<TR ALIGN="center">
<TD>计算机</TD> <TD>王鹏</TD> <TD>网络基础</TD> <TD>87</TD>
</TR>
<TR ALIGN="center">
<TD>文学院</TD> <TD>赵萍</TD> <TD>程序设计</TD> <TD>68</TD>
</TR>
</TABLE>
<TABLE BORDER="2" ALIGN="right">
<CAPTION VALIGN="bottom">学生成绩单</CAPTION>
<TR>
<TH COLSPAN="2">学生信息</TH> <TH COLSPAN="2">课程信息</TH>
</TR>
<TR>
<TH>姓名</TH> <TH>系别</TH> <TH>课程</TH> <TH>成绩</TH>
</TR>
<TR>
<TD ROWSPAN="2">王鹏</TD>
<TD ROWSPAN="2">计算机</TD>
<TD>网络基础</TD>
<TD>87</TD>
</TR>
<TR>
<TD>程序设计</TD> <TD>76</TD>
</TR>
</TABLE>
</BODY>
</HTML>
36
六、图像标记
P27
（一）图像标记
格式： < IMG SRC="URL" HEIGHT="value1"
WIDTH="value2"……>

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档


说明：在HTML文件中插入图像是通过<IMG>
标记来实现的，该标记是非成对标记，它带有
许多参数，除参数SRC是不可缺省的外，其他
参数都是可选的。
SRC：由统一资源定位器（URL）来唯一标识


URL的绝对表示法
URL的相对表示法
37
上
海
大
学
计
算
中
心


HEIGHT和WIDTH参数：用来确定图像高度和宽度。缺省时，
Web浏览器根据原始图像文件的大小和浏览器窗口的大小自
动调整图像的显示尺寸。
ALIGN参数：用来设定图像和周围文字的对齐方式或设定图
像在页面中的对齐方式。常用参数值如下：



手
机
请
调
震
动
档




（1）left：设定图像左对齐（默认值）。
（2）right：设定图像右对齐。
（3）bottom：设定与图像相邻的文字位于图像的下方（默认值）。
（4）top：设定与图像相邻的文字位于图像的上方。
（5）middle：设定与图像相邻的文字位于图像的中间。
ALT参数：当使用者的浏览器无法正常显示图像时，会显示
出ALT属性所设定的文字。
BORDER参数：设定图像边框的宽度。参数值用数字设置，表
示边框宽度所占的像素点数。数值为0表示无边框。
38

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

VSPACE和HSPACE参数：用来设定图像与
其相邻对象之间的间隔。
VSPACE参数用于指定图像与相邻对象之间
的垂直间距；
HSPACE参数用于指定图像与相邻对象之间
的水平间距。
（二）图形标记范例
39
<HTML>
<HEAD>
<TITLE>网页设计范例之五（图形标记）</TITLE>
</HEAD>
<BODY>
上 <IMG SRC="http://www.shu.edu.cn/index_image/shu.jpg" HEIGHT="90" ALT=" 上
海大学">
海
大 <IMG SRC="file:///c:/cai3/chp02/image1.jpg" HEIGHT="50" WIDTH="70"><P>
学
计 <IMG SRC="picture/image2.jpg" BORDER="2" HEIGHT="50" ALIGN="right">
算 <IMG SRC="image3.jpg" HEIGHT="50" WIDTH="70" HSPACE="50" ALIGN="top">
中
心上海大学校园风貌<P>
<IMG SRC="image4.jpg" HEIGHT="50" WIDTH="70" VSPACE="10" >
上海大学图书馆<P>
SRC="http://www.shu.edu.cn/index_image/badge.jpg"
HEIGHT="100"
手 <IMG
机
WIDTH="80" ALIGN="middle">
请
调上海大学校徽
震 </BODY>
动 </HTML>
档
40
七、HTML的超链接
上
海
大
学
计
算
中
心
超链接是HTML最显著的优点。
 （一）链接标记
格式：<A HREF="URL">内容</A>
<A NAME="目标名">内容</A>
说明：


手
机
请
调
震
动
档
P29

成对标记，是HTML语言的核心标记。链接标记之间
的内容（称为“锚”）是浏览器中显示的内容，可以
是文本，也可以是图形等。当用户将鼠标箭头移动
到“锚”上时，鼠标箭头会变成手的形状。这时单击
“锚”，就会转到相关参数指定的对象。
HREF参数的作用是指定所要链接的对象（对象可以
是HTML文件，也可以是其他文件）。
41
上
海
大
学
计
算
中
心

使用绝对的URL地址来指定对象




使用相对的URL地址来指定对象

手
机
请
调
震
动
档

<A HREF="http://www.shu.edu.cn">上海大学</A>
<A HREF="ftp://ftp.cc.edu.cn">文件传输</A>
<A HREF="file:///c:/cai3/chp02/first.htm">网页设计</A>
<A HREF="Example.htm"> <IMG SRC="image3.jpg"></A>
上例中设置了一个图形锚，当用户单击该图形，
浏览器会访问当前目录中（正在访问的HTML文
件所处的目录）的“Example.htm”文件。
42

NAME参数：用来定义目标名，供链接定位时使用。
上
 当网页的长度超过一屏时，可先在网页的某处定义目标名，然后
海
大
在该网页的其他地方使用HREF参数设置链接，格式为“#目标名”，
学
当链接被激活时便会由定义的目标名处开始显示。
计
 （1）在网页中设定目标名
算
<A NAME="location">上海大学</A>
中
心上述例子在网页内容“上海大学”处定义了目标名为“location”。此处，“上海
大学”并不是真正的“锚”，而是供链接定位使用。

（2）在相应位置设置超链接
手
机 <A HREF="#location">转到上海大学</A>
请
调  当单击“转到上海大学”锚时，浏览器的显示区域会
震
转到该HTML文件中定义目标名为“location”的位置，
动
档
即“上海大学”处。如果在该HTML文件中没有定义过
“location”，则浏览器将显示定位在该文件的开始处。
43

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（二）链接到电子信箱
P30
格式：
<A HREF="mailto:E_mailaddress">内容</A>
功能：连接到指定电子信箱地址。

当单击鼠标后，会开启缺省邮件编辑程
序供编写邮件，且收件人的地址都已经
自动填好，只要键入信件的内容，就可
以发送Mail了。
44

（三）链接标记范例
<HTML>
<HEAD>
<TITLE>网页设计范例之六（链接标记）</TITLE>
上 </HEAD>
海
大 <BODY>
学 <CENTER>
计 <A NAME="location"><H2>上海大学计算中心介绍</H2></A><P>
算
中 <A HREF="http://www.cc.shu.edu.cn/">进入上海大学计算中心主页</A></P>
心 <A HREF="http://tol.cc.shu.edu.cn/">
<IMG SRC="http://www.cc.shu.edu.cn/images/ccshu.gif" HEIGHT="80"
ALT="上海大学计算中心介绍"></A></P>
手 </CENTER>
机 <A HREF="#location"><B>TOP</B></A><P>
请 <A HREF="mailto:[email protected]">我的邮箱</A>
调
震 </BODY>
动 </HTML>
档
45

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（四）地图索引



P31
锚有文字锚和图形锚两种。
使用图形作链接时，可用<A>和<IMG>标记来
完成链接，这种链接是把整个图形作为一个
链接来处理。
如果只是想把图片中的某个区域做成链接，
就要用屏幕上的坐标来描述区域，使每个区
域都可链接到不同的目标文件。
46

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
格式：
在定义链接地图时，首先要为链接源点
的图像添加ISMAP参数，将图像定义为
地图。然后必须使用USEMAP参数说明
该图像是遵循哪个地图定义的。
USEMAP参数的值为“#地图名”。
<HTML>
……
<BODY>
<IMG SRC="URL" ISMAP USEMAP="#地图名">
<MAP NAME="地图名">
< AREA SHAPE="value" COORDS="X1,Y1,X2,Y2…
…" HREF="URL">
……
</MAP>
……
</BODY>
</HTML>
47


上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
区域的划分是通过在<MAP>标记中嵌套使用
<AREA>标记来实现的。
<AREA>标记有3个参数：SHAPE、COORDS、
HREF，分别用以规定该区域的形状、范围和对
应的链接。


SHAPE： rect、circle、polygon
矩形的左上角坐标“X1,Y1”和右下角坐标“X2,Y2”，圆
形表示为“X,Y,R”，多边形表示为
“X1,Y1,X2,Y2,……Xn,Yn”，从左上角坐标“X1，Y1”开
始，按顺时针方向各个角的坐标。
48
八、框架设计
上
海
大
学
计
算
中
心



手
机
请
调
震
动
档
如果把网页设计成框架结构，可将一张网页分
成多个区域，每个区域称为一个框架。
如果是单一窗口中显示，那么当浏览者正在阅
读某个网页时，若想再调用另一个网页，则前
一网页就会自动关闭。有时这就显得很不方便。
如将网页分成两个框架：

一个框架显示目录，另一个框架显示的是所选取的
项目内容，这样，在保持目录框架内容不变的同时，
项目框架内容之间的切换就快得多。
49

上
海
大
学
计
算
中
心
（一）基本结构




手
机
请
调
震
动
档

框架结构的HTML文件，书写格式与一般HTML
文件的书写格式基本相同。
区别在于用<FRAMESET>代替了<BODY>标记。
<FRAMESET>是一个成对标记
在<FRAMESET>标记内使用另一个标记
<FRAME>
<FRAME>用来指定框架结构中每一个框架的
具体内容。
50
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
<HTML>
<HEAD>
<TITLE>文件标题</TITLE>
</HEAD>
<FRAMESET ROWS="value“ | COLS="value">

<FRAME NAME="framename1" SRC="URL1"……>
<FRAME NAME="framename2" SRC="URL2"……>
……
<FRAME NAME="framenamen" SRC="URLn"……>
</FRAMESET>
<NOFRAMES>提示信息</NOFRAMES>
</HTML>
51

（二）框架定义标记 <FRAMESET>

上
海
大
学
计
算
中
心


格式：
< FRAMESET ROWS=“value”| COLS=“value”> 内容
</FRAMESET>
说明：用来定义整个框架结构的分隔方式。
ROWS和COLS参数，说明屏幕上划分框架的数量以及各框
架的大小，是可选项，两选一。


手
机
请
调
震
动
档

ROWS参数：说明窗口水平（横排）分隔情况。value值用来定义
每个框架的高度。
COLS参数：说明窗口垂直（直排）分隔情况。value值用来定义
每个框架的宽度。
value值可用像素值、百分比或剩余值以及这三种方式的混合来
表示。
52

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档


剩余值：表示当所有框架设定之后的剩余部分，
用“*”表示。
例如，设置COLS=“180，*”，则表示将屏幕纵向分隔
成两个框架，其中第一个宽度为180个像素点，剩余
的是第二个框架的宽度。
设置ROWS=“30%，50，*”，则表示将屏幕横向分隔
成三个框架，其中上面一个框架的高度占用了总窗
口的30%，中间框架的高度为50个像素点，剩余的高
度给最下面的框架。
53

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（三）框架内容标记<FRAME>
格式：
P34
<FRAME NAME="framename" SRC="URL"……>
 说明：
 非成对标记，用来设定框架名称及对应的网
页等，必须写在<FRAMESET>的开始和结束
标记之间。
 它的参数有：SRC、NAME、
MARGINWIDTH、MARGINHEIGHT、
SCROLLING 和 NORESIZE。
54


上
海
大
学
计
算
中
心



手
机
请
调
震
动
档

SRC参数：用来链接一个HTML文件。
NAME参数：用来设定框架的名字，该参数可选。
MARGINWIDTH参数：
用来控制框架内显示的内容与框架左右边缘的距离。该
参数可选，它取像素值，默认值为1。
MARGINHEIGHT参数：
用来控制框架内显示的内容与框架上下边缘的距离。该
参数可选，它取像素值，默认值为1。
SCROLLING参数：用于描述框架是否设有滚动条，它有
yes、no和auto三种取值。该参数可选，默认值是auto。
NORESIZE参数：是一个标志，没有取值。它说明浏览者
是否可以自行用鼠标调整框架的大小。如果设定了
NORESIZE参数，则框架不能调整。如果该参数缺省，则
表示可以自行调整框架大小。
55
上
海
大
学
计
算
中
心
手
机
请
调
震
动
档

（四）无框架标记<NOFRAMES>


P34
使用<NOFRAMES>标记，可以在用户浏览
器不支持框架结构显示时，告知用户一些有
关信息，以免用户对着空白窗口画面感到莫
名其妙。
成对标记，首标记<NOFRAMES>和尾标记
</NOFRAMES>之间的内容就是网页编辑者
希望告诉用户的信息。
56

（五）框架标记的嵌套
<FRAMESET>标记是可以嵌套使用，可以将其
中某一个或某几个框架再划分为若干个更小的
框架。
<FRAMESET COLS="20%,＊">
<FRAME SRC="A.HTM">
<FRAMESET ROWS="40%,＊">
<FRAME SRC="B.HTM">
<FRAME SRC="C.HTM">
首先将总窗口分隔成左
</FRAMESET>
20％右80％两个框架，
</FRAMESET>
接着利用<FRAMESET>

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
标记的嵌套，又上下分
隔右框架为上40％下60
％。
57

上
海
大
学
计
算
中
心
（六）框架结构范例



手
机
请
调
震
动
档
P35
我们通常将由一系列锚标组成的索引目录显示
在一个框架中，而将锚标所指向的目标文件显
示在另一个框架中。
显示锚标的框架通常被称为“源框架”，显示目
标文件的框架则称为“目标框架”。
我们希望在“源框架”中点选某个超级链接时，
被链接的网页将出现在“目标框架”中，而“源框
架”的网页仍维持原样不变。
这需要在<A>标记中添加TARGET参数
来指定目标文件的显示位置才能实现。
58

(七)TARGET参数值

上
海
大
学
计
算
中
心



手
机
请
调
震
动
档

P37
TARGET参数可以直接指定框架的名称
如<A href=“1.htm” target=“fraRight”>内容</A>
“_blank”：
被链接的网页显示在一个新的窗口中。
“_top”：
被链接的网页显示在整个窗口中。
“_parent”：
被链接的网页显示在上一层的框架中。
“_self”：
被链接的网页显示在当前的框架中（默认值）。
59

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（1）首先分割框架
设定整个网页纵向分隔，左
框架的宽度为180个像素点
P29
<HTML>
左框架名为“fraLeft”，在左
框架中显示“list.htm”网页文
<HEAD>
件
<TITLE>网页设计范例之八（框架结构）</TITLE>
</HEAD>
<FRAMESET COLS="180,＊">
<FRAME NAME="fraLeft" SRC="list.htm“
SCROLLING="auto" NORESIZE>
<FRAME NAME="fraRight" SRC="content.htm">
</FRAMESET>
<NOFRAMES>您使用的浏览器不支持框架结构显示</NOFRAMES>
</HTML>
60

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
（2）编辑源框架中显示的网页文件（list.htm）
P30
<HTML>
<HEAD>
<TITLE>左框架链接网页</TITLE>
</HEAD>
<BODY>
<CENTER>
目录<HR>
<P>1.<A HREF="回乡偶书.htm" TARGET="fraRight">回乡偶书</A></P>
<P>2.<A HREF="枫桥夜泊.htm" TARGET="fraRight">枫桥夜泊</A></P>
<P>3.<A HREF="登鹳雀楼.htm" TARGET="fraRight">登鹳雀楼</A></P>
</CENTER>
</BODY>
</HTML>
61
九、表单的制作

上
海
大
学
计
算
中
心
手
机
请
调
震
动
档


P37
HTML语言是利用表单（Form标记）来设计交互界面
的。
通过表单，我们可以向Web服务器反馈信息。
（一）表单的基本结构
<FORM ACTION="URL" METHOD="POST|GET">
<INPUT TYPE="fieldtype" NAME="fieldname"……>
……
<SELECT>……</SELECT>
……
<TEXTAREA>……</TEXTAREA>
</FORM>
62

上
海
大
学
计
算
中
心


成对标记，首标记<FORM>和尾标记</FORM>之间的
内容就是一个表单的输入接口。有ACTION和
METHOD两个参数：
1．ACTION参数：用来指出服务器端程序所在的地址，
也就是指定用来处理表单数据程序的网址。ACTION的
参数值以URL地址方式来表示。在Web服务器端必须有
此类的程序，用来接收由浏览器端传送过来的数据。
2．METHOD参数：用来指定将浏览器端表单数据上传
给Web服务器所采用的传送方式。参数的值为POST或
GET。
手
机
请
调
震
动
档
63
上
海
大
学
计
算
中
心


手
机
请
调
震
动
档
POST：将表单内各字段名称fieldname与其输入信息放
置在HTML文件表头内一起传送给服务器端，交由ACTION
参数所指定的程序处理。该程序会通过标准输入方式，
将表单的数据读出并加以处理，由于数据是放置在HTML
文件表头中，因此并没有长度的限制，而且数据在传送
过程中的安全性也比较高。
GET：为默认值，将表单内各字段名称fieldname与其
输入信息作为字符串附加在ACTION参数所指定程序的
URL地址后，中间用“？”隔开，因此表单中所有字段的
数据都会直接显示在URL上（即浏览器网址输入栏内），
数据传送的安全性较低，而且URL长度最长为256bytes，
因此不适合用来传送数据量太大的表单数据。
64

上
海
大
学
计
算
中
心
（二）表单项标记INPUT




<INPUT TYPE="fieldtype" NAME="fieldname“…>
六个参数：TYPE、NAME、SIZE、VALUE、MAXLENGTH和
CHECKED。后面五个参数因TYPE的类型不同，含义也有所不同。
TYPE有六种常用类型：text、password、submit、reset、radio
和checkbox。
一、text（文本框） P38
表单中的文本框是一个只输入一行文字的输入框，text是TYPE的默
认值。当TYPE为text时，INPUT其他五个参数的含义为：

手
机
请
调
震
动
档
P38




NAME：相应处理程序中的变量名，Web服务器将把这条输入信息的值赋
于NAME参数规定的变量。
SIZE：用于指定文本框的长度，默认值为20，以字节为单位。
VALUE：用于指定文本框的初始值。
MAXLENGTH：用来设定该文本框允许用户输入的最大字符数。
CHECKED：TEXT类型不用此参数。
65


上
海
大
学
计
算
中
心
手
机
请
调
震
动
档
二、password（密码框）
 表示该输入项的输入信息是密码。TYPE=“password”方式下的
输入与TYPE=“text”方式下的输入基本相同，不同之处只是当浏
览者输入时并不在输入框中显示用户输入的信息，而是用“*”号
来代替。
三、submit（提交按钮）P39
 当TYPE=“submit”时，浏览器会在屏幕上产生一个提交按钮。当
用户单击该按钮时，浏览器就会将表单的输入信息传送给服务
器。
 使用提交按钮时除了一个可选的VALUE参数外其他参数都可缺
省。
 VALUE参数可让用户自定义显示在提交按钮上的文字。VALUE
参数的缺省值是由用户使用的浏览器确定的：在Netscape中
为“Submit query”，IE中为“提交查询内容”。
 在一个表单中有且仅有一个提交按钮。不然无法向服务器传送
信息。
66

上
海
大
学
计
算
中
心

四、reset（清除按钮） P39
 TYPE=“reset”时，浏览器会在屏幕上产生一个清除按钮。当单击该
按钮后，浏览器就会清除表单中所有的输入信息，让浏览者重新
输入。和submit类型一样，清除按钮除了一个可选的VALUE参数外
其他参数都可缺省。
 VALUE参数可让用户自定义显示在清除按钮上的文字。
 VALUE参数的缺省值是由用户使用的浏览器确定的：在Netscape中
为“Reset”，IE中为“还原”。
五、radio（单选按钮）
 radio类型为浏览者提供单选按钮进行选择，由于选择是唯一的，
因此，同组单选按钮NAME参数取相同的值，但参数VALUE值是不同
的。
 当TYPE=“radio”时，除了TYPE和NAME参数外，<INPUT>标记还
有两个参数：VALUE和CHECKED。
手
机
请
调
震
动
档
67


上
海
大
学
计
算
中
心

1．VALUE参数：当该选项被选中并提交后，Web浏览器要传送给服务器
的数据。该参数不可缺省。
2．CHECKED参数：用于指定单选项的初始状态，表示该选项在初始时
是被选中的。该参数是一个标志，没有取值。
六、checkbox（复选框）


checkbox类型为浏览者提供复选按钮进行多项选择，由于选择是多项
的，因此，参数NAME可取不同的值。
当 TYPE=“checkbox” 时， < INPUT> 标记还使用两个参数： VALUE 和
CHECKED，它们的使用方法和功能与TYPE=“radio”时完全一样。
手
机
请
调
震
动
档
68

（三）表单列表框标记和表单列表项标记

上
海
大
学
计
算
中
心


P39
<SELECT>标记是成对标记，首标记<SELECT>和尾标记
</SELECT>之间的内容就是一个列表框的内容。
<SELECT>标记必须与<OPTION>标记配套使用，
<OPTION>标记非成对的，嵌套在<SELECT>标记中，
用于定义列表框中的各个选项。
<SELECT>标记的参数有：NAME、SIZE和MULTIPLE，其中
NAME参数是不可缺省的，其他都是可选的。
手
机
请
调
震
动
档
69


上
海
大
学
计
算
中
心


<OPTION>标记有两个参数：VALUE和SELECTED，它们
都是可选的。


手
机
请
调
震
动
档
1．NAME参数：用来设定列表框的名字。
2．SIZE参数：用于定义列表框的长度。参数值是数字，表示显示
在列表框中的选项数目。当参数值小于列表框中的列表项数目时，
浏览器会为该列表框添加滚动条，用户可使用滚动条来查看所有
的选项。默认值为1。
3．MULTIPLE参数：用来设定成可多选，该参数是一个标志，没
有取值。
1．VALUE参数：用来设定当该选项被选中并提交后，Web浏览器传
送给服务器的数据。缺省时，浏览器将传送<OPTION>标记后的具
体内容。
2．SELECTED参数：用来指定选项的初始状态，表示该选项在初始
时是被选中的。
70

（四）多行文本输入标记<TEXTAREA>

上
海
大
学
计
算
中
心




手
机
请
调
震
动
档

P40
是成对标记，首标记<TEXTAREA>和尾标记
</TEXTAREA>之间的内容就是显示在文本输入框中的
初始信息。<TEXTAREA>标记有3个参数：NAME、
ROWS和COLS。
1．NAME参数：用于指定文本输入框的名字。
2．ROWS参数：用于规定文本输入框的高度。
3．COLS参数：用于规定文本输入框的宽度。
<TEXTAREA>标记隐含有<PRE>标记的功能。
（五）表单标记范例
P40
71
十、制作滚动字幕 <MARQUEE>
P41

上
海
大
学
计
算
中
心

成对标记，使文字或图片产生移动效果。
DIRECTION参数：设定滚动字幕的移动方向，如：



BEHAVIOR参数：设定文字走动方式，如：



手
机
请
调
震
动
档

right：文字由左向右移动。
left：文字由右向左移动（默认值）。
scroll：滚动播出（默认值）。
slide：滚动到一方后停止滚动。
alternate：滚动到一方后向相反方向滚动。
LOOP参数：设定文字滚动的次数，可用数字表示，“0”
表示无限次。
72

上
海
大
学
计
算
中
心



手
机
请
调
震
动
档
SCROLLDELAY参数：设定文字移动的速度，用来设定
延迟时间，数值越大，两次移动之间的时间间隔就
越长，移动速度就越慢。默认值为90，单位以毫秒
来计算。
SCROLLAMOUNT参数：设定文字移动的速度，用来设
定文字移动距离，数值越大，速度越快，默认值为6，
文字移动以像素为单位。
WIDTH和HEIGHT参数：设置滚动字幕区域的尺寸大小，
WIDTH参数设置区域的宽度，HEIGHT参数设置区域的
高度，它们的参数值可用“像素”或“百分比”为单位。
BGCOLOR参数：用来设置背景颜色。参数值可使
用该颜色的六位十六进制代码或直接使用该颜色对
应的英文单词。
73

Download Report