HTML5 统一资源定位器(Uniform Resource Locators)

HTML5 统一资源定位器 (URL) 学习笔记在 HTML5 中统一资源定位器 (URL)是网页的基石。HTML5 不仅规范了 URL 的语法结构还引入了强大的URL API使得 JavaScript 能够轻松解析、构建和操作 URL极大地简化了前端开发中处理链接、查询参数和路径的逻辑。一、URL 的标准结构一个标准的 URL 由以下几个部分组成protocol://username:passwordhost:port/path?query#fragment部分名称说明示例protocol协议资源传输的协议类型https:,http:,file:,data://分隔符协议与主机名的分隔//username:password认证信息(较少用) 用户名和密码user:passhost主机域名或 IP 地址www.example.com,localhostport端口服务端口号 (默认隐含):8080,:443path路径资源在服务器上的位置/images/logo.png,/api/usersquery查询字符串传递给服务器的参数 (以?开头)?id123nameTomfragment片段页面内的锚点 (以#开头)#section1示例解析URL:https://user:passexample.com:8080/docs/index.html?id10langzh#top协议:https主机:example.com端口:8080路径:/docs/index.html查询:id10langzh片段:top二、HTML5 中的 URL 新特性HTML5 在标签属性中对 URL 的处理更加智能和灵活。1. 相对 URL 的自动解析浏览器会自动将相对路径解析为绝对路径。!-- 假设当前页面是 https://example.com/blog/post.html --ahrefimages/photo.jpg图片/a!-- 解析为: https://example.com/blog/images/photo.jpg --ahref../index.html首页/a!-- 解析为: https://example.com/index.html --2. 新的 URL 协议支持HTML5 扩展了a标签支持的协议mailto:: 打开邮件客户端。ahrefmailto:supportexample.com?subject咨询body你好联系我们/atel:: 在移动设备上拨打电话号码。ahreftel:8613800138000拨打 138-0013-8000/adata:: 直接在 URL 中嵌入数据 (Base64)常用于小图片。imgsrcdata:image/png;base64,iVBORw0KGgo...alt小图标blob:: 指向浏览器内存中的 Blob 对象 (如用户上传的文件)。consturlURL.createObjectURL(file);3.base标签用于指定页面中所有相对 URL 的基准路径。headbasehrefhttps://example.com/assets//headbody!-- 解析为: https://example.com/assets/images/logo.png --imgsrcimages/logo.png!-- 解析为: https://example.com/assets/css/style.css --linkrelstylesheethrefcss/style.css/body注意一个页面只能有一个base标签且必须放在head中。三、JavaScript URL API (核心重点)HTML5 引入了URL和URLSearchParams接口让前端处理 URL 变得极其简单无需手动字符串分割。1.URL对象用于解析和构建 URL。consturlnewURL(https://example.com:8080/path/page.html?id100nameTom#section1);// 读取属性console.log(url.protocol);// https:console.log(url.host);// example.com:8080console.log(url.hostname);// example.com (不含端口)console.log(url.port);// 8080console.log(url.pathname);// /path/page.htmlconsole.log(url.search);// ?id100nameTomconsole.log(url.hash);// #section1console.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?id200nameTom#top2.URLSearchParams对象专门用于处理查询字符串 (?后面的部分)。constparamsnewURLSearchParams(id100nameTomnameJerry);// 获取值 (如果有多个同名参数返回第一个)console.log(params.get(id));// 100console.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]ofparams){console.log(${key}:${value});}// 转换为字符串console.log(params.toString());// 输出nameTomnameJerryage25tagjs3. 实战解析当前页面 URL// 获取当前页面 URLconstcurrentUrlnewURL(window.location.href);// 获取查询参数constuserIdcurrentUrl.searchParams.get(userId);constcategorycurrentUrl.searchParams.get(category);if(userId){console.log(当前用户 ID:${userId});}// 修改 URL 但不刷新页面 (配合 History API)currentUrl.searchParams.set(page,2);history.pushState({},,currentUrl);四、URL 在 HTML5 标签中的应用1.a标签 (超链接)!-- 绝对路径 --ahrefhttps://www.google.comGoogle/a!-- 相对路径 --ahref./about.html关于我们/a!-- 锚点链接 --ahref#contact联系我们/a!-- 下载文件 (HTML5 新属性) --ahreffile.pdfdownload报告.pdf下载报告/a2.img,video,audio!-- 图片 --imgsrcimages/banner.jpgaltBanner!-- 视频 (支持多源) --videocontrolssourcesrcvideo.mp4typevideo/mp4sourcesrcvideo.webmtypevideo/webm/video3.link和script!-- 加载 CSS --linkrelstylesheethrefstyles/main.css!-- 加载脚本 (使用 defer) --scriptsrcjs/app.jsdefer/script4.iframeiframesrchttps://www.wikipedia.orgtitle维基百科/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。// 错误做法constuserInputscriptalert(1)/script;document.getElementById(link).innerHTMLa href${userInput}链接/a;// 正确做法constlinkdocument.getElementById(link);link.hrefuserInput;// 浏览器会自动转义3. 相对路径陷阱确保相对路径相对于当前文档而不是相对于当前脚本文件。使用base标签时要小心它会影响页面中所有相对 URL。六、总结速查表功能方法/属性示例创建 URL 对象new URL(string, base)new URL(/path, https://a.com)获取协议url.protocolhttps:获取主机url.hostnameexample.com获取路径url.pathname/docs/index.html获取查询url.search?id1获取片段url.hash#top解析参数url.searchParams.get(key)params.get(id)修改参数url.searchParams.set(key, val)params.set(id, 2)构建 URLnew URL().href自动拼接所有部分下载文件a downloada hreffile.pdf download电话链接tel:a hreftel:123456邮件链接mailto:a hrefmailto:ab.com掌握 HTML5 的 URL 处理机制能让你更高效地构建动态网页、处理路由、管理参数并确保应用的安全性和兼容性