技术小黑屋

URL中的 # 原来是这个意思

URL 是我们进行网络活动中很重要的概念,一个URL中可以包含域名,路径和参数等,

一个典型的 URL

1
https://www.example.com/fruits.html?from=google#apple

这其中包含了

  • 协议: https
  • 域名: www.example.com
  • 路径文件名: fruits.html
  • 参数: from=google
  • 片段: apple

#片段是什么

  • URL 中的 # 指的是一个片段
  • URL 片段 往往用来告知浏览器约定的一个滑动位置
  • 如果一个 URL 指向了一个文档,那么片段指向的就是文档的某个内容区间。

# 作用范围

  • 会被本地浏览器处理
  • 不会被服务器端接收处理

所以

  • www.example.com/fruits.html#apple
  • www.example.com/fruits.html#orange

对应的情况是

  • 对于浏览器,上面的链接指向同一文档,但是具有不同的滑动位置
  • 对于服务器,上面的链接指向同一文档,没有其他信息了。

# 还能怎么用

  • 考虑到在浏览器可以获取片段信息,我们可以利用 Javascript做一些事情
  • 网页应用可以使用片段来实现参数控制,做到不刷新页面,展示不同的内容

如下为 JavaScript获取片段的示例代码

1
window.location.hash

SEO 的影响

基于上面的理解,www.example.com/fruits.html#applewww.example.com/fruits.html#orange 会被搜索引擎当成一个链接。

如果不想被搜索引擎如上处理,有两种方式

  • 使用不同的网页链接如www.example.com/fruits_apple.htmlwww.example.com/fruits_orange.html
  • 使用#!,即www.example.com/fruits.html#!applewww.example.com/fruits.html#!orange 这种方式,可能只是Google 支持,其他搜索引擎待验证。

参考内容



加入技术小黑屋官方电报群