本章学习锚点标签, 类似于超链接标签, 或者说属于超链接标签的一种.
四. 锚点标签
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返回顶部
原文地址:http://blog.csdn.net/anig2014/article/details/44100033