使用<a>标签创建超链接,href指定目标地址,可链接网页、文件、邮箱或电话;通过target="_blank"在新标签页打开;支持title提示、图片链接及锚点跳转,注意路径和引号正确。

在HTML中创建超链接非常简单,主要使用<a>标签(anchor标签),通过href属性指定链接目标。下面为你详细介绍如何正确编写HTML超链接,涵盖常见用法和实用技巧。
基本语法:创建一个简单的超链接
使用<a>标签配合href属性,可以将文本或图片变成可点击的链接。
说明:
链接到站内页面或文件
如果要链接本站的其他页面或下载文件,可以直接写相对路径。
立即学习“前端免费学习笔记(深入)”;
<a href="about.html">关于我们</a> <a href="files/report.pdf">下载报告</a>相对路径说明:
-
about.html:同级目录下的页面。 -
files/report.pdf:当前目录下files文件夹中的PDF文件。
设置链接打开方式(新窗口/新标签页)
默认情况下链接在当前页面打开,若希望在新标签页打开,使用target="_blank"。
常用target值:
- _self:在当前窗口打开(默认)。
- _blank:在新标签页打开。
- _parent 或 _top:用于框架页面,一般较少使用。
创建邮件链接和电话链接
除了网页,还可以直接调用系统功能。
<a href="mailto:support@example.com">联系我们</a> <a href="tel:+8613800138000">拨打电话</a>点击后会:
- mailto:打开默认邮件客户端,自动填写收件人。
- tel:在手机上点击可直接拨号。
给链接添加标题提示(title属性)
鼠标悬停时显示提示信息,提升用户体验。
<a href="https://www.example.com" title="这是示例网站">示例链接</a>链接图片而不是文字
把<img>标签放在<a>标签内即可。
点击图片就会跳转到指定页面。
锚点链接:跳转到页面指定位置
先为页面某元素设置id,然后用#id名链接到它。
适用于长页面内部导航,如目录跳转。
基本上就这些。掌握这些方法,你就能灵活使用HTML超链接了。不复杂但容易忽略细节,比如路径写错或忘记加引号。写完建议预览测试一下。










