6.6.3　设置锚点链接

在网页最下面设置一个锚点链接。有时在一张网页中会出现很长的段落，用锚点链接可以直接链接到网页中某一处，如代码6.9所示。

代码6.9　源代码\第6章\设置锚点链接.html

——————————————文件名：设置锚点链接.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞链接实例手把手＜/title＞

04 ＜/head＞

05 ＜body＞

06 ＜a href="#htmlbook"＞单击到锚点处＜/a＞

07 ＜！—设置文本链接—＞

08 ＜p＞HTML+CSS完全自学手册—＜a href="http：//www.163.com"target="_blank"title="链接

09 到163网站"＞网易＜/a＞

10 ＜p＞HTML+CSS完全自学手册—＜a href="http：//www.sina.com.cn"target="_blank"title="

11 链接到新浪网站"＞新浪＜/a＞

12 ＜p＞下面的图片是一座桥，点图片可链接到网易首页。

13 ＜！—设置图像链接—＞

14 ＜p＞＜a href="http：//www.163.com"＞＜img src="html.jpg"alt="链接到网易的图片

15 "＞＜/a＞

16 ＜！—设置多个段落—＞

17 ＜p＞HTML+CSS完全自学手册

18 ＜p＞HTML+CSS完全自学手册

19 ＜p＞HTML+CSS完全自学手册

20 ＜p＞HTML+CSS完全自学手册

21 ＜p＞HTML+CSS完全自学手册

22 ＜a name="htmlbook"＞在这里设置一个锚点。在网页第一页做锚点链接。＜/a＞

23 ＜p＞HTML+CSS完全自学手册

24 ＜p＞HTML+CSS完全自学手册

25 ＜p＞HTML+CSS完全自学手册

26 ＜p＞HTML+CSS完全自学手册

27 ＜p＞HTML+CSS完全自学手册

28 ＜p＞HTML+CSS完全自学手册

29 ＜p＞HTML+CSS完全自学手册

30 ＜p＞HTML+CSS完全自学手册

31 ＜p＞HTML+CSS完全自学手册

32 ＜p＞HTML+CSS完全自学手册

33 ＜p＞HTML+CSS完全自学手册

34 ＜p＞HTML+CSS完全自学手册

35 ＜/body＞

36 ＜/html＞

【代码解析】在代码第22行中，锚点在简单段落的中间（为了突出锚点在中间，作者故意加了很多段落），锚点链接在代码第6行。图6.9所示为锚点链接时，图6.10所示为锚点链接后的效果。

图　6.9　单击锚点链接前

图　6.10　单击锚点链接后

技巧在同一网页中可以有很多个锚点和锚点链接，链接也可以设置在本网页以外，在URL地址后加“#”后再加锚点名称。