专栏首页FEWY我们应该知道的标签

我们应该知道的标签

版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/70767206

说明

<a>标签定义超链接,用于从一个页面链接到另一个页面。 <a>元素最重要的属性是 href 属性,它指定链接的目标。

href属性

href属性的值,类型不同,产生的效果也不同,有人叫这是<a>标签的多种不同的表现形式,或者说是不同种类的<a>,好吧其实就是一个意思,我们来看看有哪些情况。

1、当目标文档为资源下载,点击会下载这个文件

<a href="xxx.rar/xxx.zip">下载</a> 这里要顺便提下<a>的另一个属性,download,这是专门用来做下载的属性 <a href="/images/logo.png" download="文件名">下载</a> download也可以没有值,这样会使用默认的文件名。

2、电子邮件链接

<a href="mailto:电子邮件地址">内容</a>

3、返回页面顶部空链接

<a href="#">返回顶部</a> 注意:设置超链接时,如果不确定要链接到哪个位置处时,请使用#, 因为 href="",会刷新页面,而href="#",还在这个页面,默认回到最顶部

4、锚点

  • 作用 在页面中的某行位置处,做一个记号,方便页面能够随时跳转到记号位置处
  • 使用方式
    • 定义锚点 1、通过 a 标记的 name 属性定义锚点 <a name="名称">内容</a> 2、通过 任意标记的 id 属性定义锚点 <ANY id="名称">
    • 链接到锚点 1、跳转到本页的锚点处 <a href="#锚点名称">内容</a> 2、跳转到其他页锚点处 <a href="页面URL#锚点名称">内容</a>

5、链接到JS

<a href="javascript:JS代码块">执行JS功能</a> 我们应该经常会看到这样的写法 <a href="javascript:void(0)"></a> void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。 当用户点击时,void(0) 计算为 0, Javascript 上没有任何效果,不会发生跳转。 href="#"href="javascript:void(0)"的区别 # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。 而javascript:void(0), 仅仅表示一个死链接。

6、一键拨号

<a href="tel:10000">点击拨号10000</a>

7、发短信

格式:sms:手机号[,手机号][?body=短信内容]

  • 给一个号码发送短信 <a href="sms:10000">给 10000 发短信</a>
  • 给一个号码发送,已编辑好的短信 <a href="sms:10000?body=xxx">给 10000 发送内容为"xxx"的短信</a>
  • 给多个号码发送短信 <a href="sms:10000,10086?body=xxx">给 10000 和 10086 发送内容为"xxx"的短信</a>

href属性说到这也差不多了,我们来看另一属性target(目标)

target属性

target 属性规定在何处打开链接文档 <a target="_blank|_self|_parent|_top|framename"></a>

描述

_blank

在新窗口中打开被链接文档。

_self

默认。在相同的框架中打开被链接文档。

_parent

在父框架集中打开被链接文档。

_top

在整个窗口中打开被链接文档。

framename

在指定的框架中打开被链接文档。

总结

到此,<a>标签很多有趣的事情,相信大家都知道了,但是这还不是所有的,还有更多的事情,需要大家去发现,希望大家发现之后分享出来。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript立即执行函数的解释分析(4)—总结篇

    这次来对立即执行函数 Immediately-Invoked Function Expression (IIFE) ,做最后的总结,会把前面几篇提到的内容做一个...

    FEWY
  • JavaScript立即执行函数的解释分析(1)—表达式与语句的区别

    也许你知道,这是立即执行函数,但为什么这样能立即执行呢?也许是该好好聊聊了!但是,我们先来聊点其他的。

    FEWY
  • JavaScript立即执行函数的解释分析(2)—函数表达式与函数声明的区别

    上次我们聊了聊表达式与语句的区别,这次我们说说函数表达式与函数声明,上次虽然提到过这两点,但是并没有很详细的讲,这次要专门聊聊了!

    FEWY
  • 程序员如何优雅使用mac

    在折腾windows和linux一段时间内,饱经各种摧残的我,虽然掌握了一些不为人知的黑科技,终于对此感到厌倦,转投mac阵营。入手了2017款的Apple M...

    章鱼喵
  • rsync实现服务器之间同步目录文件

    需求:将192.168.1.10的/opt/vue/index.html文件 和 /opt/vue/static目录同步到远程192.168.1.130的/op...

    陈灬大灬海
  • hadoop_学习_00_资源帖

    2.Hadoop安装教程_单机/伪分布式配置_CentOS6.4/Hadoop2.6.0

    shirayner
  • 聊聊nacos RaftCore的signalPublish

    nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/consistency/persistent...

    codecraft
  • 【下载】机器学习TensorFlow代码教程实战书籍和代码

    DM.AI 高级架构师Nishant Shukla最新撰写的机器学习TensorFlow教程实战书籍(2017年12月出版)介绍基于TensorFlow工具来使...

    WZEARW
  • 聊聊nacos RaftCore的signalPublish

    nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/consistency/persistent...

    codecraft
  • 您的url被百度杀毒提示存在网址安全风险,故物料不宜推广的解决办法

    春节刚过完,上班的第一天,公司网站被百度停止推广了,百度推广提示:您的url被百度杀毒提示存在网址安全风险,故物料不宜推广;若有异议,请进入百度杀毒申诉通道申诉...

    技术分享达人

扫码关注云+社区

领取腾讯云代金券