
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.3.5 锚点
所谓锚点是指在 URL 地址中出现的片段标识符,也称为页面内链接。如果所请求的目标是一个大目标,那么可以使用<a>链接来将页面划分成大目标的一个一个小目标,之后在地址栏中输入这个小目标的标识之后跳转到小目标的位置。
<a>标签的id属性可以在页面中划分一个一个小目标,其属性的值可以是自定义的字母、数字,但是尽量不要使用数字开头来创建test_anchors.html,示例代码如下。


在上面代码的基础上,直接在浏览器地址栏的地址后面加上“#test1”或“#test2”将跳转至其对应的页面标记的小目标位置。如图2-24所示,地址后面添加“#test2”的效果。

图2-24 地址后加“#test2”跳转至对应位置
以上做法虽然可以跳转到小目标位置,但是每次都需要在地址栏上输入,比较麻烦,因此可以定义跳转到这个小目标的超链接。示例代码如下,在上面代码的顶端加上<a>标签来进行测试。

上面代码中使用相对路径,只是写了“#test1”和“#test2”,那么路径将会解析为当前的文件地址。锚点也可以链接到其他目标的小目标,示例代码如下。

上述代码中,单击任何一个链接将直接跳转到index.html的小目标位置。