HTML 课堂笔记：超链接（a 标签）

HTML 课堂笔记：超链接（<a> 标签）

一、基本语法结构

• 链接内容 是超链接的标准写法。
• 链接内容可以是文字、图片、按钮，甚至整个块级元素（HTML5 允许）。

示例说明

• 文字链接：<a href="huawei.html">跳转到下一页</a> → 点击文字"跳转到下一页"就会打开 huawei.html 文件。
• 图片链接：把 <img> 放在 <a> 标签内，点击图片即可跳转。

二、href 属性的四种取值类型

类型	说明	典型示例
外部跳转	指向互联网上的完整 URL 地址	href="https://www.baidu.com" → 打开百度首页
内部跳转	指向同一网站内的其他页面（相对路径）	href="huawei.html"（同级目录） href="../index.html"（上级目录） href="news/news.html"（子目录）
锚记跳转	页面内或跨页面的锚点定位	href="#section1" → 跳转到当前页面 id="section1" 的位置 href="page.html#section1" → 先打开 page.html，再定位到该页的 section1 位置
空链接	点击后不产生实际跳转	href="#" → 点击回到页面顶部（默认锚点） href="javascript:void(0)" → 无任何动作，常用于占位或配合 JavaScript 使用

补充说明

• 相对路径的写法要搞清楚当前文件与目标文件的层级关系：
  • 同级目录：直接写文件名。
  • 上级目录：../ 表示向上返回一级。
  • 子目录：先写文件夹名，再写文件名。
• 锚点的 # 后面必须与目标元素的 id 属性值完全匹配（区分大小写）。

三、target 属性 —— 控制链接打开方式

值	作用	使用场景
_self	默认值，在当前标签页打开链接	普通页面跳转，覆盖当前页面
_blank	在新窗口或新标签页打开	跳转到外部网站、下载文件，保留原页面不关闭
_parent	在父级框架（iframe）中打开	页面嵌套在 iframe 中时，在上一层框架打开
_top	在顶层框架中打开（跳出所有嵌套）	从 iframe 中跳转到最外层主窗口

使用示例

• 去B站 → 点击后新标签页打开 B站，原页面保留。

四、课堂重点速记

1. href="#" 和 href="javascript:void(0)" 的区别

• href="#"：点击后会跳转到页面顶部（因为 # 是空锚点），如果页面很长会有明显滚动。
• href="javascript:void(0)"：点击后什么都不做，页面不会滚动，常用于配合 JS 触发事件的占位链接。

2. 内部跳转的路径写法总结

当前文件位置	目标文件位置	href 写法
/page/about.html	/page/contact.html（同目录）	contact.html
/page/about.html	/index.html（上级目录）	../index.html
/page/about.html	/page/news/detail.html（子目录）	news/detail.html
/index.html	/page/about.html（下级目录）	page/about.html

3. 锚点跳转的两步操作

• 第一步：在目标位置添加 id 属性，如 <h2 id="section1">第一章</h2>。
• 第二步：在链接中写 <a href="#section1">跳转到第一章</a>。
• 跨页面锚点：<a href="page.html#section1"> → 先打开 page.html，再自动滚动到该页的 section1。

4. target="_blank" 的安全提醒

• 在新窗口打开外部链接时，建议加上 rel="noopener noreferrer"，防止目标页面通过 window.opener 篡改原页面。

五、常见应用场景

场景	写法
导航菜单跳转页面	<a href="index.html">首页</a>
文章内目录跳转	<a href="#chapter2">第二章</a>
返回顶部按钮	<a href="#">返回顶部</a>
友情链接（外站）	<a href="https://www.github.com" target="_blank">GitHub</a>
下载文件	<a href="files/资料.pdf" download>下载PDF</a>（加 download 属性强制下载）