1. #

10年9月，twitter改版。一个显著变化，就是URL加入了"#!"符号。比如，改版前的用户主页网址为http://twitter.com/username改版后，就变成了http://twitter.com/#!/username

　　这是主流网站第一次将"#"大规模用于重要URL中。这表明井号（Hash）的作用正在被重新认识。本文根据HttpWatch的文章，整理与井号有关的所有重要知识点。

一、#的涵义

　　#代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，http://www.example.com/index.html#print就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。

　　为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name="print"></a>，二是使用id属性，比如<div id="print">。

二、HTTP请求不包括#

#是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括#。

比如，访问下面的网址，http://www.example.com/index.html#print，浏览器实际发出的请求是这样的：

GET /index.html HTTP/1.1

Host: www.example.com

三、#后的字符

　　在第一个#后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端。

比如，下面URL的原意是指定一个颜色值：http://www.example.com/?color=#fff，但是，浏览器实际发出的请求是：

GET /?color= HTTP/1.1

Host: www.example.com

　

四、改变#不触发网页重载

　　单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页。

比如，从http://www.example.com/index.html#location1改成http://www.example.com/index.html#location2，浏览器不会重新向服务器请求index.html。

五、改变#会改变浏览器的访问历史

　　每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。这对于ajax应用程序特别有用，可以用不同的#值，表示不同的访问状态，然后向用户给出可以访问某个状态的链接。值得注意的是，上述规则对IE 6和IE 7不成立，它们不会因为#的改变而增加历史记录。

　　

六、window.location.hash读取#值

　　window.location.hash这个属性可读可写。读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。

　　

七、onhashchange事件

　　这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

　　它的使用方法有三种：

window.onhashchange = func;

<body onhashchange="func();">

window.addEventListener("hashchange"， func, false);

　　对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

八、Google抓取#的机制

　　默认情况下，Google的网络蜘蛛忽视URL的#部分。

　　但是，Google还规定，如果你希望Ajax生成的内容被浏览引擎读取，那么URL中可以使用"#!"，Google会自动将其后面的内容转成查询字符串_escaped_fragment_的值。

　　比如，Google发现新版twitter的URL：http://twitter.com/#!/username

　　就会自动抓取另一个URL：http://twitter.com/?_escaped_fragment_=/username

　　通过这种机制，Google就可以索引动态的Ajax内容。

注 AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX 是一种用于创建快速动态网页的技术。

2. ？

1）连接作用：比如

http://www.xxx.com/Show.asp?id=77&nameid=2905210001&page=1

2）清除缓存：比如

http://www.xxxxx.com/index.html

http://www.xxxxx.com/index.html?test123123

两个url打开的页面一样，但是后面这个有问号，说明不调用缓存的内容，而认为是一个新地址，重新读取。

3. &

不同参数的间隔符

url中的特殊符号含义的更多相关文章

  1. 你知道url中的特殊符号含义么

    1.# #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如,http://www.example.com/index.html#print就代表网页index.html的print位置.浏 ...

  2. URL中一些特殊符号的替代符

    下表中列出了一些URL特殊符号及编码 十六进制值 1.+ URL 中+号表示空格 %2B 2.空格 URL中的空格可以用+号或者编码 %20 3./ 分隔目录和子目录 %2F 4.? 分隔实际的 UR ...

  3. SpringBoot2.0 url中出现特殊符号「带括号{}'"等等」时会抛出400错误

    访问 http://127.0.0.1:8080/api?method=taxiong.goods.list&params={"page":1,"pageSize ...

  4. js中的特殊符号含义

    一. !! js中的!! var o ={flag:4}; var test = !!o.flag; console.log(test);  // true 二.~~,<< (~~(Mat ...

  5. 记一次400错误引发的血案（URL中特殊符号的转义/400 bad request错误）

    django+nginx+uwsgi部署的站点访问某个URL时发生了400 bad request的错误,而使用django自带的开发版的web server时没有遇到此问题.初步判断是nginx或u ...

  6. package.json for npm中依赖外部组件时常用的版本符号含义

    package.json中会有dependencies定义了项目依赖的外部组件,这些外部组件的依赖都是带有版本符号以表示被依赖组件的版本范围. { "dependencies" : ...

  7. scala中常用但其他语言不常见的符号含义

    本文旨在介绍Scala在其他语言中不太常见的符号含义,帮助理解Scala Code. 随着我对Scala学习的深入,我会不断增加该篇博文的内容. 修改记录 ----2016.11.23  新增scal ...

  8. URL中特殊符号的处理

    问题描述 我们在对接第三方系统的时候通常需要get或post来传输数据,但此时如果参数中存在&% #*!包括空格等特殊符号的时候就无法正常请求具体表现在参数获取不正确或者获取不到参数,甚至有时 ...

  9. url中特殊符号转换

    特殊符号 url中显示 空格 %20 & %26

随机推荐

  1. Spring Bean的生命周期（非常详细）

    Spring作为当前Java最流行.最强大的轻量级框架,受到了程序员的热烈欢迎.准确的了解Spring Bean的生命周期是非常必要的.我们通常使用ApplicationContext作为Spring ...

  2. ENGLISH抠脚童鞋的福利--GitHub汉化插件

    今天在某前端群看到一个插件,激动万分啊!我就把插件使用实现的步骤分享一下! 打开chrome浏览器输入地址:chrome://extensions/ : 跳转到其他页面,点击左上角--扩展程序: 将T ...

  3. 配置Chrome支持本地（file协议）的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  4. 做个简单的RSS订阅(ASP.NET Core)，节省自己的时间

    0x01 前言 因为每天上下班路上,午休前,都是看看新闻,但是种类繁多,又要自己找感兴趣的,所以肯定会耗费不少时间. 虽说现在有很多软件也可以订阅一些自己喜欢的新闻,要安装到手机,还是挺麻烦的.所以就 ...

  5. Java内部类final语义实现

    本文描述在java内部类中,经常会引用外部类的变量信息.但是这些变量信息是如何传递给内部类的,在表面上并没有相应的线索.本文从字节码层描述在内部类中是如何实现这些语义的. 本地临时变量 基本类型 fi ...

  6. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  7. css3深入了解之奇技淫巧

    前言 自CSS3流行以来,虽然以前看过一遍所有的新增属性,但其实在实际项目中用到的少之又少.所以没有形成系统性的认识,以及看到效果立马就能想到解决方案的能力.然后最近正好遇到一个需要绘制大量动画的需求 ...

  8. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  9. JavaScript基本数据类型和引用数据类型

    ECMAScript包含两种不同数据类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段,而引用类型值那些可能有多个值构成的对象. 在进行变量赋值时,解析器必须确定这个值是基本类型值还是引用 ...

  10. unable to boot the simulator，无法启动模拟器已解决

    突然模拟器报错:unable to boot the simulator(无法启动模拟器) 试了好几种解决办法,删除所有的模拟器重启以后再添加,删除钥匙串登陆中的证书,重新安装Xcode都不行 最后通 ...