李涛自留地
回到顶部
首页 > 前端 > a标签在html标签中的作用 a标签属性及如何使用？

a标签在html标签中的作用 a标签属性及如何使用？

文章目录

a标签在html、网页设计以及各种编程语言中都具有很重要的作用，一个网站、App等多种网络应用都离不开a标签，本文将从以下：a标签的作用、a标签的常用属性以及a标签的用法等几个方法对a标签进行进行记载和分享。

a标签的作用

a标签在Html中是超链接的意思。在网络中大到一个网站，小到一篇文章，一个视频或者一个图片，都可以说都是一个a链接，我们甚至可以说我们所浏览的网站、App都是由无数个a链接组成的，下面来分析一下a链接有什么作用：

1、a链接可以从一个页面链接到另外一个页面。

（1）、链接到本站的链接，在SEO中，我们就叫做内链，网站内所有链向自己网站的链接，我们都可以叫做是内链。常见的内链比如：Tags标签、文章页链向其他文章页的链接等等。

（2）、链接到外部网站的链接，在SEO中，我们就叫做外链，只要是自己网站中出现链向其他网站的链接，我们都可以说是外链，常见的外链有：网站友情链接、网站程序版权链接等等。

2、a链接可以从页面链接到一张图片。

3、a链接可以从页面链接到一个视频。

4、a链接可以做锚点链接，在一个页面到达这个页面指定的锚点链接位置。常见的锚点链接：比如本站的文章目录板块就是典型的a链接的锚点链接。

5、a链接可以启动外部应用功能，例如打电话、发邮件等。

6、协议限定符，强制使用js代码。

7、指定下载链接。

以上就是简单总结的a标签的作用。

a标签属性

a标签最主要的属性有href、target属性，当然a标签有很多属性，下面是关于a标签的属性表格：

a标签属性表格

属性 值 描述
href url 规定指向的页面链接
target _blank 新窗口打开
_parent 在父窗口中打开链接
_self 默认，当前页面跳转
_top 在当前窗体打开链接，并替换当前的整个窗体(框架页)
framename 在指定的框架中打开被链接文档。
charset char_encoding HTML5 不支持。规定目标 URL 的字符编码。
coords coordinates HTML5 不支持。规定链接的坐标。
download filename HTML5新属性，指定下载链接。
hreflang language_code 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
media media_query HTML5新属性。规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name section_name HTML5 不支持。规定锚的名称。
rel alternate 文档的可选版本（例如打印页、翻译页或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的前一个文档。
contents 文档目录。
index 文档索引。
glossary 文档中所用字词的术语表或解释。
copyright 包含版权信息的文档。
rev text HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape default HTML5 不支持。规定链接的形状。
rect 定义矩形区域。
circle 定义圆形。
poly 定义多边形区域。
type MIME_type HTML5新属性。规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。

a标签使用小技巧

1、去掉a标签默认下划线

a标签如果设置href链接后，默认显示是带下划线样式，很多人都觉得这样不太美观，都会把默认的a标签默认下划线去掉。

        a {
            text-decoration: none;
        }
a标签在html标签中的作用 a标签属性及如何使用？

只需要在css中设置a标签的text-decoration属性为none就可以去掉a标签默认下划线样式。

2、a标签Css中的text-decoration属性值

（1）、将text-decoration属性设置为line-through，链接文字中间就会有一个删除线效果。

（2）、将text-decoration属性设置为overline，a标签链接就会出现一个上划线。

（3）、将text-decoration属性设置为underline，a标签链接底部出现下划线，也就是默认的a标签链接样式，不少网站会将默认的a标签带下划线的样式去掉，然后hover和点击的状态的时候又给a标签样式添加上了下滑，就是使用的这个属性值。

3、改变a标签默认颜色

a标签默认颜色是蓝色，如果不修改默认蓝色看上去并不是那么美观，很少有人在使用a标签时会用默认的蓝色颜色。

        a {
            text-decoration: none;
            color:red;
        }

4、鼠标悬停在a标签上时显示说明文字

我们有时候看到有些链接，当我们鼠标悬停在链接文字上时，会出现这个链接的说明文字，实现这样的功能是因为在a标签内增加了一个title属性。

<a target="_blank" href="http://www.baidu.com" title="李涛自留地">李涛自留地</a>

5、鼠标悬停在a标签时改变链接文字颜色

a:hover{color:#000;}

使用了hover悬停时的状态，然后设置成自己想要的颜色即可。

6、鼠标在点击后改变a标签链接文字颜色

a:active{color:#333}

使用了a标签active激活链接后的状态，然后在样式里设置成自己想要的颜色即可。

7、使用a标签设置锚点链接

使用a标签制作锚点链接在实际的前端开发中使用的也是比较多的。

（1）、锚点链接可以实现的功能有：实现文章目录索引跳转到文章某一段落处；实现文章底部回到顶部这样的效果等等功能。

（2）、a标签实现锚点链接的步骤：

首先要在a标签中写入要链接到的Id值，比如一个段落的id选择器是maodian1，那么在a标签的href写入的Url就是#maodian1。

（3）、a标签实现锚点链接demo实例代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 16px;
            background-color: #f8f8f8;
        }

        a {
            text-decoration: unset;
            color: red;
        }

        a:hover,
        a:active {
            color: #000;
        }

        .header {
            height: 90px;
        }

        .contaier {
            width: 1024px;
            margin: 0 auto;
        }

        .content {
            width: 100%;
            height: 300px;
            padding: 15px;
            background-color: #fff;
        }

        .content p {
            line-height: 32px;
        }
    </style>

</head>

<body>
    <header class="header">
        头部区域
    </header>
    <main class="container">
        <div class="content">
            <a target="_blank" href="https://www.leetao.cc" title="李涛自留地">李涛自留地</a><br>
            <a href="#maodian1">锚点1</a>
            <a href=" #maodian2 ">锚点2</a>
            <a href="#maodian3 ">锚点3</a>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p id="maodian1">锚点1区域</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p>00000000</p>
            <p id="maodian2">锚点2区域</p>
            <p>00000000</p>
            <p id="maodian3">锚点3区域</p>
            <p>00000000</p>
        </div>
    </main>
</body>

</html>
a标签在html标签中的作用 a标签属性及如何使用？

使用a标签做锚点链接注意事项：在写入id选择器（id="maodian2"）的时候左右不要有空格，否则在a标签中使用锚点链接将失效。

以上从a标签的作用、a标签所包含的属性、以及a标签使用小技巧列举的7方面的使用技巧，还算是详细的介绍了a标签在html中的作用和a标签常用的一些方法，由于篇幅问题，后续将记载a标签更多的使用方法。

若非作者标注皆为李涛自留地原创文章，转载或复制请以超链接形式并注明出处。