网址URL

网络基础

准确标出一个网页、图片或文件在网上的位置

先知道

域名 Domain

网址通常由协议、域名和路径组成，还可以带查询参数与页内位置。并非每个网址都有所有部分；复制和分享时要注意编码，以及链接里是否包含令牌或个人信息。

https://vibeui.dev/components/button?tab=demo#anatomy

协议域名路径参数锚点

什么时候用

分享时复制完整链接，别人打开就是同一页
https://vibe-ui.dev/x/8fk2复制
复制成功
用 path 表达页面位置：/components/button 一看就懂
vibeui.dev/components/button路径就是页面在站里的位置
搜索、筛选条件放 query：链接可分享、可复现
/search?q=按钮&sort=hot参数跟着链接走，分享出去还能复现
长文档用 #hash 锚点，打开直接滚到那一节
/button#anatomy打开直接滚到这一节

什么时候不用

随手转发带有登录令牌或密钥的链接：收到链接的人可能获得你的访问权限
?token=sk-live-8f2k…密钥写进链接，转发即泄露
拼 URL 时中文和空格不编码：链接断成一截一截
/search?q=我的页面中文和空格要编码成 %E6%88%91 这种
分享时只复制域名丢了 path：对方打开永远是首页
vibeui.dev只复制了域名，对方打开是首页
把数据塞在 # 后面传给后端：锚点根本不会发给服务器
/pay#amount=999# 后面的内容不会发给服务器

组成结构 · Anatomy

https://vibeui.dev/components/button?tab=demo#anatomy

1协议Protocolhttps://，送信方式；现在是安全连接 HTTPS 的天下

2域名Domain寄到哪个小区，见域名 Domain；靠 DNS 解析 DNS 翻译成 IP

3路径Path小区里哪栋哪室：/components/button 就是某个页面

4查询参数Query? 后面 key=value 的留言条，& 连接多条，会发给服务器

5锚点Hash# 后面的页内定位，只在浏览器里生效，不发给服务器

常见变体 · Variants

绝对地址Absolute URL

https://vibeui.dev/components/button

包含协议和域名，适合外部分享或跨站引用

相对路径Relative Path

/components/button

站内跳转，换域名也不用改

锚点链接Anchor Link

#anatomy

只定位到当前页的某一节

典型使用场景

地址栏里的完整网址

🔒 https://vibeui.dev/components/button

按钮与基础样式

按钮 Button

页面上最重要的动作，交给按钮

搜索结果页的参数

🔍 按钮

vibeui.dev/search?q=按钮&cat=通用

找到 3 个相关条目

按钮 Button

提交表单、触发动作、确认危险操作…

开关 Switch

状态立即生效的开关…

分享弹窗复制链接

分享这个条目

https://vibeui.dev/components/button#anatomy

✓ 已复制到剪贴板

文档页锚点定位

本页目录

什么时候用

场景

组成结构

变体

/components/button#anatomy

组成结构 · Anatomy