4.5 网页中的锚点
4-2 锚点链接
在超链接中，有一种特殊的链接形式，称为锚点链接。当创建的网页内容特别多的时候，可以通过锚点帮助用户方便地到达当前页面的其他位置。
4.5.1 设定锚点
要使用锚点引导浏览者，就要首先设置页面中的锚点。设置的锚点将确定链接的目的位置，这里同4.3节介绍的书签类似。其具体语法格式如下：
<a name="锚点名称">锚点的链接文字</a>
在这里，通过锚点名称可以标注相应的锚点，该属性是设置锚点所必需的。锚点的链接文字则有助于帮助用户区分不同的锚点，在实际应用中可以设置链接文字。这是因为设置的锚点仅仅是为链接提供一个位置，浏览页面时并不会在页面中出现锚点的标记。下面通过实例来介绍如何设定页面中的锚点。
例题4-8：为页面添加锚点的实例。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为页面添加锚点</title>
</head>
<body>
<h1>古代诗词</h1>
<a name="top"></a>
 ；如果想学习诗词，只需要单击下面对应的诗词名称即可链接
到详细介绍
<br />
<br />
<a name="a1">元日（宋代王安石）</a><br />
爆竹声中一岁除，春风送暖入屠苏。<br />
千门万户曈曈日，总把新桃换旧符。<br /><br />
<a name="a2">忆江南三首（唐代白居易）</a><br />
江南好，风景旧曾谙；日出江花红胜火，春来江水绿如蓝。能不忆江南？<br />
江南忆，最忆是杭州；山寺月中寻桂子，郡亭枕上看潮头。何日更重游！<br />
江南忆，其次忆吴宫；吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢！<br /><br />
<a name="a3">小池（宋代杨万里）</a><br />
泉眼无声惜细流，树阴照水爱晴柔。<br />
小荷才露尖尖角，早有蜻蜓立上头。<br /><br />
<a name="a4">到京师（元代杨载）</a><br />
城雪初消荠菜生，角门深巷少人行。<br />
柳梢听得黄鹂语，此是春来第一声。<br /><br />
<a name="a5">春日 （宋代张耒）</a><br/>
如丝苣甲饤春盘，韭叶金黄雪未干。<br />
旅饭二年无此味，故园千里几时还。<br />
异方时节三巵酒，残岁风烟一惨颜。<br />
曾奉龙旗典邦礼，岁穷祠祀少休闲。<br /><br />
</body>
</html>
运行这段代码的效果如图4-13所示。
图4-13 添加锚点
在该代码中，分别在每个段落的开始添加了锚点。但是在显示的页面中并没有任何变化。
4.5.2 链接到锚点
设置锚点的目的就是让用户方便地在同一页面内跳转，因此实现锚点的链接才是设置锚点的最终目标。链接到页面内的锚点需要使用#标记，其具体语法格式如下：
<a href="锚点名称">用于链接锚点的文字</a>
如果设置的锚点和用于链接锚点的文字不在同一页面中，则具体语法格式如下：
<a href="页面地址#锚点名称">用于链接锚点的文字</a>
下面通过两个实例来分别说明这两种锚点的设置方法。
1．链接到同一页面的锚点
首先设置同一页面的锚点，在这里修改例题4-8，以方便读者对添加和链接锚点的方法进行对比。
例题4-9：设置同一页面的锚点。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为页面添加锚点</title>
</head>
<body>
<h1>古代诗词</h1>
<a name="top"></a>
 ；如果想学习诗词，只需要单击下面对应的诗词名称即可链接
