HTML5 统一资源定位器(Uniform Resource Locators)
·
HTML5 统一资源定位器 (URL) 学习笔记
在 HTML5 中，统一资源定位器 (URL) 是网页的基石。HTML5 不仅规范了 URL 的语法结构，还引入了强大的 URL API，使得 JavaScript 能够轻松解析、构建和操作 URL，极大地简化了前端开发中处理链接、查询参数和路径的逻辑。
一、URL 的标准结构
一个标准的 URL 由以下几个部分组成：
protocol://username:password@host:port/path?query#fragment
| 部分 | 名称 | 说明 | 示例 |
|---|---|---|---|
protocol |
协议 | 资源传输的协议类型 | https:, http:, file:, data: |
// |
分隔符 | 协议与主机名的分隔 | // |
username:password |
认证信息 | (较少用) 用户名和密码 | user:pass@ |
host |
主机 | 域名或 IP 地址 | www.example.com, localhost |
port |
端口 | 服务端口号 (默认隐含) | :8080, :443 |
path |
路径 | 资源在服务器上的位置 | /images/logo.png, /api/users |
query |
查询字符串 | 传递给服务器的参数 (以 ? 开头) |
?id=123&name=Tom |
fragment |
片段 | 页面内的锚点 (以 # 开头) |
#section1 |
示例解析
URL: https://user:pass@example.com:8080/docs/index.html?id=10&lang=zh#top
- 协议:
https - 主机:
example.com - 端口:
8080 - 路径:
/docs/index.html - 查询:
id=10&lang=zh - 片段:
top
二、HTML5 中的 URL 新特性
HTML5 在标签属性中对 URL 的处理更加智能和灵活。
1. 相对 URL 的自动解析
浏览器会自动将相对路径解析为绝对路径。
<!-- 假设当前页面是 https://example.com/blog/post.html -->
<a href="images/photo.jpg">图片</a>
<!-- 解析为: https://example.com/blog/images/photo.jpg -->
<a href="../index.html">首页</a>
<!-- 解析为: https://example.com/index.html -->
2. 新的 URL 协议支持
HTML5 扩展了 <a> 标签支持的协议：
mailto:: 打开邮件客户端。<a href="mailto:support@example.com?subject=咨询&body=你好">联系我们</a>tel:: 在移动设备上拨打电话号码。<a href="tel:+8613800138000">拨打 138-0013-8000</a>data:: 直接在 URL 中嵌入数据 (Base64)，常用于小图片。<img src="data:image/png;base64,iVBORw0KGgo..." alt="小图标">blob:: 指向浏览器内存中的 Blob 对象 (如用户上传的文件)。const url = URL.createObjectURL(file);
3. <base> 标签
用于指定页面中所有相对 URL 的基准路径。
<head>
<base href="https://example.com/assets/">
</head>
<body>
<!-- 解析为: https://example.com/assets/images/logo.png -->
<img src="images/logo.png">
<!-- 解析为: https://example.com/assets/css/style.css -->
<link rel="stylesheet" href="css/style.css">
</body>
注意：一个页面只能有一个 <base> 标签，且必须放在 <head> 中。
三、JavaScript URL API (核心重点)
HTML5 引入了 URL 和 URLSearchParams 接口，让前端处理 URL 变得极其简单，无需手动字符串分割。
1. URL 对象
用于解析和构建 URL。
const url = new URL('https://example.com:8080/path/page.html?id=100&name=Tom#section1');
// 读取属性
console.log(url.protocol); // "https:"
console.log(url.host); // "example.com:8080"
console.log(url.hostname); // "example.com" (不含端口)
console.log(url.port); // "8080"
console.log(url.pathname); // "/path/page.html"
console.log(url.search); // "?id=100&name=Tom"
console.log(url.hash); // "#section1"
console.log(url.href); // 完整 URL
// 修改属性 (自动更新 href)
url.pathname = '/new-page.html';
url.searchParams.set('id', '200'); // 修改查询参数
url.hash = '#top';
console.log(url.href);
// 输出：https://example.com:8080/new-page.html?id=200&name=Tom#top
2. URLSearchParams 对象
专门用于处理查询字符串 (? 后面的部分)。
const params = new URLSearchParams('id=100&name=Tom&name=Jerry');
// 获取值 (如果有多个同名参数，返回第一个)
console.log(params.get('id')); // "100"
console.log(params.get('name')); // "Tom"
// 获取所有同名参数
console.log(params.getAll('name')); // ["Tom", "Jerry"]
// 检查是否存在
console.log(params.has('id')); // true
// 添加/修改/删除
params.set('age', '25'); // 添加或修改
params.append('tag', 'js'); // 追加 (允许重复)
params.delete('id'); // 删除
// 遍历
for (const [key, value] of params) {
console.log(`${key}: ${value}`);
}
// 转换为字符串
console.log(params.toString());
// 输出：name=Tom&name=Jerry&age=25&tag=js
3. 实战：解析当前页面 URL
// 获取当前页面 URL
const currentUrl = new URL(window.location.href);
// 获取查询参数
const userId = currentUrl.searchParams.get('userId');
const category = currentUrl.searchParams.get('category');
if (userId) {
console.log(`当前用户 ID: ${userId}`);
}
// 修改 URL 但不刷新页面 (配合 History API)
currentUrl.searchParams.set('page', '2');
history.pushState({}, '', currentUrl);
四、URL 在 HTML5 标签中的应用
1. <a> 标签 (超链接)
<!-- 绝对路径 -->
<a href="https://www.google.com">Google</a>
<!-- 相对路径 -->
<a href="./about.html">关于我们</a>
<!-- 锚点链接 -->
<a href="#contact">联系我们</a>
<!-- 下载文件 (HTML5 新属性) -->
<a href="file.pdf" download="报告.pdf">下载报告</a>
2. <img>, <video>, <audio>
<!-- 图片 -->
<img src="images/banner.jpg" alt="Banner">
<!-- 视频 (支持多源) -->
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
3. <link> 和 <script>
<!-- 加载 CSS -->
<link rel="stylesheet" href="styles/main.css">
<!-- 加载脚本 (使用 defer) -->
<script src="js/app.js" defer></script>
4. <iframe>
<iframe src="https://www.wikipedia.org" title="维基百科"></iframe>
五、URL 安全性与注意事项
1. 同源策略 (Same-Origin Policy)
浏览器限制不同源（协议、域名、端口任意一个不同）的脚本交互。
- 同源:
https://a.com:80和https://a.com:80 - 不同源:
https://a.com和http://a.com(协议不同) - 不同源:
https://a.com和https://b.com(域名不同)
2. 防止 XSS (跨站脚本攻击)
- 不要直接将用户输入的 URL 插入到
innerHTML中。 - 使用
textContent或 DOM API 设置属性。 - 验证 URL 格式，确保协议是预期的（如只允许
http或https）。
// 错误做法
const userInput = '<script>alert(1)</script>';
document.getElementById('link').innerHTML = `<a href="${userInput}">链接</a>`;
// 正确做法
const link = document.getElementById('link');
link.href = userInput; // 浏览器会自动转义
3. 相对路径陷阱
- 确保相对路径相对于当前文档，而不是相对于当前脚本文件。
- 使用
<base>标签时要小心，它会影响页面中所有相对 URL。
六、总结速查表
| 功能 | 方法/属性 | 示例 |
|---|---|---|
| 创建 URL 对象 | new URL(string, base) |
new URL('/path', 'https://a.com') |
| 获取协议 | url.protocol |
"https:" |
| 获取主机 | url.hostname |
"example.com" |
| 获取路径 | url.pathname |
"/docs/index.html" |
| 获取查询 | url.search |
"?id=1" |
| 获取片段 | url.hash |
"#top" |
| 解析参数 | url.searchParams.get('key') |
params.get('id') |
| 修改参数 | url.searchParams.set('key', 'val') |
params.set('id', '2') |
| 构建 URL | new URL().href |
自动拼接所有部分 |
| 下载文件 | <a download> |
<a href="file.pdf" download> |
| 电话链接 | tel: |
<a href="tel:123456"> |
| 邮件链接 | mailto: |
<a href="mailto:a@b.com"> |
掌握 HTML5 的 URL 处理机制，能让你更高效地构建动态网页、处理路由、管理参数，并确保应用的安全性和兼容性！
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
10
0- 0
已为社区贡献32条内容
所有评论(0)