淺談HTML代碼中的空格和空行

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

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

代碼

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

代碼

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

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

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

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

代碼

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

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

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

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

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

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

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

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

            半角輸入（月亮）                                   全角輸入（太陽）

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

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