（第二十期上）HTML 超链接标签 a

（第二十期上）HTML 超链接标签 a：从入门到熟练，一篇就够

为什么需要超链接？

网页之所以“活起来”，靠的就是超链接。通过一段可点击的文字或图片，把用户从当前页面带到另一个页面或网站，这就是链接的价值。有了它，内容之间才能跳转，网站结构才有了“网”的感觉。

---

a 标签是什么？

• a（anchor） 表示“锚点”，用于创建超链接。
• 将文字或图片放进一对 a 标签中，就能点击跳转。

示例：

<a href="https://www.qq.com">腾讯网</a>

---

基本语法与结构

<a href="链接目标地址" target="打开方式">链接文本或图片</a>

• href（必填）：链接目标地址（点了去哪里）
• target（可选）：在哪个窗口/标签页打开

---

href：链接的目标地址（必填）

• 指定点击后要去的页面地址。
• 写外部链接时，一定写完整 URL（带协议）：
  • 正确：http://www.qq.com 或 https://www.qq.com
  • 容易错：www.qq.com（缺少协议，可能无法正确跳转）

示例（外部链接到腾讯）：

<a href="http://www.qq.com">腾讯网</a>

示例（外部链接到传智播客）：

<a href="http://www.itcast.cn">传智播客</a>

---

target：在哪打开（默认当前窗口）

• 默认值是 _self：在“当前窗口/标签页”打开，新页面会替换掉当前页面。
• 设置为 _blank：在“新窗口/新标签页”打开，当前页面保留，更常用且更友好。

对比示例：

<!-- 当前窗口打开（默认效果） -->
<a href="http://www.qq.com" target="_self">腾讯网（当前窗口）</a><!-- 新窗口/标签页打开（推荐） -->
<a href="http://www.qq.com" target="_blank">腾讯网（新窗口）</a>

应用到传智播客：

<a href="http://www.itcast.cn" target="_blank">传智播客（新窗口）</a>

---

外部链接的书写规范与常见问题

• 必须以协议开头：http:// 或 https://
• 域名要完整：例如 www.qq.com、www.itcast.cn
• 默认行为要清楚：不写 target 就等于 _self，会替换当前页面
• 常见错误：
  • 忘记协议（如写成 www.qq.com）
  • 错拼属性名（如 herf、tg 等）
  • 中文全角符号混入英文地址

---

小结

• a 标签的职责：让文字/图片具备跳转能力。
• 核心属性：
  • href（必填）：要跳到哪（外链需完整 URL）。
  • target（可选）：怎么打开（_self 当前窗口，_blank 新窗口）。
• 外部链接重点：以 http:// 或 https:// 开头，否则可能无法正确访问。

---

快速参考示例（可直接套用）

<h4>外部链接</h4><!-- 腾讯：新窗口打开 -->
<a href="http://www.qq.com" target="_blank">腾讯网</a><!-- 传智播客：新窗口打开 -->
<a href="http://www.itcast.cn" target="_blank">传智播客</a><!-- 如果需要当前窗口打开 -->
<a href="http://www.qq.com" target="_self">腾讯网（当前窗口）</a>

• 核心建议：面向外部网站的跳转，优先使用 target="_blank"，保留当前页的阅读状态，体验更好。

• 以上就是 a 标签的基本语法与常见用法。理解这两个属性（href 和 target），你就已经掌握了超链接的核心。

• 如果你在实操时遇到“点击后原页面不见了”的情况，十有八九是默认 _self 生效；改为 _blank 即可。

• 想进一步增强安全与性能（如使用 _blank 时），可以了解 rel="noopener noreferrer" 等进阶属性，但对当前目标内容不做扩展即可顺利完成需求。

• 祝你写出更清晰、可维护的链接结构！