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

最新推荐文章于 2025-03-21 19:05:50 发布

scottdao

最新推荐文章于 2025-03-21 19:05:50 发布

阅读量2.3w

点赞数 2

文章标签： a标签的用法文件下载锚点

本文链接：https://blog.youkuaiyun.com/qq_30101879/article/details/78511227

版权

本文详细讲解了HTML中锚点定位的各种应用场景，包括单向与双向定位、页面间跳转定位等，并介绍了a标签的其他高级用法如发送邮件、拨打电话和下载文件等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.页面内的锚点定位；

锚点定位中，就算采用overflow：hidden将滚动条隐藏，但是它依然可以发生锚点定位，实现定点跳转；

1.单向定位：

锚定定位实在页面必须要发生滚动的情况下，不滚动也能发生，效果不明显；他的语法见下面代码：

<a href="#2">锚点2</a>
....文本省略
<h2><a name="2" id="2">锚点2</a></h2>

2.双向定位：

也是在单页面内进行定位，就是这处定位到文章的某一处，又可以从文章这一处回到原来的位置；见代码：

<a href="#wo" name="huiqu" id="huiqu">3年</a>
文本省略....

文本省略....
<a href="#huiqu" id="wo" name="wo">3年前的今天</a>

意思就是说从一处去，再从这一处来；

3.页面跳转定位看看是否能行，页面跳转也能精确的定位；

（1）单向定位：

只要在html中a标签中href属性加一个另一个文件的相对路径就能完成；

在index.html文件中
省略文本...
<a href="./index2.html#3">锚点3</a>
省略文本...

在index2.html文件中
文本省略
 <a  id="3" name="3">3年前</a>
文本省略

（2）双向定位(路由的双向绑定):

其实只要在一个a标签中加上相对的相互路径；

index.html文件中
省略文本...
<a href="./index2.html#3" id="goBack" name="goBack">锚点3</a>
省略文本...

在index2.html文件中
省略文本...
 <a href="./index.html#goBack" id="3" name="3">3年前</a>
省略文本...

它的优势可以很快的定位到某一点的某一个字上。

如果要实现页面路由跳转定位，可以通过js代码：

	window.parent.scrollTo(0, 0)

这是定位顶部，依然可以定位到某个某位值，但是要精确到某个字上就比较繁杂；接下来，我为大家介绍一个有关a标签的其他用法；

其实a标签有个target属性；

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

即：

<a target='_blank'></a>
//另外一个窗口打开

当然还有在css中的用法：ele：link/ele: visited /ele:active/ele: hover

我就不过多介绍这几个了，特别提一下两个伪类，ele:active和ele:hover，他们在其他元素也是常被用的两个伪类，除此之外，余下的就是a标签的独有的伪类啦。

当然还有很少用到但又常用到一些方法，通过a标签发送邮箱和打电话呀，都是有可能有道的，经常会看到有些网站会有一些运用。废话不多讲，见代码吧：

<a href="mailto:邮箱地址"></a>

<a href='href:电话号码'></a>

还可以通过a标签完成一些下载功能：图片及一些文件都是可以的；

<a href="#" download='a.html' id="newP">我是到5html</a>

var np = document.getElementById('newP');
	np.onclick = function(){
		
		var blob = new Blob([JSON.stringify('3897498')], {type: "" });
		np.href  = URL.createObjectURL(blob);
	        URL.revokeObjectURL(blob);
	}

当然还有图片下载，这个img图片路径和href路径一致，我上面这种写法会存在bug，到怎么去解决，大家自己去解决吧，本人就不在作介绍了，当然还有一个问题通过a标签下载，要同源链接，不然无法修改文件名。修改文件名这个在实际开发中，就需要后台配合去完成了！

参考文档：http://www.w3school.com.cn/tags/att_a_target.asp