从根目录到哈希锚点：一份写给手写者的 URL 备忘录

网页里每一次跳转、每一张插图、每一段样式，都始于一行不起眼的地址。它像门牌，也像钥匙——写对了，浏览器自然找到房间；写错一个字母，服务器就回你 404 的冷脸。下面这份笔记，把“地址”拆成零件，再装回日常标签里，方便你随时翻阅、随手可用。

1. 地址长什么样？

把一行字符串拆成七段，就能一眼看出哪部分坏了：

协议://[用户名:密码@]主机[:端口]/路径[?查询][#片段]

• 协议
  决定“怎么拿”。https:// 带锁，最常用；http:// 老旧，非必要别碰；file:// 只在本地硬盘转悠。
• 主机
  决定“去哪拿”。域名或 IP 都行，别漏掉后面的顶级域。
• 端口
  决定“敲哪扇门”。443、80 是默认，省略也行；改成 3000、8080 时记得写全。
• 路径
  决定“进门后怎么走”。Linux 服务器区分大小写，空格替换成 - 或 _，省得后人踩坑。
• 查询
  决定“带什么话”。?key=value&key2=value2，中文先编码再拼。
• 片段
  决定“翻到第几页”。#chapter-3 对应标签的 id，别写错字母顺序。

2. 绝对 or 相对？看你在哪站

相对路径的“../”像倒车档：
css/style.css → 当前目录下找 css 文件夹
../css/style.css → 先退一级，再进 css
../../assets/img/a.jpg → 退两级，再层层深入，别手滑多写一层。

3. 常见标签里的写法

• 跳转

  <a href="article/2025/summary.html#result">看结果</a>

• 插图

  <img src="assets/illustrations/logo.svg" alt="站点标志">

• 样式

  <link rel="stylesheet" href="../css/main.min.css">

• 脚本

  <script src="js/app.js" defer></script>

• 表单

  <form action="api/search" method="get">
    <input name="q" placeholder="关键词">
    <button>搜</button>
  </form>
  <!-- 提交后生成：/api/search?q=用户输入 -->

• 内嵌

  <iframe src="https://player.bilibili.com/xxx" width="800" height="450"></iframe>

4. 中文、空格与特殊符号

URL 只认 ASCII 子集，其余一律“百分号逃生”。
空格 → %20（或 +）
中文“教程” → %E6%95%99%E7%A8%8B

浏览器一般会代劳，但三件事最好自己做：

1. 后端重定向前先编码；
2. 前端拼接查询串时用 encodeURIComponent()；
3. 把文件名提前换成英文或拼音，省一次转码。

5. 让链接活得久一点

• 全站外部资源强制 https，省得浏览器把页面标成“不安全”。
• 内部链接一律相对，换域名时批量搜索替换的活儿直接消失。
• 目录层级别深过 3 层，既短又好记。
• 文件名全小写，用连字符 - 分词，Linux 服务器不踩大小写坑。
• 给静态资源加版本号或哈希，如 main.abc123.js，更新时路径变，缓存立刻失效。

6. 404、乱码、锚点失效速查表

7. 一行小结

写地址就是写路由：协议是交通工具，主机是终点站，路径是楼层号，查询是捎的信，片段是翻到第几行。
记住七段结构，分清绝对相对，把特殊字符交给百分号，链接就能在任何浏览器里指哪打哪。