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>