购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.3 锚点链接

网站中经常会有一些文档页面由于文本或者图像内容过多,导致页面过长。访问者需要不停地拖动浏览器上的滚动条来查看文档中的内容。为了方便用户查看文档中的内容,在文档中需要进行锚点链接。

3.3.1 建立锚点

在创建锚点链接前首先要建立锚点。

语法:

   <a name="锚点的名称"></a>

  

说明:

利用锚点名称可以链接到相应的位置。这个名称可以是数字或英文,或者两者的混合,最好要区分大小写。同一个网页中可以有无数个锚点,但是不能有相同名称的两个锚点。

举例:

   <!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>创建锚点</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
<tr>
<td>商品名称</td>
<td>产品特点:</td>
<td>产品规格</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="3">
<p>
<a name="1"></a>商品名称:
</p>
<p>彩音盒</p>
<p>
<a name="2"></a>产品特点:
</p>
<p>65536色全彩OLED显示,支持MP3、WMA等音乐格式;独创MTV电影功能;<br>
JPEG图片浏览功能;</p>
<p>
<a name="3"></a>产品规格:
</p>
<p>显示屏96×64 OLED全彩屏显示 <br>
容量128MB/256MB/512MB/1GB(内置) <br>
电源3.7V锂聚合物电池 <br>
录音 优质录音WAV格式 长时录音ACT格式 <br>
支持音乐格式MP3:32-320kbit/s WMA:32-192kbit/s<br>
信噪比 ≥75dB <br>
输出频率范围20Hz~20kHz <br>
使用温度 -5℃~40℃ <br>
菜单语言 简体中文、英文、繁体中文 <br>
所支持的操作系统Windows 98SE/2000/XP/MAC OS9.X以上系统 (Windows 98SE以上操作系统无需驱动) <br>
<br>
</p>
</td>
</tr>
</table>
</body>
</html>

  

在代码中加粗部分的标记是创建的锚点,在浏览器中预览效果,如图3.4所示。

图3.4 创建锚点

3.3.2 链接同一页面中的锚点

建立了锚点以后,就可以创建到锚点的链接,需要用#号以及锚点的名称作为href属性值。

语法:

   <a href="#锚点的名称">……</a>

  

说明:

在该语法中,在href属性后输入页面中创建的锚点的名称,可以链接到页面中不同的位置。

举例:

   <!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>创建锚点链接</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="5" cellspacing="1">
<tr>
<td><a href="#1">商品名称</a></td>
    <td><a href="#2">产品特点</a></td>
    <td><a href="#3">产品规格</
    a></td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="3">&nbsp;</td>
</tr>
<tr>
<td colspan="3"><p><a name="1"></a>商品名称:</p>
<p>彩音盒</p>
<p><a name="2"></a>产品特点:</p>
<p>65536色全彩OLED显示,
支持MP3、WMA等音乐格式;
独创MTV电影功能;<br>
JPEG图片浏览功能;</p>
<p><a name="3"></a>产品规格:</p>
<p>显示屏 96×64 OLED全彩屏显示 <br>
容量128MB/256MB/512MB/1GB(内置) <br>
电源3.7V锂聚合物电池 <br>
录音 优质录音WAV格式 长时录音ACT格式 <br>
支持音乐格式MP3:32-320kbit/sWMA:32-192kbit/s <br>
信噪比 ≥75dB <br>
输出频率范围20Hz~20kHz <br>
使用温度 -5℃~40℃ <br>
菜单语言 简体中文、英文、繁体中文<br>
所支持的操作系统Windows 98SE/2000/XP/MAC OS9.X以上系统 (Windows 98SE以上操作系统无需驱动)<br>
<BR>
</p></td>
</tr>
</table>
</body>
</html>

  

在代码中加粗部分的标记为设置锚点链接,在浏览器中预览,单击创建的锚点链接,可以链接到相应的位置,如图3.5所示。

图3.5 锚点链接

提示

如果链接的锚点在屏幕上已经可见,那么浏览器可能不会再跳到那个锚点。如果链接的锚点正好在屏幕的底部,那么根据屏幕的大小,浏览器也不能跳到该锚点。这是因为如果浏览器已经到了页面的底部,它将不能再继续往下走,因此也就只能尽可能地接近该锚点了。

3.3.3 链接到其他页面中的锚点

锚点链接不但可以链接到同一页面,也可以在不同页面中设置。

语法:

   <a href="链接的文件地址#锚点名称">……</a>

  

说明:

在该语法中,与同一页面内的锚点链接不同的是,需要在锚点名称前增加文件所在的位置以设置一个单独的链接页面,使其链接到前面定义的锚点页面。

举例:

   <!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>链接到其他页面中的锚点</title>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="10" cellspacing="0">
<tr>
<td colspan="3">mp3是一款大众价位的集MTV播放与图片浏览为一身的全彩mp3播放器。外观小巧精致,时尚高档。</td>
</tr>
<tr>
<td><a href="index1.html#1">商品名称</a></td>
    <td><a href="index1.html#2">产品特点</a></td>
    <td><a href="index1.html#3">产品规格</a></td>
</tr>
</table>
</body>
</html>
</tr>
</table>
</body>
</html>

  

在代码中加粗部分的标记为设置链接到其他页面中的锚点,在浏览器中预览,单击创建的锚点链接,可以链接到其他页面中相应的位置,如图3.6和图3.7所示。

图3.6 创建链接其他页面的锚点

图3.7 链接到其他页面

锚点链接常常用于那些内容庞大繁琐的网页。通过单击命名锚点,能够快速重定向网页特定的位置,如快速到页首、页尾或者网页中某段位置,便于浏览者查看网页内容。图3.8所示为锚点链接网页。

图3.8 锚点链接网页 Wyh3Kse2mTgrH+jIP8QdKMJn20Sbs9gw7oaU+gwGV3vyuVsYRXWUkjUowmIs3lEr

点击中间区域
呼出菜单
上一章
目录
下一章
×