文档章节

我们应该知道的<a>标签

FEWY
 FEWY
发布于 2017/04/26 12:36
字数 779
阅读 18
收藏 0

说明

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>

输入图片说明

总结

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

© 著作权归作者所有

共有 人打赏支持
FEWY
粉丝 1
博文 37
码字总数 39880
作品 0
太原
程序员
Thinkphp怎样修改模板标签定界符

大家都知道在thinkphp里面,我们是通过在控制器里面给模板分配变量,然后在模板里面通过标签的方式来获取变量,假设有一个变量为$name,那么我们在模板里面就应该是通过 {$name}的方式来获取...

汤圆
2012/12/21
0
0
HTML 标签,闭合还是不闭合?

你在写 HTML5 代码的时候,是否纠结过应该写 还是 ,是写 还是写 。写 为什么是错的呢?反正我纠结过,而且我发现这个话题其实比我想象中有意思的多。 如果你对我的研究过程不感兴趣,你可以...

oschina
2014/03/17
5.5K
28
从问题到解决方案到应用-android-ApiDemo入口源代码学习及应用

一.问题 在android的学习中我们经常需要做做一些小demo。 (1)一个demo建立一个项目: demo多了,项目就多了,会有各种不方便。 (2)于是,建立一个demo项目来,然后,第一个Activity呢,主界...

李海珍
2012/11/24
0
4
python-70:使用BS4获取正文内容

上一小节我们学习了find 和 findall 函数,我们也知道findall 函数返回的结果是一个列表,然而我们并不想要列表,列表不利于我们查看,所以我们只能使用find,find会将匹配的结果直接返回,...

达岭凹老大
2016/01/03
391
0
Spring 标签的探索

前言 在学习Spring的过程中,自己算是好好体会了一把Spring配置文件的繁琐。不切实体会一下就不知道有多让人不爽,众多的配置文件不说,关键是一个功能一个配置文件,而且十分容易忘记。那我...

HikariCP
2017/11/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Centos7安装docker

yum update yum install -y docker-engine

落叶清风
2分钟前
0
0
7个Python实战项目代码,让你感受下大神是如何起飞的!

关于Python有一句名言:不要重复造轮子。 但是问题有三个: 1、你不知道已经有哪些轮子已经造好了,哪个适合你用。有名有姓的的著名轮子就400多个,更别说没名没姓自己在制造中的轮子。 2、确...

糖宝lsh
3分钟前
0
0
【随记】Maven 与mysql 版本(maven mysql 5.1.38用的最多)

MySQL Connector/J 我的电脑mysql版本为5.7.20-log maven pom.xml 依赖可用5.1.38 pom.xml依赖代码 $加<properties>变量名的实例代码 <properties><!-- data --><mysql-connector-ja......

颖伙虫
5分钟前
0
0
观察者模式

意图: 在对象的内部状态发生变化时,自动通知外部对象进行响应。 构成 被观察者:内部状态有可能被改变,而且又需要通知外部的对象。 观察者:需要对内部状态的改变做出响应的对象。 Java实...

noob_fly
12分钟前
0
0
设计模式之 MVC

MVC 是 模块化思想或者分层思想的实践。 当我们设计一个Web应用的时候,我们的业务流是,读取数据库中的数据,进行逻辑处理,渲染到页面;如果是交互型的页面,那么页面有输入或者事件发生的...

backbye
14分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部