HTML超链接标签

最新推荐文章于 2024-07-23 08:49:01 发布

仙鹤__

最新推荐文章于 2024-07-23 08:49:01 发布

阅读量1.9k

点赞数

分类专栏： html 文章标签： html 前端 css

本文链接：https://blog.csdn.net/weixin_52629158/article/details/127010360

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML中a标签的使用，包括文本和图像超链接、各种属性如href、title、target的用法，以及超链接的四种样式。还讨论了a标签的特性，如转换为块元素的方法，并讲解了锚点链接的设置和跳转。内容涵盖了超链接的基本概念和高级用法，是理解HTML超链接的重要参考资料。

摘要由CSDN通过智能技术生成

a超链接标签的作用：用于从一个页面链接到另一个页面。

a超链接标签的分类：文本超链接、图像超链接

文本超链接

<!-- a超链接标签 -->
<a href="https://www.baidu.com/">百度</a>

图像超链接

<a href="https://www.baidu.com/"><img src="./img/baidulogo.png" width="200"  ></a>

a超链接的常用属性：

（1）href="" 链接跳转的地址

这里说的地址，可以是空地址，可以是访问根目录，可以是禁止跳转，可以是绝对地址，也可以是相对地址。

空地址，又叫空链接

href="" 这个属性里面，如果不写值，叫“空链接”

href="#" 这个属性里面，写#，叫“空链接”

访问根目录

href="/" 这个属性里面，写/，叫“访问根目录”

禁止跳转

href="javascript:;" 这个属性里面，写javascript:;，叫“禁止跳转”

绝对地址

是一个网址，一定要带上协议头 https:// 或 http://

<a href="https://www.youku.com">优酷</a>

相对地址

在当前项目中，文件与文件之间访问跳转。

（2）html文件

<a href="default.html">我要访问default文件</a>

（3）title="" 提示性文本（有利于网站的内部优化）

<a href="https://www.youku.com" title="优酷">优酷</a>
<a href="" title="安踏男鞋休闲运动鞋2022春季减震耐磨男士网面透气跑步鞋学生轻便户外防水旅游鞋潮流板鞋黑色皮面鞋子 【透气网面】黑金 42">安踏男鞋</a>

（4）target="_blank" 链接跳转的地址以“新的窗口”打开

<a href="https://www.jd.com/" title="" target="_blank">京东</a>

特殊的目标

有 4 个保留的目标名称用作特殊的文档重定向操作：

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

<!-- target="_blank" 新窗口打开 -->
		<a href="https://www.jd.com/" title="" target="_blank">京东_blank</a>
		
		<!-- target="_self" 覆盖原窗口 -->
		<a href="https://www.jd.com/" title="" target="_self">京东_self</a>
		
		<!--_parent 和 _self等效 覆盖原窗口 -->
		<a href="https://www.jd.com/" title="" target="_parent">京东_parent</a>
		
		<!-- 覆盖原窗口 -->
		<a href="https://www.jd.com/" title="" target="_top">京东_top</a>

a超链接标签的4个样式：

a:link 超链接的默认样式。

a:visited 访问过的（已经看过的）链接样式。

a:hover 鼠标处于鼠标悬停状态的链接样式。

a:active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式。

简写：

a{}

a:hover{}

<style type="text/css">
     /* 修饰当前页面中所有的超链接 */
    a{
        /* 文本颜色 */
        color: #515151;
        /* 去除下划线 */
        text-decoration: none;
    }
    /* 鼠标悬停 */
    a:hover{
        color: red;
    }
</style>
</head>
<body>
<a href="">网易</a>

a 超链接标签的特点：

（1）是行元素，行元素与行元素之间，内容可以"并排"存在。

（2）行元素，本身不能设置"宽度和高度"

如果在某些场景下，需要把超链接由行元素转成块元素，我们的操作方法：

a{
    /* 文本颜色 */
    color: #515151;
    /* 去除下划线 */
    text-decoration: none;

    /*行元素 转成 块元素*/
    display: block;
    /*宽度*/
    width: 200px;
    /*高度*/
    height: 50px;
    /*轮廓线（我们在网页布局中，写给开发人员自己看的，看完之后可以把它删了）*/
    outline: 1px dashed red;
}

a超链接锚点的设置和应用

(1) 添加锚点链接，写法：#锚点名

 <!-- 添加 锚点链接 ，写法：#锚点名 -->
        <a href="#top1">第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</a>&nbsp;&nbsp;
        <a href="#top2">第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</a>&emsp;
        <a href="#top3">第三回 议温明董卓叱丁原 馈金珠李肃说吕布</a>&emsp;
        <a href="#top4">第四回 废汉帝陈留践位 谋董贼孟德献刀</a>

(2) 跳转到指定锚点

  <!-- 第一个锚点 -->
        <a name="top1"></a>
    <!-- 第二个锚点 -->
        <a name="top2"></a>
    <!-- 第三个锚点 -->
        <a name="top3"></a>
    <!-- 第四个锚点 -->
        <a name="top4"></a>