HTML--超链接

最新推荐文章于 2024-08-25 18:26:48 发布

零时搞学习

最新推荐文章于 2024-08-25 18:26:48 发布

阅读量534

点赞数 5

分类专栏： HTML学习文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_44517278/article/details/135573627

版权

HTML学习专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了HTML中a标签的使用，包括基本语法、不同target属性的应用以及锚点链接的作用，帮助读者理解如何在网页中实现页面间的跳转和内容定位。

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

超链接

作用：点击跳转到相应位置

a标签

语法：

<a href="链接地址">文本或图片</a>

范例：

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title>跳转到百度</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="小猫.jpg">看看小猫</a>
</body>
</html>

如上代码，在网页打开可以看到如下效果，点击百度跳转到百度首页，点击看看小猫可以打开··小猫.jpg查看在这里插入图片描述
拓展：
在百度首页，点击百度的图片可以跳转到新页面，所以图片也可以接入超链接。
范例：
如下范例中，网页显示百度图片，点击跳转搜狗首页

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title>跳转到百度</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a><br/>
    <a href="小猫.jpg">看看小猫</a><br/>
    <a href="https://www.sogou.com/"><img src="baidu.png"></a>
</body>
</html>

在这里插入图片描述

target属性

定义打开超链接的方式，默认状况下是在当前页面打开超链接，常用的是在新页面打开超链接
用法：

<a href="链接地址" target="_self">在当前页面打开超链接</a>
<a href="链接地址" target="_blank">在新页面打开超链接</a>
<a href="链接地址" target="_parent">在父页面打开超链接</a>
<a href="链接地址" target="_top">在顶层页面打开超链接</a>

内部链接

顾名思义，跳转到自己的HTML页面上
比如我这个项目下有多个HTML文件，我可以从一个跳转到另一个指定的HTML文件下
效果：点击网页会跳转显示20240111.html的内容
在这里插入图片描述

锚点链接

使用锚点链接跳转到当前网页的指定位置，类似目录，点击目录跳转到目录所在段落
对于有很长页面的网页这个东西才有用，可以帮助使用者快速跳转到相应为止开始浏览网页。
或者很多网页的回到顶层按钮也是基于这个吧？

用法：注意不要漏了锚点名前面的 # 号

<div>
	<a href="#锚点名">锚点描述</a>
</div>
</div id="锚点名">
	...
</div>

零时搞学习

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML--超链接

作用：点击跳转到相应位置。
复制链接

扫一扫

专栏目录