详解HTML的a标签（超链接标签）

Posted 2021-02-15 wzp-monkey

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解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:[email protected]?subject=TestObject">[email protected]</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”

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、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 之后，才是有效的。