URL特殊字符的转义

特殊符号 十六进制值 转义符为 %2B 空格 转义符为 + 或 %20 / 转义符为 %2F ? 转义符为 %3F % 转义符为 %25 # 转义符为 %23 & 转义符为 %26 = 转义符为 %3D 前些时间做了个文件下载的应用,由于中文名文件的原因,所以在拼URL的时候,会提前把文件名转义 fileName = URLEncoder.encode(fileName,"UTF-8"); 问题来了,如果文件名中带空格的话,出问题了,空格被转成了+,而不是%20,再向下载服务器进行下载请求时,Servlet不认,直接出错。 于是再考虑了一下,把代码中的空格转成%20。 代码如下: fileName = URLEncoder.encode(fileName,"UTF-8");   fileName = fileName.replaceAll("\\+","%20");   如上,问题解决了,再decode也可以正常得到正确的文件名。 为什么会这样呢,网上搜了一把,原理如下: 一个URL的基本组成部分包括协议(scheme),域名,端口号,路径和查询字符串(路径参数和锚点标记就暂不考虑了)。路径和查询字符串之间用问号?分离。例如www.example.com/index?param=1,路径为index,查询字符串(Query String)为param=1。URL中关于空格的编码正是与空格所在位置相关:空格被编码成加号+的情况只会在查询字符串部分出现,而被编码成%20则可以出现在路径和查询字符串中。 造成这种混乱局面的原因在于:W3C标准规定,当Content-Type为application/x-www-form-urlencoded时,URL中查询参数名和参数值中空格要用加号+替代,所以几乎所有使用该规范的浏览器在表单提交后,URL查询参数中空格都会被编成加号+。而在另一份规范(RFC 2396,定义URI)里, URI里的保留字符都需转义成%HH格式(Section 3.4 Query Component),因此空格会被编码成%20,加号+本身也作为保留字而被编成%2B,对于某些遵循RFC 2396标准的应用来说,它可能不接受查询字符串中出现加号+,认为它是非法字符。所以一个安全的举措是URL中统一使用%20来编码空格字符。 具体的做法上面也给出了。

div实现内部元素居中的三种方式

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>实现内部元素居中的三种方式</title> <style> *{margin: 0; padding: 0;} h2{text-align: center; color: red;} h3{text-align: center; color: blue;} .clearfix:after{content: '';clear: both; display: block; overflow: hidden; height: 0;} /*方法一:传统方法通过固定宽度width: 1000px;和margin: 0 auto;来实现居中, *弊端:1.需要精确计算出box的宽度, * 2.当内部子元素需要增加或者减少的时候,这个宽度需要重新计算,比较麻烦。 * 3.需要使用clear来清除浮动,解决因浮动产生的外部元素无法获取高度的尴尬问题。 */ .box-wrap0{position: relative; width: 100%; height: 100px; text-align: center; padding: 20px; line-height: 30px;} .box-wrap0 .box{position: relative; width: 1000px; margin: 0 auto; border: red 1px solid;} .box-wrap0 .box-item{width: 200px; float: left; background: #dedede;} /* *方法二:1.最里面的元素使用内联元素布局,2.外部元素使用margin: 0 auto; 可以轻松实现居中对齐 */ .box-wrap1{position: relative; width: 100%; height: 100px; padding: 20px; text-align: center; line-height: 30px;} .box-wrap1 .box{position: relative; margin: 0 auto; border: red 1px solid;} .box-wrap1 .box-item{width: 200px; display: inline-block; background: #dedede;} /*内部元素为内联元素*/ /* *方法三:1.最外部元素使用text-align: center; 2.给需要居中的元素display: inline-block;变成内联元素 3.给需要居中的元素float: left;,可以轻松实现居中对齐 *优势:当内部元素需要增加或者减少时,仍然会自动居中 */ .box-wrap2{position: relative; width: 100%; text-align: center; margin-top: 50px; padding: 20px; line-height: 30px;} /* 内容居中显示:text-align: center;*/ .box-wrap2 .box{position: relative; display: inline-block; border: blue 1px solid;} /*需要居中的元素为内联元素*/ .box-wrap2 .box-item{width: 200px; float: left; margin: 0 10px; background: #dedede;} </style> </head> <body> <h2>实现内部元素居中的三种方式</h2> <div class="box-wrap0"> <h3>方法一:固定宽度</h3> <div class="box clearfix"> <div class="box-item">按钮1</div> <div class="box-item">按钮2</div> <div class="box-item">按钮3</div> <div class="box-item">按钮4</div> <div class="box-item">按钮4</div> </div> </div> <div class="box-wrap1"> <div class="box"> <h3>方法二:子元素为内联元素</h3> <div class="box-item">按钮1</div> <div class="box-item">按钮2</div> <div class="box-item">按钮3</div> <div class="box-item">按钮4</div> <div class="box-item">按钮4</div> </div> </div>