HTML+CSS+DIV网页设计与布局(第2版)(微课版)
上QQ阅读APP看书,第一时间看更新

3.2 锚点

有一种特殊的超链接形式,称为锚点链接。如果一个网页包含的内容很多,要想快速查找网页中自己感兴趣的内容,就不是那么方便了。这时可以通过锚点方便地到达当前页面的其他位置。

3.2.1 创建锚点

要使用锚点引导浏览者,首先要创建页面中的锚点。创建的锚点将确定链接的目标位置。其语法格式如下。

<A NAME="锚点名称">锚点的链接文字</A>

通过锚点名称可以标注相应的锚点,该属性是设置锚点必需的。锚点的链接文字则有助于帮助用户区分不同的锚点,在实际应用中可以不设置链接文字。这是因为设置的锚点仅仅是为链接提供一个位置,浏览页面时并不会在页面中出现锚点的标记。

3.2.2 链接到本页锚点

如果要链接到本页的命名锚上,只要在<A>元素的HREF属性中指定锚点名称,并在该名字前加上“#”字符。锚点的名称就是3.2.1节中NAME属性的属性值。链接到本页锚点的语法格式如下。

<A HREF="#锚点名称">锚点的链接文字</A>

【示例3-4】设置链接到本页的锚点。

01 <HTML> 
02   <HEAD> 
03   <TITLE>命名锚</TITLE> 
04   </HEAD> 
05   <BODY> 
06   <P ALIGN="CENTER">MICROSOFT  软件最终用户许可协议</P> 
07     <A NAME="top">目录</A>:<BR> 
08     <A HREF="#target01">1.  通则</A><BR> 
09     <A HREF="#target02">2.  许可证的授予</A><BR> 
10     <A HREF="#target03">3.  客户端访问许可证</A><BR> 
11     <A HREF="#target14">4.  完整协议</A><BR> 
12   <BR> 
13      MICROSOFT WINDOWS SERVER 2003, STANDARD EDITION<BR> 
14   MICROSOFT WINDOWS SERVER 2003, ENTERPRISE EDITION<BR> 
15   <BR> 
16     <A NAME="target01">1.  通则。</A>本《协议》是您(个人或单个实体)与 Microsoft 
Corporation (“Microsoft”)之间达成的法律协议。…… ……<BR> 
17     <A HREF="#top">返回顶端</A><BR><BR> 
18     <A NAME="target02">2.  许可证的授予。</A>如果您遵守本《协议》的所有条款和条件,则
Microsoft 授予您以下权利:<BR> 
19     <A HREF="#top">返回顶端</A><BR><BR> 
20     <A NAME="target03">3.  客户端访问许可证(“CAL ”)。</A>“软件”授权模型包含操作系
统许可证和增量 CAL,因此“软件”总成本随使用量而增长。根据您的个人需要,您可以使用几种 CAL  类型和授权
模式。<BR> 
21     <A NAME="target4">4. 完整协议;可分割性。</A>…… ……<BR> 
22   </BODY> 
23 </HTML>

以上代码一共设置了5个命名锚,分别为第16~21行的top、target01、target02、target03和target4,单击第16行的超链接时,就会跳转到第8行这个锚上,如图3.5所示。

图3.5 链接到本页锚点运行结果

为了让读者更好地了解命名锚,图3.5中的两个浏览器窗口事实上是同一个窗口。单击左边窗口中的“1.通则”超链接时,该窗口会自动滚动到“1.通则”命名锚所在区域,如图3.5中的右边浏览窗口所示。从图3.5中可以看出,如果只设置了锚元素的NAME属性,而没有设置HREF属性时,浏览网页是看不出任何效果的。

3.2.3 链接到其他网页的锚点

通常单击一个超链接时,都会打开一个网页,并且默认显示该网页的顶端,而不会是网页的底部,或网页的其他位置。例如,网页中有一个超链接要链接示例3-4中的软件最终用户许可协议的客户端访问许可证方面的内容,如果直接将HREF属性值设为3-4.html,那么在浏览者单击超链接时,看到的只是该网页的顶部,浏览者还要自己寻找客户端许可证在哪个位置,十分不方便。

要想打开一个网页,并且显示网页的某个区域,就必须创建命名锚。使用<A>元素的NAME属性可以在网页上设置链接到其他网页的锚点,其语法格式如下。

<A HREF="页面地址#锚点名称">用于链接锚点的文字</A>

【示例3-5】设置链接到其他网页的锚点。这里链接到的网页是3-4.html。

01 <HTML> 
02   <HEAD> 
03   <TITLE>链接到其他网页上的命名锚</TITLE> 
04   </HEAD> 
05   <BODY> 
06   《MICROSOFT 软件最终用户许可协议》中有关客户端访问许可证的相关内容请<A 
HREF="3-4.html" TARGET="_blank">单击这里</A>查看,也可以<A HREF="3-4.html#target03" 
TARGET="_blank">单击这里</A>查看。 
07   </BODY> 
08 </HTML>

示例3-5运行效果如图3.6所示。可以看出,单击第1个“单击这里”超链接时,打开一个新浏览器窗口显示网页内容,但是默认情况下定位到网页的顶部,浏览者还需要自己寻找有关客户端访问许可证的内容在哪里;而单击第2个“单击这里”超链接时,也会打开一个新浏览器窗口显示网页内容,但直接将网页定位到了客户端访问许可证区域。

图3.6 设置链接到其他网页的锚点运行效果