HTML Academy · 课时

绝对 URL 与相对 URL

Q: 「绝对 URL 与相对 URL」这节课中我会学到什么？

了解绝对路径与相对路径之间的区别。 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

了解绝对路径与相对路径之间的区别。

绝对 URL 与相对 URL 是 CoddyKit 上的免费 HTML Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是网址？

网址（统一资源定位符）是网络上某个资源的完整地址。

网址由以下部分组成：

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

绝对网址

绝对网址包含完整地址——协议、域名和路径：

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

相对网址

相对网址相对于当前页面的位置——不需要协议或域名：

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

相对网址的三种形式

相对网址有三种形式：

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

使用 ../ 导航

使用 ../ 向上移动一级目录：

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

何时使用绝对网址和相对网址

使用原则：

外部资源——始终使用绝对网址：https://...
CDN 资源——使用绝对网址或协议相对网址
内部导航——根相对网址（/page）最安全
同一目录——使用相对网址（page.html）更方便

根相对网址具有可移植性

根相对网址（/path）不受页面移动的影响：

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

base 元素

<head> 中的 <base> 元素会为所有相对链接设置基础网址：

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

网址编码

网址中的特殊字符必须进行百分号编码：

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

规范网址

当一个页面可以通过多个网址访问时，请使用规范标签声明首选网址：

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

网址最佳实践

请遵循以下网址约定：

只使用小写字母
使用连字符（而不是下划线）分隔单词
保持网址简短且具有描述性
避免使用特殊字符——对其进行编码
内部链接使用根相对网址

快速检查

您有一个位于 /blog/post.html 的文件，想要链接到 /about.html。哪一个相对网址最安全？

回顾：绝对网址和相对网址

网址类型总结：

绝对网址——包含协议和域名的完整网址
根相对网址——以 / 开头，相对于域名根目录
相对网址——相对于当前文件的位置
../——向上移动一级目录
<base href>——为所有相对网址设置基础网址

常见问题解答

「绝对 URL 与相对 URL」课时是免费的吗？

是的 — 「绝对 URL 与相对 URL」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「绝对 URL 与相对 URL」这节课中我会学到什么？

了解绝对路径与相对路径之间的区别。你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「绝对 URL 与相对 URL」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy