说到a
标签,大家第一时间想到的一定是a
标签的链接作用,除了链接,我们还能想到什么呢?
下面的篇幅我们一起来讨论html
中a
标签的用途。(针对html5
讨论,html5
中不支持的功能不在此篇文章的讨论范围内)
1. 链接作用
这个大家都很熟悉,就是点击跳转到我们设定的链接上,具体语法为:
<a href="xxx(链接地址)">跳转</a>
平常我们在点击链接的时候有时候会在当前页面加载,有时候会在新标签页加载,还有的甚至会新建窗口加载,为什么会这样呢?这里我们就需要引进a
标签的一个属性target
(仅在href
属性存在时才能使用)。根据w3c的文档说明我们会看到target
属性有多个值,对应的说明如下:
_blank -->总在一个新打开、未命名的新标签页中载入目标文档。
_self -->在当前标签页中载入目标文档(默认选项,无需特别声明)
_parent -->在当前框架(frame)的父框架(父级frame)中载入目标文档
_top -->在当前框架(frame)的顶部框架(顶级frame)中载入目标文档
framename -->在指定的框架中载入目标文档
注意:以上属性只能在新标签或者当前标签载入目标文档,那么如何能够在新窗口载入目标文档呢?我们需要用到js
中的window.open()
方法,具体代码如下:
<script type="text/javascript">
function openNewWindow(url, title)
{
window.open(url, title);
}
</script>
<a href='javascript:openNewWindow("xxx(链接地址)", "标题")'>跳转</a>
2. 锚点定位
除了链接到新地址,a
标签还可以用来做页面内导航,即锚点定位,具体代码如下:
<div id="test">test</div>
<a href="#test">跳转</a>
点击跳转即可定位到id为test
的div
所在的位置。
3. 打电话/发短信/发邮件
<a href="tel:电话号码">打电话</a>
<a href="sms:电话号码">发短信</a>
<a href="mailto:邮箱地址">发邮件</a>
4. 下载
<a href="xxx(下载地址)" download="文件名">下载</a>
注意:以上下载地址要与原页面同源,download的值可以缺省。
网友评论