到详细介绍：
<a href="#a1">元日</a>
<a href="#a2">忆江南三首</a>
<a href="#a3">小池</a>
<a href="#a4">到京师</a>
<a href="#a5">春日</a>
<br />
<br />
<a name="a1">元日（宋代王安石）</a> <a href="#top">返回</a><br/>
爆竹声中一岁除，春风送暖入屠苏。<br />
千门万户曈曈日，总把新桃换旧符。<br /><br />
<a name="a2">忆江南三首（唐代白居易）</a> <a href="#top">返回</a><br/>
江南好，风景旧曾谙；日出江花红胜火，春来江水绿如蓝。能不忆江南？<br />
江南忆，最忆是杭州；山寺月中寻桂子，郡亭枕上看潮头。何日更重游！<br />
江南忆，其次忆吴宫；吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢！<br /><br />
<a name="a3">小池（宋代杨万里）</a> <a href="#top">返回</a><br/>
泉眼无声惜细流，树阴照水爱晴柔。<br />
小荷才露尖尖角，早有蜻蜓立上头。<br /><br />
<a name="a4">到京师（元代杨载）</a> <a href="#top">返回</a><br/>
城雪初消荠菜生，角门深巷少人行。<br />
柳梢听得黄鹂语，此是春来第一声。<br /><br />
<a name="a5">春日 （宋代张耒）</a> <a href="#top">返回</a><br/>
如丝苣甲饤春盘，韭叶金黄雪未干。<br />
旅饭二年无此味，故园千里几时还。<br />
异方时节三巵酒，残岁风烟一惨颜。<br />
曾奉龙旗典邦礼，岁穷祠祀少休闲。<br /><br />
</body>
</html>
在这段代码的第一段文字内，添加了到达5个锚点的链接效果。在后面的每一段文字标题行后，都添加了一个返回顶端的锚点链接。运行这段代码的效果如图4-14所示。
图4-14 页面运行效果
当单击页面中的链接文字“到京师”时，页面将会将文字链接的锚点位置显示到页面的最顶端，也就是自动调整滚动条，使“到京师”的标题文字显示在页面的最上方，如图4-15所示。
图4-15 单击链接文字“到京师”的效果
单击标题后面的链接文字“返回”，返回页的顶端，如图4-16所示。
图4-16 返回页面的顶端
需要提示的是，如果链接的锚点位置比较靠下，当链接的时候，页面会将滚动条调整到最下端，即使此时锚点没有位于页面的最顶端，也不会再移动位置了。例如，在页面中单击链接文字“春日”，即锚点a5，页面跳转时由于下面没有那么多的内容，因此该锚点并没有显示在页面的顶端，而只是将滚动条调整到了最后，如图4-15所示。
2．链接到其他页面的锚点
下面通过一个实例来介绍如何链接其他页面的锚点。同样以例题4-9为基础进行修改，这里将其分成两个文件，并进行细微的修改。
例题4-10：用于设置锚点的链接文字。这里为了说明情况，只保留下面5首诗词的锚点，即锚点a1～a5。为了区别同一页面的锚点链接，这里将目标页面的打开方式设置为在新窗口中打开。例题中包括两个网页：4-10-1.html和4-10-2.html。其中，4-10-1.html中主要是用于链接锚点的页面，具体代码如下：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为页面添加锚点</title>
</head>
<body>
<h1>古代诗词</h1>
<a name="top"></a>
 ；如果想学习诗词，只需要单击下面对应的诗词名称即可链接
到详细介绍：
<a href="4-10-2.html#a1" target="_blank">元日</a>
<a href="4-10-2.html#a2" target="_blank">忆江南三首</a>
<a href="4-10-2.html#a3" target="_blank">小池</a>
<a href="4-10-2.html#a4" target="_blank">到京师</a>
<a href="4-10-2.html#a5" target="_blank">春日</a>
<br />
<br />
</body>
</html><! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为页面添加锚点</title>
</head>
<body>
<h1>古代诗词</h1>
<a name="top"></a>
 ；如果想学习诗词，只需要单击下面对应的诗词名称即可链接
到详细介绍：
<a href="4-10-2.html#a1" target="_blank">元日</a>
<a href="4-10-2.html#a2" target="_blank">忆江南三首</a>
<a href="4-10-2.html#a3" target="_blank">小池</a>
<a href="4-10-2.html#a4" target="_blank">到京师</a>
<a href="4-10-2.html#a5" target="_blank">春日</a>
<br />
<br />
</body>
</html>
运行代码的效果如图4-17所示。
图4-17 进行链接的页面
4-10-2.html是设置锚点的页面代码，具体代码如下：
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>为页面添加锚点</title>
</head>
<body>
<a name="a1">元日（宋代王安石）</a>
<a href="4-10-1.html#top">返回</a><br />
爆竹声中一岁除，春风送暖入屠苏。<br />
千门万户曈曈日，总把新桃换旧符。<br /><br />
<a name="a2">忆江南三首（唐代白居易）</a>
<a href="4-10-1.html#top">返回</a><br />
江南好，风景旧曾谙；日出江花红胜火，春来江水绿如蓝。能不忆江南？<br />
江南忆，最忆是杭州；山寺月中寻桂子，郡亭枕上看潮头。何日更重游！<br />
江南忆，其次忆吴宫；吴酒一杯春竹叶，吴娃双舞醉芙蓉。早晚复相逢！<br /><br />
<a name="a3">小池（宋代杨万里）</a>
<a href="4-10-1.html#top">返回</a><br />
泉眼无声惜细流，树阴照水爱晴柔。<br />
小荷才露尖尖角，早有蜻蜓立上头。<br /><br />
<a name="a4">到京师（元代杨载）</a>
<a href="4-10-1.html#top">返回</a><br />
城雪初消荠菜生，角门深巷少人行。<br />
柳梢听得黄鹂语，此是春来第一声。<br /><br />
<a name="a5">春日 （宋代张耒）</a>
<a href="4-10-1.html#top">返回</a><br />
如丝苣甲饤春盘，韭叶金黄雪未干。<br />
旅饭二年无此味，故园千里几时还。<br />
异方时节三巵酒，残岁风烟一惨颜。<br />
曾奉龙旗典邦礼，岁穷祠祀少休闲。<br /><br />
</body>
</html>
保存这段代码后，打开4-10-1.html文件，单击其中的链接文字“到京师”，可以看到在新窗口中打开了锚点所在页面。同时将“到京师”设置的锚点a4调整到了页面顶部，如图4-18所示。
图4-18 链接其他页面的锚点效果