淺談HTML程式碼中的空格與空白行
- 高洛峰原創
- 2017-02-18 15:37:016236瀏覽
HTML 程式碼中的所有連續的空格或空白行（換行）都會被顯示為一個空格。
範例1：（文字內容中的連續空格）
程式碼
<p>这段文本中，输入连续的空格 大概输入了十个。</p>
顯示效果：「格」和「大」之間的是個空格顯示出來只是一個空格。
这段文本中，输入连续的空格 大概输入了十个。
範例2：（代碼之間的連續空格）
代碼
<span>span是一个行内标签</span> <span>和前面的span元素之间隔了很多个空格</span>
顯示效果:兩個span元素之間連續的空格，顯示出來即"簽"與「和」之間的空格，只有一個空格。
span是一个行内标签 和前面的span元素之间隔了很多个空格
上面兩個例子證明：HTML程式碼中連續的空格在顯示時會顯示為一個空格，其餘的多餘的空格會被移除或說被忽略。
段落文字其實也是HTML程式碼的一部分，只不過它在p標籤內部，而範例2的空格是在兩個span標籤之間。
理解了空格，現在看看空行，同理
例子3：（文字內容中的空白行）
程式碼
<p>这段文本中，输入连续的空行 大概输入了五行。</p>
顯示效果：如我們所見，文字程式碼中的五行空行，顯示出來也只是一個空格。
这段文本中，输入连续的空行 大概输入了五行。
例子4：（元素之間/標籤之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會顯示為一個空格。
<span>span是一个行内标签</span> <span>和前面的span元素之间隔了很多空行</span>
span是一个行内标签 和前面的span元素之间隔了很多空行
得證：HTML 程式碼中的所有連續的空格或空白行（換行）都會被顯示為一個空格。
既然如此，如果我們希望擴大兩個字元之間的間距，讓程式碼中的連續空格或空白行顯示出來的結果也是連續的空格或空行，那該怎麼辦？其實很簡單。
方法一：我們可以用預先格式化標籤
，無論是空格或空白行都適用。 <pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false"> 这是 预格式文本。 它保留了 空格 和换行。
顯示效果
这是 预格式文本。 它保留了 空格 和换行。
方法二：我們可以用空格實體符 代替空格，用換行標籤
代替空白行。雖然這種方法可以得到我們想要的顯示效果，但是對搜尋引擎不是最友善的方式，因為 和
在HTML中都是沒有語意的。所以建議盡量少用。另外要注意的是， 必須小寫，而且最後面的分號是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會被解釋為HTML分隔符，可以按照實際的空格數顯示。
問題：怎麼使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態欄中有個月亮的標誌，就說明正在使用的是半角輸入，如果是太陽的標誌，就說明使用的是全角輸入。全角/半角的切換可以透過點擊標誌，也可以透過快速鍵 Shift+Space（空白符號）切換。
半角輸入（月亮） 與使用中間隔時 控制，CSS中的word-spacing 屬性可以改變字（單字）之間的標準間隔。我們知道英文中兩個單字之間是透過空格隔開的，所以我們視覺上可以這樣認為，word-spacing改變了（拉長或縮短）單字之間那個空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個屬性宣告如何處理元素內的空格符。 
值
| normal | 預設。空白會被瀏覽器忽略。 |
|---|---|
| pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 |
| nowrap | 文字不會換行，文字會在同一行上繼續，直到遇到 |
| pre-wrap | 保留空白符序列，但是正常地進行換行。 |
| pre-line | 合併空白符序列，但保留換行符。 |