html学习——超链接标签_<a herf=-优快云博客

本文详细介绍了HTML中的超链接标签`<a>`的使用，包括基本的链接跳转、在新标签页打开链接、锚点定位以及功能性链接的应用，如邮箱和QQ推广。通过示例代码，展示了如何创建和使用这些链接，帮助读者理解并掌握网页导航的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

超链接标签

a标签

<a herf="要跳转的链接">点击我跳转到页面</a>

示例

<a herf="http://www.baidu.com">点击我跳转到百度</a>
<a herf="https://editor.youkuaiyun.com/md/?articleId=113860012">点击我跳
转到我的第一篇博客</a>
<a herf="http://www.kafuchino.vip">点击我跳转到智乃导航</a>

target属性：表示链接在哪里打开

self属性：在当前页打开（默认）

_blank : 在新标签页打开

<a herf="http://www.baidu.com" target="_blank">点击我在新标签页打开
百度</a>

锚链接

需要一个标记，可以跳转到该标记

使用name属性作为标记

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index</title>
</head>
<body>
<a name="top">顶部</a>
<!--在此创建top标记-->
<a herf="#down">去往底部</a>

<p><a herf="http://www.baidu.com">点击我跳转到百度</a>
<a herf="https://editor.youkuaiyun.com/md/?articleId=113860012">点击我跳
转到我的第一篇博客</a>
<a herf="http://www.kafuchino.vip">点击我跳转到智乃导航</a></p>

<a name="down">底部</a>
<!--在此创建底部标签-->
<a herf="#top">回到顶部</a>
</body>

如下图即可设置一个顶部标记

在这里插入图片描述

点击后页面跳转至标记所在位置

在这里插入图片描述

锚链接应用

<a herf="index.html#top">点击可以跳转到index.html的top属性位置</a>
<a herf="index.html#down">点击可以跳转到index.html的down属性位置</a>

功能性链接

邮箱

<a herf="mailto:144xxx9470@qq.com">点击联系我</a>

QQ推广

<!--在QQ推广官网内登录后点击推广工具选择样式进行复制即可，示例如下-->
<a target="_blank" href="http://wpa.qq.com/msgrd?
v=3&uin=1448549470&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1448549470:53"
 alt="点击和我聊天" title="点击和我聊天"/></a>
 <!--a标签——超链接标签
	 target=_blank在新标签页打开
	 herf属性要跳转到哪个页面
	 img图片标签
	 border边框
	 src图片地址
	 alt图片描述
	 title悬停文字
-->