子1：（文本內(nèi)容中的連續(xù)空格）

<p>這段文本中，輸入連續(xù)的空格          大概輸入了十個(gè)。</p>

顯示效果：“格”和“大” 之間的是個(gè)空格顯示出來(lái)只是一個(gè)空格。

這段文本中，輸入連續(xù)的空格 大概輸入了十個(gè)。

例子2：（代碼之間的連續(xù)空格）

<span>span是一個(gè)行內(nèi)標(biāo)簽</span>               <span>和前面的span元素之間隔了很多個(gè)空格</span>

顯示效果:兩個(gè)span元素之間連續(xù)的空格，顯示出來(lái)即"簽"與“和”之間的空格，只有一個(gè)空格。

span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多個(gè)空格

上面兩個(gè)例子證明：HTML代碼中連續(xù)的空格在顯示時(shí)會(huì)顯示為一個(gè)空格，其余的多余的空格會(huì)被移除或者說(shuō)被忽略。

段落文本其實(shí)也是HTML代碼的一部分，只不過(guò)它在p標(biāo)簽內(nèi)部，而例子2的空格是在兩個(gè)span標(biāo)簽之間。

理解了空格，現(xiàn)在看看空行，同理

例子3：（文本內(nèi)容中的空行）

<p>這段文本中，輸入連續(xù)的空行





大概輸入了五行。</p>

顯示效果：如我們所見(jiàn)，文本代碼中的五行空行，顯示出來(lái)也只是一個(gè)空格。

這段文本中，輸入連續(xù)的空行 大概輸入了五行。

例子4：（元素之間/標(biāo)簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會(huì)顯示為一個(gè)空格。

<span>span是一個(gè)行內(nèi)標(biāo)簽</span>





<span>和前面的span元素之間隔了很多空行</span>

span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多空行

得證：HTML 代碼中的所有連續(xù)的空格或空行（換行）都會(huì)被顯示為一個(gè)空格。

既然如此，如果我們希望擴(kuò)大兩個(gè)字符之間的間距，讓代碼中的連續(xù)空格或空行顯示出來(lái)的結(jié)果也是連續(xù)的空格或空行，那該怎么辦？其實(shí)很簡(jiǎn)單。

方法一：我們可以用預(yù)格式化標(biāo)簽<pre>，無(wú)論是空格或空行都適用。

<pre>
這是
預(yù)格式文本。
它保留了      空格
和換行。
</pre>

顯示效果

這是
預(yù)格式文本。
它保留了      空格
和換行。

方法二：我們可以用空格實(shí)體符 代替空格，用換行標(biāo)簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對(duì)搜索引擎不是最友好的方式，因?yàn)?和<br/>在HTML中都是沒(méi)有語(yǔ)義的。所以建議盡量少用。另外需要注意的是， 必須小寫，而且最后面的分號(hào)是不能省略的。

方法三：（適合空格）使用全角空格

全角空格被解釋為漢字，所以不會(huì)被被解釋為HTML分隔符，可以按照實(shí)際的空格數(shù)顯示。

問(wèn)題：怎么使用全角輸入法？

以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態(tài)欄中有個(gè)月亮的標(biāo)志，就說(shuō)明正在使用的是半角輸入，如果是太陽(yáng)的標(biāo)志，就說(shuō)明使用的是全角輸入。全角/半角的切換可以通過(guò)點(diǎn)擊標(biāo)志，也可以通過(guò)快捷鍵 Shift+Space（空格符）切換。

方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。我們知道英文中兩個(gè)單詞之間是通過(guò)空格隔開(kāi)的，所以我們視覺(jué)上可以這樣認(rèn)為，word-spacing改變了（拉長(zhǎng)或縮短）單詞之間那個(gè)空格的寬度。

方法五：使用CSS樣式中的white-space 屬性，這個(gè)屬性聲明如何處理元素內(nèi)的空白符。

white-space:normal;就是正常，和不設(shè)置一樣，連續(xù)空格和空行都只會(huì)顯示一個(gè)空格。

