首頁 > web前端 > html教學 > 淺談HTML程式碼中的空格與空白行

淺談HTML程式碼中的空格與空白行

高洛峰
發布: 2017-02-18 15:37:01
原創
6217 人瀏覽過

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 程式碼中的所有連續的空格或空白行(換行)都會被顯示為一個空格。

既然如此,如果我們希望擴大兩個字元之間的間距,讓程式碼中的連續空格或空白行顯示出來的結果也是連續的空格或空行,那該怎麼辦?其實很簡單。

方法一:我們可以用預先格式化標籤

,無論是空格或空白行都適用。 </p><pre class="brush:html;toolbar:false"><pre class="brush:php;toolbar:false">  
这是  
预格式文本。  
它保留了      空格  
和换行。  
登入後複製


顯示效果

这是  
预格式文本。  
它保留了      空格  
和换行。
登入後複製


方法二:我們可以用空格實體符 代替空格,用換行標籤
代替空白行。雖然這種方法可以得到我們想要的顯示效果,但是對搜尋引擎不是最友善的方式,因為 和
在HTML中都是沒有語意的。所以建議盡量少用。另外要注意的是,  必須小寫,而且最後面的分號是不能省略的。

 

方法三:(適合空格)使用全角空格

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

問題:怎麼使用全角輸入法?

以搜狗輸入法為例,我們通常使用的是半角輸入,其狀態欄中有個月亮的標誌,就說明正在使用的是半角輸入,如果是太陽的標誌,就說明使用的是全角輸入。全角/半角的切換可以透過點擊標誌,也可以透過快速鍵 Shift+Space(空白符號)切換。

            半角輸入(月亮)                            與使用中間隔時        控制,CSS中的word-spacing 屬性可以改變字(單字)之間的標準間隔。我們知道英文中兩個單字之間是透過空格隔開的,所以我們視覺上可以這樣認為,word-spacing改變了(拉長或縮短)單字之間那個空格的寬度。

方法五:使用CSS樣式中的white-space 屬性,這個屬性宣告如何處理元素內的空格符。 淺談HTML程式碼中的空格與空白行


描述normal預設。空白會被瀏覽器忽略。 pre空白會被瀏覽器保留。其行為方式類似 HTML 中的
 標籤。 
登入後複製
nowrap文字不會換行,文字會在同一行上繼續,直到遇到
標籤為止。 pre-wrap保留空白符序列,但是正常地進行換行。 pre-line合併空白符序列,但保留換行符。


white-space:normal;就是正常,和不設定一樣,連續空格和空行都只會顯示一個空格。

white-space:nowrap;不換行是什麼意思?正常情況下,當我們的文字超出了文字域,文字就會自動折行,這個設定就是說不自動折行了,而是碰到換行標籤
才換

white-space:pre;和方法一相同,將文字原樣輸出顯示。當文字超出文字域時,不換行,會產生捲軸。

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

white-space:pre-line;連續的空格會顯示為一個空格,但保留連續的空白行。

以上就是小編為大家帶來的淺談HTML代碼中的空格和空行全部內容了,希望大家多多支持PHP中文網~

更多淺談HTML代碼中的空格和空行相關文章請關注PHP中文網!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板