HTML之a标签的使用

说到a标签,大家第一时间想到的一定是a标签的链接作用,除了链接,我们还能想到什么呢?
下面的篇幅我们一起来讨论htmla标签的用途。(针对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为testdiv所在的位置。

3. 打电话/发短信/发邮件

<a href="tel:电话号码">打电话</a>
<a href="sms:电话号码">发短信</a>
<a href="mailto:邮箱地址">发邮件</a>

4. 下载

<a href="xxx(下载地址)" download="文件名">下载</a>

注意:以上下载地址要与原页面同源,download的值可以缺省。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,970评论 1 45
  • 使用 标签的方式: 如下:点击文字跳转 用戶協議 首頁 有的时候不要下划线,可以设置属性去掉
    切切歆语阅读 1,105评论 0 0
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 5,853评论 1 11
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,934评论 0 7