整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
子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>，無論是空格或空行都適用。
<pre>
這是
預格式文本。
它保留了 空格
和換行。
</pre>顯示效果
這是
預格式文本。
它保留了 空格
和換行。方法二：我們可以用空格實體符 代替空格，用換行標簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對搜索引擎不是最友好的方式，因為 和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是， 必須小寫，而且最后面的分號是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會被被解釋為HTML分隔符，可以按照實際的空格數顯示。
問題：怎么使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態欄中有個月亮的標志，就說明正在使用的是半角輸入，如果是太陽的標志，就說明使用的是全角輸入。全角/半角的切換可以通過點擊標志，也可以通過快捷鍵 Shift+Space（空格符）切換。
半角輸入（月亮）
全角輸入（太陽）
方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標準間隔。我們知道英文中兩個單詞之間是通過空格隔開的，所以我們視覺上可以這樣認為，word-spacing改變了（拉長或縮短）單詞之間那個空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個屬性聲明如何處理元素內的空白符。
值 | 描述 |
normal | 默認。空白會被瀏覽器忽略。 |
pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標簽。 |
nowrap | 文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 |
pre-wrap | 保留空白符序列，但是正常地進行換行。 |
pre-line | 合并空白符序列，但是保留換行符。 |
white-space:normal;就是正常，和不設置一樣，連續空格和空行都只會顯示一個空格。
white-space:nowrap;不換行是什么意思呢？正常情況下，當我們的文本超出了文本域，文本就會自動折行，這個設置就是說不自動折行了，而是碰到換行標簽<br />才換
white-space:pre;和方法一相同，將文本原樣輸出顯示。當文本超出文本域時，不換行，會產生滾動條。
white-space:pre-wrap;保留空格和空行，但當文本超出文本域時，會自動換行。
white-space:pre-line;連續的空格會顯示為一個空格，但保留連續的空行。
們今天不多說那么多序言，直接上干貨。
我們之前講了div標簽，它里面可以嵌套任何東西，我們先運行如下代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.abc{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="abc">salkgnoaijrngajlhcgausdsfhjfgjkulagorhgj</div>
</body>
</html>
上述代碼的結果（字母瞎打的）
通過運行上述代碼我們發現，我們寫的英文字母應該在div里面呀，他怎么出去了而沒有換行。我們把英文字母換成漢字試試。再來看下。
換成漢字后的結果
我們把英文字母換成漢字發現，我們寫的內容又都在div里面了，他自動換行了。
其實原因很簡單，瀏覽器把那一串英文字母看成了一個單詞而導致他沒有換行，畢竟瀏覽器不能把一個字給硬生生的分開呀，所以就允許他超出范圍了。而我們對字母串進行一下更改，dag yji yroey uoyir ndfjh sui fghs dh。
我們將它中間加了幾個空格再來看一下。
加空格之后的
加完空格之后我們發現他自己換行了，是因為空格在編碼中還有一個特殊的意義“單詞分割符”。我們再來看一下代碼
運行結果
我們通過代碼的圖片可以看出我在代碼中輸入了很多空格，而在結果中只顯示出了一個，這是因為瀏覽器認為文字分割符有一個就行了，所以多個他也只輸出一個，那我們要真的想在網頁中輸出多個空格怎么辦，那就要用到html編碼符了。
作者寫完在預覽的時候發現代碼居然會在頭條上直接運行出結果，所以作者只能截圖給大家展示編碼了[捂臉]
注意分號也要寫上
大家可以動手操作一下看看都有怎么樣的結果，也可以找找其他的編碼符呦。
TML 中的預留字符必須被替換為字符實體。
一些在鍵盤上找不到的字符也可以使用字符實體來替換。
HTML 實體
在 HTML 中，某些字符是預留的。
在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。
如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。 字符實體類似這樣：
&entity_name;
或
&#entity_number;
如需顯示小于號，我們必須這樣寫：< 或 < 或 <
提示： 使用實體名而不是數字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實體名稱（對實體數字的支持卻很好）。
不間斷空格(Non-breaking Space)
HTML 中的常用字符實體是不間斷空格( )。
瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量，您需要使用 字符實體。
結合音標符
發音符號是加到字母上的一個"glyph(字形)"。
一些變音符號, 如 尖音符 ( ?) 和 抑音符 ( ?) 。
變音符號可以出現字母的上面和下面，或者字母里面，或者兩個字母間。
變音符號可以與字母、數字字符的組合來使用。
以下是一些實例:
| 音標符 | 字符 | Construct | 輸出結果 |
|---|---|---|---|
| ? | a | à | a? |
| ? | a | á | a? |
| ? | a | â | a? |
| ? | a | ã | a? |
| ? | O | Ò | O? |
| ? | O | Ó | O? |
| ? | O | Ô | O? |
| ? | O | Õ | O? |
HTML字符實體
實體名稱對大小寫敏感！ |
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| ￡ | 鎊 | £ | £ |
| ￥ | 日元 | ¥ | ¥ |
| € | 歐元 | € | € |
| § | 小節 | § | § |
| ? | 版權 | © | © |
| ? | 注冊商標 | ® | ® |
| ? | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
