如何在HTML中插入空格

來源:酷知科普網 4.55K

通常情況下,我們用空格鍵來打出多個空格,而在編寫程式碼時,通過空格鍵、Tab鍵以及回車鍵打出的空格,都會被HTML(超文字標記語言)自動忽略。HTML將這樣的鍵視為空白字元,並顯示為單個空白間隔。儘管CSS提供了多種樣式的空格和縮排,但是在HTML中也有一些工具可以讓你自己定義空格。

插入單個空格和製表符

(01)插入一個非間斷空格。一般來說,無論你按多少次空格鍵,HTML也只會在單詞之間顯示一個空白間隔。當你需要插入多個空格時,請輸入 或 程式碼。它們名為“空格佔位符”,你輸入幾個,就能在頁面中顯示幾個空格。之所以稱之為非間斷空格,是因為這樣不會產生換行符。如果你濫用這種空格,瀏覽器可能無法以整齊易讀的方式插入換行符。

如何在HTML中插入空格

(02)插入不同寬度的空格。有多種字元實體可以讓瀏覽器顯示空格。不同的瀏覽器在顯示方式上可能會有一點不同,但是和 不同,它們不會影響換行: — “en空格”是根據字型排印學的計量單位命名,寬度是兩個普通空格的寬度 — “em空格”大概是四個普通空格的寬度

如何在HTML中插入空格 第2張

(03)使用非間斷空格模擬製表符。生成段落的一種方式就是在第一行前插入幾個空格:    。這個方法只適用於HTML,如果你使用CSS的話,不推薦這一方法(在其它步驟中會介紹別的方法)。如果段落的內容是富文字,請 使用“pre”標籤。

如何在HTML中插入空格 第3張

(04)使用CSS生成段落。CSS的內邊距或外邊距給瀏覽器指明瞭具體的顯示格式,所以顯示效果的一致性較高。即使你不是很瞭解CSS,手邊也沒有說明表,也可以很容易地新增。下面將具體說明如何將整個段落移到右邊:在HTML文件的<head></head>部分,插入以下命令:<style>nt{ padding-left: 1.8em }</style>“nt”定義了一個叫“indent”(可以隨意命名)的段落(標籤為p)。剩下的命令則是給段落左側新增內邊距空格。返回HTML文件的主體。每當你想新增段落時,在標籤中插入以下內容:<p class="indent"></p>。要調整縮排的數量,只需要更改CSS命令中的數字“1.8”即可。後面的“em”要保留,它是表示寬度的單位。

如何在HTML中插入空格 第4張

給長段落排版

(01)使用預格式化的文字。“pre”元素可以定義預格式化的文字,會保留文本里的空格或換行符。因此,在<pre></pre>標籤裡輸入的空格或回車鍵,會以空格或換行符的形式顯示出來。你可以用它來顯示程式碼示例、詩歌或其它需要空格和換行的文字內容。預格式化文字的一大缺陷在於它的寬度。它無法像普通超文字標記語言那樣,去調整頁面寬度,適應使用者的視窗大小。

如何在HTML中插入空格 第5張

(02)建立換行符。<br>標籤位於當前文字行的最後,可插入一個簡單的換行符。你可以輸入多個“br”標籤來建立多行空白行。這是HTML新手學生寫程式碼的一個好方法,但是當你學習CSS時,會發現這種強制性的HTML樣式程式碼是不被提倡的。

如何在HTML中插入空格 第6張

(03)用“p”標籤定義段落。p 元素會自動在其前後建立一些空白,因此,文字後的<p></p>標籤可以結束段落。大多數瀏覽器都通過一個空白行來隔離段落,但這不能保證精確的排版格式。

如何在HTML中插入空格 第7張

特別提示

如果你在最後審查文字和程式碼時,看到一些額外的符號“浮”在程式碼上,你需要仔細檢視是不是有不完整的程式碼,比如將“&lt;br&gt;”寫成了“&lt;br”。

CSS(層疊樣式表) 能夠對網頁中元素位置的排版(包括文字中的間隔)進行畫素級精確控制,可以更好、更精確地編輯網頁物件和模型樣式。

不要在起始標籤後或結束標籤前輸入空格。例如,輸入“Spaces &lt;a&gt;Tutorial&lt;/a&gt;”時,不要寫成“Spaces&lt;a&gt; Tutorial &lt;/a&gt;”。

非間隔字元( ) 是字元實體的一個範例。你無法從鍵盤上打出此類網頁字元,但能用對應的程式碼來插入字元。

超文字標記語言(HTML)並不能如你所想,正常地顯示<br/>Tab(&amp;#09;)換行符。標準的超文字網頁並沒有換行符停頓,因此,“tab”字元沒有任何實意。

最好在程式碼編輯器或純文字檔案中編寫HTML語言,不要使用“Word”文書處理程式。在文字編輯處理軟體中編寫程式碼時,空格可能會變成網頁中奇怪的符號,導致顯示錯誤。這通常是因為word程式會在文字內容上附加額外資料,而這些資訊無法被網頁瀏覽器識別,進而導致顯示錯誤。

熱門標籤