HTML5 使用 <a> 标签为文字或图片添加超链接，支持 href 设置跳转地址、target="_blank" 新窗口打开、rel="noopener" 提升安全、相对/绝对路径选择及 title 属性增强可访问性。
如果您希望在网页中为文字或图片添加可点击的跳转链接，HTML5 提供了标准且语义化的 <a> 标签来实现这一功能。以下是具体操作方法：
一、使用 a 标签为纯文字添加超链接
通过 <a> 标签包裹文字，并设置 href 属性为指定网址，即可使该文字具备跳转能力。浏览器会默认以蓝色下划线样式渲染链接。
1、在 HTML 文件的 <body> 区域内输入 <a href="https://www.example.com">访问示例网站</a>。
2、确保 href 属性值为合法的 URL，例如 https://www.baidu.com 或相对路径如 ./about.html。
立即学习“前端免费学习笔记（深入）”；
3、保存文件并在浏览器中打开，点击“访问示例网站”即可跳转至目标地址。
二、为图片添加可点击跳转链接
将 <img> 标签嵌套在 <a> 标签内部，可使整张图片成为可点击的超链接区域，用户点击图片即触发跳转。
1、编写如下结构：<a href="https://www.example.com"><img src="logo.png" alt="公司标志"></a>。
2、确认 src 属性指向本地或远程有效的图片路径，例如 images/icon.jpg。
3、避免在 <a> 标签中遗漏 href 值，否则链接将无法触发导航行为。
三、设置链接在新标签页中打开
默认情况下，点击链接会在当前页面跳转。若需保留原页面并新开窗口，需添加 target="_blank" 属性，同时建议配合 rel="noopener" 保障安全性。
1、在 <a> 标签中加入 target="_blank" rel="noopener"，例如：<a href="https://www.example.com" target="_blank" rel="noopener">新窗口打开</a>。
2、rel="noopener" 可防止新页面通过 window.opener 访问原始页面上下文，规避潜在安全风险。
3、务必验证新窗口是否成功加载目标网址，且原始页面未被意外关闭或重定向。
四、使用相对路径与绝对路径的区别处理
href 属性支持相对路径（相对于当前 HTML 文件位置）和绝对路径（完整协议+域名），二者适用场景不同，需根据项目结构准确选用。
1、若链接指向同目录下的 contact.html，直接写 href="contact.html"。
2、若链接指向上一级目录的 index.html，应写为 href="../index.html"。
3、跨域或外部网站必须使用含协议的绝对路径，例如 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a。
五、为链接添加 title 属性提升可访问性
title 属性可在鼠标悬停时显示提示文本，有助于用户预判链接目标，也对屏幕阅读器等辅助技术提供支持。
1、在 <a> 标签中添加 title 属性，例如：<a href="https://www.example.com" title="前往官方网站">官网入口</a>。
2、title 文本应简洁明确，描述目标页面用途，避免冗余或模糊表述如“点击这里”。
3、测试鼠标悬停是否正常弹出提示框，且内容与 href 目标一致，例如提示文本为 查看产品详情页面。
