当前位置:首页 >> 学科竞赛 >> 浙江省计算机高考复习 HTML语言

浙江省计算机高考复习 HTML语言


HTML语言介绍(一)
1 课前导读 2 课堂教学
1.1 1.2 1.3 1.4 1.5 HTML基础 HTML入门——简单标记的认识与使用 段落和文字标记 建立超级链接 加入图片

3 上机练习 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:

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>标记的属性

值 Bgcolor

说明 设置网页的背景色。

background 设置网页的背景图像。

Text
Link vlink alink

设置文本的颜色。
设置尚未被访问过的超文本链接的颜色,默认为蓝色。 设置已被访问过的超文本链接的颜色,默认为蓝色。 设置超文本链接在被访问瞬间的颜色,默认为蓝色。

表2-1中,涉及颜色的属性,取值可以是英文颜色 名,也可以用“#”引导的一个十六进制数代码来表示, 见表2-2。如果颜色值用十六进制数代码,则颜色数比 表2-2列出的数目多得多。

表2-2 颜色代码表
名称 黑色 蓝色 棕色 青色 灰色 绿色 乳白色 桔黄色 粉红色 红色 白色 黄色 深红色 黄绿色 英文颜色名 black blue brown cyan gray green ivory orange pink red white yellow crimson greenyellow 16进制代码 #000000 #0000FF #A52A2A #00FFFF #808080 #00FF00 #FFFFF0 #FFA500 #FFC0CB #FF0000 #FFFFFF #FFFF00 #CD061F #0B6EFF

水蓝色
淡紫色

dodgerblue
lavender

#0B6EFF
#DBDBF8

【例2-2】使用网页的背景色(bgcolor)属性,可以 设定整个网页的背景颜色;使用网页的文本色(text) 属性,可以设定整个网页文字的颜色。
<HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue> 设置网页的背景色属性为"黄绿色", 图2-2 使用网页的bgcolor属性 设置网页的文本色属性为"蓝色" </BODY> </HTML>

显示效果如图2-2所示。

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> 图2-3 设置标题文字大小 <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. 文本文字标记
在网页中为了增强页面的层次,其中的文字可以 用不同的大小、字体、字型、颜色。文本文字标记 <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所示。

说明: ① <FONT>和<Hn>标记 都可以设置文字的大小, 二者的区别见表2-3。
图2-4 设置文本文字属性 表2-3 <FONT>与<Hn>标记的区别 标记 <FONT> <Hn> 对象 一段文章、 语句、短语 标题 用法 <FONT size=n>文字 </FONT> <Hn> 文字 </Hn> 文字大小n的取值 n=1~7,取1时最 小,7时最大 n=1~6,取6时最 小,1时最大 字体加粗 不自动加 粗 自动加粗

另外,当<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> 新&nbsp;&nbsp;&nbsp;&nbsp;闻 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 学习窗口 <P>健康信箱<BR> 聊 天 室 <P align=center> 来信 </BODY> </HTML>

说明:HTML语言忽略多余的空格,最多只空一个空 格。在需要空格的位置,可以用“&nbsp;”插入一个空 格,或者输入全角中文空格。在浏览器中显示。

图2-6 换行与换段标记的使用

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。
表2-6 target属性的取值
取值 target="_blank" 或target="new" target="_parent" target="_self" target="_top" 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>&nbsp;&nbsp;&nbsp;&nbsp; <A href="#study">学习园地</A>&nbsp;&nbsp;&nbsp;&nbsp; <A href="#health">健康信箱</A>&nbsp;&nbsp;&nbsp;&nbsp; <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。

表2-7 图片标记的属性说明 名称 src alt width 说明 指出要加入图片的文件名,即“图片文件的路径\图片文件 名”。 在浏览器尚未完全读入图片时,在图片位置显示的文字。 宽度(像素数或百分数)。通常只设为图片的真实大小以免 失真,若需要改变图片大小最好事先使用图片编辑工具。

height
hspace vspace align

设定图片的高度(像素数或百分数)。
设定图片边沿空白,以免文字或其它图片过于贴近。设定图 片左右的空间水平方向空白像素数。 设定图片上下的空间,空白高度采用像素作单位。 图片在页面中的对齐/布局方式,或图片与文字的对齐方式。

