第 3章 HTML简介
ASP动态网页设计教程
2
第 3章 HTML简介
3.1 什么是 HTML
3.2 背景设置
3.3 文字属性的变化
3.4 图文并茂的文件
3.5 超级链接
3.6 表格
3.7 段落
3.8 水平线
3.9 什么是 CSS
3
3.1 什么是 HTML
HTML全名为 Hyper Text Markup Language，中文译为超文本标记语言，这是创建网页的脚本语言，
它提供了精简而有力的文件定义，使我们可以设计出多姿多彩的超媒体文件 (Hypermedia Document)，通过
HTTP(Hyper Text Transfer Protocol)通讯协议，使得
HTML文件可以在全球互联网 (World Wide Web，
WWW)上进行跨平台的文件交换。
HTML文件为纯文本的文件格式，可以用任何的文本编辑器来编辑,HTML是以标记来描述文件中的多媒体信息。
4
3.1 什么是 HTML
3.1.1 HTML文件
3.1.2 HTML组成的基本组件
5
3.1 什么是 HTML
3.1.1 HTML文件
HTML文件的结构是由 HEAD 及 BODY 两大部分所组成，如下图所示。
6
3.1 什么是 HTML
3.1.2 HTML组成的基本组件
<html>…</html>
此标记必须分别置于 HTML文件的开头和结尾，其主要的功能是告诉浏览器 (Browser)这是 HTML文件，且文件是由起始标记 <html>开始，至结束标记 </html>结束。
<head>…</head>
此标记为文件的表头区，主要作用是用来描述关于网页的相关信息，例如编码方式、网页的标题等。
<body>…</body>
网页输出编排的重头戏几乎全部放在 <body>与 </body>之间，凡在网页上显示的各种文字或图片等，均必须置于这一标记的范围内。
7
3.1 什么是 HTML
HTML文件范例 (page3_1.htm)
<HTML>
<HEAD>
<TITLE>HTML第一步 </TITLE>
</HEAD>
<BODY>
How do you do!
</BODY>
</HTML>
执行结果如图所示。
8
3.2 背景设置在 HTML中，可以自行定义网页的背景颜色或以某张图片填满网页的背景，而这些设置必须在 <body> 的属性里进行，其用法如下：
<body text=“blue” link=“red”
vlink=“black” alink=“green”
bgcolor=“white” background=“images/bg.jpg”>
</body>
Body的相关属性说明请见下页表所示。
9
3.2 背景设置属 性 说 明
Text =“颜色值,
设置网页默认的字体颜色，对于没有特别指定颜色的文字，都以此设置为准。颜色值有两种表示方式，第一种为常数表示方式，
例如 red代表红色,yellow代表黄色等。另一种表示方式为 RGB三原色的表示，颜色值是以三组十六进制的 RGB数值来表示（十六进制的前导字符为,#”），颜色值的格式如下,#RRGGBB”，例如红色的值为,#FF0000”，绿色的值为,#00FF00”，蓝色的值为
,#0000FF”
Link =“颜色值,超级链接文字的字体颜色，默认值为蓝色加下划线的字，颜色的指定方法同上
Vlink =“颜色值,已点击（ Click）过的超级链接文字的字体颜色
Bgcolor =“颜色值,指定网页的背景颜色，仅能指定单一颜色（无法指定渐变的颜色）
Background =“图形名,
指定背景图将使图片充满整个浏览器的显示区，背景图片的格式以浏览器支持的图形格式为主，通常为,jpg或,gif的图形，目前有许多浏览器已支持 Kodak所发表的,png文件格式。若 bgcolor与
background同时指定，浏览器以 background的设置为主
10
3.2 背景设置说明：浏览器对于每一个标记均有默认值，因此，上述的参数如果都不设置，也不会影响网页正常的显示。理论上不设置背景及字体颜色，反而会加速网页的下载速度，像鼎鼎大名的 Yahoo，其网页都是不设置背景颜色。如下图所示：
11
3.3 文字属性的变化
HTML允许我们对文件中的文字做各种的变化,这些变化就如同使用 Word设置文字的属性一样,可以设置文字的大小,颜色,使用的字体名称及字体样式等,
详细的使用说明分述如下 。
12
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色
3.3.2 文字的样式
3.3.3 空格符
3.3.4 换行
3.3.5 预先编排好的文字
3.3.6 编号及项目符号
13
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色在 HTML中我们可以使用 <font>…</font> 标记设置文字属性，它的语法如下：
<FONT FACE="字体名称 " SIZE="字体大小 " COLOR="颜色 ">
显示的文字 </FONT>
HTML当初定义时，将字体由小到大排列，分为 1～
7个等级 (字体的大小视浏览器的定义而异 )，若不设置字体大小，其默认值为 3。此外，字体大小也可以以 3为基准用相对大小来表示，例如,+1代表 4； -2代表 1；以此类推。
14
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色设置文字属性范例 (page3_2.htm)如下：
<html>
<head>
<title>设置文字属性 </title>
</head>
<body>
<font face="宋体 " size="4" color="blue"> 文字之美 </font>
</body>
</html>
15
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色上述范例在 Microsoft Internet Explorer浏览器中输出的画面如下图所示。
16
3.3 文字属性的变化
3.3.2 文字的样式
HTML 文件提供的文字样式有粗体字、斜体字、及加下划线等 3种样式，且样式可混合指定使用，其使用方法如下：
粗体字,<B>粗体字 </B>
斜体字,<I>斜体字 </I>
加下划线,<U>加下划线 </U>
粗体字 +斜体字,<B><I>粗体字 +斜体字 </I></B>
粗体字 +加下划线,<B><U>粗体字 +加下划线 </U></B>
文字的样式范例 (page3_3.htm)见下页：
17
3.3 文字属性的变化
3.3.2 文字的样式
<HTML>
<HEAD>
<TITLE>文字的样式 </TITLE>
</HEAD>
<BODY>
<B>粗体字 </B>
<I>斜体字 </I>
<U>加下划线 </U>
<B><I>粗体字 +斜体字 </I></B>
<B><U>粗体字 +加下划线 </U></B>
<I><U>斜体字 +加下划线 </U></I>
</BODY>
</HTML>
18
3.3 文字属性的变化
3.3.2 文字的样式在 Microsoft Internet Explorer浏览器中，输出的画面如下图所示。
19
3.3 文字属性的变化
3.3.3 空格符在 HTML中，空格符并不具有调整间距的功能 (连续出现多个空格符时，仅第一个空格符有效 )，若要正确的使用空格符，请改用 HTML空格符的编码值 ( )，这样才能完成空格符的功效，例如 (page3_4.htm)：
<html>
<head>
<title>空格符 </title>
</head>
<body>
第一行 前面按了三次空格符 改用三个编码值  
</body>
</html>
20
3.3 文字属性的变化
3.3.3 空格符执行结果如下图所示,
这里按了 3 次空格符，
结果只出现一个空格改用 3 个编码值 则在结果中出现了 3个空格。
21
3.3 文字属性的变化
3.3.4 换行在 HTML文件中，换行必须使用 <br>标记，范例如下：
page3_5.htm
<html>
<head>
<title>换行 </title>
</head>
<body>
第一行
<BR>
第二行我不换行
</body>
</html>
执行结果如图所示。
22
3.3 文字属性的变化
3.3.5 预先编排好的文字可以使用 <pre>…</pre> 标记，将已编辑好的文件置于此标记之中，它就可以按照您所想要的格式输出。
范例 page3_6.htm:
<html>
<head>
<title>预先编排好的文字 </title>
</head>
<body>
<pre>
现在我想换行就换行，
再也不用看 HTML的脸色了。
就算没有 <BR>标记也没关系
</pre>
</body>
</html>
23
3.3 文字属性的变化
3.3.5 预先编排好的文字执行结果如下图所示,
24
3.3 文字属性的变化
3.3.6 编号及项目符号
1,编号在 HTML文件中项目编号是以 <ol>…</ol> 标记并搭配 <li>…</li> 标记表示。项目编号的用法如下：
范例 page3_7.htm:
<html> <ol>
<head> <li>雄壮 </li>
<title>编号 </title> <li>威武 </li>
</head> </ol>
<body> </body>
男生要 </html>
25
3.3 文字属性的变化
3.3.6 编号及项目符号执行结果如下图所示。
26
3.3 文字属性的变化
3.3.6 编号及项目符号
<ol> 标记还可以 TYPE 属性设置不同的项目编号，
可用的 TYPE属性值如下表所示。
属性值 说 明
“A” 项目符号为 A,B,C,……
“a” 项目符号为 a,b,c,……
“I” 项目符号为 I,II,III,……
“i” 项目符号为 i,ii,iii,……
“1” 项目符号为 1,2,3,……( 默认值 )
27
3.3 文字属性的变化
3.3.6 编号及项目符号范例 page3_8.htm:
<html> </ol>
<head> 女生要
<title>不同的项目编号 </title> <ol type="i">
</head> <li>温柔 </li>
<body> <li>贤淑 </li>
男生要 </ol>
<ol type="I"> </body>
<li>雄壮 </li> </html>
<li>威武 </li>
28
3.3 文字属性的变化
3.3.6 编号及项目符号执行结果如下图所示。
29
3.3 文字属性的变化
3.3.6 编号及项目符号
2,项目符号项目符号是以特定的字符为编号，在 HTML文件中是以 <ul>…</ul> 标记表示，并须搭配 <li>...</li>标记使用。
项目符号的用法 (范例 page3_9.htm)如下：
<html> </ul>
<head> 女生要
<title>项目符号 </title> <ul>
</head> <li>温柔 </li>
<body> <li>贤淑 </li>
男生要 </ul>
<ul> </body>
<li>雄壮 </li> </html>
<li>威武 </li>
30
3.3 文字属性的变化
3.3.6 编号及项目符号执行结果如下图所示。
31
3.4 图文并茂的文件在 HTML文件中，图形文件与 HTML文件是分开存放的，通过 HTML的 <img> 标记，描述欲显示的图形文件名称，即可在浏览器中显示图片。 <img> 标记的语法如下：
<img src="文件名 " height=y width=x border=n alt="说明文字
“
align="对齐方式 ">
32
3.4 图文并茂的文件
3.4.1 指定文件来源
3.4.2 指定图形的宽度及高度
3.4.3 图片边框
3.4.4 图形或文字
3.4.5 对象居中
33
3.4 图文并茂的文件
3.4.1 指定文件来源在 src=“文件名”中，文件的名称有两种表示方式，
一种是明确的指出图形文件的完整路径，称为绝对路径；
另一种是以目前网页所在的目录为基准 (作为参考路径 ),
称为相对路径。
1,绝对路径使用绝对路径显示图片实例的 HTML源代码
(page3_10.htm)如下：
<html> <img src="http://cache.orion.sina.com.cn/fansjczs
<head> _d/upload10/226/1045269490/5302.jpg">
<title>显示图片 </title> </body>
</head> </html>
<body>
34
3.4 图文并茂的文件
3.4.1 指定文件来源执行结果如下图所示。
35
3.4 图文并茂的文件
3.4.1 指定文件来源
2,相对路径相对路径的使用时机，是图形与目前的网页在同一个网站的目录下时使用，例如海河摄影艺术会的首页为
index.htm，若首页显示 LOGO图形的指定为 <img
src="logo.gif"> 表示 logo.gif这个图形与 index.htm的首页在同一目录下，若 <img src="images/logo.gif">则代表
logo.gif是放在 index.htm所在目录下的子目录 images中，
至于 <img src="/images/logo.gif">则是将 logo.gif图形置于主文件 (Document Root)下的 Images子目录中。
36
3.4 图文并茂的文件
3.4.2 指定图形的宽度及高度在 <img> 标记中，也可以指定图形的宽度和高度。
通常来说，我们并不用特别设置这两个属性，因为浏览器会以图形的宽度和高度自动显示，除非为了版面编排的问题，才会利用宽、高两个属性来调整图形显示的大小。另外，图片的宽度和高度也可用百分比 "%"来表示，
例如,width="50%",height="50%"等。
说明：在 Internet Explorer 6.0中宽度及高度，是指浏览器的宽度及高度的百分比。因此,width="50%"在
800× 600分辨率中，宽度相当于是 400 pixel。
37
3.4 图文并茂的文件
3.4.3 图片边框在 IE中所显示图形文件。其默认值是没有边框的，
若为了美观或显眼起见，您可以利用 Border属性为图形加上边框，并可指定边框的大小 (粗细 )。图形文件边框设置为默认值的 HTML源代码 (page3_11.htm)如下：
<html> </style>
<head> <body>
<title>图片边框 </title> <div align="center">
</head> <img src="images/1015.gif">
<style type="text/css"> </div>
<!-- </body>
body { </html>
background-color,#C8E9FF;
}
-->
38
3.4 图文并茂的文件
3.4.3 图片边框画面的显示效果如下图所示。
39
3.4 图文并茂的文件
3.4.3 图片边框将该图形文件边框设置为 border=1，则该范例的
HTML源代码变为 (page3_12.htm),
<html> </style>
<head> <body>
<title>图片边框 </title> <div align="center">
</head> <img border=1 src="images/1015.gif">
<style type="text/css"> </div>
<!-- </body>
body { </html>
background-color,#C8E9FF;
}
-->
40
3.4 图文并茂的文件
3.4.3 图片边框画面的显示效果如下图所示。
加了边框之后，可突显
Banner范围的视觉效果
41
3.4 图文并茂的文件
3.4.4 图形或文字图形是网络带宽的杀手之一，为了节省网络的带宽,HTML的 <img> 标记也可以设置为图形代替文字。
当用户设置浏览器只显示文字时，图形的部分即会以这些文字来展现。设置文字的属性为 alt，其用法见范例 (page3_13.htm) 。
<HTML> <img src="Windows xp.gif"
<HEAD> alt="Windows xp" border=1>
<TITLE>显示图形或文字 </TITLE> </BODY>
</HEAD> </HTML>
<BODY>
42
3.4 图文并茂的文件
3.4.4 图形或文字当浏览器取消显示图片时，画面会自动以 alt 指定的文字输出，如下图所示。
43
3.4 图文并茂的文件
3.4.4 图形或文字
1,如何取消显示图形点选 IE浏览器窗口中的“工具 /Internet选项”命令，
选择“高级”选项卡，取消“显示图片”复选框，如下图所示。
取消“显示图片”复选框
44
3.4 图文并茂的文件
3.4.4 图形或文字
2,显示图形或文字在 HTML中,<img>标记还提供图形与文字如何对齐的属性 Align。 Align属性的用法见范例 (page3_14.htm) 。
<HTML>
<HEAD>
<TITLE>显示图形或文字 </TITLE>
</HEAD>
<BODY>
<img src="images/next.bmp" Align="left">欢迎摄影爱好者参观 <Br>
<img src="images/next.bmp" Align="middle">欢迎摄影爱好者参观 <Br>
<img src="images/next.bmp" Align="right">欢迎摄影爱好者参观 <Br>
<img src="images/next.bmp" Align="absmiddle">欢迎摄影爱好者参观
</BODY>
</HTML>
45
3.4 图文并茂的文件
3.4.4 图形或文字说明,<img>标记在 HTML中是一个非常特殊的标记，因为它只有起始标记而没有结束标记。所以，请注意！在 HTML文件中不要加入 </img>这个标记。
执行结果如图所示
46
3.4 图文并茂的文件
3.4.5 对象居中不论是文字对象或是图形对象，默认值都是靠左显示，但是 HTML也提供对象居中的显示方式，其标记为 <center>…</center>,在 <center>与 </center>之间的任何对象均会被居中编排输出。例如：
<center>文字居中 </center>
或
<center><img src="logo.gif" alt="图形居中 "></center>
47
3.5 超级链接超级链接的概念,
所谓超级链接 (Hyperlink),就是当用鼠标点选文字、图片时，可以链接文字或图片到其他网页的功能
(可跨网站链接 ),而超级链接又可分为文字超级链接和图片超级链接。
48
3.5 超级链接
3.5.1 文字超级链接
3.5.2 图片超级链接
3.5.3 页内超级链接
3.5.4 超级链接电子邮件账号
49
3.5 超级链接
3.5.1 文字超级链接如果要让网页中的某一段文字成为超级链接，只要在链接标题前后分别加入 <a href=“URL”>及 </a> 两个标记就可以了。范例 (page3_15.htm)如下,
<html>
<head>
<title>超链接 </title>
</head>
<body>
找工作、找人才，请单击 <A HREF=http://www.hlfjob.com.cn>
hlfjob人才求职网 </A>
</body>
</html>
50
3.5 超级链接
3.5.1 文字超级链接结果显示如图所示。
当用户点选,hlfjob人才求职网”的超级链接时，
将超级链接至 http://www.hlfjob.com.cn。
51
3.5 超级链接
3.5.2 图片超级链接图片超级链接的语法，大致上与文字超级链接相同，
只是链接标题的部分改为图片。插入图片的方式是在 <a
href=“URL”>与 </a>之间加入 <img src=“图形文件名称” >,范例 (page3_16.htm)如下,
<html>
<head>
<title>图片超链接 </title>
</head>
<body>
<A HREF="http://www.hlfjob.com.cn"><img src="images/02.bmp"
alt=“hlfjob人才求职网” border=“0” align=absmiddle>hlfjob人才求职网 </A>
</body>
</html>
52
3.5 超级链接
3.5.2 图片超级链接
Internet Explorer浏览器中的显示效果如下图所示。
当用户点选,02,bmp”图片或,hlfjob人才求职网”
文字的超级链接时，将超级链接至
http://www.hlfjob.com.cn。
53
3.5 超级链接
3.5.3 页内超级链接除了文字与图形的链接以外，超级链接也可以发生在同一个网页之中，也就是文件内部的自我链接，此种链接方式比较适合长篇幅的网页。通常网页设计师会在页首标明网页的主题 (Subject)，通过点选主题的方式，
让光标直接移到主题所指的内容部分，减少用户拖动滚动条或点击滚动条的次数。
下面是一篇 HTML电子图书的网页，在,USB 接口应用指南”题目下方为同一网页内容中的所有主题，见下页图示。
说明：该范例 (page3_17.htm) HTML源代码内容太多，在此略去。
54
3.5 超级链接
3.5.3 页内超级链接网页内超级链接的 HTML语法，与外部超级链接的用法是相同的，惟一不同的是链接的标题若为同一网页，则必须使用页内链接的方式来处理，其页内链接的表示方式，是使用
,#”字符加上标记名称，例如：
<a href=“#1”>一、让电脑支持
USB </a>
当我们点选“一、让电脑支持 USB”的主题后，画面自动移至该主题上，如下页图所示。
55
3.5 超级链接
3.5.3 页内超级链接为了配合上述的页内链接，此主题须加上页内标记名称。如此，
当用户点选该主题时，
浏览器才能识别要将页面移往何处。页内标记的用法如下：
<a name=“#1”>一、让电脑支持 USB</a>
56
3.5 超级链接
3.5.4 超级链接电子邮件账号超级链接也可指定与用户计算机默认的电子邮件软件进行链接，以利于与电子邮件集成。例如在网页的页尾通常会摆放网站的服务信箱，如下图所示。
网站服务信箱
57
3.5 超级链接
3.5.4 超级链接电子邮件账号当用户点选该信箱时，会自动启动用户计算机内部默认的电子邮件软件 (例如 Outlook,Outlook Express等 )，
并将其 E-mail地址放在收件人位置，如下图所示。
E-
mail
地址
58
3.5 超级链接
3.5.4 超级链接电子邮件账号链接电子邮件是使用,mailto:”，后面加上电子邮件账号而成；要链接电子邮件软件时，若有参数要自动带至电子邮件软件时 (如电子邮件主题 )，则可由 URL带参数来完成。范例 (page3_19.htm)如下,
<html>
<head>
<title>超级链接电子邮件 </title>
</head>
<body>
<a href=“mailto:tjhldgz@tj139.com.cn?subject=建议
">tjhldgz@tj139.com.cn</a>
</body>
</html>
59
3.5 超级链接
3.5.4 超级链接电子邮件账号在 Internet Explorer中浏览的效果如下图所示。
当点选邮件账号后,Outlook Express将自动被启动，
且“主题,已自动填入“建议”等文字，如下页图所示。
60
3.5 超级链接
3.5.4 超级链接电子邮件账号自动填入
“建议”等文字
61
3.5 超级链接
3.5.4 超级链接电子邮件账号电子邮件软件的相关参数很多，例如：抄送 (CC)、
主题 (Subject)及信件内容等，都可以使用 URL指定，要注意的是参数与参数之间须以,&”符号隔开，范例的
HTML源代码 (page3_20.htm)如下：
<html>
<head>
<title>超级链接电子邮件 </title>
</head>
<body>
<a href="mailto:tjhldgz@tj139.com.cn?subject=建议 &body=how
do you do &cc=hli">tjhldgz@tj139.com.cn</a>
</body>
</html>
62
3.5 超级链接
3.5.4 超级链接电子邮件账号范例 (page3_20.htm)在 Internet Explorer中运行效果如下图所示。
当用户点选后，在 Outlook Express自动被启动时，相关的字段已自动填入适当的值，如下页图所示。
63
3.5 超级链接
3.5.4 超级链接电子邮件账号相关的字段已自动填入适当的值
64
3.6 表格在 HTML输出编排的标记当中，并没有指定显示位置的功能 (例如文字要显示在 x坐标等于 5,y坐标等于 100
处 )，因此对于复杂的版面就无法精确地编辑，此时只好通过表格来定位。
在 HTML中表格可以用来定位。在 HTML中表格的起始标记为 <table>，结束标记为 </table>，完整的 <table>
标记语法如下：
<table border="0" cellspacing="0" cellpadding="0"
bordercolor="#0000ff">
：
</table>
实际上，表格又可分为列 (Column)和行 (Row)。竖的称为 Column，横的我们称为 Row。
65
3.6 表格
3.6.1 行与列
3.6.2 行与列的背景颜色
3.6.3 表格边框的颜色
3.6.4 表格间距
3.6.5 合并单元格
66
3.6 表格
3.6.1 行与列行的标记 <tr>...</tr>必须配合表格使用,<tr>与
</tr>之间代表一行。一般在编写表格时，必须先写行，
然后再写列于其中，范例 (page3_21.htm)如下：
<html> <td>第二行，第一列 </td>
<head> <td>第二行，第二列 </td>
<title>HTML的表格 </title> <td>第二行，第三列 </td>
</head> </tr>
<body> <tr>
<table border="1"> <td>第三行，第一列 </td>
<tr> <td>第三行，第二列 </td>
<td>第一行，第一列 </td> <td>第三行，第三列 </td>
<td>第一行，第二列 </td> </tr>
<td>第一行，第三列 </td> </table>
</tr> </body>
<tr> </html>
这是一个 3行 3
列 (3× 3)的表格
67
3.6 表格
3.6.1 行与列利用 Internet Explorer来观看的结果如下图所示。
说明,tr 是 table row的意思,td 是 table data的意思。
68
3.6 表格
3.6.2 行与列的背景颜色在 IE浏览器中,<tr> 及 <td> 标记均可以指定背景颜色，使用的原则是同一行的背景相同则在 <tr> 中指定。
例如,<TR BGCOLOR=blue>
<TD>...</TD>
<TD>...</TD>
</TR>
若每一列的颜色均不相同，则可以在 <TD>中指定颜色。例如：
<TR>
<TD BGCOLOR=red>...</TD>
<TD BGCOLOR=green>...</TD>
<TD BGCOLOR=blue>…</TD>
</TR>
69
3.6 表格
3.6.3 表格边框的颜色
HTML表格的边框 (Border)若未指定，其默认值为 0，
也即无边框。要显示出表格,Border 的值必须大于 0，至于边框的颜色可以使用 BorderColor 属性来指定，其用法范例 (page3_22.htm)如下：
<html> <td>第二行，第一列 </td>
<head> <td>第二行，第二列 </td>
<title>表格边框的颜色 </title> <td>第二行，第三列 </td>
</head> </tr>
<body> <tr>
<table border="1" BorderColor="#0000FF"> <td>第三行，第一列 </td>
<tr> <td>第三行，第二列 </td>
<td>第一行，第一列 </td> <td>第三行，第三列 </td>
<td>第一行，第二列 </td> </tr>
<td>第一行，第三列 </td> </table>
</tr> </body>
<tr> </html>
70
3.6 表格
3.6.3 表格边框的颜色利用浏览器 Internet Explorer观看时，其显示的效果如下图所示。
71
3.6 表格
3.6.4 表格间距在 HTML中，表格间距有两个选项，一个是定义表格间的距离 (CellSpacing)，默认值为 2；另一个是定义表格内的字符与表格边界本身的距离 (CellPadding)，默认值为 1，未设置 CellSpacing和 CellPadding时的效果如图所示。
72
3.6 表格
3.6.4 表格间距当设置 cellspacing=“5”和 cellpadding=“10”时的效果如下页图所示。
73
3.6 表格
3.6.4 表格间距若我们将上述两个属性都改为,0”，则其显示效果如下图所示。
74
3.6 表格
3.6.5 合并单元格虽然表格是由列 (Column) 和行 (Row) 所组成的，
但却不一定是固定的个数，有时候我们必须使用合并表格的功能，合并表格又可分为：行合并与列合并两种，合并的原则为由上到下、由左到右。
1,合并列假如某一列横跨 3个列 (占 3个列的空间 )，则可以在 <td> 标记的属性 colspan=n，指定占用的列数，范例 (page3_25.htm) HTML代码见下页：
75
3.6 表格
3.6.5 合并单元格
<html><head>
<title>合并列 </title></head>
<body><table border="1" bordercolor="#0000FF">
<tr><td>
第一行，第一列 </td><td>
第一行，第二列 </td><td>
第一行，第三列 </td><td>
第一行，第四列 </td></tr>
<tr><td colspan="3">
第二行，本列占 3列 </td><td>
第二行，第四列 </td></tr>
</table></body>
</html>
76
3.6 表格
3.6.5 合并单元格利用 Internet Explorer来观看的结果如下图所示。
colspan="3",
本列占 3列
77
3.6 表格
3.6.5 合并单元格
2,合并行可以在 <td> 标记的属性 rowspan=n，指定占用的行数，范例
(page3_26.htm) HTML代码如下：
<html> </tr>
<head> <tr>
<title>合并行 </title> <td>第三行，第二列 </td>
</head> <td>第三行，第三列 </td>
<body> <td>第三行，第四列 </td>
<table border="1" bordercolor="#0000FF"> </tr>
<tr> <tr>
<td rowspan=3>第一行，本列纵跨 3行 </td> <td>第四行，第一列 </td>
<td>第一行，第二列 </td> <td>第四行，第二列 </td>
<td>第一行，第三列 </td> <td>第四行，第三列 </td>
<td>第一行，第四列 </td> <td>第四行，第四列 </td>
</tr> </tr>
<tr> </table>
<td>第二行，第二列 </td> </body>
<td>第二行，第三列 </td> </html>
<td>第二行，第四列 </td>
78
3.6 表格
3.6.5 合并单元格执行结果如图 3.32所示。
rowspan=3,本列纵跨 3行
79
3.7 段落
HTML是当初科学家们用来在网络上发表研究成果的工具，而研究成果不外乎是一些技术性的文件，因此
HTML在设计之初即有段落标记的定义，段落标记是以
<p>开始，而以 </p>为结束标记。
80
3.7 段落范例 (page3_27.htm)如下,
<html>
<head> <title>html段落 </title> </head>
<body>
<p>让电脑支持 USB</p>
<p>现在的大部分电脑带有 USB 端口。一些老式主板和机箱中也有 USB 连接器，但可能不起作用。所以一定要检查主板或电脑操作手册，以便查出怎样使 USB 工作。在老式电脑上，可以在启动时查看电脑的 BIOS，以确定它是否支持 USB。为了使 USB 键盘或鼠标在 DOS 状态下工作，应该选择 USB
Legacy 支持选项 (如果有该选项的话 )。如果该主板不能接入 USB 设备，你就应该买一块 PCI 卡，以便将 USB 插槽添加到老式电脑中。 </p>
<p>让 Windows 系统支持 USB</p>
<p>并非所有的 Windows 版本都支持 USB。 Windows98 对很多外设都提供了全面的 USB支持。 Windows95 的零售版则不支持 USB，只有后来与 PC 捆绑销售的 Windows95 版本才支持 USB。你可以看看你的 Windows95 版本信息
(可右击“我的电脑”图标并选择“属性” )，如果版本号是以 B 或者 C 结尾，
则你的这个 Windows 95 只对有限范围的设备提供 USB 支持。 </p>
</body>
</html>
81
3.7 段落显示的效果如下图所示。
在段落中也可以指定段落对齐方式，如靠左 (Left)、靠右
(Right)以及居中 (Center)等，其用法如下：
<p align="left">段落文字 </p>
说明：使用段落标记 <p>…</p>,浏览器会自动在段落后面插入一空白行 (这就是段落的定义 )。
82
3.8 水平线
<hr> 标记是提供 HTML画水平线的功能，并可指定水平线的宽度、大小等。其语法如下：
<hr size="线的粗细 " width="宽度 ">
其中“宽度”可指定水平线的点数，也可指定显示屏幕宽度的百分比。例如：
<hr size=“1” width=“80%”>?显示 Size为 1，宽度为浏览器画面 80%的水平线
<hr size="1" width="480"> '显示 Size为 1，宽度为 480
pixel的水平线
83
3.8 水平线
<hr> 标记的用法范例 (page3_28.htm) HTML代码如下：
<html>
<head>
<title>水平线 </title>
</head>
<body>
<hr size="1" width="70%">
<hr size="2" width="80%">
<hr size="3" width="90%">
<hr size="1" width=150>
<hr size="2" width=200>
<hr size="3" width=250>
</body>
</html>
84
3.8 水平线利用 Internet Explorer来观看结果如下图所示。
说明：宽度若用屏幕宽度的百分比显示，将随屏幕宽度的变化而变化。
85
3.8 水平线在实际应用上，通常是用水平线将文本与页尾分隔开，并在水平线下方显示版权声明或服务信箱等，请参考下图。
86
3.9 什么是 CSS
CSS是 Cascading Style Sheet的缩写，中文译为
“层叠样式表”。 CSS样式表可以定义网页相关组件的各种属性变化，例如文字背景、字体、字体大小、
对齐方式等，它也可以创建一个共同的样式表，让网站的相关网页直接套用，完全跳脱 HTML语法及输出编排上的束缚。让网页更具视觉效果，并可大幅度节省维护的时间。
在 HTML4.0版以后，每一个 HTML的标记 (Tag)都有一个 Class属性,Class的值须套用 CSS的定义，方可做出各种精确的排版及样式指定的功能，令 HTML输出的画面变得非常的精美及细致。
87
3.9 什么是 CSS
3.9.1 CSS类型
3.9.2 CSS在超级链接中的运用
3.9.3 实际范例
88
3.9 什么是 CSS
3.9.1 CSS类型在 HTML网页中,CSS有下列 3种不同的使用类型：
● 内嵌 CSS
将 CSS的定义 <style>…</style> 写在 HTML源代码
<head>…</head> 标记之间，样式表的有效范围仅为此份 HTML
文件。
● 局部套用 CSS
此类型的 CSS与特定的 HTML标记合并使用，它与内嵌 CSS
最大的不同是局部套用仅会影响套用该段的样式，而不会影响其他非套用的部分。
● 外部链接 CSS
外部链接 CSS是将样式表以单独的文件存放，令网站的所有网页均可套用此样式，以降低维护的人力成本，并可让网站拥有一致性的风格。
89
3.9 什么是 CSS
3.9.1 CSS类型
1,内嵌 CSS
范例 (page3_30.htm) HTML代码如下：
<html><head>
<style type="text/css"><!--
.style1 {font-family,"宋体 "; font-size,11pt; color,#000000;}-->
</style><title>CSS范例 -01</title>
<meta http-equiv="Content-Type" content="text/html" charset="GB2312"></head>
<body><p class="style1">CSS让网页美丽、大方、又好维护！ </p>
</body></html>
90
3.9 什么是 CSS
3.9.1 CSS类型在浏览器的显示效果如下图所示。
修改样式表 style1，将字体大小改为 9点，并将颜色改为蓝色，
显示效果如下图所示。
91
3.9 什么是 CSS
3.9.1 CSS类型
2,局部套用 CSS
不同的浏览器对 HTML标记的输出编排格式均不相同，
通过局部套用 CSS 的功能，可以重新定义 HTML标记的输出样式。例如 HTML的段落标记 <p>，利用“局部套用
CSS”的定义，可以让 <p>标记按照 CSS的定义输出。
范例 (page3_32.htm) HTML代码请见下页。
92
3.9 什么是 CSS
3.9.1 CSS类型
<html>
<head>
<style type="text/css">
<!--
p {font-family,"宋体 "; font-size,11pt; color,#0000ff;}
-->
</style>
<title>CSS范例 -03</title>
<meta http-equiv="Content-Type" content="text/html"
charset="GB2312">
</head>
<body>
<p>CSS让网页美丽、大方、又好维护！ </p>
</body>
</html>
93
3.9 什么是 CSS
3.9.1 CSS类型执行结果如下图所示。
若要同时定义多个 HTML标记的样式，例如 <p>与
<pre>标记，则可以使用范例 (page3_33.htm) 的语法。
其 HTML代码请见下页。
94
3.9 什么是 CSS
3.9.1 CSS类型
<html>
<head>
<style type="text/css">
<!--
p,pre {font-family,"宋体 "; font-size,11pt; color,#0000ff;}
-->
</style>
<title>CSS范例 -04</title>
<meta http-equiv="Content-Type" content="text/html" charset="GB2312">
</head>
<body>
<p>CSS让网页美丽、大方、又好维护！ </p>
<pre>
预先编排的输出格式，也可以套用 CSS
套用的方法请见源代码 (css-04.htm)。
</pre>
</body>
</html>
95
3.9 什么是 CSS
3.9.1 CSS类型执行结果如下图所示。
说明：样式名称若是 HTML的标记，请勿在样式名称前加上,.”。
96
3.9 什么是 CSS
3.9.1 CSS类型
3,外部链接 CSS
也可以使用记事本等编辑样式表，并另外以一个新的文件存放 (例如 common.css),则使用到此样式表的
HTML 文件均可以外部链接的方式引用。外部链接的
HTML语法如下：
<link rel="stylesheet" href="common.css">
其中 <link>标记为外部链接,rel参数必须指定链接的文件类型，此处为样式表,stylesheet”，样式表的文件由 href属性中指定 (此例为 common.css)。引用方式请参考范例 (page3_34.htm),其 HTML代码请见下页。
97
3.9 什么是 CSS
3.9.1 CSS类型
<html>
<head>
<link rel="stylesheet" href="common.css">
<title>CSS范例 -05</title>
<meta http-equiv="Content-Type" content="text/html“
charset="GB2312">
</head>
<body>
<p>CSS让网页美丽、大方、又好维护！ </p>
<pre>
预先编排的输出格式，也可以套用外部的 CSS文件，
套用的方法请见源代码 (css-05.htm)。
</pre>
</body>
</html>
98
3.9 什么是 CSS
3.9.1 CSS类型执行结果如下图所示。
99
3.9 什么是 CSS
3.9.2 CSS在超级链接中的运用
CSS除可重新定义 HTML标记以外，对于 HTML的超级链接标记
<a>提供更多的选项。
<html>
<head>
<style type="text/css">
<!--
.small { font-family,"宋体 "; font-size,9pt; vertical-align,middle; line-
height:16pt;}
.topic { font-family,"宋体 "; font-size,11pt; vertical-align,middle; line-
height:16pt;}
a:link {color:#0F56A3; font-style:normal;
cursor:hand; text-decoration:normal}
a:visited {color:#0F56A3; font-style:normal; text-decoration:normal}
a:active {color:#0F56A3; font-style:normal; text-decoration:normal}
a:hover {color:#CC0000; font-style:bold; text-decoration:none}
-->
</style>
：
10
0
3.9 什么是 CSS
3.9.2 CSS在超级链接的运用上述的语法中,link为指定超级链接的样式； visited定义已点选过的超级链接样式； active则代表动作中的超级链接样式，
hover则为鼠标光标移至超级链接时的样式。请参考下面的写法：
<html>
<head>
<style type="text/css">
a:link {color:#0000ff; font-style:normal;
cursor:hand; text-decoration:normal}
a:visited {color:#ff0000; font-style:normal; text-decoration:normal}
a:active {color:#0000ff; font-style:normal; text-decoration:normal}
a:hover {color:#cc0000; font-style:bold; text-decoration:none}
</style>
<title>CSS范例 -06</title>
</head>
<body>
<a href="#link">超级链接测试 </a>
</body>
</html>
101
3.9 什么是 CSS
3.9.3 实际范例
1,CSS入门范例下面是铁道出版社出书的 HTML网页界面。
10
2
3.9 什么是 CSS
3.9.3 实际范例该网页 HTML源代码 (page3_35.htm)如下 (部分 ),
<html>
<head>
<style type="text/css">
<!—
.small {font-family:"宋体 "; font-size:9pt;
vertical-align:middle; line-height:16pt;}
.topic {font-family:"宋体 ";font-size:11pt;
vertical-align,middle; line-height:16pt;}
a:link {color:#0F56A3; font-style:normal;
cursor:hand; text-decoration:normal}
a:visited {color:#0F56A3; font-style:normal; text-decoration:normal}
a:active {color:#0F56A3; font-style:normal; text-decoration:normal}
a:hover {color:#CC0000; font-style:bold; text-decoration:none}
-->
</style>
：
10
3
3.9 什么是 CSS
3.9.3 实际范例其中,small代表定义一个称为 small的样式，此样式的字体 (font-family,"宋体,)为宋体，字体大小 (font-
size:9pt;)为 9pt，垂直对齐 (vertical-align,middle)在中间，
行高 (line-height:16pt;)为 16pt。 a:link的 a为 HTML的 <a>
标记,link代表超级链接的设置。
说明,a与 link之间以冒号,:”隔开。
● 表头套用 CSS设置表头套用 CSS样式的写法如下：
<tr bgcolor="#B4B4DA">
<td align="center" class="topic" colspan="4" >
中国铁道出版社特别推荐 </td>
</tr>
10
4
3.9 什么是 CSS
3.9.3 实际范例
● 标题引用 CSS方式在表格中引用 CSS，需特别考虑 CSS套用的位置，
如过整行 (Row)采用相同的样式时,class属性请置于
<tr>标记中，若表格中每一列的项目均需套用不同的样式，则 class属性至于 <td>标记。本例为同一行套用相同样式：
<tr bgcolor="#e0dcc3" class="small">
<td>书号 </td>
<td>书名 </td>
<td>作者 </td>
<td>出版社 </td>
</tr>
10
5
3.9 什么是 CSS
3.9.3 实际范例
● 段落与 CSS
前面提及 HTML自 4.0版以后，每一个标记均可使用
class属性，段落 (Paragraph) 标记也不例外，其定义及使用方式与前述相同。使用范例如下：
<p align=“center” class=“small”>
※ 中国铁道出版社，欢迎读者选购。
</p>
10
6
3.9 什么是 CSS
3.9.3 实际范例
● 3D的表格框在 HTML文件中，经常使用表格进行数据的格式化编排及定位。一般表格均以 2D的方式展现，很少看到
3D显示效果的表格。其实在 HTML的 <table>标记中，
可以使用 BorderColorLight(边框亮色部分的颜色 )及
BorderColorDark(边框阴影部分的颜色 )让表格看起来具有 3D的显示效果，这两个属性也可用于 <tr>及 <td>标记中。下面是 3D表格的 HTML范例：
<table border="1" cellspacing="0" cellpadding="1"
bordercolorlight="#dfdfdf"
bordercolordark="#ffffff" align="center">
107
3.9 什么是 CSS
3.9.3 实际范例
2,CSS高级范例利用标准的 HTML语法制作网页，当文件的长度超过一页以上时，浏览器的滚动条 (ScrollBar) 就会自动启动，且整个页面会随着滚动条的移动而移动，而无法将某些信息显示在某一特定位置。目前却有许多网站利用
JavaScript提供这样的功能，并把它利用在广告商品的用途上面，相当具有创意。
通过 CSS样式表的定义也可以达到一样的功能。下面是笔者将看到的有关鲜奶酪制作过程编写成 HTML网页，并利用 CSS样式表的定义将 Windows XP图标做成固定显示位置的广告。
10
8
3.9 什么是 CSS
3.9.3 实际范例该网页 HTML源代码 (page3_36.htm)如下 (部分 ),
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{
font-family:"宋体 ";
font-size:11pt;
color:blue;
background-color:white;
background-image:url(images/caoyao.jpg);
background-repeat:no-repeat;
background-position:96% 4%;
background-attachment:fixed;
}
</STYLE>
：
10
9
3.9 什么是 CSS
3.9.3 实际范例输出结果如下图所示。
110
3.9 什么是 CSS
3.9.3 实际范例当使用滚动条将画面下拉时,caoyao.jpg图形文件
(草药照片 )固定在画面的右上角的位置上不动 (文字压在图的上方 )，如下图所示。
111
3.9 什么是 CSS
3.9.3 实际范例
● 样式表说明
font-family：指定文字显示时采用的字体名称，若同时指定多个字体名称，浏览器会依序搜寻相关字体名称。
指定多个字体的语法格式如下：
font-family,"字体名称 1","字体名称 2",...,"字体名称 n";
font-size：设置文字显示的字体大小 (用户可自定 )，在
Windows操作系统下显示中文。建议您采用宋体，并使用 9pt或 11pt的字体大小，因为宋体的字体为固定字，
中英文混合编排较整齐，而以 9pt及 11pt显示的宋体文字较美观。
112
3.9 什么是 CSS
3.9.3 实际范例
color：定义文字显示的颜色，默认值为黑色。 color颜色的指定可以使用 RGB三原色或以系统内置的常数表示。例如,color:"#0000ff"; color:blue;
说明：,#0000ff”在 RGB三原色的值为蓝色，您也可以使用 blue代表蓝色。
background-color：背景颜色的语法如下，它可以改变浏览器默认的背景颜色，初始值为透明 (Transparent)。
background-color:<color> | transparent
background-image：可用以设置背景图片，但是背景图必须以 url描述。语法如下：
background-image:<url> | none
113
3.9 什么是 CSS
3.9.3 实际范例范例 (page3_37.htm)如下：
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{
background-image:url(images/caoyao.jpg);
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
114
3.9 什么是 CSS
3.9.3 实际范例执行结果如下图所示。
115
3.9 什么是 CSS
3.9.3 实际范例
background-repeat,明确地定义如何展现背景图。语法如下：
background-repeat:repeat| no-repeat | repeat-x | repeat-y;
每一个属性的说明如下表所示。
属 性 说 明
repeat 将图形当成背景的桌布显示
ro-repeat 仅显示单一图形，默认值为左上方
repeat-x 设置图形在 x轴上重复出现
repeat-y 设置图形在 y轴上重复出现
116
3.9 什么是 CSS
3.9.3 实际范例下面是 bjtu.jpg图文件在 x轴上重复出现的范例
(page3_38.htm),
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{background-image:url(images/bjtu.jpg);
background-repeat:repeat-x;}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
117
3.9 什么是 CSS
3.9.3 实际范例执行结果如下图所示。
118
3.9 什么是 CSS
3.9.3 实际范例下面则是 bjtu.jpg图文件在 y轴上重复出现的范例
(page3_39.htm),
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{background-image:url(images/bjtu.jpg);
background-repeat:repeat-y;}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
119
3.9 什么是 CSS
3.9.3 实际范例执行结果如下图所示。
12
0
3.9 什么是 CSS
3.9.3 实际范例
background-position：如果背景图不以前述的 repeat控制的话，可以使用 background-position设置背景图的显示位置。语法如下：
background-position:[<percentage>] | [[top | center |
bottom] || [left | center | right]]
例如本例中的 background-position,96% 4%;是将图形显示于 x轴 96%处,y轴 4%处。若要将图形显示于画面中央，其用法范例 (page3_40.htm)见下页：
121
3.9 什么是 CSS
3.9.3 实际范例
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{
background-image:url(images/bjtu.jpg);
background-repeat:no-repeat;
background-position:center center;
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
122
3.9 什么是 CSS
3.9.3 实际范例执行结果如图所示。
background-attachment,fixed; 此设置与背景图有关，语法如下：
background-attachment:scroll | fixed;
此属性的值如果采用 fixed的话，图形不会随滚动条的移动而移动，系统默认值为 scroll。此为本范例中，制作固定背景图功能中，最关键的 CSS样式定义。
12
3
第 3章 HTML简介看完本章的 HTML与 CSS的介绍,相信您对 HTML已经有进一步的了解,至于 CSS样式表部分,请读者再自行练习,有利于您将来制作易维护,美观及低带宽需求的网页 。
ASP动态网页设计教程
2
第 3章 HTML简介
3.1 什么是 HTML
3.2 背景设置
3.3 文字属性的变化
3.4 图文并茂的文件
3.5 超级链接
3.6 表格
3.7 段落
3.8 水平线
3.9 什么是 CSS
3
3.1 什么是 HTML
HTML全名为 Hyper Text Markup Language，中文译为超文本标记语言，这是创建网页的脚本语言，
它提供了精简而有力的文件定义，使我们可以设计出多姿多彩的超媒体文件 (Hypermedia Document)，通过
HTTP(Hyper Text Transfer Protocol)通讯协议，使得
HTML文件可以在全球互联网 (World Wide Web，
WWW)上进行跨平台的文件交换。
HTML文件为纯文本的文件格式，可以用任何的文本编辑器来编辑,HTML是以标记来描述文件中的多媒体信息。
4
3.1 什么是 HTML
3.1.1 HTML文件
3.1.2 HTML组成的基本组件
5
3.1 什么是 HTML
3.1.1 HTML文件
HTML文件的结构是由 HEAD 及 BODY 两大部分所组成，如下图所示。
6
3.1 什么是 HTML
3.1.2 HTML组成的基本组件
<html>…</html>
此标记必须分别置于 HTML文件的开头和结尾，其主要的功能是告诉浏览器 (Browser)这是 HTML文件，且文件是由起始标记 <html>开始，至结束标记 </html>结束。
<head>…</head>
此标记为文件的表头区，主要作用是用来描述关于网页的相关信息，例如编码方式、网页的标题等。
<body>…</body>
网页输出编排的重头戏几乎全部放在 <body>与 </body>之间，凡在网页上显示的各种文字或图片等，均必须置于这一标记的范围内。
7
3.1 什么是 HTML
HTML文件范例 (page3_1.htm)
<HTML>
<HEAD>
<TITLE>HTML第一步 </TITLE>
</HEAD>
<BODY>
How do you do!
</BODY>
</HTML>
执行结果如图所示。
8
3.2 背景设置在 HTML中，可以自行定义网页的背景颜色或以某张图片填满网页的背景，而这些设置必须在 <body> 的属性里进行，其用法如下：
<body text=“blue” link=“red”
vlink=“black” alink=“green”
bgcolor=“white” background=“images/bg.jpg”>
</body>
Body的相关属性说明请见下页表所示。
9
3.2 背景设置属 性 说 明
Text =“颜色值,
设置网页默认的字体颜色，对于没有特别指定颜色的文字，都以此设置为准。颜色值有两种表示方式，第一种为常数表示方式，
例如 red代表红色,yellow代表黄色等。另一种表示方式为 RGB三原色的表示，颜色值是以三组十六进制的 RGB数值来表示（十六进制的前导字符为,#”），颜色值的格式如下,#RRGGBB”，例如红色的值为,#FF0000”，绿色的值为,#00FF00”，蓝色的值为
,#0000FF”
Link =“颜色值,超级链接文字的字体颜色，默认值为蓝色加下划线的字，颜色的指定方法同上
Vlink =“颜色值,已点击（ Click）过的超级链接文字的字体颜色
Bgcolor =“颜色值,指定网页的背景颜色，仅能指定单一颜色（无法指定渐变的颜色）
Background =“图形名,
指定背景图将使图片充满整个浏览器的显示区，背景图片的格式以浏览器支持的图形格式为主，通常为,jpg或,gif的图形，目前有许多浏览器已支持 Kodak所发表的,png文件格式。若 bgcolor与
background同时指定，浏览器以 background的设置为主
10
3.2 背景设置说明：浏览器对于每一个标记均有默认值，因此，上述的参数如果都不设置，也不会影响网页正常的显示。理论上不设置背景及字体颜色，反而会加速网页的下载速度，像鼎鼎大名的 Yahoo，其网页都是不设置背景颜色。如下图所示：
11
3.3 文字属性的变化
HTML允许我们对文件中的文字做各种的变化,这些变化就如同使用 Word设置文字的属性一样,可以设置文字的大小,颜色,使用的字体名称及字体样式等,
详细的使用说明分述如下 。
12
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色
3.3.2 文字的样式
3.3.3 空格符
3.3.4 换行
3.3.5 预先编排好的文字
3.3.6 编号及项目符号
13
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色在 HTML中我们可以使用 <font>…</font> 标记设置文字属性，它的语法如下：
<FONT FACE="字体名称 " SIZE="字体大小 " COLOR="颜色 ">
显示的文字 </FONT>
HTML当初定义时，将字体由小到大排列，分为 1～
7个等级 (字体的大小视浏览器的定义而异 )，若不设置字体大小，其默认值为 3。此外，字体大小也可以以 3为基准用相对大小来表示，例如,+1代表 4； -2代表 1；以此类推。
14
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色设置文字属性范例 (page3_2.htm)如下：
<html>
<head>
<title>设置文字属性 </title>
</head>
<body>
<font face="宋体 " size="4" color="blue"> 文字之美 </font>
</body>
</html>
15
3.3 文字属性的变化
3.3.1 设置文字的字体、大小及颜色上述范例在 Microsoft Internet Explorer浏览器中输出的画面如下图所示。
16
3.3 文字属性的变化
3.3.2 文字的样式
HTML 文件提供的文字样式有粗体字、斜体字、及加下划线等 3种样式，且样式可混合指定使用，其使用方法如下：
粗体字,<B>粗体字 </B>
斜体字,<I>斜体字 </I>
加下划线,<U>加下划线 </U>
粗体字 +斜体字,<B><I>粗体字 +斜体字 </I></B>
粗体字 +加下划线,<B><U>粗体字 +加下划线 </U></B>
文字的样式范例 (page3_3.htm)见下页：
17
3.3 文字属性的变化
3.3.2 文字的样式
<HTML>
<HEAD>
<TITLE>文字的样式 </TITLE>
</HEAD>
<BODY>
<B>粗体字 </B>
<I>斜体字 </I>
<U>加下划线 </U>
<B><I>粗体字 +斜体字 </I></B>
<B><U>粗体字 +加下划线 </U></B>
<I><U>斜体字 +加下划线 </U></I>
</BODY>
</HTML>
18
3.3 文字属性的变化
3.3.2 文字的样式在 Microsoft Internet Explorer浏览器中，输出的画面如下图所示。
19
3.3 文字属性的变化
3.3.3 空格符在 HTML中，空格符并不具有调整间距的功能 (连续出现多个空格符时，仅第一个空格符有效 )，若要正确的使用空格符，请改用 HTML空格符的编码值 ( )，这样才能完成空格符的功效，例如 (page3_4.htm)：
<html>
<head>
<title>空格符 </title>
</head>
<body>
第一行 前面按了三次空格符 改用三个编码值  
</body>
</html>
20
3.3 文字属性的变化
3.3.3 空格符执行结果如下图所示,
这里按了 3 次空格符，
结果只出现一个空格改用 3 个编码值 则在结果中出现了 3个空格。
21
3.3 文字属性的变化
3.3.4 换行在 HTML文件中，换行必须使用 <br>标记，范例如下：
page3_5.htm
<html>
<head>
<title>换行 </title>
</head>
<body>
第一行
<BR>
第二行我不换行
</body>
</html>
执行结果如图所示。
22
3.3 文字属性的变化
3.3.5 预先编排好的文字可以使用 <pre>…</pre> 标记，将已编辑好的文件置于此标记之中，它就可以按照您所想要的格式输出。
范例 page3_6.htm:
<html>
<head>
<title>预先编排好的文字 </title>
</head>
<body>
<pre>
现在我想换行就换行，
再也不用看 HTML的脸色了。
就算没有 <BR>标记也没关系
</pre>
</body>
</html>
23
3.3 文字属性的变化
3.3.5 预先编排好的文字执行结果如下图所示,
24
3.3 文字属性的变化
3.3.6 编号及项目符号
1,编号在 HTML文件中项目编号是以 <ol>…</ol> 标记并搭配 <li>…</li> 标记表示。项目编号的用法如下：
范例 page3_7.htm:
<html> <ol>
<head> <li>雄壮 </li>
<title>编号 </title> <li>威武 </li>
</head> </ol>
<body> </body>
男生要 </html>
25
3.3 文字属性的变化
3.3.6 编号及项目符号执行结果如下图所示。
26
3.3 文字属性的变化
3.3.6 编号及项目符号
<ol> 标记还可以 TYPE 属性设置不同的项目编号，
可用的 TYPE属性值如下表所示。
属性值 说 明
“A” 项目符号为 A,B,C,……
“a” 项目符号为 a,b,c,……
“I” 项目符号为 I,II,III,……
“i” 项目符号为 i,ii,iii,……
“1” 项目符号为 1,2,3,……( 默认值 )
27
3.3 文字属性的变化
3.3.6 编号及项目符号范例 page3_8.htm:
<html> </ol>
<head> 女生要
<title>不同的项目编号 </title> <ol type="i">
</head> <li>温柔 </li>
<body> <li>贤淑 </li>
男生要 </ol>
<ol type="I"> </body>
<li>雄壮 </li> </html>
<li>威武 </li>
28
3.3 文字属性的变化
3.3.6 编号及项目符号执行结果如下图所示。
29
3.3 文字属性的变化
3.3.6 编号及项目符号
2,项目符号项目符号是以特定的字符为编号，在 HTML文件中是以 <ul>…</ul> 标记表示，并须搭配 <li>...</li>标记使用。
项目符号的用法 (范例 page3_9.htm)如下：
<html> </ul>
<head> 女生要
<title>项目符号 </title> <ul>
</head> <li>温柔 </li>
<body> <li>贤淑 </li>
男生要 </ul>
<ul> </body>
<li>雄壮 </li> </html>
<li>威武 </li>
30
3.3 文字属性的变化
3.3.6 编号及项目符号执行结果如下图所示。
31
3.4 图文并茂的文件在 HTML文件中，图形文件与 HTML文件是分开存放的，通过 HTML的 <img> 标记，描述欲显示的图形文件名称，即可在浏览器中显示图片。 <img> 标记的语法如下：
<img src="文件名 " height=y width=x border=n alt="说明文字
“
align="对齐方式 ">
32
3.4 图文并茂的文件
3.4.1 指定文件来源
3.4.2 指定图形的宽度及高度
3.4.3 图片边框
3.4.4 图形或文字
3.4.5 对象居中
33
3.4 图文并茂的文件
3.4.1 指定文件来源在 src=“文件名”中，文件的名称有两种表示方式，
一种是明确的指出图形文件的完整路径，称为绝对路径；
另一种是以目前网页所在的目录为基准 (作为参考路径 ),
称为相对路径。
1,绝对路径使用绝对路径显示图片实例的 HTML源代码
(page3_10.htm)如下：
<html> <img src="http://cache.orion.sina.com.cn/fansjczs
<head> _d/upload10/226/1045269490/5302.jpg">
<title>显示图片 </title> </body>
</head> </html>
<body>
34
3.4 图文并茂的文件
3.4.1 指定文件来源执行结果如下图所示。
35
3.4 图文并茂的文件
3.4.1 指定文件来源
2,相对路径相对路径的使用时机，是图形与目前的网页在同一个网站的目录下时使用，例如海河摄影艺术会的首页为
index.htm，若首页显示 LOGO图形的指定为 <img
src="logo.gif"> 表示 logo.gif这个图形与 index.htm的首页在同一目录下，若 <img src="images/logo.gif">则代表
logo.gif是放在 index.htm所在目录下的子目录 images中，
至于 <img src="/images/logo.gif">则是将 logo.gif图形置于主文件 (Document Root)下的 Images子目录中。
36
3.4 图文并茂的文件
3.4.2 指定图形的宽度及高度在 <img> 标记中，也可以指定图形的宽度和高度。
通常来说，我们并不用特别设置这两个属性，因为浏览器会以图形的宽度和高度自动显示，除非为了版面编排的问题，才会利用宽、高两个属性来调整图形显示的大小。另外，图片的宽度和高度也可用百分比 "%"来表示，
例如,width="50%",height="50%"等。
说明：在 Internet Explorer 6.0中宽度及高度，是指浏览器的宽度及高度的百分比。因此,width="50%"在
800× 600分辨率中，宽度相当于是 400 pixel。
37
3.4 图文并茂的文件
3.4.3 图片边框在 IE中所显示图形文件。其默认值是没有边框的，
若为了美观或显眼起见，您可以利用 Border属性为图形加上边框，并可指定边框的大小 (粗细 )。图形文件边框设置为默认值的 HTML源代码 (page3_11.htm)如下：
<html> </style>
<head> <body>
<title>图片边框 </title> <div align="center">
</head> <img src="images/1015.gif">
<style type="text/css"> </div>
<!-- </body>
body { </html>
background-color,#C8E9FF;
}
-->
38
3.4 图文并茂的文件
3.4.3 图片边框画面的显示效果如下图所示。
39
3.4 图文并茂的文件
3.4.3 图片边框将该图形文件边框设置为 border=1，则该范例的
HTML源代码变为 (page3_12.htm),
<html> </style>
<head> <body>
<title>图片边框 </title> <div align="center">
</head> <img border=1 src="images/1015.gif">
<style type="text/css"> </div>
<!-- </body>
body { </html>
background-color,#C8E9FF;
}
-->
40
3.4 图文并茂的文件
3.4.3 图片边框画面的显示效果如下图所示。
加了边框之后，可突显
Banner范围的视觉效果
41
3.4 图文并茂的文件
3.4.4 图形或文字图形是网络带宽的杀手之一，为了节省网络的带宽,HTML的 <img> 标记也可以设置为图形代替文字。
当用户设置浏览器只显示文字时，图形的部分即会以这些文字来展现。设置文字的属性为 alt，其用法见范例 (page3_13.htm) 。
<HTML> <img src="Windows xp.gif"
<HEAD> alt="Windows xp" border=1>
<TITLE>显示图形或文字 </TITLE> </BODY>
</HEAD> </HTML>
<BODY>
42
3.4 图文并茂的文件
3.4.4 图形或文字当浏览器取消显示图片时，画面会自动以 alt 指定的文字输出，如下图所示。
43
3.4 图文并茂的文件
3.4.4 图形或文字
1,如何取消显示图形点选 IE浏览器窗口中的“工具 /Internet选项”命令，
选择“高级”选项卡，取消“显示图片”复选框，如下图所示。
取消“显示图片”复选框
44
3.4 图文并茂的文件
3.4.4 图形或文字
2,显示图形或文字在 HTML中,<img>标记还提供图形与文字如何对齐的属性 Align。 Align属性的用法见范例 (page3_14.htm) 。
<HTML>
<HEAD>
<TITLE>显示图形或文字 </TITLE>
</HEAD>
<BODY>
<img src="images/next.bmp" Align="left">欢迎摄影爱好者参观 <Br>
<img src="images/next.bmp" Align="middle">欢迎摄影爱好者参观 <Br>
<img src="images/next.bmp" Align="right">欢迎摄影爱好者参观 <Br>
<img src="images/next.bmp" Align="absmiddle">欢迎摄影爱好者参观
</BODY>
</HTML>
45
3.4 图文并茂的文件
3.4.4 图形或文字说明,<img>标记在 HTML中是一个非常特殊的标记，因为它只有起始标记而没有结束标记。所以，请注意！在 HTML文件中不要加入 </img>这个标记。
执行结果如图所示
46
3.4 图文并茂的文件
3.4.5 对象居中不论是文字对象或是图形对象，默认值都是靠左显示，但是 HTML也提供对象居中的显示方式，其标记为 <center>…</center>,在 <center>与 </center>之间的任何对象均会被居中编排输出。例如：
<center>文字居中 </center>
或
<center><img src="logo.gif" alt="图形居中 "></center>
47
3.5 超级链接超级链接的概念,
所谓超级链接 (Hyperlink),就是当用鼠标点选文字、图片时，可以链接文字或图片到其他网页的功能
(可跨网站链接 ),而超级链接又可分为文字超级链接和图片超级链接。
48
3.5 超级链接
3.5.1 文字超级链接
3.5.2 图片超级链接
3.5.3 页内超级链接
3.5.4 超级链接电子邮件账号
49
3.5 超级链接
3.5.1 文字超级链接如果要让网页中的某一段文字成为超级链接，只要在链接标题前后分别加入 <a href=“URL”>及 </a> 两个标记就可以了。范例 (page3_15.htm)如下,
<html>
<head>
<title>超链接 </title>
</head>
<body>
找工作、找人才，请单击 <A HREF=http://www.hlfjob.com.cn>
hlfjob人才求职网 </A>
</body>
</html>
50
3.5 超级链接
3.5.1 文字超级链接结果显示如图所示。
当用户点选,hlfjob人才求职网”的超级链接时，
将超级链接至 http://www.hlfjob.com.cn。
51
3.5 超级链接
3.5.2 图片超级链接图片超级链接的语法，大致上与文字超级链接相同，
只是链接标题的部分改为图片。插入图片的方式是在 <a
href=“URL”>与 </a>之间加入 <img src=“图形文件名称” >,范例 (page3_16.htm)如下,
<html>
<head>
<title>图片超链接 </title>
</head>
<body>
<A HREF="http://www.hlfjob.com.cn"><img src="images/02.bmp"
alt=“hlfjob人才求职网” border=“0” align=absmiddle>hlfjob人才求职网 </A>
</body>
</html>
52
3.5 超级链接
3.5.2 图片超级链接
Internet Explorer浏览器中的显示效果如下图所示。
当用户点选,02,bmp”图片或,hlfjob人才求职网”
文字的超级链接时，将超级链接至
http://www.hlfjob.com.cn。
53
3.5 超级链接
3.5.3 页内超级链接除了文字与图形的链接以外，超级链接也可以发生在同一个网页之中，也就是文件内部的自我链接，此种链接方式比较适合长篇幅的网页。通常网页设计师会在页首标明网页的主题 (Subject)，通过点选主题的方式，
让光标直接移到主题所指的内容部分，减少用户拖动滚动条或点击滚动条的次数。
下面是一篇 HTML电子图书的网页，在,USB 接口应用指南”题目下方为同一网页内容中的所有主题，见下页图示。
说明：该范例 (page3_17.htm) HTML源代码内容太多，在此略去。
54
3.5 超级链接
3.5.3 页内超级链接网页内超级链接的 HTML语法，与外部超级链接的用法是相同的，惟一不同的是链接的标题若为同一网页，则必须使用页内链接的方式来处理，其页内链接的表示方式，是使用
,#”字符加上标记名称，例如：
<a href=“#1”>一、让电脑支持
USB </a>
当我们点选“一、让电脑支持 USB”的主题后，画面自动移至该主题上，如下页图所示。
55
3.5 超级链接
3.5.3 页内超级链接为了配合上述的页内链接，此主题须加上页内标记名称。如此，
当用户点选该主题时，
浏览器才能识别要将页面移往何处。页内标记的用法如下：
<a name=“#1”>一、让电脑支持 USB</a>
56
3.5 超级链接
3.5.4 超级链接电子邮件账号超级链接也可指定与用户计算机默认的电子邮件软件进行链接，以利于与电子邮件集成。例如在网页的页尾通常会摆放网站的服务信箱，如下图所示。
网站服务信箱
57
3.5 超级链接
3.5.4 超级链接电子邮件账号当用户点选该信箱时，会自动启动用户计算机内部默认的电子邮件软件 (例如 Outlook,Outlook Express等 )，
并将其 E-mail地址放在收件人位置，如下图所示。
E-
地址
58
3.5 超级链接
3.5.4 超级链接电子邮件账号链接电子邮件是使用,mailto:”，后面加上电子邮件账号而成；要链接电子邮件软件时，若有参数要自动带至电子邮件软件时 (如电子邮件主题 )，则可由 URL带参数来完成。范例 (page3_19.htm)如下,
<html>
<head>
<title>超级链接电子邮件 </title>
</head>
<body>
<a href=“mailto:tjhldgz@tj139.com.cn?subject=建议
">tjhldgz@tj139.com.cn</a>
</body>
</html>
59
3.5 超级链接
3.5.4 超级链接电子邮件账号在 Internet Explorer中浏览的效果如下图所示。
当点选邮件账号后,Outlook Express将自动被启动，
且“主题,已自动填入“建议”等文字，如下页图所示。
60
3.5 超级链接
3.5.4 超级链接电子邮件账号自动填入
“建议”等文字
61
3.5 超级链接
3.5.4 超级链接电子邮件账号电子邮件软件的相关参数很多，例如：抄送 (CC)、
主题 (Subject)及信件内容等，都可以使用 URL指定，要注意的是参数与参数之间须以,&”符号隔开，范例的
HTML源代码 (page3_20.htm)如下：
<html>
<head>
<title>超级链接电子邮件 </title>
</head>
<body>
<a href="mailto:tjhldgz@tj139.com.cn?subject=建议 &body=how
do you do &cc=hli">tjhldgz@tj139.com.cn</a>
</body>
</html>
62
3.5 超级链接
3.5.4 超级链接电子邮件账号范例 (page3_20.htm)在 Internet Explorer中运行效果如下图所示。
当用户点选后，在 Outlook Express自动被启动时，相关的字段已自动填入适当的值，如下页图所示。
63
3.5 超级链接
3.5.4 超级链接电子邮件账号相关的字段已自动填入适当的值
64
3.6 表格在 HTML输出编排的标记当中，并没有指定显示位置的功能 (例如文字要显示在 x坐标等于 5,y坐标等于 100
处 )，因此对于复杂的版面就无法精确地编辑，此时只好通过表格来定位。
在 HTML中表格可以用来定位。在 HTML中表格的起始标记为 <table>，结束标记为 </table>，完整的 <table>
标记语法如下：
<table border="0" cellspacing="0" cellpadding="0"
bordercolor="#0000ff">
：
</table>
实际上，表格又可分为列 (Column)和行 (Row)。竖的称为 Column，横的我们称为 Row。
65
3.6 表格
3.6.1 行与列
3.6.2 行与列的背景颜色
3.6.3 表格边框的颜色
3.6.4 表格间距
3.6.5 合并单元格
66
3.6 表格
3.6.1 行与列行的标记 <tr>...</tr>必须配合表格使用,<tr>与
</tr>之间代表一行。一般在编写表格时，必须先写行，
然后再写列于其中，范例 (page3_21.htm)如下：
<html> <td>第二行，第一列 </td>
<head> <td>第二行，第二列 </td>
<title>HTML的表格 </title> <td>第二行，第三列 </td>
</head> </tr>
<body> <tr>
<table border="1"> <td>第三行，第一列 </td>
<tr> <td>第三行，第二列 </td>
<td>第一行，第一列 </td> <td>第三行，第三列 </td>
<td>第一行，第二列 </td> </tr>
<td>第一行，第三列 </td> </table>
</tr> </body>
<tr> </html>
这是一个 3行 3
列 (3× 3)的表格
67
3.6 表格
3.6.1 行与列利用 Internet Explorer来观看的结果如下图所示。
说明,tr 是 table row的意思,td 是 table data的意思。
68
3.6 表格
3.6.2 行与列的背景颜色在 IE浏览器中,<tr> 及 <td> 标记均可以指定背景颜色，使用的原则是同一行的背景相同则在 <tr> 中指定。
例如,<TR BGCOLOR=blue>
<TD>...</TD>
<TD>...</TD>
</TR>
若每一列的颜色均不相同，则可以在 <TD>中指定颜色。例如：
<TR>
<TD BGCOLOR=red>...</TD>
<TD BGCOLOR=green>...</TD>
<TD BGCOLOR=blue>…</TD>
</TR>
69
3.6 表格
3.6.3 表格边框的颜色
HTML表格的边框 (Border)若未指定，其默认值为 0，
也即无边框。要显示出表格,Border 的值必须大于 0，至于边框的颜色可以使用 BorderColor 属性来指定，其用法范例 (page3_22.htm)如下：
<html> <td>第二行，第一列 </td>
<head> <td>第二行，第二列 </td>
<title>表格边框的颜色 </title> <td>第二行，第三列 </td>
</head> </tr>
<body> <tr>
<table border="1" BorderColor="#0000FF"> <td>第三行，第一列 </td>
<tr> <td>第三行，第二列 </td>
<td>第一行，第一列 </td> <td>第三行，第三列 </td>
<td>第一行，第二列 </td> </tr>
<td>第一行，第三列 </td> </table>
</tr> </body>
<tr> </html>
70
3.6 表格
3.6.3 表格边框的颜色利用浏览器 Internet Explorer观看时，其显示的效果如下图所示。
71
3.6 表格
3.6.4 表格间距在 HTML中，表格间距有两个选项，一个是定义表格间的距离 (CellSpacing)，默认值为 2；另一个是定义表格内的字符与表格边界本身的距离 (CellPadding)，默认值为 1，未设置 CellSpacing和 CellPadding时的效果如图所示。
72
3.6 表格
3.6.4 表格间距当设置 cellspacing=“5”和 cellpadding=“10”时的效果如下页图所示。
73
3.6 表格
3.6.4 表格间距若我们将上述两个属性都改为,0”，则其显示效果如下图所示。
74
3.6 表格
3.6.5 合并单元格虽然表格是由列 (Column) 和行 (Row) 所组成的，
但却不一定是固定的个数，有时候我们必须使用合并表格的功能，合并表格又可分为：行合并与列合并两种，合并的原则为由上到下、由左到右。
1,合并列假如某一列横跨 3个列 (占 3个列的空间 )，则可以在 <td> 标记的属性 colspan=n，指定占用的列数，范例 (page3_25.htm) HTML代码见下页：
75
3.6 表格
3.6.5 合并单元格
<html><head>
<title>合并列 </title></head>
<body><table border="1" bordercolor="#0000FF">
<tr><td>
第一行，第一列 </td><td>
第一行，第二列 </td><td>
第一行，第三列 </td><td>
第一行，第四列 </td></tr>
<tr><td colspan="3">
第二行，本列占 3列 </td><td>
第二行，第四列 </td></tr>
</table></body>
</html>
76
3.6 表格
3.6.5 合并单元格利用 Internet Explorer来观看的结果如下图所示。
colspan="3",
本列占 3列
77
3.6 表格
3.6.5 合并单元格
2,合并行可以在 <td> 标记的属性 rowspan=n，指定占用的行数，范例
(page3_26.htm) HTML代码如下：
<html> </tr>
<head> <tr>
<title>合并行 </title> <td>第三行，第二列 </td>
</head> <td>第三行，第三列 </td>
<body> <td>第三行，第四列 </td>
<table border="1" bordercolor="#0000FF"> </tr>
<tr> <tr>
<td rowspan=3>第一行，本列纵跨 3行 </td> <td>第四行，第一列 </td>
<td>第一行，第二列 </td> <td>第四行，第二列 </td>
<td>第一行，第三列 </td> <td>第四行，第三列 </td>
<td>第一行，第四列 </td> <td>第四行，第四列 </td>
</tr> </tr>
<tr> </table>
<td>第二行，第二列 </td> </body>
<td>第二行，第三列 </td> </html>
<td>第二行，第四列 </td>
78
3.6 表格
3.6.5 合并单元格执行结果如图 3.32所示。
rowspan=3,本列纵跨 3行
79
3.7 段落
HTML是当初科学家们用来在网络上发表研究成果的工具，而研究成果不外乎是一些技术性的文件，因此
HTML在设计之初即有段落标记的定义，段落标记是以
<p>开始，而以 </p>为结束标记。
80
3.7 段落范例 (page3_27.htm)如下,
<html>
<head> <title>html段落 </title> </head>
<body>
<p>让电脑支持 USB</p>
<p>现在的大部分电脑带有 USB 端口。一些老式主板和机箱中也有 USB 连接器，但可能不起作用。所以一定要检查主板或电脑操作手册，以便查出怎样使 USB 工作。在老式电脑上，可以在启动时查看电脑的 BIOS，以确定它是否支持 USB。为了使 USB 键盘或鼠标在 DOS 状态下工作，应该选择 USB
Legacy 支持选项 (如果有该选项的话 )。如果该主板不能接入 USB 设备，你就应该买一块 PCI 卡，以便将 USB 插槽添加到老式电脑中。 </p>
<p>让 Windows 系统支持 USB</p>
<p>并非所有的 Windows 版本都支持 USB。 Windows98 对很多外设都提供了全面的 USB支持。 Windows95 的零售版则不支持 USB，只有后来与 PC 捆绑销售的 Windows95 版本才支持 USB。你可以看看你的 Windows95 版本信息
(可右击“我的电脑”图标并选择“属性” )，如果版本号是以 B 或者 C 结尾，
则你的这个 Windows 95 只对有限范围的设备提供 USB 支持。 </p>
</body>
</html>
81
3.7 段落显示的效果如下图所示。
在段落中也可以指定段落对齐方式，如靠左 (Left)、靠右
(Right)以及居中 (Center)等，其用法如下：
<p align="left">段落文字 </p>
说明：使用段落标记 <p>…</p>,浏览器会自动在段落后面插入一空白行 (这就是段落的定义 )。
82
3.8 水平线
<hr> 标记是提供 HTML画水平线的功能，并可指定水平线的宽度、大小等。其语法如下：
<hr size="线的粗细 " width="宽度 ">
其中“宽度”可指定水平线的点数，也可指定显示屏幕宽度的百分比。例如：
<hr size=“1” width=“80%”>?显示 Size为 1，宽度为浏览器画面 80%的水平线
<hr size="1" width="480"> '显示 Size为 1，宽度为 480
pixel的水平线
83
3.8 水平线
<hr> 标记的用法范例 (page3_28.htm) HTML代码如下：
<html>
<head>
<title>水平线 </title>
</head>
<body>
<hr size="1" width="70%">
<hr size="2" width="80%">
<hr size="3" width="90%">
<hr size="1" width=150>
<hr size="2" width=200>
<hr size="3" width=250>
</body>
</html>
84
3.8 水平线利用 Internet Explorer来观看结果如下图所示。
说明：宽度若用屏幕宽度的百分比显示，将随屏幕宽度的变化而变化。
85
3.8 水平线在实际应用上，通常是用水平线将文本与页尾分隔开，并在水平线下方显示版权声明或服务信箱等，请参考下图。
86
3.9 什么是 CSS
CSS是 Cascading Style Sheet的缩写，中文译为
“层叠样式表”。 CSS样式表可以定义网页相关组件的各种属性变化，例如文字背景、字体、字体大小、
对齐方式等，它也可以创建一个共同的样式表，让网站的相关网页直接套用，完全跳脱 HTML语法及输出编排上的束缚。让网页更具视觉效果，并可大幅度节省维护的时间。
在 HTML4.0版以后，每一个 HTML的标记 (Tag)都有一个 Class属性,Class的值须套用 CSS的定义，方可做出各种精确的排版及样式指定的功能，令 HTML输出的画面变得非常的精美及细致。
87
3.9 什么是 CSS
3.9.1 CSS类型
3.9.2 CSS在超级链接中的运用
3.9.3 实际范例
88
3.9 什么是 CSS
3.9.1 CSS类型在 HTML网页中,CSS有下列 3种不同的使用类型：
● 内嵌 CSS
将 CSS的定义 <style>…</style> 写在 HTML源代码
<head>…</head> 标记之间，样式表的有效范围仅为此份 HTML
文件。
● 局部套用 CSS
此类型的 CSS与特定的 HTML标记合并使用，它与内嵌 CSS
最大的不同是局部套用仅会影响套用该段的样式，而不会影响其他非套用的部分。
● 外部链接 CSS
外部链接 CSS是将样式表以单独的文件存放，令网站的所有网页均可套用此样式，以降低维护的人力成本，并可让网站拥有一致性的风格。
89
3.9 什么是 CSS
3.9.1 CSS类型
1,内嵌 CSS
范例 (page3_30.htm) HTML代码如下：
<html><head>
<style type="text/css"><!--
.style1 {font-family,"宋体 "; font-size,11pt; color,#000000;}-->
</style><title>CSS范例 -01</title>
<meta http-equiv="Content-Type" content="text/html" charset="GB2312"></head>
<body><p class="style1">CSS让网页美丽、大方、又好维护！ </p>
</body></html>
90
3.9 什么是 CSS
3.9.1 CSS类型在浏览器的显示效果如下图所示。
修改样式表 style1，将字体大小改为 9点，并将颜色改为蓝色，
显示效果如下图所示。
91
3.9 什么是 CSS
3.9.1 CSS类型
2,局部套用 CSS
不同的浏览器对 HTML标记的输出编排格式均不相同，
通过局部套用 CSS 的功能，可以重新定义 HTML标记的输出样式。例如 HTML的段落标记 <p>，利用“局部套用
CSS”的定义，可以让 <p>标记按照 CSS的定义输出。
范例 (page3_32.htm) HTML代码请见下页。
92
3.9 什么是 CSS
3.9.1 CSS类型
<html>
<head>
<style type="text/css">
<!--
p {font-family,"宋体 "; font-size,11pt; color,#0000ff;}
-->
</style>
<title>CSS范例 -03</title>
<meta http-equiv="Content-Type" content="text/html"
charset="GB2312">
</head>
<body>
<p>CSS让网页美丽、大方、又好维护！ </p>
</body>
</html>
93
3.9 什么是 CSS
3.9.1 CSS类型执行结果如下图所示。
若要同时定义多个 HTML标记的样式，例如 <p>与
<pre>标记，则可以使用范例 (page3_33.htm) 的语法。
其 HTML代码请见下页。
94
3.9 什么是 CSS
3.9.1 CSS类型
<html>
<head>
<style type="text/css">
<!--
p,pre {font-family,"宋体 "; font-size,11pt; color,#0000ff;}
-->
</style>
<title>CSS范例 -04</title>
<meta http-equiv="Content-Type" content="text/html" charset="GB2312">
</head>
<body>
<p>CSS让网页美丽、大方、又好维护！ </p>
<pre>
预先编排的输出格式，也可以套用 CSS
套用的方法请见源代码 (css-04.htm)。
</pre>
</body>
</html>
95
3.9 什么是 CSS
3.9.1 CSS类型执行结果如下图所示。
说明：样式名称若是 HTML的标记，请勿在样式名称前加上,.”。
96
3.9 什么是 CSS
3.9.1 CSS类型
3,外部链接 CSS
也可以使用记事本等编辑样式表，并另外以一个新的文件存放 (例如 common.css),则使用到此样式表的
HTML 文件均可以外部链接的方式引用。外部链接的
HTML语法如下：
<link rel="stylesheet" href="common.css">
其中 <link>标记为外部链接,rel参数必须指定链接的文件类型，此处为样式表,stylesheet”，样式表的文件由 href属性中指定 (此例为 common.css)。引用方式请参考范例 (page3_34.htm),其 HTML代码请见下页。
97
3.9 什么是 CSS
3.9.1 CSS类型
<html>
<head>
<link rel="stylesheet" href="common.css">
<title>CSS范例 -05</title>
<meta http-equiv="Content-Type" content="text/html“
charset="GB2312">
</head>
<body>
<p>CSS让网页美丽、大方、又好维护！ </p>
<pre>
预先编排的输出格式，也可以套用外部的 CSS文件，
套用的方法请见源代码 (css-05.htm)。
</pre>
</body>
</html>
98
3.9 什么是 CSS
3.9.1 CSS类型执行结果如下图所示。
99
3.9 什么是 CSS
3.9.2 CSS在超级链接中的运用
CSS除可重新定义 HTML标记以外，对于 HTML的超级链接标记
<a>提供更多的选项。
<html>
<head>
<style type="text/css">
<!--
.small { font-family,"宋体 "; font-size,9pt; vertical-align,middle; line-
height:16pt;}
.topic { font-family,"宋体 "; font-size,11pt; vertical-align,middle; line-
height:16pt;}
a:link {color:#0F56A3; font-style:normal;
cursor:hand; text-decoration:normal}
a:visited {color:#0F56A3; font-style:normal; text-decoration:normal}
a:active {color:#0F56A3; font-style:normal; text-decoration:normal}
a:hover {color:#CC0000; font-style:bold; text-decoration:none}
-->
</style>
：
10
0
3.9 什么是 CSS
3.9.2 CSS在超级链接的运用上述的语法中,link为指定超级链接的样式； visited定义已点选过的超级链接样式； active则代表动作中的超级链接样式，
hover则为鼠标光标移至超级链接时的样式。请参考下面的写法：
<html>
<head>
<style type="text/css">
a:link {color:#0000ff; font-style:normal;
cursor:hand; text-decoration:normal}
a:visited {color:#ff0000; font-style:normal; text-decoration:normal}
a:active {color:#0000ff; font-style:normal; text-decoration:normal}
a:hover {color:#cc0000; font-style:bold; text-decoration:none}
</style>
<title>CSS范例 -06</title>
</head>
<body>
<a href="#link">超级链接测试 </a>
</body>
</html>
101
3.9 什么是 CSS
3.9.3 实际范例
1,CSS入门范例下面是铁道出版社出书的 HTML网页界面。
10
2
3.9 什么是 CSS
3.9.3 实际范例该网页 HTML源代码 (page3_35.htm)如下 (部分 ),
<html>
<head>
<style type="text/css">
<!—
.small {font-family:"宋体 "; font-size:9pt;
vertical-align:middle; line-height:16pt;}
.topic {font-family:"宋体 ";font-size:11pt;
vertical-align,middle; line-height:16pt;}
a:link {color:#0F56A3; font-style:normal;
cursor:hand; text-decoration:normal}
a:visited {color:#0F56A3; font-style:normal; text-decoration:normal}
a:active {color:#0F56A3; font-style:normal; text-decoration:normal}
a:hover {color:#CC0000; font-style:bold; text-decoration:none}
-->
</style>
：
10
3
3.9 什么是 CSS
3.9.3 实际范例其中,small代表定义一个称为 small的样式，此样式的字体 (font-family,"宋体,)为宋体，字体大小 (font-
size:9pt;)为 9pt，垂直对齐 (vertical-align,middle)在中间，
行高 (line-height:16pt;)为 16pt。 a:link的 a为 HTML的 <a>
标记,link代表超级链接的设置。
说明,a与 link之间以冒号,:”隔开。
● 表头套用 CSS设置表头套用 CSS样式的写法如下：
<tr bgcolor="#B4B4DA">
<td align="center" class="topic" colspan="4" >
中国铁道出版社特别推荐 </td>
</tr>
10
4
3.9 什么是 CSS
3.9.3 实际范例
● 标题引用 CSS方式在表格中引用 CSS，需特别考虑 CSS套用的位置，
如过整行 (Row)采用相同的样式时,class属性请置于
<tr>标记中，若表格中每一列的项目均需套用不同的样式，则 class属性至于 <td>标记。本例为同一行套用相同样式：
<tr bgcolor="#e0dcc3" class="small">
<td>书号 </td>
<td>书名 </td>
<td>作者 </td>
<td>出版社 </td>
</tr>
10
5
3.9 什么是 CSS
3.9.3 实际范例
● 段落与 CSS
前面提及 HTML自 4.0版以后，每一个标记均可使用
class属性，段落 (Paragraph) 标记也不例外，其定义及使用方式与前述相同。使用范例如下：
<p align=“center” class=“small”>
※ 中国铁道出版社，欢迎读者选购。
</p>
10
6
3.9 什么是 CSS
3.9.3 实际范例
● 3D的表格框在 HTML文件中，经常使用表格进行数据的格式化编排及定位。一般表格均以 2D的方式展现，很少看到
3D显示效果的表格。其实在 HTML的 <table>标记中，
可以使用 BorderColorLight(边框亮色部分的颜色 )及
BorderColorDark(边框阴影部分的颜色 )让表格看起来具有 3D的显示效果，这两个属性也可用于 <tr>及 <td>标记中。下面是 3D表格的 HTML范例：
<table border="1" cellspacing="0" cellpadding="1"
bordercolorlight="#dfdfdf"
bordercolordark="#ffffff" align="center">
107
3.9 什么是 CSS
3.9.3 实际范例
2,CSS高级范例利用标准的 HTML语法制作网页，当文件的长度超过一页以上时，浏览器的滚动条 (ScrollBar) 就会自动启动，且整个页面会随着滚动条的移动而移动，而无法将某些信息显示在某一特定位置。目前却有许多网站利用
JavaScript提供这样的功能，并把它利用在广告商品的用途上面，相当具有创意。
通过 CSS样式表的定义也可以达到一样的功能。下面是笔者将看到的有关鲜奶酪制作过程编写成 HTML网页，并利用 CSS样式表的定义将 Windows XP图标做成固定显示位置的广告。
10
8
3.9 什么是 CSS
3.9.3 实际范例该网页 HTML源代码 (page3_36.htm)如下 (部分 ),
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{
font-family:"宋体 ";
font-size:11pt;
color:blue;
background-color:white;
background-image:url(images/caoyao.jpg);
background-repeat:no-repeat;
background-position:96% 4%;
background-attachment:fixed;
}
</STYLE>
：
10
9
3.9 什么是 CSS
3.9.3 实际范例输出结果如下图所示。
110
3.9 什么是 CSS
3.9.3 实际范例当使用滚动条将画面下拉时,caoyao.jpg图形文件
(草药照片 )固定在画面的右上角的位置上不动 (文字压在图的上方 )，如下图所示。
111
3.9 什么是 CSS
3.9.3 实际范例
● 样式表说明
font-family：指定文字显示时采用的字体名称，若同时指定多个字体名称，浏览器会依序搜寻相关字体名称。
指定多个字体的语法格式如下：
font-family,"字体名称 1","字体名称 2",...,"字体名称 n";
font-size：设置文字显示的字体大小 (用户可自定 )，在
Windows操作系统下显示中文。建议您采用宋体，并使用 9pt或 11pt的字体大小，因为宋体的字体为固定字，
中英文混合编排较整齐，而以 9pt及 11pt显示的宋体文字较美观。
112
3.9 什么是 CSS
3.9.3 实际范例
color：定义文字显示的颜色，默认值为黑色。 color颜色的指定可以使用 RGB三原色或以系统内置的常数表示。例如,color:"#0000ff"; color:blue;
说明：,#0000ff”在 RGB三原色的值为蓝色，您也可以使用 blue代表蓝色。
background-color：背景颜色的语法如下，它可以改变浏览器默认的背景颜色，初始值为透明 (Transparent)。
background-color:<color> | transparent
background-image：可用以设置背景图片，但是背景图必须以 url描述。语法如下：
background-image:<url> | none
113
3.9 什么是 CSS
3.9.3 实际范例范例 (page3_37.htm)如下：
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{
background-image:url(images/caoyao.jpg);
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
114
3.9 什么是 CSS
3.9.3 实际范例执行结果如下图所示。
115
3.9 什么是 CSS
3.9.3 实际范例
background-repeat,明确地定义如何展现背景图。语法如下：
background-repeat:repeat| no-repeat | repeat-x | repeat-y;
每一个属性的说明如下表所示。
属 性 说 明
repeat 将图形当成背景的桌布显示
ro-repeat 仅显示单一图形，默认值为左上方
repeat-x 设置图形在 x轴上重复出现
repeat-y 设置图形在 y轴上重复出现
116
3.9 什么是 CSS
3.9.3 实际范例下面是 bjtu.jpg图文件在 x轴上重复出现的范例
(page3_38.htm),
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{background-image:url(images/bjtu.jpg);
background-repeat:repeat-x;}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
117
3.9 什么是 CSS
3.9.3 实际范例执行结果如下图所示。
118
3.9 什么是 CSS
3.9.3 实际范例下面则是 bjtu.jpg图文件在 y轴上重复出现的范例
(page3_39.htm),
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{background-image:url(images/bjtu.jpg);
background-repeat:repeat-y;}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
119
3.9 什么是 CSS
3.9.3 实际范例执行结果如下图所示。
12
0
3.9 什么是 CSS
3.9.3 实际范例
background-position：如果背景图不以前述的 repeat控制的话，可以使用 background-position设置背景图的显示位置。语法如下：
background-position:[<percentage>] | [[top | center |
bottom] || [left | center | right]]
例如本例中的 background-position,96% 4%;是将图形显示于 x轴 96%处,y轴 4%处。若要将图形显示于画面中央，其用法范例 (page3_40.htm)见下页：
121
3.9 什么是 CSS
3.9.3 实际范例
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE>
BODY{
background-image:url(images/bjtu.jpg);
background-repeat:no-repeat;
background-position:center center;
}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
122
3.9 什么是 CSS
3.9.3 实际范例执行结果如图所示。
background-attachment,fixed; 此设置与背景图有关，语法如下：
background-attachment:scroll | fixed;
此属性的值如果采用 fixed的话，图形不会随滚动条的移动而移动，系统默认值为 scroll。此为本范例中，制作固定背景图功能中，最关键的 CSS样式定义。
12
3
第 3章 HTML简介看完本章的 HTML与 CSS的介绍,相信您对 HTML已经有进一步的了解,至于 CSS样式表部分,请读者再自行练习,有利于您将来制作易维护,美观及低带宽需求的网页 。
