锚标签和href属性

最新推荐文章于 2024-02-09 05:30:00 发布

qq1712088151

最新推荐文章于 2024-02-09 05:30:00 发布

阅读量1.7k

点赞数

分类专栏： Java 文章标签： browser 浏览器 html 框架服务器文档

本文链接：https://blog.csdn.net/qq1712088151/article/details/7402019

版权

Java 专栏收录该内容

212 篇文章 0 订阅

订阅专栏

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>

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