本章学习锚点标签, 类似于超链接标签, 或者说属于超链接标签的一种.
四. 锚点标签
1. 作用: 一种网页内部的超链接(不是网站内部), 在页面中一个位置设置锚点, 可从其他位置返回到这个锚点, 类似与常见的返回顶部的功能.
2. 属性作用:
<a href="#name">XXX</a> <! -- 设置锚点 -->
<a href="#">任意字符</a> <!-- 代表返回顶部 -->
3. 代码示例:
<!DOCTYPE html>
<html>
<head>
<!-- 注意:1.超连接name前必须要有#号
2.锚点标签不要忘记关闭
3.<a href="#">任意字符</a>代表返回顶部 -->
<title>建立锚点标签</title>
<meta charset="utf-8">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<a href="Main.html">返回主页</a><br>
<a href="#first">第一篇</a>
<a href="#second">第二篇</a>
<a href="#third">第三篇</a>
<a name="first">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
</a><br>
<a href="#">RETURN</a><br>
<a name="second">
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>
</a><br>
<a href="#">RETURN</a><br>
<a name="third">
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
ccccccccccccccccccccccccccccccccc<br>
</a><br>
<a href="#">RETURN</a>
</body>
</html>
4. 运行结果
点击篇目, 会自动跳转到其对应的篇目, 点击RETURN返回顶部