详解HTML的a标签(超链接标签)

1、什么是<a>标签

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

2、<a>标签的几个重要属性

2.1、href

  规定链接指向的页面的 URL。

  1. 链接https、http地址:
     <a href="https://baidu.com" target="_blank">Baidu</a>
     2.链接Page,比如自定义的Page(.html)

     3.使用对象连接,例如一个图片,点击图片时进行页面跳转(鼠标悬浮时光标变成手指状态)

     <a href="https://baidu.com" target="_blank"> <img src="../Pic/12.jpg" title="这是我的图片提示信息" alt="对不起,显示图片失败">Baidu</a>
     4.使用假链接,比如自定义的Page暂时未完成

        1.使用 # 进行假链接

     <a href="#">假链接#</a>
        2.使用JavaScript进行假链接

     <a href="javascript:">假链接#</a>
        两者区别:使用 # 假链接会返回到页面Top,使用JavaScript假链接则不会。

   所以,返回顶端  可用假链接# 来实现

        5.其他连接:如发送Email、发送地图位置等

           <a href="tel:15815861586">15815861586</a>
      <a href="mailto:c1586@qq.com?subject=TestObject">c6088@qq.com</a>
      <a href="sms:10086?body=message_body">给 10086 发短信</a>
      <a href="geopoint:116.281469,39.866035">我的位置</a>
       6.目录跳转:跳转到本页相对应的位置,点击目录跳转到指定的内容。

     那么必须告诉a标签要跳转的位置,前提是该位置拥有一个独一无二的ID(这样才能跳转正确)。

    <h1 id="H1">Head 1</h1>
    <a href="#H1">跳转到</a>
   跳转到其他页面、其他页面的特点位置(锚点)同理。

   格式为:href=“页面#ID”

   <a href="问题单01.html#H1">跳转到</a>

2.2、target

  规定在何处打开链接文档。它有五个选项:

  _blank:在新窗口中打开被链接文档。
  _self:默认。在相同的框架中打开被链接文档。
  _parent:在父框架集中打开被链接文档。
  _top:在整个窗口中打开被链接文档。
  framename:在指定的框架中打开被链接文档。

2.3、name

  规定锚的名称。(Html5不支持)

<html>
<body>
<h1>HTML 教程目录</h1>
<ul>
<li><a href="#C1">第一章</a></li>
</ul><h2><a name="C1">第一章</a></h2>
<p>本章讲解的内容是 ... ...</p>
</body>
</html>

2.4、downloadHTML5新增

  HTML5新增,只有 Firefox 和 Chrome 支持 download 属性。
  download 属性规定被下载的超链接目标。
  在 <a> 标签中必须设置 href 属性。
  该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

<a href="/images/myw3schoolimage.jpg" download="w3logo">

2.5、media

  media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。
  该属性用于规定目标 URL 是为特殊设备(比如 iPhone)、语音或打印媒介设计的。
  该属性可接受多个值。
  只能在 href 属性存在时使用。

<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
打开用于打印的 media 属性页面
</a>

3、a标签的运行机制

1. a标签的href属性值如果是以http开头的,那么浏览器会马上启动http解释器去解释该网址,首先会在本地机器去找一个hosts文件, 如果在hosts文件上 该域名没有对应的主机,那么浏览器就去到对应的dns服务器去寻找该域名对应的主机号。如果找到了对应的主机,那么该请求就会发给对应的主机。
2. 如果a标签的href属性值没有以任何协议开头,那么浏览就会启动file协议解释器去解释该资源路径。
3. 如果a标签的href属性值并不是以http开始,而且其他 的一些协议,那么这时候浏览器就回去到我们本地的注册表中去查找是否有处理这种协议 的应用程序,如果有,那么马上启动该应用程序处理该协议

4、a标签常用的协议

1
2
3
4
5
6
7
1、file:
  file协议(文件协议)这种协议主要是用于搜索本地机器的资源文件的。
  格式:file:\\\f:\美女\1.jpg
     
2、邮件的协议: mailTo
3、迅雷的协议: thunder

5、超链接标签的样式问题——a标签的伪类选择器的书写顺序

