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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30101879/article/details/78511227

一.页面内的锚点定位;

锚点定位中,就算采用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>
省略文本...

它的优势可以很快的定位到某一点的某一个字上,但是必须是在html文件中才能发生跳转,

在一些框架中,就不能很好的使用;如果需要使用,那也必须采用js相关技术定位;

但是在react,vue,angular等框架中,a标签锚点定位,无法使用,使用会导致页面无法加载,更甚至会报错404;

如果要实现页面路由跳转定位,可以通过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路径一致,就能完成,具体请看下面参看文档中的例子,就不过多介绍啦。

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

猜你喜欢

转载自blog.csdn.net/qq_30101879/article/details/78511227