html - 5.链接标签

最新推荐文章于 2024-06-03 15:43:00 发布

旧林墨烟

最新推荐文章于 2024-06-03 15:43:00 发布

阅读量225

点赞数 1

分类专栏： html 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_52115456/article/details/119923518

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

超链接

超链接分为

页面间链接
锚链接
功能性链接

链接标签格式

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

解析：

href : 跳转页面的路径
target : 打开的窗口位置，常用值有_self、_blank。_self指在当前窗口打开，_blank表示从新的窗口打开
该标签为双目标签，需要</a>结束

页面间链接

文本超链接
图像超链接

示例源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>
<!--  从当前页面打开百度  -->
<a href="https:www.baidu.com" target="_self">点击我打开百度</a>
<!--  从新窗口打开百度  -->
<a href="https:www.baidu.com" target="_blank">点击我打开百度</a>

<br>
<!--  图片链接  -->
<a href="https:www.baidu.com" target="_blank"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" title="点击我打开百度" ></a>
</body>
</html>

视图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kDPb9DqP-1629938348115)(C:\Users\wuguanghui\AppData\Roaming\Typora\typora-user-images\image-20210826080204214.png)]$

锚链接

锚链接功能强大，具有导航的作用，通常用于侧边栏的实现

锚链接的使用：

需要一个锚标记
跳转到标记

解析：

锚标记：<a name=“name”>文本</a>
跳转：<a href="#name">文本</a>

示例源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>锚链接</title>
</head>
<body>
<!--  锚标记  -->
<a name="top">顶部</a>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
<p>垃圾文本</p>
    
<!--  锚跳转  -->
<a href="#top">点击我回到顶部</a>
</body>
</html>

视图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ihBMjiYJ-1629938348117)(C:\Users\wuguanghui\AppData\Roaming\Typora\typora-user-images\image-20210826082008232.png)]$

功能性链接

可以实现某些功能，如

邮件链接：mailto
QQ推广链接

示例源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>功能性链接</title>
</head>
<body>
<!--  邮件链接  -->
<a href="mailto:2345t4534@qq.com">点击联系我</a>

<!--  QQ推广  -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="你好，加我领取小电影" title="你好，加我领取小电影"/></a>
</body>
</html>

旧林墨烟

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html - 5.链接标签

超链接页面间链接示例源代码视图锚链接示例源代码视图功能性链接示例源代码超链接分为页面间链接锚链接功能性链接链接标签格式<a href=“path” target=“目标窗口位置”>链接文本或图像</a>解析：href : 跳转页面的路径target : 打开的窗口位置，常用值有_self、_blank。_self指在当前窗口打开，_blank表示从新的窗口打开该标签为双目标签，需要</a>结束页面间链接文本超链接图像超链接示例源代
复制链接

扫一扫