前两天一个做网络营销的朋友联系我，说客户的网页出问题了，问题是这样的：
客户网站网址是：https://www.example.com
网站有一个功能，在网址后面输入 #popup 就会在页面弹出一个对话框
朋友为了给网站添加追踪统计，需要给网址添加一个查询参数 ?source=abc ，最终网址长这样：https://www.example.com#popup?source=abc
朋友的问题来了：为什么网页上的对话框弹不出来了？
我修改了一下网址片断的顺序发给朋友，她说：“好了！”。下面我们追根溯源，一起研究下 https://www.example.com#popup?source=abc 这个网址问题出在哪里。
什么是网址
在互联网上，每一个资源都有自己唯一的地址WhatsApp网页版，也就是我们通常称呼的 URL（Uniform Resource Locator,统一资源定位符）。
网址的语法
没错，网址也有语法，就跟咱们自然语言有主谓宾一样，并且顺序是一定的。
protocol :// hostname / /
#fragment
方括号 为可选项
协议
协议就是一种约定，现实生活中我们的插座有两口和三口的，这就好比两个协议，如果我们插头跟插座匹配，则可以供电，如果不匹配则不能。
互联网用来数据传输的协议有很多，我们访问网站都是通过 HTTP 协议，至于为什么现在主流的网站网址前都是 HTTPS 我们再后面的文章中再细说（敲黑板，可以先点个订阅了）。
常见的协议有下面这些：
域名
互联网上的每一台计算机都有一个 IP 地址就像这样 192.168.1.1, 如果我们要访问一台计算机上的网站就要记住一个 IP 地址就太痛苦了，所以我们把这些长串的数字都映射成了好记的域名，例如：www.qq.com。
端口
如果把一个计算机看作是一栋有五个单元的楼房，那么端口就是每个单元的大门，虽然你进入哪个单元都是进入了这栋楼房，但是你拜访的是完全不同的住户。
路径
接上面的，路径就好比一个单元里不同的住户，指定不同的路径，就可以进入不同的人家。
查询
当你敲门时WhatsApp网页版，屋里的人问你是谁，你回答说：“我是张三”，这时候 URL 上的体现就是 ?who=张三，这样这家人（计算机）就知道你是张三了。
信息片断（锚点）
如果网址上写着 #卫生间，那么当主人给你开门后，你就会直接走进人家的卫生间。
“网站有一个功能WhatsApp网页版，在网址后面输入 #popup 就会在页面弹出一个对话框”
这就是为什么打开网页可以直接定位到一个打开的弹出框。
最后
说了这么多，你知道https://www.example.com#popup?source=abc 这个网址问题出在哪里了么，当你看到浏览器地址栏里长长网址时，能分清它的结构了么？