HTML URL 学习笔记

在 HTML 中，超链接可以通过 URL 来指向其他页面或资源。URL 全称为统一资源定位符，是互联网上用于定位资源的地址。

URL 的结构

一个完整的 URL 包含以下几个部分：

htmlCopy Code
<协议>://<主机>:<端口>/<路径>?<查询>#<片段>

• 协议（Protocol）：如 HTTP、HTTPS、FTP 等。
• 主机（Host）：服务器的域名或 IP 地址。
• 端口（Port）：服务器的端口号，默认 HTTP 端口为 80，HTTPS 端口为 443。
• 路径（Path）：资源在服务器上的相对路径。
• 查询（Query）：附加到 URL 后面的可选参数，以问号 ? 开头，多个参数之间用 & 分隔。
• 片段（Fragment）：锚点，用于在文档中定位到某个特定的位置，以井号 # 开头。

示例：

htmlCopy Code
<a href="https://www.example.com/path?query=1#fragment">这是一个链接</a>

相对路径

相对路径指的是相对于当前文件所在的目录的路径。常用的相对路径有以下几种形式：

• ./：表示当前目录。例如：./index.html。
• ../：表示上级目录。例如：../images/logo.png。
• /：表示站点根目录。例如：/about.html。

示例：

htmlCopy Code
<a href="./page1.html">跳转到另一个页面</a>
<img src="../images/logo.png" alt="Logo">
<a href="/about.html">跳转到站点的关于页面</a>

URL 编码

当 URL 中包含特殊字符时，需要进行 URL 编码。常见的特殊字符有空格、问号、井号等。URL 编码会将这些特殊字符转换成十六进制的编码形式。

用 JavaScript 进行 URL 编码：

javascriptCopy Code
encodeURIComponent('https://www.example.com/?query=1#fragment');
// 输出：https%3A%2F%2Fwww.example.com%2F%3Fquery%3D1%23fragment

结语

以上就是 HTML URL 学习笔记的核心内容了。在实际开发中，熟练掌握 URL 的基本结构和使用方法是非常重要的。