HTML常用标签之锚点标签

浏览数：27 / 时间：2015年06月09日

本章学习锚点标签, 类似于超链接标签, 或者说属于超链接标签的一种.

四. 锚点标签

1. 作用: 一种网页内部的超链接(不是网站内部), 在页面中一个位置设置锚点, 可从其他位置返回到这个锚点, 类似与常见的返回顶部的功能.

2. 属性作用:

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返回顶部

技术分享