white-space:nowrap;不換行是什么意思呢？正常情況下，當(dāng)我們的文本超出了文本域，文本就會(huì)自動(dòng)折行，這個(gè)設(shè)置就是說(shuō)不自動(dòng)折行了，而是碰到換行標(biāo)簽<br />才換

white-space:pre;和方法一相同，將文本原樣輸出顯示。當(dāng)文本超出文本域時(shí)，不換行，會(huì)產(chǎn)生滾動(dòng)條。

white-space:pre-wrap;保留空格和空行，但當(dāng)文本超出文本域時(shí)，會(huì)自動(dòng)換行。

white-space:pre-line;連續(xù)的空格會(huì)顯示為一個(gè)空格，但保留連續(xù)的空行。

頁(yè) URL 中的特殊字符 “空格” 問(wèn)題

Java 代碼案例

1、將一段內(nèi)容和接口拼接成 URL 鏈接

代碼示例

java復(fù)制代碼public static String generateContent(String content) {
      // 將 content 進(jìn)行 url 編碼
      String ans;
      try {
          ans = URLEncoder.encode(content, "UTF-8");
      } catch (UnsupportedEncodingException e) {
          // 處理異常情況
          throw new RuntimeException(e);
      }

      return ans;
}

1、不帶空格的處理

java復(fù)制代碼public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最終生成的 URL 的值為：" + ansUrl);
}

運(yùn)行結(jié)果：

perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F%E9%BB%91

粘貼到瀏覽器上會(huì)被瀏覽器解碼出來(lái)給用戶看到:

ini復(fù)制代碼example.com/resource?a=小黑

網(wǎng)頁(yè)截圖：

2、帶有空格的處理

java復(fù)制代碼public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小 黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最終生成的 URL 的值為：" + ansUrl);
}

運(yùn)行結(jié)果：

perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F+%E9%BB%91

粘貼到瀏覽器上會(huì)被瀏覽器解碼出來(lái)給用戶看到:

ini復(fù)制代碼https://example.com/resource?a=小+黑

網(wǎng)頁(yè)截圖：

3、解決空格的問(wèn)題

java復(fù)制代碼public static String generateContent(String content) {
      // 將 content 進(jìn)行 url 編碼
      String ans;
      try {
					// -----------------------調(diào)整-----------------------
          ans = URLEncoder.encode(content, "UTF-8").replace("+", "%20");
      } catch (UnsupportedEncodingException e) {
          // 處理異常情況
          throw new RuntimeException(e);
      }

      return ans;
}

public static void main(String[] args) {
    String baseUrl = "https://example.com/resource?a=";
    String content = "小 黑";
    String ansUrl = baseUrl + generateContent(content);
    System.out.println("最終生成的 URL 的值為：" + ansUrl);
}

運(yùn)行結(jié)果：

perl復(fù)制代碼https://example.com/resource?a=%E5%B0%8F%20%E9%BB%91

粘貼到瀏覽器上會(huì)被瀏覽器解碼出來(lái)給用戶看到:

ini復(fù)制代碼https://example.com/resource?a=小 黑

網(wǎng)頁(yè)截圖：

其中 %20 是空格經(jīng)過(guò)編碼后的結(jié)果

2、問(wèn)題解決的原因

從上面的案例可以看到，如果 url 中有空格出現(xiàn)，且不經(jīng)過(guò)特殊處理，那么將會(huì)導(dǎo)致瀏覽器無(wú)法正確解析 url，從而導(dǎo)致 url 重定向失敗，那么問(wèn)題的原因是什么呢？首先來(lái)看一下URL的組成部分

1、URL 的組成部分

下面是一個(gè)簡(jiǎn)單的 URL 鏈接：

bash復(fù)制代碼http://localhost:8080/path/to/index.html?id=123#content

它主要有下面幾個(gè)部分組成

