第3讲  超级链接和列表

赵传慧

本讲目录

第3讲  超级链接和列表... 38

3.1  建立超级链接... 38

3.1.1  锚点标记... 39

3.1.2  创建指向其他页面的链接... 39

1. 链接到同一目录内的网页文件... 39

2. 链接到下一级目录中的网页文件... 40

3. 链接到上一级目录中的网页文件... 40

3.1.3  创建指向本页中的链接... 41

3.1.4  创建指向下载文件的链接... 42

3.1.5  创建指向电子函件的链接... 43

3.2  建立列表... 44

3.2.1  无序列表标记... 44

1. 在< UL>后指定符号的样式... 44

2. 在< LI>后指定符号的样式... 44

3.2.2  创建选单列表... 45

3.2.3  创建有序列表... 47

3.2.4  定义项目列表... 49

3.2.5  列表的嵌套... 51

1. 无序列表中套无序列表... 51

2. 有序列表中套有序列表... 52

3. 无序列表中套有序列表... 53

4. 有序列表中套无序列表... 53

习题3. 55

    超链接是网页互相联系的桥梁，而列表常常用于页面中段落的排版。

3.1  建立超级链接

    超链接（Hyperlink）可以看作是一个“热点”，它可以从当前Web页定义的位置跳转到其他位置，包括当前页的某个位置、Internet或本地硬盘或局域网上的其他文件，甚至跳转到声音、图片等多媒体文件。浏览Web页是超链接最普遍的一种应用，通过超链接还可以获得不同形态的服务，如文件传输、资料查询、电子函件、远程访问等。

    当Web页包含超链接时，Web页中的外观形式为彩色（一般为蓝色）且带下划线的文字或图片。单击这些文本或图片，可跳转到相应位置。鼠标指针指向超链接的显示文本或图片时，将变成手形。超文本链接使用锚点标记< A>来定义。

3.1.1  锚点标记

    锚点（anchor）标记由< A>定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有唯一的地址（URL）。具有以上特点的词、句或图片就称为热点。< A>标记的格式为：

        < A  href="地址" name="字符串" target="打开窗口方式">  热点  < /A>

    属性href为超文本引用，它的值为一个URL，是目标资源的有效地址。在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。否则，应写绝对路径。href不能与name同时使用。

    属性name指定当前文档内的一个字符串作为链接时可以使用有效的目标资源的地址。

    属性target设定链接被按后结果所要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。

    target="_blank"或target="new"：将链接的画面内容，开在新的浏览器窗口中。

    target="_parent"：将链接的画面内容，显示在直接父框架窗口中。

    target="_self"：将链接的画面内容，显示在当前窗口中（默认值）。

    target="_top"：将框架中连结的画面内容，显示在没有框架的窗口中（即除去了框架）。

    target="框架名称"：只运用于框架中，若被设定则链接结果将显示于该“框架名称”指定的框架窗口中，框架窗口名称是事先由框架标记所命名的。

    热点可以根据需要设置颜色，利用< BODY>标记中相关的属性。

3.1.2  创建指向其他页面的链接

    创建指向其他页面的链接，就是在当前页面与其他相关页面间建立超链接。无论目标文件与当前文件的目录关系如何，其格式为：

        < A  href="目标文件的路径/目标文件名.html">  热点文本  < /A>

    根据目标文件与当前文件的目录关系，有4种写法。

1. 链接到同一目录内的网页文件

    链接到同一目录内的网页文件的格式为：

        < A  href="目标文件名.html">  热点文本  < /A>

    目标文件名是链接所指向的文件。

    【例3-1】链接同一目录中的网页文件。

        < HTML>

          < HEAD> < TITLE>学生之家< /TITLE> < /HEAD>

          < BODY>

            < H2 align=centre>< FONT color=red>欢迎来到“学生之家”< /FONT>< /H2>

            < CENTER>

              < A href="news.html">新    闻< /A>< BR>

              < A href="study.html">学习园地< /A>< BR>

              < A href="health.html">健康信箱< /A>< BR>

              < A href="irc.html" target="_blank">聊 天 室< /A>< BR> < !--在新的浏览器窗口中显示-->

            < /CENTER>

          < /BODY>

        < /HTML>

    在浏览器中的显示效果如图3-1所示左窗口。当把鼠标指针移到超链接上时，鼠标指针变为手型，单击则链接并打开指定的网页（new.html、study.html等文件请另外单独建立）。如果在< A>标记中省略属性target，则在当前窗口中显示；当target="_blank"时，将在新的浏览器窗口中显示，如图3-1所示右窗口。

      图3-2  链接本页中的文本（开始位置）                图3-3  跳转到的位置

    由上例可以看出，指向页面其他部分的链接与指向别的页面的链接不同之处，在于后者要在页面中定义标记。两种链接都使用< A>标记。