5.1、a标签的多重状态

  对于<a>元素,我们可以用“多重人格”来形容它。对于该标签,它一共有五种状态::link, :visited, :hover, :focus, :active.
  “:link”可以用于声明未访问状态链接的样式;
  “:visited”可以用于声明已经访问链接的样式;
  “:hover”可以用于声明鼠标悬停在链接上的样式;
  “:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接);
  “:active”可以用于声明浏览器点击链接的样式。
  注意:冒号前后不要出现空格
  一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。
  link、visited、active分别对应body元素的link、vlink、alink这三个属性。
  四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。

5.2、链接(a标签状态)定义的顺序

  没有规矩不成方圆,虽然链接定义写好了,但它也是有规则的,如果这四项的书写顺序稍有差错,链接的效果可能就没有了,所以每次定义链接样式时务必确认定义的顺序,link--visited--hover-active,也就是我们常说到的LoVe HAte原则(大写字母就是它们的首字母)。
  老外总结了一个便于记忆的“爱恨原则”(LoVe/HAte),即四种伪类的首字母:LVHA。定义A链接样式的正确的顺序:a:link、a:visited、a:hover、a:active。若没有按照这样的顺序的话,有的状态的样式会被放置在后面的样式覆盖而导致像没有触发一样没有效果,如:如果hover放在visited之后,则就算我放上去变色了,但是同时这个标签也具有visited状态以及其的效果,会覆盖了hover的效果。
  为了符合浏览器解释CSS遵循的"就近原则"。我们在定义CSS中,宜将最一般的条件放在最上面,并依次向下,最下面放最特殊的。
  在W3C规范中,也规定了链接的声明顺序:
  在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
  在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。

1
a:link、a:visited、a:hover、a:active

 

js实现a标签跳转;不使用href属性实现

1、带参数形式

1)<a οnclick="test(参数...);">test</a>

2)script代码:

<script>
function test(obj){
 【执行的代码】
}
</script>

2、不带参数
1)<a οnclick="test();">test</a>

2)script代码:

       <script>


function test(){

【执行的代码】
}
</script>

参考网址

http://blog.csdn.net/linwh8/article/details/52491645
http://www.jb51.net/css/182670.html
http://www.nowamagic.net/csszone/css_IntroduceToTagA.php

 

转载于:https://www.cnblogs.com/wzp-monkey/p/10664538.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/483736.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

许竹青、骆艾荣:数字城市的理念演化、主要类别及未来趋势研究

来源&#xff1a;本文原刊于《中国科技论坛》2021年8月第8期摘要&#xff1a;城市与技术的关系由来已久&#xff0c;但将“数字”这一技术概念与城市连接成为专有名词却是新事物。本文从技术变迁的外生驱动和城市发展问题的内生需求两个角度探讨数字城市兴起及发展的动因&#…

牛客20701 神秘钥匙

链接&#xff1a;https://ac.nowcoder.com/acm/problem/20701 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 clccle一行&#x1d45b;个人来到了…

《深入浅出vue.js》阅读笔记之数组变化侦测

1、如何追踪变化 数组的侦测方式和对象不同&#xff0c;比如&#xff1a; this.list.push(1) 此时并不会像改变对象一样触发setter。 同理&#xff0c;要侦测数组的变化意味着我们在改变数组的时候得到通知&#xff0c;如图&#xff0c;我们可以用一个拦截器覆盖Array.prototyp…

时隔16年,Science再次发布“全世界最前沿的125个科学问题”!

来源&#xff1a;文汇报《科学》杂志曾于创刊125周年之际发布过125个推动基础科学研究的科学难题&#xff0c;对指引其后十几年的科学发展产生积极影响。16年过去了&#xff0c;科技发展日新月异&#xff0c;科学突破层出不穷&#xff0c;许多问题得到一定程度的解答&#xff0…

牛客19115 选择颜色

链接&#xff1a;https://ac.nowcoder.com/acm/problem/19115 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 n个人排成一个环形&#xff0c;每个…

虹软人脸识别Android Sample Code

AFR_FSDKInterface engine new AFR_FSDKEngine();//用来存放提取到的人脸信息, face_1 是注册的人脸&#xff0c;face_2 是要识别的人脸 AFR_FSDKFace face1 new AFR_FSDKFace(); AFR_FSDKFace face2 new AFR_FSDKFace();//初始化人脸识别引擎&#xff0c;使用时请替换申请的…

当人工智能遇上计算社会科学……

