2-5. 锚点
2017-11-09 本文已影响2人
一Left一
1、要想通过a标签跳转到指定的位置, 那么必须告诉a标签一个独一无二的身份证号码, 这样a标签才能在当前界面中找到需要跳转到的目标位置
2、如果和HTML中的标签绑定一个独一无二的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个独一无二的身份证号码的
3、所以要想实现通过a标签跳转到指定的位置分为两步
- 给目标位置的标签添加一个id属性, 然后指定一个独一无二的值
- 告诉a标签你需要跳转到的目标标签对应的独一无二的身份证号码是多少
5、格式:
<a href="#center">跳转到中部</a>
<h2 id="center">我是中部</h2>
6、注意
- 通过我们的a标签跳转到指定的位置, 是没有过度动画的, 是直接一下子就跳转到了指定位置
- a标签除了可以跳转到当前界面的指定位置以外, 还可以在跳转到其它界面的时候直接跳转到其它界面的指定位置
7、格式:
<a href="13-锚点测试界面.html#bottom" target="_blank">跳转到锚点测试界面</a> <h2 id="bottom">我是锚点测试界面33333</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
锚点: 给a标签绑定锚点,再点击a标签的时候,找到这个标签
不但可以跳转到当前界面的某一个位置,href="#bottom"
也可以跳转到其他界面的某个位置href="07-测试网页.html#bt">
条件:
1.要有一个a标签,并且在href中指定要跳转的标签,格式:href="#id的值"
2.要有一个标签,在a标签点击的时候被找到,标志可以使用id属性来指定
3.待跳转的标签要有一个唯一的标志供a标签进行绑定,在a标签中绑定
注意:
id属性是所有的html标签都有的
id的取值不能以数字开头
当跳转到指定标签的时候,如果这个标签下满有足够的空间,则可能会到第一行
-->
<a href="07-测试网页.html#bt">跳转到测试界面</a>
<a href="#bottom">跳转底部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="center">我是中部</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#center">跳转到中部</a>
<p id="bottom">我是底部</p>
</body>
</html>
http://www.w3school.com.cn/html/html_links.asp
http://www.w3school.com.cn/tags/tag_a.asp
