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

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

顯示效果：“格”和“大” 之間的是個空格顯示出來只是一個空格。

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

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

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

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

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

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

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

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

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

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





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

顯示效果：如我們所見，文本代碼中的五行空行，顯示出來也只是一個空格。

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

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

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





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

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

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

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

方法一：我們可以用預格式化標簽<pre>，無論是空格或空行都適用。

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

顯示效果

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

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

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

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

問題：怎么使用全角輸入法？

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

方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標準間隔。我們知道英文中兩個單詞之間是通過空格隔開的，所以我們視覺上可以這樣認為，word-spacing改變了（拉長或縮短）單詞之間那個空格的寬度。

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

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

white-space:nowrap;不換行是什么意思呢？正常情況下，當我們的文本超出了文本域，文本就會自動折行，這個設置就是說不自動折行了，而是碰到換行標簽<br />才換

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

white-space:pre-wrap;保留空格和空行，但當文本超出文本域時，會自動換行。

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

頁 URL 中的特殊字符 “空格” 問題

Java 代碼案例

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

代碼示例

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

      return ans;
}

1、不帶空格的處理

java復制代碼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);
}

運行結果：

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

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

ini復制代碼example.com/resource?a=小黑

網(wǎng)頁截圖：

2、帶有空格的處理

java復制代碼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);
}

運行結果：

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

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

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

網(wǎng)頁截圖：

3、解決空格的問題

java復制代碼public static String generateContent(String content) {
      // 將 content 進行 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);
}

運行結果：

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

粘貼到瀏覽器上會被瀏覽器解碼出來給用戶看到:

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

網(wǎng)頁截圖：

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

2、問題解決的原因

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

1、URL 的組成部分

下面是一個簡單的 URL 鏈接：

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

它主要有下面幾個部分組成

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

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

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

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

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

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