• 協(xié)議：URL 的網(wǎng)絡(luò)傳輸協(xié)議,如 http、https、ftp 等。表示資源訪問(wèn)需使用何種協(xié)議；
• 服務(wù)器名稱：表示要訪問(wèn)的服務(wù)器主機(jī)名或 IP 地址；
• 端口（可選）：服務(wù)器使用的端口號(hào)，如 http 默認(rèn)的端口是 80，https 默認(rèn)的端口是443，如果省略則使用該協(xié)議的默認(rèn)端口；
• 路徑：表示服務(wù)器上具體資源的路徑信息：例如“/index.html”；
• 查詢參數(shù)（可選）：路徑后加問(wèn)號(hào)開(kāi)頭的查詢字符串，用于傳遞額外的參數(shù)，如”?id=123”;
• 錨點(diǎn)（可選）：鏈接內(nèi)的超鏈接錨點(diǎn)定位，例如“#content”；
• HTTP請(qǐng)求不包括#
• #是用來(lái)指導(dǎo)瀏覽器動(dòng)作的，針對(duì)瀏覽器起作用,對(duì)服務(wù)器端完全無(wú)用
• 訪問(wèn)http://www.example.com/index.html#print，瀏覽器實(shí)際發(fā)出的請(qǐng)求只是請(qǐng)求index.html，沒(méi)有"#print"部分。
• 位于#后面的字符都是位置標(biāo)識(shí)符
• 在第一個(gè)#后面出現(xiàn)的任何字符，都會(huì)被瀏覽器解讀為位置標(biāo)識(shí)符。 這意味著，這些字符都不會(huì)被發(fā)送到服務(wù)器端。
• 在URL中指定一個(gè)顏色值 http://www.example.com/?color=#fff 但瀏覽器實(shí)際發(fā)出的請(qǐng)求是"#fff"被省略了。只有將#轉(zhuǎn)碼為%23，瀏覽器才會(huì)將其作為實(shí)義字符處理。http://example.com/?color=%23fff
• 改變#后面的參數(shù)不會(huì)觸發(fā)頁(yè)面重載
• 改變#后面的參數(shù)會(huì)改變?yōu)g覽器的訪問(wèn)歷史
• 用戶名密碼（可選）：用于基礎(chǔ)的 HTTP 認(rèn)證的用戶名和密碼；

2、URL 編碼中遵循的規(guī)則

在 URL 編碼過(guò)程中，會(huì)遵循以下的規(guī)則：

• 空格：替換成 + （%20）
• /：分割目錄和子目錄
• ?：分割 URL 和查詢
• %：指定特殊字符
• #：指定書簽 （%23）
• &：指定分隔參數(shù) （%26）
• =：指定參數(shù)的值（%3D）

3、為何 URL 中不允許包含空格和部分特殊字符

• URL 作為資源定位符,它需要保證各個(gè)組成部分(協(xié)議、主機(jī)名、端口、路徑等)之間使用統(tǒng)一的分隔符,通常采用斜線"/"。如果直接使用空格,很難區(qū)分路徑中的空格與路徑之間的分隔；
• 早期URL標(biāo)準(zhǔn)沒(méi)有規(guī)定如何處理空格等特殊字符,直接包含空格可能導(dǎo)致解析或匹配時(shí)產(chǎn)生歧義；
• 例如：http://www.example.com/products/product name.html
• 當(dāng)瀏覽器在解析這個(gè) URL 的時(shí)候，可能就會(huì)產(chǎn)生下面的歧義問(wèn)題：
• 1、是否應(yīng)該解析為兩個(gè)路徑組件"products/product"和"name.html”
• 2、搜索引擎或其他系統(tǒng)進(jìn)行URL匹配檢索時(shí),不清楚空格是否應(yīng)該作為路徑分隔符來(lái)匹配； 3、攻擊者可以構(gòu)造歧義URL,利用空格來(lái)規(guī)避安全機(jī)制或進(jìn)行異常操作；
• 包含空格特殊字符可能會(huì)破壞URL本身結(jié)構(gòu)或?qū)е掳踩珕?wèn)題；
• 包含空格可能導(dǎo)致傳輸或存儲(chǔ)時(shí)產(chǎn)生問(wèn)題。例如傳輸過(guò)程中空格是否需要編碼等問(wèn)題沒(méi)有明確規(guī)定；