HTML05：超链接标签及应用

最新推荐文章于 2024-06-02 15:15:42 发布

一个优雅的搬砖人

最新推荐文章于 2024-06-02 15:15:42 发布

阅读量332

点赞数 2

分类专栏： # HTML 文章标签： html p2p vue.js

本文链接：https://blog.csdn.net/weixin_48306950/article/details/122689301

版权

HTML 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

链接标签

格式：

<a href="path" target="目标窗口位置">链接文本或图像</a>

属性说明：

href：链接路径

target：指定链接在哪个标签打开，

常用值：_self（默认，在当前标签打开链接）

_blank（在新标签打开链接）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!-- 文本超链接 -->
<a href="BasicLabel.html">点击我跳转到基础标签</a><br/>
<a href="https://www.baidu.com">点击我跳转到百度</a>

<hr/>

<!-- 图像超链接 -->
<a href="BasicLabel.html">
    <img src="../resources/img/1.png" alt="1" title="悬停文字" width="100" height="100"/>
</a>
</body>
</html>

运行结果：

点击链接即可跳转到指定页面

超链接

从页面间链接（从一个页面链接到另一个页面）
锚链接
功能性链接

锚链接

需要一个锚标记（id 属性，原来是 name 属性但已经被废弃了）
跳转到标记（跳转路径为 #id属性定义的值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<!-- id 作为标记 -->
<a id="top">顶部</a>

<p>
    <a href="BasicLabel.html">
        <img src="../resources/img/1.png" alt="1" title="悬停文字" width="400" height="400"/>
    </a>
</p>
<p>
    <a href="BasicLabel.html">
        <img src="../resources/img/1.png" alt="1" title="悬停文字" width="400" height="400"/>
    </a>
</p>
<p>
    <a href="BasicLabel.html">
        <img src="../resources/img/1.png" alt="1" title="悬停文字" width="400" height="400"/>
    </a>
</p>
<p>
    <a href="BasicLabel.html">
        <img src="../resources/img/1.png" alt="1" title="悬停文字" width="400" height="400"/>
    </a>
</p>
<p>
    <a href="BasicLabel.html">
        <img src="../resources/img/1.png" alt="1" title="悬停文字" width="400" height="400"/>
    </a>
</p>

<a href="#top">回到顶部</a>
</body>
</html>

补充：也可以从其他页面跳转到当前页面的标记处，用法如下

<!-- 页面路径#标记值 -->
<a href="AnchorLink.html#top">跳转<a>

功能性链接

邮件链接 mailto:

<a href="mailto:10xxx89711@qq.com">点击联系我</a>

如果有邮件软件，点击后会自动打开

QQ链接

最常见的QQ推广，搜索“QQ推广”进入官网，选择推广工具后登录QQ，如图可以选择显示组件样式和定义提示语，然后会在下面生成QQ链接（这里注意一个问题，如果生成的链接中没有自己的qq，那么需要刷新一下页面，否则图片不能显示出来）

效果如图，点击图标后可以聊天

一个优雅的搬砖人

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML05：超链接标签及应用

链接标签格式：<a href="path" target="目标窗口位置">链接文本或图像</a>属性说明：href：链接路径target：指定链接在哪个标签打开，常用值：_self（默认，在当前标签打开链接） _blank（在新标签打开链接）代码：<!DOCTYPE html><ht...
复制链接

扫一扫