(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> &nbsp;&nbsp; 如果不设置文本对图片的环绕, 图片在页面会占一片空白。利用标记的属性, 可以使文本环绕图片。<br> &nbsp;&nbsp; 其中align的值可取:<br> &nbsp;&nbsp; aleft图片居左,文本在图片的右边。<br> &nbsp;&nbsp; right图片居右,文本在图片的左边。<br clear=left> <IMG src=daisy.jpg align=right> &nbsp;&nbsp;&nbsp;&nbsp;使用该标记设置文本环绕方式后,将一直 有效,直到遇到下一个设置标记。如果想取消文本环绕图片,可使用 标记,其后的文本将不再环绕图片。 </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> &nbsp;&nbsp; 如果不设置文本对图片的环绕,图片在页面会占一片空白。 利用标记的属性,可以使文本环绕图片。<br> &nbsp;&nbsp; 其中align的值可取:<br> &nbsp;&nbsp; aleft图片居左,文本在图片的右边。<br> &nbsp;&nbsp; right图片居右,文本在图片的左边。<br clear=left> <IMG src=daisy.jpg align=right hspace=15 vspace=20> &nbsp;&nbsp;&nbsp;&nbsp;使用该标记设置文本环绕方式后,将一直有效, 直到遇到下一个设置标记。 如果想取消文本环绕图片,可使用标记,其后的文本将不再环绕图片。 </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> &nbsp;&nbsp; 如果不设置文本对图片的环绕,图片在页面会占一片空白。 利用标记的属性,可以使文本环绕图片。<br> &nbsp;&nbsp; 其中align的值可取:<br> &nbsp;&nbsp; aleft图片居左,文本在图片的右边。<br> &nbsp;&nbsp; right图片居右,文本在图片的左边。<br clear=left> <IMG src=daisy.jpg align=right hspace=15 vspace=20> &nbsp;&nbsp;&nbsp;&nbsp;使用该标记设置文本环绕方式后, 将一直有效,直到遇到下一个设置标记。 如果想取消文本环绕图片,可使用标记,其后的文本将不再环绕图片。 </BODY> </HTML>


更多相关文档:

2013浙江省信息技术高考总复习知识点

5.计算机发展: 代次 第一代计算机 第二代计算机 年份 1946-1957 1958-1964 ...HTML 超文本标记语言(网页) 第 14 页共 15 页 2013 信息技术高考总复习大纲...

2014浙江省计算机等级考试二级最新考试试题库(完整版)

2014浙江省计算机等级考试二级最新考试试题库(完整版)_韩语学习_外语学习_教育...数据模型 2、软件调试的目的是(B) 注:与软件测试要对比着复习 A.发现错误 B...

2014浙江省计算机等级考试二级最新考试试题库

2014浙江省计算机等级考试二级最新考试试题库_韩语学习...(B) 注:与软件测试要对比着复习 A.发现错误 B....调用语句 B. 命令 C. 口令 D. 消息 12、面向...

浙江省信息技术高考复习资料选择题部分1

浙江省信息技术高考复习资料选择题部分1_高考_高中...音箱 D. 扫描仪 19.计算机能成为现代信息处理的...Pascal 语言和数据库的成 绩之和,以下操作错误的是...

2015年浙江省高校招生职业技能考试大纲-计算机类

2015 年浙江省高校招生职业技能考试大纲 计算机类理论知识 一、考试大纲说明 (一...(3) 能利用 html 语言制作简单网页, 掌握以下基本标记的应用: <html>、 <...

2014浙江省计算机等级考试试题 二级C试题最新考试试题库

2014浙江省计算机等级考试试题 二级C试题最新考试试题库_韩语学习_外语学习_教育专区。2014浙江省计算机等级考试试题 二级C试题最新考试试题库 ...

计算机高级复习(含答案)

计算机高级复习(含答案)_IT认证_资格考试/认证_教育专区。计算机复习题 1.下列...但不确定 D、可能影响,可能不影响 70.万维网文档所用的( B )语言HTML。...

2016浙江省单招单考《计算机类》试题卷

2016浙江省单招单考《计算机类》试题卷_中职中专_职业教育_教育专区。2016 年...应该使用以下的 HTML 语句___ A.<a href=”test.htm” border=0><img...

2015年最新计算机等级考试(一级)考试试题总汇

A.网址 B.高级语言 C.域名 D.超文本传输协议 ...http//www.jnhzhr.cn/index.html 12.计算机存储器...路由器 2015年最新全国计算机水平等级考试复习、考试...

浙江省计算机一级考试内容

浙江省计算机一级考试内容浙江省计算机一级考试内容隐藏>> 分享到: X 分享到: 使用一键分享,轻松赚取财富值, 了解详情 嵌入播放器: 普通尺寸(450*500pix) ...
更多相关标签:
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com