3.1.4  创建指向下载文件的链接

    如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为：

        < A  href="下载文件名">  热点文本  < /A>

    【例3-3】链接下载文件。

        < HTML>

          < HEAD>< TITLE>下载基地< /TITLE>< /HEAD>

          < BODY>

            < FONT color=red>★< /FONT>软件名称：< A href="fm31ch0909.exe">FoxMail 3.1 Build 0909简体中文版< /A>< BR>                     < !--  fm31ch0909.exe文件在当前目录中  -->

            < FONT color=red>★< /FONT>发布日期：00-9-11 9:00:08< BR>

            < FONT color=red>★< /FONT>软件大小：1172095< BR>

            < FONT color=red>★< /FONT>软件版权：免费软件< BR>

            < FONT color=red>★< /FONT>公司主页：< a href="http://www.aerofox.com/" target="_blank">http://www.aerofox.com/< /A>< BR>

            < FONT color=red>★< /FONT>软件介绍：真正的多用户……< BR>

          < /BODY>

        < /HTML>

    在如图3-4所示的网页中单击下载热点，将打开如图3-5所示的“文件下载”对话框，将该文件下载到指定位置。当然也可以用“FlashGet（网际快车）”、“NetAnts（网络蚂蚁）”之类的下载工具软件来下载。

                                  图3-5  “文件下载”对话框

3.1.5  创建指向电子函件的链接

    单击指向电子函件的链接，将打开缺省的电子函件程序，如FoxMail、Outlook Express，并填写地址。要创建指向电子函件的链接，在< A>标记的href属性中加入mailto，其格式为：

        < A  href="mailto:E-mail地址">  热点文本  < /A>

    例如，E-mail地址是goodlook@sohu.com，建立如下链接：

        免费电话:80012345678 信箱:< A href="mailto:goodlook@sohu.com">goodlook@sohu.com< /A>

3.2  建立列表

    列表分为无序列表和有序列表。带序号标志（如数字、字母等）的表项就组成有序列表。否则为无序列表。

3.2.1  无序列表标记

    无序列表中每一个表项的前面是项目符号（如●、■等）。建立无序列表使用< UL>标记和< LI>表项标记。格式为：

        < UL type="符号类型">

          < LI type="符号类型1"> 第一个列表项

          < LI type="符号类型2"> 第二个列表项

            …

            …

        < /UL>

    值得注意的是，< LI>标记是单标记。即一个表项的开始，就是前一个表项的结束。

    从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。

    type指定每个表项左端的符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），也可自己设置图片。方法有两种：

1. 在< UL>后指定符号的样式

    在< UL>后指定符号的样式，可设定直到< /UL>的加重符号。例如：

        < UL  type="disc">                     符号为实心圆点●

        < UL  type="circle">                    符号为空心圆点○

        < UL  type="square">                   符号为方块■

        < UL  img  src="mygraph.gif">          符号为指定的图片文件

2. 在< LI>后指定符号的样式

    在< LI>后指定符号的样式，可以设置从该< LI>起直到< /UL>的项目符号。格式就是将前面的UL换为LI。

    【例3-4】无序列表应用示例。

        < HTML>

           < HEAD>< TITLE>无序列表< /TITLE>< /HEAD>

           < BODY>

             < P align=center>< FONT color=blue size=4>< B>2000年最热十大IT职位< /B>< /FONT>< /P>

             < UL>

               < LI type="circle">电子商务项目管理。

               < LI type="square">电子商务顾问。

               < LI type="disc">ERP销售人员。

               < LI>IT基础组织管理人员。

             < /UL>

             < UL type="circle">

               < LI>WAP开发人员。

               < LI>WEB开发人员。

               < LI>WEB设计人员。

               < LI>客户支持人员。

               < LI type="square">知识工程人员。

               < LI>数据通信人员。

             < /UL>

          < /BODY>

        < /HTML>

    在浏览器中的显示效果如图3-6所示。

3.2.2  创建选单列表

    选单列表是比较常用的无序列表形式，它往往用于列出几个相关网页的索引，以便通过超链接来很快选取感兴趣的内容。它用< MENU>标记替代< UL>，并引入< LH>来定义选单列表的标题。格式为：

        < MENU>