URL中#号(井号)的作用

最新推荐文章于 2022-09-05 15:32:41 发布

倪舒扬

最新推荐文章于 2022-09-05 15:32:41 发布

阅读量5.8k

点赞数 1

1. 井号在URL中指定的是页面中的一个位置

井号作为页面定位符出现在URL中，比如：http://www.csdn.net#ads_library，此URL表示在页面http://www.csdn.net中锚的位置。浏览器读取这个URL后，将会自动定位至id为ads_library可视区域。

2.井号后面的数据不会发送到HTTP请求中

当时使用类似HttpWatch工具时，你是无法在Http请求中找到井号后面的参数的，原因是井号后面的参数是针对浏览器起作用的而不是服务器端。

3. 任务位于井号后面的字符都是位置标识符

不管第一个井号后面跟的是什么参数，只要是在井号后面的参数一律看成是位置标识符。

4. 改变井号后面的参数不会触发页面的重新加载但是会留下一个历史记录

仅改变井号后面的内容，只会使浏览器滚动到相应的位置，并不会重现加载页面。

5、可以通过javascript使用window.location.hash来改变井号后面的值

window.location.hash这个属性可以对URL中的井号参数进行修改，基于这个原理，我们可以在不重载页面的前提下创造一天新的访问记录。

JS读取当前URL的一些属性

设置或获取对象指定的文件名或路径：window.location.pathname
设置或获取整个 URL 为字符串：window.location.href
设置或获取与 URL 关联的端口号码：window.location.port
设置或获取 URL 的协议部分：window.location.protocol
设置或获取 href 属性中在井号“#”后面的分段：window.location.hash
设置或获取 location 或 URL 的 hostname 和 port 号码：window.location.host
设置或获取 href 属性中跟在问号后面的部分：window.location.search

CSS3 :target 选择器

<!DOCTYPE html>
<html>
<head>
<style>
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
</style>
</head>
<body>

<h1>这是标题</h1>

<p><a href="#news1">跳转至内容 1</a></p>
<p><a href="#news2">跳转至内容 2</a></p>

<p>请点击上面的链接，:target 选择器会突出显示当前活动的 HTML 锚。</p>

<p id="news1"><b>内容 1...</b></p>
<p id="news2"><b>内容 2...</b></p>

<p><b>注释：</b> Internet Explorer 8 以及更早的版本不支持 :target 选择器。</p>

</body>
</html>

倪舒扬

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
URL中#号(井号)的作用

1. 井号在URL中指定的是页面中的一个位置井号作为页面定位符出现在URL中，比如：http://www.csdn.net#ads_library，此URL表示在页面http://www.csdn.net中锚的位置。浏览器读取这个URL后，将会自动定位至id为ads_library可视区域。2.井号后面的数据不会发送到HTTP请求中当时使用类似HttpWatch工具
复制链接

扫一扫