来源&#xff1a;微信公号&#xff1a;计算社会科学家原文出处:《人民论坛学术前沿》作者&#xff1a;华东师范大学哲学系教授 郦全民近年来&#xff0c;由深度学习引爆的“人工智能”&#xff0c;迅速成为科技领域乃至日常生活中的流行词&#xff1b;差不多同时&#xff0c;在…

Linux memcached

Linux memcached memcached是一套分布式的高速缓存系统&#xff0c;使用key-value来缓存数据&#xff0c;是由LiveJournal的Brad Fitzpatrick开发&#xff0c;目前被许多网站使用。这是一套开放源代码软件&#xff0c;以BSD license授权发布。memcached缺乏认证以及安全管制…

牛客18985 数字权重 (数学,快速幂)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/18985 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 小a有一个n位的数字&#xff0c;但是…

Science 封面:史上最小飞行器,有翼微芯片仅沙粒大小,可用于环境监测

来源&#xff1a;机器人大讲堂据最新一期《自然》杂志刊发的论文&#xff0c;西北大学的工程师为电子微芯片增加了一种新的能力&#xff1a;飞行。据了解&#xff0c;这种微芯片大概只有一粒沙子大小&#xff0c;另外它没有马达。相反&#xff0c;它在风中捕获飞行--很像枫树的…

牛客15324 用来作弊的药水

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15324 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 在一个风雨交加的夜晚&#xff0c;来…

由于这个现象,我们永远无法精确测量时间

几乎任何事物都可以作为时钟&#xff0c;只是有些时钟比其他的更好用而已。图片来源&#xff1a;Corinne Reid来源&#xff1a;环球科学2013年&#xff0c;物理学硕士研究生保罗埃凯尔&#xff08;Paul Erker&#xff09;仔细翻阅着教科书和论文&#xff0c;试图从中找到“时钟…

牛客15187 分元宵 (快速幂)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15187 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 s, v, w, p, A list(map(int, i…

“诺奖风向标”2021拉斯克奖公布:授予mRNA疫苗、光遗传学以及戴维·巴尔的摩...

拉斯克奖奖杯来源&#xff1a;科研圈当地时间 9 月 24 日晚间&#xff0c;有“诺奖风向标”之称的拉斯克奖&#xff08;Lasker Award&#xff09;公布了 2021 年获奖人名单&#xff1a;基础医学奖 授予为开发光遗传学技术做出突出贡献的卡尔戴瑟罗斯&#xff08;Karl Deisserot…

.net如何引用该命名空间

一、在.Net中如何引用该命名空间 &#xff08;1&#xff09;System.Windows.Threading 该命名空间在程序集WindowsBase(WindowsBase.dll)下 &#xff08;2&#xff09;System.Windows.Markup 该命名空间在程序集System.Xaml(System.Xaml.dll)下 &#xff08;3&#xff09;Syste…

牛客14718 开心的涂刷

链接&#xff1a;https://ac.nowcoder.com/acm/problem/14718 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 一天小明同学拿着m种颜色的油漆去涂…

华为全新发布开源操作系统欧拉:覆盖数字基础设施全场景

来源&#xff1a;C114通信网&#xff08;C114-weixin&#xff09;作者&#xff1a;舒允文在华为全联接2021上&#xff0c;面向数字基础设施的开源操作系统欧拉&#xff08;openEuler&#xff09;全新发布。欧拉操作系统可广泛部署于服务器、云计算、边缘计算、嵌入式等各种形态…

牛客15499 Jxc军训(快速幂,逆元)

链接&#xff1a;https://ac.nowcoder.com/acm/problem/15499 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 在文某路学车中学高一新生军训中&…

《新一代人工智能伦理规范》发布

来源&#xff1a;科技部战略规划司9月25日&#xff0c;国家新一代人工智能治理专业委员会发布了《新一代人工智能伦理规范》(以下简称《伦理规范》)&#xff0c;旨在将伦理道德融入人工智能全生命周期&#xff0c;为从事人工智能相关活动的自然人、法人和其他相关机构等提供伦理…

Centos7搭建Redis,同一服务器启动两个端口的Redis

1、安装redis 【1】下载安装包 #准备安装文件夹 mkdir /usr/local/soft/redis #进入文件夹 cd /usr/local/soft/redis #下载安装包 wget http://download.redis.io/releases/redis-4.0.11.tar.gz 【2】安装redis #解压tar zvxf redis-4.0.11.tar.gz#make之前要安装gcc yum -y …