<a></a>你意想不到的小功能

46 阅读1分钟

说到a标签,我们最常用到的就是超链接,直接跳转到某个地址。但下面展示的三个小功能,可能是你很少碰到过的,来讲讲吧

1.协议限定符: <a href="javascript:;"></a>

javascript就是协议限定符,在后面可以加文字显示
写上javascript后,a标签就会强制运行javascript代码
javascript是很有逻辑的很有结构的

这里的"javascript:" 是一个伪协议,表示在触发默认动作时,执行一段JavaScript代码,而 "javascript:;" 表示什么都不执行,这样点击时就没有任何反应,就去掉了a标签的默认行为。

2.点击标签直接打电话、发邮件

<a href="tel:119"> 给网友美女打电话 </a>

<a href="mailto:123456789@qq.com"> 给公司老板发辞职邮件</a>

效果如图

图一

00.png

图二

01.png

3. 锚点

<div id="demo1" style="width: 100px;height: 100px;background-color: pink;">demo1</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div id="demo2" style="width: 100px;height: 100px;background-color: skyblue;">demo2</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a href="#demo1">回到demo1</a>      
<!-- 点击 回到demo1,页面会直接上滑到demo1盒子那里 -->