锚标签和href属性

原创 2012年03月28日 11:02:59

HTML使用锚标签(<a>)来创建一个连接到其他文件的链接。锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。
创建一个锚的语法:

<a href="url">Text to be displayed</a>
锚可以指向网络上的任何资源:HTML页面,图像,声音,影片等等。
标签<a>被用来创建一个链接指向的锚,href属性用来指定连接到的地址,在锚的起始标签<a>和结束标签</a>中间的部分将被显示为超级链接。
这个锚定义了一个到W3Schools的链接:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>
target属性
使用target属性,你可以定义从什么地方打开链接地址。
下面这段代码打开一个新的浏览器窗口来打开链接:

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
锚标签和name属性
name属性用来创建一个命名的锚。使用命名锚以后,可以让链接直接跳转到一个页面的某一章节,而不用用户打开那一页,再从上到下慢慢找。
下面是命名锚的语法:

<a name="label">Text to be displayed</a>
你可以为锚随意指定名字,只要你愿意。下面这行代码定义了一个命名锚:<a name="tips">Useful Tips Section</a>
你应该注意到了:命名锚的显示方式并没有什么与众不同的。
想要直接链接到“tips”章节的话,在URL地址的后面加一个“#”和这个锚的名字,就像这样:

<a name="http://www.w3schools.com/html_links.asp#tips">Jump to the Useful Tips Section</a>
一个链接到本页面中某章节的命名锚是这样写的:<a name="#tips">Jump to the Useful Tips Section</a>

技巧
尽量在子目录路径后面加一个左斜杠。假如你像下面这样写:href="http://www.w3schools.com/html",将会产生向服务器产生两个HTTP请求,因为服务器会在后面追加一个左斜杠,产生一个新的请求,就像这样:href="http://www.w3schools.com/html/"。
命名锚通常用来在大型文档的开头创建章节表。这个页面的每个章节被加上一个命名锚,到这些锚的链接被放在页面的顶端。
如果浏览器无法找到指定的命名锚,它将转到这个页面的顶部,而不显示任何错误提示。

例如:
在新浏览器窗口中打开链接

<html>
	<body>
		<a href="lastpage.htm" target="_blank">Last Page</a>
		<p>
			If you set the target attribute of a link to "_blank", the link will
			open in a new window.
		</p>
	</body>
</html>

这个例子说明了怎样用打开新窗口的方式来链接到其他页面,这样,访问者不用离开你的页面。
链接到本页面的某个位置

<html>
	<body>
		<p>
			<a href="#C4"> See also Chapter 4. </a>
		</p>
		<p>
		<h2>
			Chapter 1
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 2
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 3
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<a name="C4"><h2>
				Chapter 4
			</h2>
		</a>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 5
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 6
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 7
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 8
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 9
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 10
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 11
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 12
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 13
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 14
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 15
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 16
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
		<h2>
			Chapter 17
		</h2>
		<p>
			This chapter explains ba bla bla
		</p>
	</body>
</html>

这个例子说明了如何跳转到一个文档的某部分。
跳出框架

<html>
	<body>
		<p>
			Locked in a frame?
		</p>
		<a href="http://www.w3schools.com/" target="_top">Click here!</a>
	</body>
</html>

这个例子说明了假如你的页面在框架中,如何跳出框架。
创建一个邮件链接

<html>
	<body>
		<p>
			This is a mail link:
			<a href="mailto:someone@microsoft.com?subject=Hello%20again">
				Send Mail</a>
		</p>
		<p>
			<b>Note:</b> Spaces between words should be replaced by %20 to
			<b>ensure</b> that the browser will display your text properly.
		</p>
	</body>
</html>

这个例子说明了如何链接到一个邮件信息(只有安装了邮件程序才有效)。
创建一个邮件链接2

<html>
	<body>
		<p>
			This is another mailto link:
			<a
				href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">Send
				mail!</a>
		</p>
		<p>
			<b>Note:</b> Spaces between words should be replaced by %20 to
			<b>ensure</b> that the browser will display your text properly.
		</p>
	</body>
</html>

这个例子显示了一个完成度更高的邮件链接。


HTML <a> 标签的 href 属性

w3school页面的描述: HTML 标签的 href 属性 HTML 标签 实例 href 属性规定链接的目标: href="http://www.w3school....
  • heganlin
  • heganlin
  • 2016年11月03日 16:15
  • 544

HTML常用标签之锚点标签

本章学习锚点标签, 类似于超链接标签, 或者说属于超链接标签的一种. 四. 锚点标签  1. 作用: 一种网页内部的超链接(不是网站内部), 在页面中一个位置设置锚点, 可从其他位置返回到...
  • anig2014
  • anig2014
  • 2015年03月06日 15:18
  • 594

a标签,相对地址,绝对地址,锚点技术

a标签(链接标签) 形式:          链接地址”  target=”要打开链接的窗口名” >内容部分 链接地址:通常用url来表示链接地址的意思(形式)。链接地址可以分为:      ...
  • ting22055
  • ting22055
  • 2015年05月15日 23:11
  • 4881

a标签有关用法以及锚点定位;

一.页面内的锚点定位; 锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转; 1.单向定位:     锚定定位实在页面必须要发生滚动的情况下,不...
  • qq_30101879
  • qq_30101879
  • 2017年11月12日 15:22
  • 124

Xpath简单匹配标签内容

Xpath Xpath全程为xml路径语言,用来确定xml文档中某部分位置的语言。 使用Xpath需要安装lxml库,lxml为Python的第三方库,安装方法可以直接下载库文件手动添加到pyth...
  • dalong277
  • dalong277
  • 2016年05月21日 21:23
  • 9868

a标签中href=""的几种用法

众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法,所以就来整理下a标签中href的几种用法。 一、Js的几种调用方法...
  • qq_35844177
  • qq_35844177
  • 2017年03月02日 10:21
  • 3597

a标签跳转锚点到页面指定位置

代码如下: JS方式: bb aaaaaaaaaaa bbbbbbbbbb ...
  • wangweiscsdn
  • wangweiscsdn
  • 2017年02月14日 15:51
  • 7327

a标签的href属性中的"“与”javascript:;"的区别

青年教育社 2016-11-26 15:34 众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接。 其中,a标签内最重要的属性莫过于href了。那...
  • u011277123
  • u011277123
  • 2016年11月29日 10:38
  • 2687

a标签的onclick事件和href属性使用

链接的onclick 事件被先执行,其次是href属性下的动作(页面跳转,或 javascript 伪链接);假设链接中同时存在href 与onclick,如果想让href 属性下的动作不执行,o...
  • kevin_cyj
  • kevin_cyj
  • 2016年01月13日 01:29
  • 3855

HTML5 a标签的download属性

download属性能让我们指定浏览器下载时采用新的文件名称,也就是在客户端重命名下载文件。而不是链接上原始的文件名称。 添加download属性后,无论a标签的href属性链接到一个网页、图片、文本...
  • Leytton
  • Leytton
  • 2014年08月13日 23:23
  • 11516
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:锚标签和href属性
举报原因:
原因补充:

(最多只允许输入30个字)