码迷,mamicode.com
首页 > Web开发 > 详细

HTML常用标签之锚点标签

时间:2015-03-06 17:08:09      阅读:221      评论:0      收藏:0      [点我收藏+]

标签:web app   html   

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


四. 锚点标签

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

技术分享

HTML常用标签之锚点标签

标签:web app   html   

原文地址:http://blog.csdn.net/anig2014/article/details/44100033

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!