第 2课 HTML语言介绍（一）
1.1 课前导读
1.2 课堂教学
2.2.1 HTML基础
2.2.2 HTML入门 —— 简单标记的认识与使用
2.2.3 段落和文字标记
2.2.4 建立超级链接
2.2.5 加入图片
1.3 上机练习
1.4 课后作业
1.1 课前导读
1,什么是 HTML
2,HTML的作用
3,HTML的编辑环境
4,专用的网页编辑器
1,什么是 HTML
HTML是 Hyper Text Markup Language（ 超文本标记语言 ） 的缩写,它是构成 Web页面 （ Page） 的主要工具,是用来表示网上信息的符号标记语言 。
HTML是一种用于网页制作的排版语言,是 Web最基本的构成元素 。 HTML并非一种编程语言 。 用 HTML标记文档或给文档添加标记,使文档可在 WWW上发布 。
用 HTML准备的文档包含引用图形和格式标记 。 用 Web
浏览器可以查看这些 HTML文档 。
用 HTML的语法规则建立的文档可以运行在不同操作系统的平台上 。 因此,HTML文档属于纯文本文件
（ 它能用任意的文本编写器书写 ） 。
2,HTML的作用
HTML语言作为一种网页编辑语言,易学易懂,能制作出精美的网页效果,其作用如下：
① 格式化文本 。 如设置标题,字体,字号,颜色；设置文本的段落,对齐方式等 。
② 建立超链接 。 通过超链接检索在线的信息,
只需用鼠标单击,就可以到达任何一处 。
③ 创建列表 。 把信息用一种易读的方式表现出来 。
④ 插入图像 。 使网页图文并茂,还可以设置图像的各种属性,如大小,边框,布局等 。
⑤ 建立表格 。 表格为浏览者提供了快速找到需要信息的显示方式,还可以用表格来设定整个网页的布局 。
⑥ 加入多媒体 。 可以在网页中加入音频,视频,
动画,还能设定播放的时间和次数 。
⑦ 交互式窗体,计数器等 。 为获取远程服务而设计窗体,可用于检索信息,定购产品等 。
HTML是最基本的网页制作语言,其他的专用网页编辑器 （ 如 FrontPage,Dreamweaver等 ） 都是以 HTML
为基础的 。
3,HTML的编辑环境
HTML的编辑环境很简单,任何一台计算机都可以编辑网页 。 但要看到用户自己设计的网页效果,就需要 安 装 一 个 浏 览 器,如 Internet Explorer,
Netscape Navigator等 。 因此,只要计算机能运行某个浏览器,就具备了网页制作的硬件环境 。 HTML要求的软件环境更为简单,任何文本编辑器都可以用来制作网页,包括记事本,写字板,Word,WPS等编辑程序 。 不过在保存时,一定要用纯文本方式存盘 。
HTML文件的设计制作与一般程序设计语言之间最大的不同在于,HTML具有跨平台的处理能力 。 也就是说,只要有适当的浏览器,不管使用何种操作系统,
都能阅读制作的 HTML文件 。
4,专用的网页编辑器
HTML作为最基本的网页编辑语言,能实现制作网页的各种效果 。 但是,它毕竟是一种代码,得记住一些标记 。 因此,为了使设计网页更加简单方便,有些公司和人员就设计了专用的网页编辑器 。 专用的网页编辑器主要分为 3大类 。
① 完全的所见即所得工具：所谓所见即所得,就是在编辑网页时看到的效果,与使用浏览器时看到的效果基本一致 。 如果希望建立一个美观而又不复杂的站点,这种工具非常适合,可以很轻松地制作想要的效果,但是必须按照这些软件的要求来设计 。 典型的工具有 Drumbeat,NetobjectFusion。
② 纯粹的 HTML代码编辑工具：用纯粹的 HTML代码编辑工具,用户可以对页面进行完全的控制 。 使用这些工具时,直接编辑原始的 HTML代码,在对页面进行加工时,不会破坏原有的代码 。
当然,这并不是说用户得从头到尾编写每一种效果的 HTML源代码 。 因为这些工具通常带有许多辅助工具,可以帮助用户创建表格,表单,以及其他复杂的结构,并对创建的页面进行预览 。
这些工具最大的不足是必须会 HTML语言 。 当然,
要想成为一个好的网页制作人员,HTML还是应当掌握的 。
这 类 工 具 中 典 型 的 有 HomeSite,
HotDogProfessional,HTMLedPro,WebEditPro。
③ 混合型工具：介于上面两种工具之间,混合型工具在所见即所得的工作环境下可以完成主要的工作,
同时也能切换到一个文本编辑器,对 HTML源代码进行直接地调整 。
像所见即所得的工具一样,混合型的创作工具通常也不能完全控制 HTML页的代码 。 但 Macromedia
Dreamweaver在对已有的 HTML页进行编辑时,会严格保持原有代码的格式 。 典型的混合型工具还有 Adobe
PageMill,FrontPage,CutePage,QuickSite等 。
FrontPage是较好的所见即所得的网页编辑工具,
也是常用的网页编辑器 。 它对一个 Web站点有很强的控制能力,可以统一 Web站点内页面的外观和风格 。
它的 Web管理功能也很强大,用户可以通过图形的方式观察和调整站点的结构 。
Dreamweaver的最佳特性就是它的,往返式
（ Roundtrip） HTML” 编辑能力,这种特性使图形编辑工具和代码编辑工具输出同样的 HTML代码 。
Dreamweaver是图形化 HTML编辑工具中惟一不干扰原有 HTML代码的工具,所以用 Dreamweaver编辑后,仍然可以转回到原来的代码中用编辑工具进行修改 。 用其他工具修改后,Dreamweaver能自动更新相应的页面 。 它能很方便地产生动画,嵌入 JavaApplet、
ActiveX控件,以及 Netscape插件,并对用户的动作作出反应 。 此外,Dreamweaver在 Internet Explorer
和 Netscape Navigator两种浏览器之间的兼容性问题上处理得也很好 。
2.2 课堂教学
2.2.1 HTML基础
2.2.2 HTML入门 —— 简单标记的认识与使用
2.2.3 段落和文字标记
2.2.4 建立超级链接
2.2.5 加入图片
2.2.1 HTML基础
1,HTML文件的组成
2,标记
3,标记的属性
4,HTML文件的基本结构
HTML文件是一种纯文本文件,可以通过浏览器读取 HTML文件,并用浏览器内含的语法分析器来解读各种特殊标记 。
1,HTML文件的组成一个 HTML文件可由下列 3部分组成 。
① 标记：是 HTML的基本元素,可以说一个 HTML文件大部分都是由字符信息加上一些标记呈现出来的 。
也就是说,只要在 HTML文件中适当的位置上加上所需标记,就可依照各标记所代表的意义实现各种特殊的功效 。 基本的标记可分为两种：单一标记 （ 只要一个标记就能完成所要表示的功能 ） 和成对标记 （ 需要两个标记组合才能完成所需功能 ）
② 文字与图形资料：是指要提供给浏览信息的人阅读的内容 。 WWW显示的图形一般都以独立文件的形式存在,如果要显示图形 （ 图形文件要用其他程序建立 ）,就必须用特殊的标记指向图形文件 。
③ 统一资源定位器 URL（ Uniform Resource
Locator）,是 WWW上文件的参照格式,浏览者在浏览器的地址处输入 URL格式的内容,就可获取所指主机的主页 。
2,标记
HTML文件由标记和被标记的内容组成 。 标记 （ tag）
能产生所需的各种效果 。 就像一个排版程序,它将网页的内容排成理想的效果 。 这些标记名称大都为相应的英文单词首字母或缩写,如 P表示 Paragraph（ 段落 ）,IMG为 Image（ 图像 ） 的缩写,很好记忆 。 各种标记的效果差别很大,但总的表示形式却大同小异,
大多数成对出现,格式为：
<标记 > 受标记影响的内容 </标记 >
说明：
① 每个标记都用,<” （ 小于号 ） 和,>” （ 大于号 ） 围住,如 <P>,<Table>,以表示这是 HTML代码而非普通文本 。 注意,,<” 与标记名之间不能留有空格或其它字符 。
② 在标记名前加上符号,/” 便是其结束标记,
表示这种标记内容的结束,如 </FONT>。 标记也有不用
</标记 >结尾的,称之为单标记 。
③ 标记字母大小写皆可,没有限制 。
对同一段要标记的内容,可以用多个标记来共同作用,产生一定的效果 。 此时,各个标记间的顺序也是任意的 。
3,标记的属性标记只是规定这是什么信息,或是文本,或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记有一系列的属性 。
标记要通过属性来制作出各种效果 。 格式为：
<标记 属性 1=属性值 属性 2=属性值? >
受影响的内容 </标记 >
例如字体标记 <FONT>,有属性 size和 color等 。 属性 size表示文字的大小,属性 color表示文字的颜色 。
表示为：
<FONT size=3 color=red> 属性示例 </FONT>
需要注意的是：
① 并不是所有的标记都有属性,如换行标记就没有 。
② 根据需要可以用该标记的所有属性,也可以只用需要的几个属性,在使用时,属性之间没有顺序 。
多个属性之间用空格隔开 。
属性和标记一样,都不区分大小写 。 但为了阅读方便,本书用大写字母表示标记,小写字母表示属性 。
4,HTML文件的基本结构
HTML文件是一种纯文本格式的文件,HTML文件包括头部 （ head） 和主体 （ body） 。 文件的基本结构为：
<HTML>
<HEAD>
<TITLE> 网页的标题 </TITLE>
</HEAD>
<BODY>
网页的内容
</BODY>
</HTML>
说明：
① HTML文件以 <HTML>开头,以 </HTML>结尾 。
② <HEAD>? </HEAD>：表示这是网页的头部,用来说明文件命名和与文件本身的相关信息 。 可以包括网页的标题部分,<TITLE>? </TITLE>。
③ <BODY>? </BODY>：表示网页的主体即正文部分 。
④ HTML语言并不要求在书写时缩进,但为了程序的易读性,建议网页设计制作者使标记的首尾对齐,
内部的内容向右缩进几格 。
【 例 2-1】 简单的 HTML文件 。
<HTML>
<HEAD>
<TITLE> 简单的 HTML文件 </TITLE>
</HEAD>
<BODY>
最简单的网页
</BODY>
</HTML>
图 2-1 例 2-1的显示效果将文件以 2_1.htm为文件名存盘,存放的位置是本机的工作目录,ASP例 （ 参见 1.2.3） 。 有以下两种方式可以执行 HTML文件 2_1.htm：
打开 Internet信息服务器窗口,找到虚拟目录
myasp,在右边的文件列表中选择文件 2_1.htm,然后在,操作,菜单中选择,浏览,项；
打开浏览器,在地址栏中直接输入虚拟目录名及文件名：
http://127.0.0.1/myasp/2_1.htm
在浏览器上的 显示效果 如图 2-1所示 。
2.2.2 HTML入门
1,HTML文档标记 <HTML>?</HTML>
2,HTML文件头标记 <HEAD>?</HEAD>
3,HTML文件标题标记 <TITLE>?</TITLE>
4,HTML文件主体标记 <BODY>?</BODY>
5,注释标记
1,HTML文档标记 <HTML>? </HTML>
HTML文档标记的格式为：
<HTML> HTML文档的内容 </HTML>
HTML文档的标记 。 <HTML>处于文档的最前面,表示 HTML文档的开始,即浏览器从 <HTML>开始解释,直到遇到 </HTML>为止 。 每个 HTML文件均以 <HTML>开始,
以 </HTML>结束 。
2,HTML文件头标记 <HEAD>? </HEAD>
HEAD是英文,头,的意思,习惯上将 HTML文档分为文件头和文件主体两个部分 。 文件主体是在 Web浏览器窗口的用户区显示的内容,而文件头则用来规定该文档的标题 （ 浏览器标题栏中的内容 ） 和文档的一些属性 。 HTML文件头标记的格式为：
<HEAD> 头部的内容 </HEAD>
说明,HTML文件的头部在文件标记 <HTML>之后,
在开始标记 <HTML>和结束标记 </HTML>间定义 。 其内容可以是标题名,文本文件地址,创作信息等网页信息说明 。 对应于相应的标记,有标题标记
<TITLE>? </TITLE>等 。
<HEAD>标记在 HTML文件中不是必须的,如果没有,
浏览器也会照常解读文件 。
3,HTML文件标题标记 <TITLE>? </TITLE>
HTML文件标题标记的格式为：
<TITLE> 标题名 </TITLE>
设定 HTML文件标题的标记 。 在文件头部定义的标题内容不在浏览器窗口中显示,而是在浏览器的标题栏中显示 。 尽管头部定义的信息很多,但能在浏览器标题栏中显示的信息只有标题 。
4,HTML文件主体标记 <BODY>? </BODY>
HTML文件主体标记的格式为：
<BODY> 文件主体 </BODY>
说明：
① 主体位于头部之后,以 <BODY>为开始标记,
</BODY>为结束标记 。 它定义了网页上显示的主要内容与显示格式,是整个网页的核心,网页中要真正显示的内容都包含在本标记中 。
② <BODY>有很多属性,这些属性用于设定网页的总体风格,可以定义页面的背景图像,背景颜色,
文字颜色,超文本链接的颜色 。 其中常用的属性见表
2-1。
表 2-1 <BODY>标记的属性值 说明
background 设置网页的背景图像。
Bgcolor 设置网页的背景色。
Text 设置文本的颜色。
Link 设置尚未被访问过的超文本链接的颜色，默认为蓝色。
vlink 设置已被访问过的超文本链接的颜色，默认为蓝色。
alink 设置超文本链接在被访问瞬间的颜色，默认为蓝色。
表 2-1中,涉及颜色的属性,取值可以是英文颜色名,也可以用,#” 引导的一个十六进制数代码来表示,
见表 2-2。 如果颜色值用十六进制数代码,则颜色数比表 2-2列出的数目多得多 。
表 2-2 颜色代码表名称 英文颜色名 16进制代码黑色 black #000000
蓝色 blue #0000FF
棕色 brown #A52A2A
青色 cyan #00FFFF
灰色 gray #808080
绿色 green #008000
乳白色 ivory #FFFFF0
桔黄色 orange #FFA500
粉红色 pink #FFC0CB
红色 red #FF0000
白色 white #FFFFFF
黄色 yellow #FFFF00
深红色 crimson #CD061F
黄绿色 greenyellow #0B6EFF
水蓝色 dodgerblue #0B6EFF
淡紫色 lavender #DBDBF8
【 例 2-2】 使用网页的背景色 （ bgcolor） 属性,可以设定整个网页的背景颜色；使用网页的文本色 （ text）
属性,可以设定整个网页文字的颜色 。
<HTML>
<HEAD>
这是主体之外的文本
<TITLE> 试试 BODY标记的属性 </TITLE>
</HEAD>
<BODY bgcolor=greenyellow text=blue>
设置网页的背景色属性为 "黄绿色 ",
设置网页的文本色属性为 "蓝色 "
</BODY>
</HTML>
显示效果 如图 2-2所示 。
图 2-2 使用网页的 bgcolor属性
5,注释标记像很多程序语言一样,HTML文件也提供注解功能 。
浏览器会忽略此标记中的文字 （ 可以是很多行 ） 而不作显示 。 通常使用,注释,为文中的不同部分加上说明,以方便日后阅读和修改 。 注释标记的格式为：
<!-- 注释内容 -->
注释内容不局限于一行,长度也不受限制 。 即结束标识符不必与开始标识符在同一行上 。
2.2.3 段落和文字标记
1,标题文字标记
2,文本文字标记
3,设置字型
4,强制换行、换段标记
5,分区显示标记
6,水平线
7,特殊符号在多数网页中,文档是核心内容,所以要经常设置文档的格式 。 设置文档的标记包括标题和文字的字体,字号,字型,颜色,段落格式,文本的布局等 。
1,标题文字标记这里的标题是指页面中文本的标题,而不是用
<TITLE>? </TITLE>定义的网页标题,标题格式显示在浏览器窗口内,而不显示在浏览器的标题栏中 。
在页面中,标题是一段文字内容的核心,所以总是用加强的效果来表示 。 网页中的信息可以分为主要点,次要点,可以通过设置不同大小的标题,为文章增加条理 。 标题文字标记的格式为：
<Hn align=对齐方式 > 标题文字 </Hn>
说明：
① 属性 n用来指定标题文字的大小 。 n可以取 1～ 6
的整数值,取 1时文字最大,6时文字最小 。
② 属性 align用来设置标题在页面中的对齐方式,
取值有,left（ 左对齐 ）,center（ 居中 ） 或 right
（ 右对齐 ） 。
③ <H>? </H>标记缺省显示宋体字 。 <H>? </H>
标记会自动插入一个空行 。 在一个标题行中无法使用不同大小的字体 。
【 例 2-3】 使用标题标记设置标题内容的大小与对齐方式 。
<HTML>
<HEAD>
<TITLE> 设置标题 </TITLE>
</HEAD>
<BODY>
<H1>第 1级标题 （ H1） </H1>
<H2>第 2级标题 （ H2） </H2>
<H3>第 3级标题 （ H3） </H3>
<H4 align=left>第 4级标题 （ H4） （ 居左 ） </H4>
<H5 align=center>第 5级标题 （ H5） （ 居中 ） </H5>
<H6 align=right>第 6级标题 （ H6） （ 居右 ） </H6>
</BODY>
</HTML>
图 2-3 设置标题文字大小浏览器的显示效果如图 2-3所示 。
2,文本文字标记在网页中为了增强页面的层次,其中的文字可以用不同的大小,字体,字型,颜色 。 文本文字标记
<FONT>用来设定文字的字体,字号和颜色 。 其格式为：
<FONT size=数字 face=字体名 color=颜色 >
被设置的文字 </FONT>
说明,<FONT>标记的属性包括,size,face、
color。
① size属性用来设置文字的大小 。 数字的取值范围从 1～ 7,size取 1时最小,取 7时最大 。
② face属性用来设置字体 。 如黑体,宋体,楷体
_GB2312,隶书,Times New Roman等 。
当文字为汉字时,格式中的,字体名,可以为：
宋体,幼圆,隶书,楷体 _GB2312,黑体,仿宋
_GB2312等 。 当文字为英文时,字体名可以为 Times
New Roman等约 50种字体 。 其实,这里的字体名字就是在 Word的,字体,工具栏中显示的字体名 。
③ color属性用来设置文字颜色,其取值见表 2-2。
【 例 2-4】 使用 <FONT>标记的 size属性设置文字的大小；
face属性设置字体 。 color属性设置文字颜色 。
<HTML>
<HEAD> <TITLE>使用 FONT标记 </TITLE> </HEAD>
<BODY>
<H1>设置文字的属性 </H1>
<FONT size=1 color=cyan>1号字青色 </FONT>
<FONT size=2 color=green>2号字绿色 </FONT>
<FONT size=3 face=幼圆 color=orange>3号幼圆桔黄色 </FONT>
<FONT size=4 face=隶书 color=crimson>4号隶书深红色 </FONT>
<FONT size=5 face=黑体 color=greenyellow>5号黑体黄绿色 </FONT>
<FONT size=6 face=方正舒体 color=dodgerblue>6号方正舒体水蓝色 </FONT>
<FONT size=7 face=华文彩云 color=lavender>7号华文彩云淡紫色 </FONT>
</BODY>
</HTML>
在浏览器中的 显示效果 如图 2-4所示 。
图 2-4 设置文本文字属性说明：
① <FONT>和 <Hn>标记都可以设置文字的大小,
二者的区别见表 2-3。
标记 对象 用法 文字大小 n的取值 字体加粗
<FONT> 一段文章、
语句、短语
<FONT size=n>文字
</FONT>
n=1～ 7，取 1时最小,7时最大不自动加粗
<Hn> 标题 <Hn> 文字 </Hn> n=1～ 6，取 6时最小,1时最大自动加粗表 2-3 <FONT>与 <Hn>标记的区别另外,当 <FONT>中的 size取 7时,文字比 <H1>要大 。
② <BODY>标记中的 text属性和 <FONT>标记中的
color属性都可以设置文本的颜色,<FONT>标记直接作用其后的文字,可在文件中多处设定,使网页中文字的颜色绚丽多彩 。
当 <BODY>与 <FONT>标记同时对文字颜色进行定义时,<FONT>标记优先 。
3,设置字型字型就是文字的风格,如加粗,斜体,带下划线,
上标,下标等 。 字型的控制标记见表 2-4。
表 2-4 设置各种字型的标记标记格式 字体效果 说明
<B>受影响的文字 </B> 受影响的文字 加粗
<I>受影响的文字 </I> 受影响的文字 斜体
<U>受影响的文字 </U> 受影响的文字 带下划线
<TT>受影响的文字 </TT> 受影响的文字 标准打印机字体
<STRIKE>受影响的文字 </STRIIKE> 受影响的文字 带删除线受影响的 <SUB>文字 </SUB> 下标受影响的 <SUP>文字 </SUP> 上标
<BIG>受影响的文字 </BIG> 大字体文本
<SMALL>受影响的文字 </SMALL> 小字体文本
【 例 2-5】 使用字型标记设置文字的风格 。
<HTML>
<HEAD> <TITLE> 设置字型 </TITLE>
</HEAD>
<BODY>
<B>黑体 </B>
<I>斜体 </I>
<U>带下划线 </U>
<TT>标准打印机字体 </TT>
<STRIKE>带删除线 </STRIKE>
<SUB>下标 </SUB>
<SUP>上标 </SUP>
<BIG>大字体 </BIG>
<SMALL>小字体 </SMALL>
</BODY>
</HTML>
图 2-5 设置文本的风格在浏览器中的 显示效果 如图 2-5所示 。
4,强制换行,换段标记在 HTML文档中,无法用多个回车,空格,〈 Tab〉
键来调整文档段落的格式 。 要用 HTML的标记来强制换行,分段 。
① 强制换行标记 <BR>放在一行的末尾,可以使后面的文字,图片,表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行 。 由于浏览器会自动忽略原始码中空白和换行的部分,这使 <BR>成为最常用的标记之一 。 强制换行标记的格式为：
文字 <BR>
说明：浏览器解释时,从该处换行 。 换行标记单独使用,可使页面清晰,整齐 。
② 段落标记 <P>定义一个新段落的开始 。 <P>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行 。 由于一段的结束意味着新一段的开始,所以使用 <P>也可省略结束标记 。
强制换段标记的格式为：
<P>
说明：段落标记 <P>的属性 align用来设置段落的对齐方式,其取值可以为 left,center或 right,分别表示居左,居中,居右 。 缺省时默认为 left。
一个强制换段标记 <P>可以看作是两个强制换行标记 <BR><BR>。
【 例 2-6】 换行与换段标记的使用 。
<HTML>
<HEAD> <TITLE>强制换行,换段标记的使用 </TITLE> </HEAD>
<BODY><H2 align=center><FONT color=blue>学生之家 </FONT></H2>
新 闻
学习窗口
<P>健康信箱 <BR>
聊 天 室
<P align=center> 来信
</BODY>
</HTML>
图 2-6 换行与换段标记的使用说明,HTML语言忽略多余的空格,最多只空一个空格 。 在需要空格的位置,可以用, ” 插入一个空格,或者输入全角中文空格 。 在浏览器中 显示 。
5,分区显示标记分区显示标记可以使文本块或一段文字在网页上：
左对齐,居中和右对齐 。 分区显示标记的格式为：
<DIV align=left|center|right>
文本或图像 </DIV>
说明：属性 align的取值分别为,left,center
和 right。
【 例 2-7】 分区显示标记的使用 。
<HTML>
<HEAD>
<TITLE> 分区显示标记的应用 </TITLE>
</HEAD>
<BODY>
<CENTER><H2>分区显示标记的应用 </H2></CENTER>
<FONT color=blue>
<DIV align=center>居中 center<BR>居中 <BR>center</DIV>
<DIV align=left>居左 left<BR>居左 <BR>left</DIV>
<DIV align=right>居右 right<BR>居右 <BR>right</DIV>
</FONT>
</BODY>
</HTML>
在浏览器中 显示
6,水平线在页面中插入一条水平标尺线,可以使不同功能的文字分隔开,看起来整齐,明了 。 当浏览器执行
HTML文件中的 <HR>标记时,会在此处换行,并加入一条水平线段 。 线段的样式由标识的参数决定 。 水平线标记的格式为：
<HR align=对齐方式 size=横线粗细
width=横线长度 color=横线颜色 noshade>
说明：
① 属性 align设定横线放置的位置,可选择 left
（ 居左 ）,right（ 居右 ） 或 center（ 居中 ） 。
② 属性 size设定线条粗细,以像素为单位,默认为 2。
③ 属性 width设定线段长度,可以是绝对值 （ 以像素为单位 ） 或相对值 （ 相对于当前窗口的百分比 ） 。
所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变 。 所谓相对值,是指长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为 100%,即始终填满当前窗口 。
④ 属性 color设定线条颜色,默认为黑色 。 可以采用颜色的名称 。 颜色可以用相应英文单词或以,#”
引导的一个十六进制数代码来表示,见表 2-2。
⑤ 属性 noshade设定线条为平面显示 （ 没有三维效果 ）,若缺省则有阴影或立体效果 。
【 例 2-8】 水平线标记的使用 。
<HTML>
<HEAD> <TITLE> 水平线段标记的应用 </TITLE> </HEAD>
<BODY>
<CENTER><H3>水平线 </H3></CENTER>
<HR>
<HR align=left size=6 width=320>
<HR align=center size=8
width=60% color=blue>
<HR align=right size=8 width=360 color=red>
<HR size=4 width=80% color=#CD061F>
<HR size=5 noshade>
<HR width=70% noshade>
</BODY>
</HTML>
在浏览器中的 显示 。 浏览时,改变一下窗口的大小,可以看到线段的变化效果 。
7,特殊符号浏览器解释 HTML文件时,是根据,<” 与,>” 来识别标记的,然后再确定这两个符号中的内容是否为
HTML文件标记,若是则按其规则解读 。 所以,要在网页中显示,<” 或,>”,就要作为特殊字符 。 其他常用的特殊字符见表 2-5。
表 2-5 特殊替换字符特殊字符 所替代的字符 说明
& 特殊字符的开始; 特殊字符的结束
Lt < 小于号
Gt > 大于号
Quot " 双引号
nbsp 空格
2.2.4 建立超级链接
1,热点标记
2,创建指向其他页面的链接
3,创建指向本页中的链接超链接 （ Hyperlink） 可以看作是一个,热点,,
它可以从当前 Web页定义的位置跳转到其他位置,包括当前页的某个位置,Internet或本地硬盘或局域网上的其他文件,甚至跳转到声音,图片等多媒体文件 。
浏览 Web页是超链接最普遍的一种应用,通过超链接还可以获得不同形态的服务,如文件传输,资料查询,
电子函件,远程访问等 。
当 Web页包含超链接时,Web页中的外观形式为彩色 （ 一般为蓝色 ） 且带下划线的文字或图片 。 单击这些文本或图片,可跳转到相应位置 。 鼠标指针指向超链接的显示文本或图片时,将变成手形 。 超文本链接使用热点标记 <A>来定义 。
1,热点标记热点由 <A>标记定义,它在网页上建立超文本链接 。
通过单击一个词,句或图片,可从此处转到另一个链接资源 （ 目标资源 ）,这个目标资源有唯一的地址
（ URL） 。 具有以上特点的词,句或图片就称为热点 。
<A>标记的格式为：
<A href=地址 name=字符串 target=打开窗口方式 >
热点 </A>
说明：
① href为超文本引用,它的值为一个 URL,是目标资源的有效地址 。 在书写 URL时要注意,如果资源放在自己的服务器上,可以写相对路径 。 否则,应写绝对路径 。 href不能与 name同时使用 。
② name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址 。
③ target设定链接被按后结果所要显示的窗口 。
可选值为,_blank,_parent,_self,_top,框架名称 。 其说明见表 2-6。
取值 说明
target="_blank"
或 target="new"
将链接的画面内容，开在新的浏览器窗口中。
target="_parent" 将链接的画面内容，显示在直接父框架窗口中。
target="_self" 将链接的画面内容，显示在当前窗口中（默认值）。
target="_top" 将框架中连结的画面内容，显示在没有框架的窗口中
（即除去了框架）。
target="框架名称
"
只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架名称是事先由框架标记所命名的。
表 2-6 target属性的取值
2,创建指向其他页面的链接创建指向其他页面的链接,就是在当前页面与其他相关页面间建立超链接 。 无论目标文件与当前文件的目录关系如何,其格式为：
<A href = "目标文件的路径 /目标文件名,html">
热点 </A>
根据目标文件与当前文件的目录关系,有 4种写法：
① 链接到同一目录内的网页文件,其格式为：
<A href="目标文件名,html"> 热点 </A>
目标文件名是链接所指向的文件 。
② 链接到下一级目录中的网页文件,其格式为：
<A href="子目录名 /目标文件名,htm">
热点 </A>
③ 链接到上一级目录中的网页文件,其格式为：
<A href="../目标文件名,html"> 热点 </A>
其中,,./” 表示退到上一级目录中 。
④ 链接到同级目录中的网页文件,其格式为：
<A href="../子目录名 /目标文件名,html">
热点 </A>
表示先退到上一级目录中,然后再进入到目标文件所在的目录 。
3,创建指向本页中的链接要在当前页面内实现超链接,需要定义两个标记：
一个为超链接标记,另一个为书签标记 。 超链接标记的格式为：
<A href="#记号名 "> 热点 </A>
单击热点文本,将跳转到,记号名,开始的文本 。
书签就是用 <A>标记对该文本作一个记号 。 如果有多个链接,不同目标文本要设置不同的书签名,书签名在 <A>的 name属性中定义 。 格式为：
<A name=,记号名,> 目标文本附近的字符串
</A>
【 例 2-9】 链接本页中的文本 。
<HTML>
<HEAD><TITLE>学生之家 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
<A name="0"> </A>
<H2 align=center><B>欢迎来到“学生之家” </B></H2>
<FONT size=3 color=purple><CENTER>
<A href="#news">新闻 </A>
<A href="#study">学习园地 </A>
<A href="#health">健康信箱 </A> <P>
</CENTER></FONT>
<A name="news"></A>新闻 <BR>
..................<BR>
<DIV align=right><A href="#0">返回 </A></DIV><P>
<A name="study"></A>学习园地 <BR>
..................<BR>
<DIV align=right><A href="#0">返回 </A></DIV><P>
<A name="health"></A>健康信箱 <BR>
..................<BR>
<DIV align=right><A href="#0">返回 </A></DIV><P>
</BODY>
</HTML>
在浏览器中的 显示 。 单击超链接,将跳转到页面的相应位置,
2.2.5 加入图片
1,图片文件的格式
2,设置网页的背景
3,图片标记
4,用图片作为超链接
1,图片文件的格式加入网页中的图片,通常使用 GIF格式和 JPEG格式 。
GIF格式文件最多只能显示 256种颜色,这使得它很少用于存储照片 。 但是,存放图标,剪贴画和艺术线条等对颜色要求不高的图片,已经足够了 。 GIF格式图片的优点在于制作透明,隔行和动画效果 。
JPEG格式文件可以拥有计算机所能提供的最多种颜色,适合存放高质量的彩色图片,照片 。 另外,
JPEG格式文件采用压缩方式存储文件信息,相同的图片,所占空间比 GIF文件小,所以下载时间较短,浏览速度较快 。 但是,JPEG格式的文件没有 GIF格式文件的三种特殊效果 。
2,设置网页的背景网页的背景可以是某种颜色,也可以是图片 。 无论是图片,还是背景色,都通过 <BODY>标记的相应属性来设置 。
(1) 设置背景色利用色彩作背景,比较容易在颜色上协调,而且下载速度比采用图片作为背景快 。 网页缺省为白色,
<BODY>的 bgcolor属性用于设置网页的背景色 。 格式为：
<BODY bgcolor=颜色值 >
其中,,颜色值,可以为颜色的英文名或相应十六进制值 。
(2) 用图片作为背景使用 <BODY>标记的 background属性,可为网页铺上背景图片 。 格式为：
<BODY background=图片文件名 >
其中,图片文件名,包括文件存放的路径,可以是相对路径,也可以是绝对路径 。 图片文件可为 GIF格式或 JPEG格式的文件 。
在浏览器中,作为背景的图片将按原来的大小复制,重复铺满整个网页 。 作为背景的图片文件,要做的很小,以便加快下载速度 。
【 例 2-10】 图片背景 。
<HTML>
<HEAD> <TITLE>图片背景 </TITLE> </HEAD>
<BODY background=bg1.gif> <!--在网页中加入只有一只小猫的图片 -->
<H2 align=CENTER>用图片作为背景 </H2>
<FONT size=4>
在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。因此，作为背景的图片文件，要做的很小，以便加快下载速度。 <BR>
</FONT>
</BODY>
</HTML>
在浏览器中的 显示效果 。
3,图片标记使用图片标记,可以把一幅图片加入到网页中 。
用图片标记还可以设置图片的替代文本,尺寸,布局等属性 。 格式为：
<IMG src=文件名 alt=说明 width=x height=y
border=n hspace=h vspace=v align=对齐方式 >
说明：标记中的属性说明见表 2-7。
名称 说明
src 指出要加入图片的文件名，即“图片文件的路径 \图片文件名”。
alt 在浏览器尚未完全读入图片时，在图片位置显示的文字。
width 宽度（像素数或百分数）。通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具。
height 设定图片的高度（像素数或百分数）。
hspace 设定图片边沿空白，以免文字或其它图片过于贴近。设定图片左右的空间水平方向空白像素数。
vspace 设定图片上下的空间，空白高度采用像素作单位。
align 图片在页面中的对齐 /布局方式，或图片与文字的对齐方式。
表 2-7 图片标记的属性说明
(1) 图片的尺寸使用 <IMG>标记的 width和 height属性可以设置图片的大小,width和 height属性的值可取像素数,也可取百分数 （ 浏览器窗口 ） 。 如果不设定图片的尺寸,
图片将按照其本身的大小显示 。
【 例 2-11】 设置图片的尺寸 。
<HTML>
<HEAD> <TITLE>设定图片的尺寸 </TITLE> </HEAD>
<BODY>
<H4 align=center>设定图片的尺寸 </H4>
<IMG src="daisy.jpg" alt="封面 ">原始大小
<IMG src="daisy.jpg" alt="封面 " width=85 height=120>宽 85，高 120<BR>
<P><IMG src="daisy.jpg" width=40% height=40%>宽 40%，高 40%
</BODY>
</HTML>
在浏览器中的 显示效果 。
(2) 图片的布局所谓布局,就是图片放在网页中的位置,以及图片与文本的排放关系 。 实现这种功能,可以使用 <IMG>
标记的 align属性 。 align属性的取值见表 2-8。
表 2-8 图片标记的属性说明值 说明
left 图片居左，文本在图片的右边
center 图片居中
right 图片居右，文本在图片的左边
top 图片的顶部与文本对齐
middle 图片的中央与文本对齐
bottom 图片的底部与文本对齐除此之外,使用 <P>标记的 align属性或 <CENTER>
标记也可以实现相应的功能 。
当设置文本环绕方式 （ left或 right） 后,将一直有效,如果想取消环绕方式,可使用 <BR>标记的 clear
属性,其后的文本将不再环绕图片 。 格式为：
<BR clear=left或 right或 all>
【 例 2-12】 文本环绕图片及其解除 。
<HTML>
<HEAD> <TITLE>设定图片的对齐方式 </TITLE> </HEAD>
<BODY>
<H4 align=center>设定图片的对齐方式 </H4>
<IMG src=daisy.jpg align=left>
如果不设置文本对图片的环绕，
图片在页面会占一片空白。利用标记的属性，
可以使文本环绕图片。 <br>
其中 align的值可取,<br>
aleft图片居左，文本在图片的右边。 <br>
right图片居右，文本在图片的左边。 <br clear=left>
<IMG src=daisy.jpg align=right>
使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。
</BODY>
</HTML>
在浏览器中的 显示效果 。
(3) 设置图片与文本之间的空白 。
适当在图片与文本之间留下空白,可使页面看起来不至于太紧密 。 <IMG>标记的 hspace和 vspace属性可实现该功能 。
【 例 2-13】 设置图片与文本之间的空白 。
<HTML>
<HEAD> <TITLE>设置图片与文本之间的空白 </TITLE> </HEAD>
<BODY>
<H4 align=center>设置图片与文本之间的空白 </H4>
<IMG src=daisy.jpg align=left hspace=10 vspace=15>
如果不设置文本对图片的环绕，图片在页面会占一片空白。
利用标记的属性，可以使文本环绕图片。 <br>
其中 align的值可取,<br>
aleft图片居左，文本在图片的右边。 <br>
right图片居右，文本在图片的左边。 <br clear=left>
<IMG src=daisy.jpg align=right hspace=15 vspace=20>
使用该标记设置文本环绕方式后，将一直有效，
直到遇到下一个设置标记。
如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。
</BODY>
</HTML>在浏览器中的 显示效果 。
4,用图片作为超链接图片也可作为热点,单击图片则跳转到被链接的文本或其他文件 。 格式为：
<A href=地址 ><IMG src=图片文件名 ></A>
【 例 2-14】 如在例 2-13中用图片作为超链接,链接到例 2-11中的文件 。
<HTML>
<HEAD> <TITLE>设置图片作为超链接的热点 </TITLE> </HEAD>
<BODY>
<H4 align=center>设置图片作为超链接的热点 </H4>
<A href="2_11.htm">
<IMG src=daisy.jpg align=left hspace=10 vspace=15>
</A>
如果不设置文本对图片的环绕，图片在页面会占一片空白。
利用标记的属性，可以使文本环绕图片。 <br>
其中 align的值可取,<br>
aleft图片居左，文本在图片的右边。 <br>
right图片居右，文本在图片的左边。 <br clear=left>
<IMG src=daisy.jpg align=right hspace=15 vspace=20>
使用该标记设置文本环绕方式后，
将一直有效，直到遇到下一个设置标记。
如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。
</BODY>
</HTML>
2.3 上机练习
【 练习 2-1】 制作指向本页中的链接,如图 2-13所示 。
在本网页中给出例题的内容 （ 题目和解答 ）,单击网页前部的例题名跳转到该例题的开始处,在例题内容结尾单击,返回,回到网页前部 。 在题目后单击,执行,将打开该例题的网页 。 各例题文件保存在当前文件夹中的,第 2章例题,子文件夹中 。 并在网页尾部建立指向制作者电子函件的链接 。
1.1 课前导读
1.2 课堂教学
2.2.1 HTML基础
2.2.2 HTML入门 —— 简单标记的认识与使用
2.2.3 段落和文字标记
2.2.4 建立超级链接
2.2.5 加入图片
1.3 上机练习
1.4 课后作业
1.1 课前导读
1,什么是 HTML
2,HTML的作用
3,HTML的编辑环境
4,专用的网页编辑器
1,什么是 HTML
HTML是 Hyper Text Markup Language（ 超文本标记语言 ） 的缩写,它是构成 Web页面 （ Page） 的主要工具,是用来表示网上信息的符号标记语言 。
HTML是一种用于网页制作的排版语言,是 Web最基本的构成元素 。 HTML并非一种编程语言 。 用 HTML标记文档或给文档添加标记,使文档可在 WWW上发布 。
用 HTML准备的文档包含引用图形和格式标记 。 用 Web
浏览器可以查看这些 HTML文档 。
用 HTML的语法规则建立的文档可以运行在不同操作系统的平台上 。 因此,HTML文档属于纯文本文件
（ 它能用任意的文本编写器书写 ） 。
2,HTML的作用
HTML语言作为一种网页编辑语言,易学易懂,能制作出精美的网页效果,其作用如下：
① 格式化文本 。 如设置标题,字体,字号,颜色；设置文本的段落,对齐方式等 。
② 建立超链接 。 通过超链接检索在线的信息,
只需用鼠标单击,就可以到达任何一处 。
③ 创建列表 。 把信息用一种易读的方式表现出来 。
④ 插入图像 。 使网页图文并茂,还可以设置图像的各种属性,如大小,边框,布局等 。
⑤ 建立表格 。 表格为浏览者提供了快速找到需要信息的显示方式,还可以用表格来设定整个网页的布局 。
⑥ 加入多媒体 。 可以在网页中加入音频,视频,
动画,还能设定播放的时间和次数 。
⑦ 交互式窗体,计数器等 。 为获取远程服务而设计窗体,可用于检索信息,定购产品等 。
HTML是最基本的网页制作语言,其他的专用网页编辑器 （ 如 FrontPage,Dreamweaver等 ） 都是以 HTML
为基础的 。
3,HTML的编辑环境
HTML的编辑环境很简单,任何一台计算机都可以编辑网页 。 但要看到用户自己设计的网页效果,就需要 安 装 一 个 浏 览 器,如 Internet Explorer,
Netscape Navigator等 。 因此,只要计算机能运行某个浏览器,就具备了网页制作的硬件环境 。 HTML要求的软件环境更为简单,任何文本编辑器都可以用来制作网页,包括记事本,写字板,Word,WPS等编辑程序 。 不过在保存时,一定要用纯文本方式存盘 。
HTML文件的设计制作与一般程序设计语言之间最大的不同在于,HTML具有跨平台的处理能力 。 也就是说,只要有适当的浏览器,不管使用何种操作系统,
都能阅读制作的 HTML文件 。
4,专用的网页编辑器
HTML作为最基本的网页编辑语言,能实现制作网页的各种效果 。 但是,它毕竟是一种代码,得记住一些标记 。 因此,为了使设计网页更加简单方便,有些公司和人员就设计了专用的网页编辑器 。 专用的网页编辑器主要分为 3大类 。
① 完全的所见即所得工具：所谓所见即所得,就是在编辑网页时看到的效果,与使用浏览器时看到的效果基本一致 。 如果希望建立一个美观而又不复杂的站点,这种工具非常适合,可以很轻松地制作想要的效果,但是必须按照这些软件的要求来设计 。 典型的工具有 Drumbeat,NetobjectFusion。
② 纯粹的 HTML代码编辑工具：用纯粹的 HTML代码编辑工具,用户可以对页面进行完全的控制 。 使用这些工具时,直接编辑原始的 HTML代码,在对页面进行加工时,不会破坏原有的代码 。
当然,这并不是说用户得从头到尾编写每一种效果的 HTML源代码 。 因为这些工具通常带有许多辅助工具,可以帮助用户创建表格,表单,以及其他复杂的结构,并对创建的页面进行预览 。
这些工具最大的不足是必须会 HTML语言 。 当然,
要想成为一个好的网页制作人员,HTML还是应当掌握的 。
这 类 工 具 中 典 型 的 有 HomeSite,
HotDogProfessional,HTMLedPro,WebEditPro。
③ 混合型工具：介于上面两种工具之间,混合型工具在所见即所得的工作环境下可以完成主要的工作,
同时也能切换到一个文本编辑器,对 HTML源代码进行直接地调整 。
像所见即所得的工具一样,混合型的创作工具通常也不能完全控制 HTML页的代码 。 但 Macromedia
Dreamweaver在对已有的 HTML页进行编辑时,会严格保持原有代码的格式 。 典型的混合型工具还有 Adobe
PageMill,FrontPage,CutePage,QuickSite等 。
FrontPage是较好的所见即所得的网页编辑工具,
也是常用的网页编辑器 。 它对一个 Web站点有很强的控制能力,可以统一 Web站点内页面的外观和风格 。
它的 Web管理功能也很强大,用户可以通过图形的方式观察和调整站点的结构 。
Dreamweaver的最佳特性就是它的,往返式
（ Roundtrip） HTML” 编辑能力,这种特性使图形编辑工具和代码编辑工具输出同样的 HTML代码 。
Dreamweaver是图形化 HTML编辑工具中惟一不干扰原有 HTML代码的工具,所以用 Dreamweaver编辑后,仍然可以转回到原来的代码中用编辑工具进行修改 。 用其他工具修改后,Dreamweaver能自动更新相应的页面 。 它能很方便地产生动画,嵌入 JavaApplet、
ActiveX控件,以及 Netscape插件,并对用户的动作作出反应 。 此外,Dreamweaver在 Internet Explorer
和 Netscape Navigator两种浏览器之间的兼容性问题上处理得也很好 。
2.2 课堂教学
2.2.1 HTML基础
2.2.2 HTML入门 —— 简单标记的认识与使用
2.2.3 段落和文字标记
2.2.4 建立超级链接
2.2.5 加入图片
2.2.1 HTML基础
1,HTML文件的组成
2,标记
3,标记的属性
4,HTML文件的基本结构
HTML文件是一种纯文本文件,可以通过浏览器读取 HTML文件,并用浏览器内含的语法分析器来解读各种特殊标记 。
1,HTML文件的组成一个 HTML文件可由下列 3部分组成 。
① 标记：是 HTML的基本元素,可以说一个 HTML文件大部分都是由字符信息加上一些标记呈现出来的 。
也就是说,只要在 HTML文件中适当的位置上加上所需标记,就可依照各标记所代表的意义实现各种特殊的功效 。 基本的标记可分为两种：单一标记 （ 只要一个标记就能完成所要表示的功能 ） 和成对标记 （ 需要两个标记组合才能完成所需功能 ）
② 文字与图形资料：是指要提供给浏览信息的人阅读的内容 。 WWW显示的图形一般都以独立文件的形式存在,如果要显示图形 （ 图形文件要用其他程序建立 ）,就必须用特殊的标记指向图形文件 。
③ 统一资源定位器 URL（ Uniform Resource
Locator）,是 WWW上文件的参照格式,浏览者在浏览器的地址处输入 URL格式的内容,就可获取所指主机的主页 。
2,标记
HTML文件由标记和被标记的内容组成 。 标记 （ tag）
能产生所需的各种效果 。 就像一个排版程序,它将网页的内容排成理想的效果 。 这些标记名称大都为相应的英文单词首字母或缩写,如 P表示 Paragraph（ 段落 ）,IMG为 Image（ 图像 ） 的缩写,很好记忆 。 各种标记的效果差别很大,但总的表示形式却大同小异,
大多数成对出现,格式为：
<标记 > 受标记影响的内容 </标记 >
说明：
① 每个标记都用,<” （ 小于号 ） 和,>” （ 大于号 ） 围住,如 <P>,<Table>,以表示这是 HTML代码而非普通文本 。 注意,,<” 与标记名之间不能留有空格或其它字符 。
② 在标记名前加上符号,/” 便是其结束标记,
表示这种标记内容的结束,如 </FONT>。 标记也有不用
</标记 >结尾的,称之为单标记 。
③ 标记字母大小写皆可,没有限制 。
对同一段要标记的内容,可以用多个标记来共同作用,产生一定的效果 。 此时,各个标记间的顺序也是任意的 。
3,标记的属性标记只是规定这是什么信息,或是文本,或是图片,但怎样显示或控制这些信息,就需要在标记后面加上相关的属性来表示,每个标记有一系列的属性 。
标记要通过属性来制作出各种效果 。 格式为：
<标记 属性 1=属性值 属性 2=属性值? >
受影响的内容 </标记 >
例如字体标记 <FONT>,有属性 size和 color等 。 属性 size表示文字的大小,属性 color表示文字的颜色 。
表示为：
<FONT size=3 color=red> 属性示例 </FONT>
需要注意的是：
① 并不是所有的标记都有属性,如换行标记就没有 。
② 根据需要可以用该标记的所有属性,也可以只用需要的几个属性,在使用时,属性之间没有顺序 。
多个属性之间用空格隔开 。
属性和标记一样,都不区分大小写 。 但为了阅读方便,本书用大写字母表示标记,小写字母表示属性 。
4,HTML文件的基本结构
HTML文件是一种纯文本格式的文件,HTML文件包括头部 （ head） 和主体 （ body） 。 文件的基本结构为：
<HTML>
<HEAD>
<TITLE> 网页的标题 </TITLE>
</HEAD>
<BODY>
网页的内容
</BODY>
</HTML>
说明：
① HTML文件以 <HTML>开头,以 </HTML>结尾 。
② <HEAD>? </HEAD>：表示这是网页的头部,用来说明文件命名和与文件本身的相关信息 。 可以包括网页的标题部分,<TITLE>? </TITLE>。
③ <BODY>? </BODY>：表示网页的主体即正文部分 。
④ HTML语言并不要求在书写时缩进,但为了程序的易读性,建议网页设计制作者使标记的首尾对齐,
内部的内容向右缩进几格 。
【 例 2-1】 简单的 HTML文件 。
<HTML>
<HEAD>
<TITLE> 简单的 HTML文件 </TITLE>
</HEAD>
<BODY>
最简单的网页
</BODY>
</HTML>
图 2-1 例 2-1的显示效果将文件以 2_1.htm为文件名存盘,存放的位置是本机的工作目录,ASP例 （ 参见 1.2.3） 。 有以下两种方式可以执行 HTML文件 2_1.htm：
打开 Internet信息服务器窗口,找到虚拟目录
myasp,在右边的文件列表中选择文件 2_1.htm,然后在,操作,菜单中选择,浏览,项；
打开浏览器,在地址栏中直接输入虚拟目录名及文件名：
http://127.0.0.1/myasp/2_1.htm
在浏览器上的 显示效果 如图 2-1所示 。
2.2.2 HTML入门
1,HTML文档标记 <HTML>?</HTML>
2,HTML文件头标记 <HEAD>?</HEAD>
3,HTML文件标题标记 <TITLE>?</TITLE>
4,HTML文件主体标记 <BODY>?</BODY>
5,注释标记
1,HTML文档标记 <HTML>? </HTML>
HTML文档标记的格式为：
<HTML> HTML文档的内容 </HTML>
HTML文档的标记 。 <HTML>处于文档的最前面,表示 HTML文档的开始,即浏览器从 <HTML>开始解释,直到遇到 </HTML>为止 。 每个 HTML文件均以 <HTML>开始,
以 </HTML>结束 。
2,HTML文件头标记 <HEAD>? </HEAD>
HEAD是英文,头,的意思,习惯上将 HTML文档分为文件头和文件主体两个部分 。 文件主体是在 Web浏览器窗口的用户区显示的内容,而文件头则用来规定该文档的标题 （ 浏览器标题栏中的内容 ） 和文档的一些属性 。 HTML文件头标记的格式为：
<HEAD> 头部的内容 </HEAD>
说明,HTML文件的头部在文件标记 <HTML>之后,
在开始标记 <HTML>和结束标记 </HTML>间定义 。 其内容可以是标题名,文本文件地址,创作信息等网页信息说明 。 对应于相应的标记,有标题标记
<TITLE>? </TITLE>等 。
<HEAD>标记在 HTML文件中不是必须的,如果没有,
浏览器也会照常解读文件 。
3,HTML文件标题标记 <TITLE>? </TITLE>
HTML文件标题标记的格式为：
<TITLE> 标题名 </TITLE>
设定 HTML文件标题的标记 。 在文件头部定义的标题内容不在浏览器窗口中显示,而是在浏览器的标题栏中显示 。 尽管头部定义的信息很多,但能在浏览器标题栏中显示的信息只有标题 。
4,HTML文件主体标记 <BODY>? </BODY>
HTML文件主体标记的格式为：
<BODY> 文件主体 </BODY>
说明：
① 主体位于头部之后,以 <BODY>为开始标记,
</BODY>为结束标记 。 它定义了网页上显示的主要内容与显示格式,是整个网页的核心,网页中要真正显示的内容都包含在本标记中 。
② <BODY>有很多属性,这些属性用于设定网页的总体风格,可以定义页面的背景图像,背景颜色,
文字颜色,超文本链接的颜色 。 其中常用的属性见表
2-1。
表 2-1 <BODY>标记的属性值 说明
background 设置网页的背景图像。
Bgcolor 设置网页的背景色。
Text 设置文本的颜色。
Link 设置尚未被访问过的超文本链接的颜色，默认为蓝色。
vlink 设置已被访问过的超文本链接的颜色，默认为蓝色。
alink 设置超文本链接在被访问瞬间的颜色，默认为蓝色。
表 2-1中,涉及颜色的属性,取值可以是英文颜色名,也可以用,#” 引导的一个十六进制数代码来表示,
见表 2-2。 如果颜色值用十六进制数代码,则颜色数比表 2-2列出的数目多得多 。
表 2-2 颜色代码表名称 英文颜色名 16进制代码黑色 black #000000
蓝色 blue #0000FF
棕色 brown #A52A2A
青色 cyan #00FFFF
灰色 gray #808080
绿色 green #008000
乳白色 ivory #FFFFF0
桔黄色 orange #FFA500
粉红色 pink #FFC0CB
红色 red #FF0000
白色 white #FFFFFF
黄色 yellow #FFFF00
深红色 crimson #CD061F
黄绿色 greenyellow #0B6EFF
水蓝色 dodgerblue #0B6EFF
淡紫色 lavender #DBDBF8
【 例 2-2】 使用网页的背景色 （ bgcolor） 属性,可以设定整个网页的背景颜色；使用网页的文本色 （ text）
属性,可以设定整个网页文字的颜色 。
<HTML>
<HEAD>
这是主体之外的文本
<TITLE> 试试 BODY标记的属性 </TITLE>
</HEAD>
<BODY bgcolor=greenyellow text=blue>
设置网页的背景色属性为 "黄绿色 ",
设置网页的文本色属性为 "蓝色 "
</BODY>
</HTML>
显示效果 如图 2-2所示 。
图 2-2 使用网页的 bgcolor属性
5,注释标记像很多程序语言一样,HTML文件也提供注解功能 。
浏览器会忽略此标记中的文字 （ 可以是很多行 ） 而不作显示 。 通常使用,注释,为文中的不同部分加上说明,以方便日后阅读和修改 。 注释标记的格式为：
<!-- 注释内容 -->
注释内容不局限于一行,长度也不受限制 。 即结束标识符不必与开始标识符在同一行上 。
2.2.3 段落和文字标记
1,标题文字标记
2,文本文字标记
3,设置字型
4,强制换行、换段标记
5,分区显示标记
6,水平线
7,特殊符号在多数网页中,文档是核心内容,所以要经常设置文档的格式 。 设置文档的标记包括标题和文字的字体,字号,字型,颜色,段落格式,文本的布局等 。
1,标题文字标记这里的标题是指页面中文本的标题,而不是用
<TITLE>? </TITLE>定义的网页标题,标题格式显示在浏览器窗口内,而不显示在浏览器的标题栏中 。
在页面中,标题是一段文字内容的核心,所以总是用加强的效果来表示 。 网页中的信息可以分为主要点,次要点,可以通过设置不同大小的标题,为文章增加条理 。 标题文字标记的格式为：
<Hn align=对齐方式 > 标题文字 </Hn>
说明：
① 属性 n用来指定标题文字的大小 。 n可以取 1～ 6
的整数值,取 1时文字最大,6时文字最小 。
② 属性 align用来设置标题在页面中的对齐方式,
取值有,left（ 左对齐 ）,center（ 居中 ） 或 right
（ 右对齐 ） 。
③ <H>? </H>标记缺省显示宋体字 。 <H>? </H>
标记会自动插入一个空行 。 在一个标题行中无法使用不同大小的字体 。
【 例 2-3】 使用标题标记设置标题内容的大小与对齐方式 。
<HTML>
<HEAD>
<TITLE> 设置标题 </TITLE>
</HEAD>
<BODY>
<H1>第 1级标题 （ H1） </H1>
<H2>第 2级标题 （ H2） </H2>
<H3>第 3级标题 （ H3） </H3>
<H4 align=left>第 4级标题 （ H4） （ 居左 ） </H4>
<H5 align=center>第 5级标题 （ H5） （ 居中 ） </H5>
<H6 align=right>第 6级标题 （ H6） （ 居右 ） </H6>
</BODY>
</HTML>
图 2-3 设置标题文字大小浏览器的显示效果如图 2-3所示 。
2,文本文字标记在网页中为了增强页面的层次,其中的文字可以用不同的大小,字体,字型,颜色 。 文本文字标记
<FONT>用来设定文字的字体,字号和颜色 。 其格式为：
<FONT size=数字 face=字体名 color=颜色 >
被设置的文字 </FONT>
说明,<FONT>标记的属性包括,size,face、
color。
① size属性用来设置文字的大小 。 数字的取值范围从 1～ 7,size取 1时最小,取 7时最大 。
② face属性用来设置字体 。 如黑体,宋体,楷体
_GB2312,隶书,Times New Roman等 。
当文字为汉字时,格式中的,字体名,可以为：
宋体,幼圆,隶书,楷体 _GB2312,黑体,仿宋
_GB2312等 。 当文字为英文时,字体名可以为 Times
New Roman等约 50种字体 。 其实,这里的字体名字就是在 Word的,字体,工具栏中显示的字体名 。
③ color属性用来设置文字颜色,其取值见表 2-2。
【 例 2-4】 使用 <FONT>标记的 size属性设置文字的大小；
face属性设置字体 。 color属性设置文字颜色 。
<HTML>
<HEAD> <TITLE>使用 FONT标记 </TITLE> </HEAD>
<BODY>
<H1>设置文字的属性 </H1>
<FONT size=1 color=cyan>1号字青色 </FONT>
<FONT size=2 color=green>2号字绿色 </FONT>
<FONT size=3 face=幼圆 color=orange>3号幼圆桔黄色 </FONT>
<FONT size=4 face=隶书 color=crimson>4号隶书深红色 </FONT>
<FONT size=5 face=黑体 color=greenyellow>5号黑体黄绿色 </FONT>
<FONT size=6 face=方正舒体 color=dodgerblue>6号方正舒体水蓝色 </FONT>
<FONT size=7 face=华文彩云 color=lavender>7号华文彩云淡紫色 </FONT>
</BODY>
</HTML>
在浏览器中的 显示效果 如图 2-4所示 。
图 2-4 设置文本文字属性说明：
① <FONT>和 <Hn>标记都可以设置文字的大小,
二者的区别见表 2-3。
标记 对象 用法 文字大小 n的取值 字体加粗
<FONT> 一段文章、
语句、短语
<FONT size=n>文字
</FONT>
n=1～ 7，取 1时最小,7时最大不自动加粗
<Hn> 标题 <Hn> 文字 </Hn> n=1～ 6，取 6时最小,1时最大自动加粗表 2-3 <FONT>与 <Hn>标记的区别另外,当 <FONT>中的 size取 7时,文字比 <H1>要大 。
② <BODY>标记中的 text属性和 <FONT>标记中的
color属性都可以设置文本的颜色,<FONT>标记直接作用其后的文字,可在文件中多处设定,使网页中文字的颜色绚丽多彩 。
当 <BODY>与 <FONT>标记同时对文字颜色进行定义时,<FONT>标记优先 。
3,设置字型字型就是文字的风格,如加粗,斜体,带下划线,
上标,下标等 。 字型的控制标记见表 2-4。
表 2-4 设置各种字型的标记标记格式 字体效果 说明
<B>受影响的文字 </B> 受影响的文字 加粗
<I>受影响的文字 </I> 受影响的文字 斜体
<U>受影响的文字 </U> 受影响的文字 带下划线
<TT>受影响的文字 </TT> 受影响的文字 标准打印机字体
<STRIKE>受影响的文字 </STRIIKE> 受影响的文字 带删除线受影响的 <SUB>文字 </SUB> 下标受影响的 <SUP>文字 </SUP> 上标
<BIG>受影响的文字 </BIG> 大字体文本
<SMALL>受影响的文字 </SMALL> 小字体文本
【 例 2-5】 使用字型标记设置文字的风格 。
<HTML>
<HEAD> <TITLE> 设置字型 </TITLE>
</HEAD>
<BODY>
<B>黑体 </B>
<I>斜体 </I>
<U>带下划线 </U>
<TT>标准打印机字体 </TT>
<STRIKE>带删除线 </STRIKE>
<SUB>下标 </SUB>
<SUP>上标 </SUP>
<BIG>大字体 </BIG>
<SMALL>小字体 </SMALL>
</BODY>
</HTML>
图 2-5 设置文本的风格在浏览器中的 显示效果 如图 2-5所示 。
4,强制换行,换段标记在 HTML文档中,无法用多个回车,空格,〈 Tab〉
键来调整文档段落的格式 。 要用 HTML的标记来强制换行,分段 。
① 强制换行标记 <BR>放在一行的末尾,可以使后面的文字,图片,表格等显示于下一行,而又不会在行与行之间留下空行,即强制文本换行 。 由于浏览器会自动忽略原始码中空白和换行的部分,这使 <BR>成为最常用的标记之一 。 强制换行标记的格式为：
文字 <BR>
说明：浏览器解释时,从该处换行 。 换行标记单独使用,可使页面清晰,整齐 。
② 段落标记 <P>定义一个新段落的开始 。 <P>标记不但能使后面的文字换到下一行,还可以使两段之间多一空行 。 由于一段的结束意味着新一段的开始,所以使用 <P>也可省略结束标记 。
强制换段标记的格式为：
<P>
说明：段落标记 <P>的属性 align用来设置段落的对齐方式,其取值可以为 left,center或 right,分别表示居左,居中,居右 。 缺省时默认为 left。
一个强制换段标记 <P>可以看作是两个强制换行标记 <BR><BR>。
【 例 2-6】 换行与换段标记的使用 。
<HTML>
<HEAD> <TITLE>强制换行,换段标记的使用 </TITLE> </HEAD>
<BODY><H2 align=center><FONT color=blue>学生之家 </FONT></H2>
新 闻
学习窗口
<P>健康信箱 <BR>
聊 天 室
<P align=center> 来信
</BODY>
</HTML>
图 2-6 换行与换段标记的使用说明,HTML语言忽略多余的空格,最多只空一个空格 。 在需要空格的位置,可以用, ” 插入一个空格,或者输入全角中文空格 。 在浏览器中 显示 。
5,分区显示标记分区显示标记可以使文本块或一段文字在网页上：
左对齐,居中和右对齐 。 分区显示标记的格式为：
<DIV align=left|center|right>
文本或图像 </DIV>
说明：属性 align的取值分别为,left,center
和 right。
【 例 2-7】 分区显示标记的使用 。
<HTML>
<HEAD>
<TITLE> 分区显示标记的应用 </TITLE>
</HEAD>
<BODY>
<CENTER><H2>分区显示标记的应用 </H2></CENTER>
<FONT color=blue>
<DIV align=center>居中 center<BR>居中 <BR>center</DIV>
<DIV align=left>居左 left<BR>居左 <BR>left</DIV>
<DIV align=right>居右 right<BR>居右 <BR>right</DIV>
</FONT>
</BODY>
</HTML>
在浏览器中 显示
6,水平线在页面中插入一条水平标尺线,可以使不同功能的文字分隔开,看起来整齐,明了 。 当浏览器执行
HTML文件中的 <HR>标记时,会在此处换行,并加入一条水平线段 。 线段的样式由标识的参数决定 。 水平线标记的格式为：
<HR align=对齐方式 size=横线粗细
width=横线长度 color=横线颜色 noshade>
说明：
① 属性 align设定横线放置的位置,可选择 left
（ 居左 ）,right（ 居右 ） 或 center（ 居中 ） 。
② 属性 size设定线条粗细,以像素为单位,默认为 2。
③ 属性 width设定线段长度,可以是绝对值 （ 以像素为单位 ） 或相对值 （ 相对于当前窗口的百分比 ） 。
所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变 。 所谓相对值,是指长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为 100%,即始终填满当前窗口 。
④ 属性 color设定线条颜色,默认为黑色 。 可以采用颜色的名称 。 颜色可以用相应英文单词或以,#”
引导的一个十六进制数代码来表示,见表 2-2。
⑤ 属性 noshade设定线条为平面显示 （ 没有三维效果 ）,若缺省则有阴影或立体效果 。
【 例 2-8】 水平线标记的使用 。
<HTML>
<HEAD> <TITLE> 水平线段标记的应用 </TITLE> </HEAD>
<BODY>
<CENTER><H3>水平线 </H3></CENTER>
<HR>
<HR align=left size=6 width=320>
<HR align=center size=8
width=60% color=blue>
<HR align=right size=8 width=360 color=red>
<HR size=4 width=80% color=#CD061F>
<HR size=5 noshade>
<HR width=70% noshade>
</BODY>
</HTML>
在浏览器中的 显示 。 浏览时,改变一下窗口的大小,可以看到线段的变化效果 。
7,特殊符号浏览器解释 HTML文件时,是根据,<” 与,>” 来识别标记的,然后再确定这两个符号中的内容是否为
HTML文件标记,若是则按其规则解读 。 所以,要在网页中显示,<” 或,>”,就要作为特殊字符 。 其他常用的特殊字符见表 2-5。
表 2-5 特殊替换字符特殊字符 所替代的字符 说明
& 特殊字符的开始; 特殊字符的结束
Lt < 小于号
Gt > 大于号
Quot " 双引号
nbsp 空格
2.2.4 建立超级链接
1,热点标记
2,创建指向其他页面的链接
3,创建指向本页中的链接超链接 （ Hyperlink） 可以看作是一个,热点,,
它可以从当前 Web页定义的位置跳转到其他位置,包括当前页的某个位置,Internet或本地硬盘或局域网上的其他文件,甚至跳转到声音,图片等多媒体文件 。
浏览 Web页是超链接最普遍的一种应用,通过超链接还可以获得不同形态的服务,如文件传输,资料查询,
电子函件,远程访问等 。
当 Web页包含超链接时,Web页中的外观形式为彩色 （ 一般为蓝色 ） 且带下划线的文字或图片 。 单击这些文本或图片,可跳转到相应位置 。 鼠标指针指向超链接的显示文本或图片时,将变成手形 。 超文本链接使用热点标记 <A>来定义 。
1,热点标记热点由 <A>标记定义,它在网页上建立超文本链接 。
通过单击一个词,句或图片,可从此处转到另一个链接资源 （ 目标资源 ）,这个目标资源有唯一的地址
（ URL） 。 具有以上特点的词,句或图片就称为热点 。
<A>标记的格式为：
<A href=地址 name=字符串 target=打开窗口方式 >
热点 </A>
说明：
① href为超文本引用,它的值为一个 URL,是目标资源的有效地址 。 在书写 URL时要注意,如果资源放在自己的服务器上,可以写相对路径 。 否则,应写绝对路径 。 href不能与 name同时使用 。
② name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址 。
③ target设定链接被按后结果所要显示的窗口 。
可选值为,_blank,_parent,_self,_top,框架名称 。 其说明见表 2-6。
取值 说明
target="_blank"
或 target="new"
将链接的画面内容，开在新的浏览器窗口中。
target="_parent" 将链接的画面内容，显示在直接父框架窗口中。
target="_self" 将链接的画面内容，显示在当前窗口中（默认值）。
target="_top" 将框架中连结的画面内容，显示在没有框架的窗口中
（即除去了框架）。
target="框架名称
"
只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架名称是事先由框架标记所命名的。
表 2-6 target属性的取值
2,创建指向其他页面的链接创建指向其他页面的链接,就是在当前页面与其他相关页面间建立超链接 。 无论目标文件与当前文件的目录关系如何,其格式为：
<A href = "目标文件的路径 /目标文件名,html">
热点 </A>
根据目标文件与当前文件的目录关系,有 4种写法：
① 链接到同一目录内的网页文件,其格式为：
<A href="目标文件名,html"> 热点 </A>
目标文件名是链接所指向的文件 。
② 链接到下一级目录中的网页文件,其格式为：
<A href="子目录名 /目标文件名,htm">
热点 </A>
③ 链接到上一级目录中的网页文件,其格式为：
<A href="../目标文件名,html"> 热点 </A>
其中,,./” 表示退到上一级目录中 。
④ 链接到同级目录中的网页文件,其格式为：
<A href="../子目录名 /目标文件名,html">
热点 </A>
表示先退到上一级目录中,然后再进入到目标文件所在的目录 。
3,创建指向本页中的链接要在当前页面内实现超链接,需要定义两个标记：
一个为超链接标记,另一个为书签标记 。 超链接标记的格式为：
<A href="#记号名 "> 热点 </A>
单击热点文本,将跳转到,记号名,开始的文本 。
书签就是用 <A>标记对该文本作一个记号 。 如果有多个链接,不同目标文本要设置不同的书签名,书签名在 <A>的 name属性中定义 。 格式为：
<A name=,记号名,> 目标文本附近的字符串
</A>
【 例 2-9】 链接本页中的文本 。
<HTML>
<HEAD><TITLE>学生之家 </TITLE></HEAD>
<BODY link=red alink=blue vlink=green>
<A name="0"> </A>
<H2 align=center><B>欢迎来到“学生之家” </B></H2>
<FONT size=3 color=purple><CENTER>
<A href="#news">新闻 </A>
<A href="#study">学习园地 </A>
<A href="#health">健康信箱 </A> <P>
</CENTER></FONT>
<A name="news"></A>新闻 <BR>
..................<BR>
<DIV align=right><A href="#0">返回 </A></DIV><P>
<A name="study"></A>学习园地 <BR>
..................<BR>
<DIV align=right><A href="#0">返回 </A></DIV><P>
<A name="health"></A>健康信箱 <BR>
..................<BR>
<DIV align=right><A href="#0">返回 </A></DIV><P>
</BODY>
</HTML>
在浏览器中的 显示 。 单击超链接,将跳转到页面的相应位置,
2.2.5 加入图片
1,图片文件的格式
2,设置网页的背景
3,图片标记
4,用图片作为超链接
1,图片文件的格式加入网页中的图片,通常使用 GIF格式和 JPEG格式 。
GIF格式文件最多只能显示 256种颜色,这使得它很少用于存储照片 。 但是,存放图标,剪贴画和艺术线条等对颜色要求不高的图片,已经足够了 。 GIF格式图片的优点在于制作透明,隔行和动画效果 。
JPEG格式文件可以拥有计算机所能提供的最多种颜色,适合存放高质量的彩色图片,照片 。 另外,
JPEG格式文件采用压缩方式存储文件信息,相同的图片,所占空间比 GIF文件小,所以下载时间较短,浏览速度较快 。 但是,JPEG格式的文件没有 GIF格式文件的三种特殊效果 。
2,设置网页的背景网页的背景可以是某种颜色,也可以是图片 。 无论是图片,还是背景色,都通过 <BODY>标记的相应属性来设置 。
(1) 设置背景色利用色彩作背景,比较容易在颜色上协调,而且下载速度比采用图片作为背景快 。 网页缺省为白色,
<BODY>的 bgcolor属性用于设置网页的背景色 。 格式为：
<BODY bgcolor=颜色值 >
其中,,颜色值,可以为颜色的英文名或相应十六进制值 。
(2) 用图片作为背景使用 <BODY>标记的 background属性,可为网页铺上背景图片 。 格式为：
<BODY background=图片文件名 >
其中,图片文件名,包括文件存放的路径,可以是相对路径,也可以是绝对路径 。 图片文件可为 GIF格式或 JPEG格式的文件 。
在浏览器中,作为背景的图片将按原来的大小复制,重复铺满整个网页 。 作为背景的图片文件,要做的很小,以便加快下载速度 。
【 例 2-10】 图片背景 。
<HTML>
<HEAD> <TITLE>图片背景 </TITLE> </HEAD>
<BODY background=bg1.gif> <!--在网页中加入只有一只小猫的图片 -->
<H2 align=CENTER>用图片作为背景 </H2>
<FONT size=4>
在浏览器中，作为背景的图片将按原来的大小复制，重复铺满整个网页。因此，作为背景的图片文件，要做的很小，以便加快下载速度。 <BR>
</FONT>
</BODY>
</HTML>
在浏览器中的 显示效果 。
3,图片标记使用图片标记,可以把一幅图片加入到网页中 。
用图片标记还可以设置图片的替代文本,尺寸,布局等属性 。 格式为：
<IMG src=文件名 alt=说明 width=x height=y
border=n hspace=h vspace=v align=对齐方式 >
说明：标记中的属性说明见表 2-7。
名称 说明
src 指出要加入图片的文件名，即“图片文件的路径 \图片文件名”。
alt 在浏览器尚未完全读入图片时，在图片位置显示的文字。
width 宽度（像素数或百分数）。通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具。
height 设定图片的高度（像素数或百分数）。
hspace 设定图片边沿空白，以免文字或其它图片过于贴近。设定图片左右的空间水平方向空白像素数。
vspace 设定图片上下的空间，空白高度采用像素作单位。
align 图片在页面中的对齐 /布局方式，或图片与文字的对齐方式。
表 2-7 图片标记的属性说明
(1) 图片的尺寸使用 <IMG>标记的 width和 height属性可以设置图片的大小,width和 height属性的值可取像素数,也可取百分数 （ 浏览器窗口 ） 。 如果不设定图片的尺寸,
图片将按照其本身的大小显示 。
【 例 2-11】 设置图片的尺寸 。
<HTML>
<HEAD> <TITLE>设定图片的尺寸 </TITLE> </HEAD>
<BODY>
<H4 align=center>设定图片的尺寸 </H4>
<IMG src="daisy.jpg" alt="封面 ">原始大小
<IMG src="daisy.jpg" alt="封面 " width=85 height=120>宽 85，高 120<BR>
<P><IMG src="daisy.jpg" width=40% height=40%>宽 40%，高 40%
</BODY>
</HTML>
在浏览器中的 显示效果 。
(2) 图片的布局所谓布局,就是图片放在网页中的位置,以及图片与文本的排放关系 。 实现这种功能,可以使用 <IMG>
标记的 align属性 。 align属性的取值见表 2-8。
表 2-8 图片标记的属性说明值 说明
left 图片居左，文本在图片的右边
center 图片居中
right 图片居右，文本在图片的左边
top 图片的顶部与文本对齐
middle 图片的中央与文本对齐
bottom 图片的底部与文本对齐除此之外,使用 <P>标记的 align属性或 <CENTER>
标记也可以实现相应的功能 。
当设置文本环绕方式 （ left或 right） 后,将一直有效,如果想取消环绕方式,可使用 <BR>标记的 clear
属性,其后的文本将不再环绕图片 。 格式为：
<BR clear=left或 right或 all>
【 例 2-12】 文本环绕图片及其解除 。
<HTML>
<HEAD> <TITLE>设定图片的对齐方式 </TITLE> </HEAD>
<BODY>
<H4 align=center>设定图片的对齐方式 </H4>
<IMG src=daisy.jpg align=left>
如果不设置文本对图片的环绕，
图片在页面会占一片空白。利用标记的属性，
可以使文本环绕图片。 <br>
其中 align的值可取,<br>
aleft图片居左，文本在图片的右边。 <br>
right图片居右，文本在图片的左边。 <br clear=left>
<IMG src=daisy.jpg align=right>
使用该标记设置文本环绕方式后，将一直有效，直到遇到下一个设置标记。如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。
</BODY>
</HTML>
在浏览器中的 显示效果 。
(3) 设置图片与文本之间的空白 。
适当在图片与文本之间留下空白,可使页面看起来不至于太紧密 。 <IMG>标记的 hspace和 vspace属性可实现该功能 。
【 例 2-13】 设置图片与文本之间的空白 。
<HTML>
<HEAD> <TITLE>设置图片与文本之间的空白 </TITLE> </HEAD>
<BODY>
<H4 align=center>设置图片与文本之间的空白 </H4>
<IMG src=daisy.jpg align=left hspace=10 vspace=15>
如果不设置文本对图片的环绕，图片在页面会占一片空白。
利用标记的属性，可以使文本环绕图片。 <br>
其中 align的值可取,<br>
aleft图片居左，文本在图片的右边。 <br>
right图片居右，文本在图片的左边。 <br clear=left>
<IMG src=daisy.jpg align=right hspace=15 vspace=20>
使用该标记设置文本环绕方式后，将一直有效，
直到遇到下一个设置标记。
如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。
</BODY>
</HTML>在浏览器中的 显示效果 。
4,用图片作为超链接图片也可作为热点,单击图片则跳转到被链接的文本或其他文件 。 格式为：
<A href=地址 ><IMG src=图片文件名 ></A>
【 例 2-14】 如在例 2-13中用图片作为超链接,链接到例 2-11中的文件 。
<HTML>
<HEAD> <TITLE>设置图片作为超链接的热点 </TITLE> </HEAD>
<BODY>
<H4 align=center>设置图片作为超链接的热点 </H4>
<A href="2_11.htm">
<IMG src=daisy.jpg align=left hspace=10 vspace=15>
</A>
如果不设置文本对图片的环绕，图片在页面会占一片空白。
利用标记的属性，可以使文本环绕图片。 <br>
其中 align的值可取,<br>
aleft图片居左，文本在图片的右边。 <br>
right图片居右，文本在图片的左边。 <br clear=left>
<IMG src=daisy.jpg align=right hspace=15 vspace=20>
使用该标记设置文本环绕方式后，
将一直有效，直到遇到下一个设置标记。
如果想取消文本环绕图片，可使用标记，其后的文本将不再环绕图片。
</BODY>
</HTML>
2.3 上机练习
【 练习 2-1】 制作指向本页中的链接,如图 2-13所示 。
在本网页中给出例题的内容 （ 题目和解答 ）,单击网页前部的例题名跳转到该例题的开始处,在例题内容结尾单击,返回,回到网页前部 。 在题目后单击,执行,将打开该例题的网页 。 各例题文件保存在当前文件夹中的,第 2章例题,子文件夹中 。 并在网页尾部建立指向制作者电子函件的链接 。
