首頁 > web前端 > html教學 > 如何在HTML中插入空格的詳細介紹

如何在HTML中插入空格的詳細介紹

黄舟
發布: 2017-05-26 15:00:16
原創
3657 人瀏覽過

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

方法1、插入單一空格和製表符

1、插入一個非間斷空格。一般來說,無論你按多少次空白鍵,HTML也只會在單字之間顯示一個空白間隔。當你需要插入多個空格時,請輸入 或 代碼。 它們名為“空格佔位符”,你輸入幾個,就能在頁面中顯示幾個空格。

之所以稱為非間斷空格,是因為這樣不會產生換行符。如果你濫用這種空格,瀏覽器可能無法以整齊易讀的方式插入換行符號。

2、插入不同寬度的空格。有多種字元實體可以讓瀏覽器顯示空格。不同的瀏覽器在顯示方式上可能會有一點不同,但是和 不同,它們不會影響換行:

  — “en空格”是根據字體排印學的計量單位命名,寬度是兩個普通空格的寬度

  — 「em空格」大概是四個普通空格的寬度

3、使用非間斷空格模擬製表符。產生段落的一種方式就是在第一行前插入幾個空格:    。這個方法只適用於HTML,如果你使用CSS的話,不推薦這個方法(在其它步驟中會介紹別的方法)。

如果段落的內容是富文本,請使用「pre」標籤。

4、使用CSS產生段落。 CSS的內邊距或外邊距為瀏覽器指明了具體的顯示格式,所以顯示效果的一致性較高。即使你不是很了解CSS,手邊也沒有說明表,也可以很容易地添加。以下將具體說明如何將整個段落移到右邊:

在HTML文件的

部分,插入以下指令:

<style>p.indent{ padding-left: 1.8em }</style>
登入後複製

「p.indent」定義了一個叫「indent」(可以隨意命名)的段落(標籤為p)。剩下的指令則是為段落左側新增內邊距空格。

傳回HTML文件的主體。每當你想要新增段落時,在標籤中插入以下內容:

<p class="indent"></p> 。
登入後複製

要調整縮排的數量,只需要更改CSS指令中的數字「1.8」。後面的“em”要保留,它是表示寬度的單位。

方法2、給長段落排版

#1、使用預先格式化的文字。 「pre」元素可以定義預先格式化的文本,會保留文字裡的空格或換行符。因此,在

標籤裡輸入的空格或回車鍵,會以空格或換行符的形式顯示出來。你可以用它來顯示程式碼範例、詩歌或其它需要空格和換行的文字內容。 

預先格式化文字的一大缺陷在於它的寬度。它無法像普通超文本標記語言那樣,去調整頁面寬度,適應使用者的視窗大小。

 

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

 

3、用「p」標籤定義段落。 p 元素會自動在其前後創建一些空白,因此,文字後的

標籤可以結束段落。大多數瀏覽器都透過一個空白行來隔離段落,但這不能保證精確的排版格式。

 

小提示

如果你在最後審查文字和程式碼時,看到一些額外的符號「浮」在程式碼上,你需要仔細查看是不是有不完整的程式碼,例如將「
」寫成了「

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

不要在起始標籤後或結束標籤前輸入空格。例如,輸入「Spaces Tutorial」時,不要寫成「Spaces Tutorial 」。

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

 

警告

超文本標記語言(HTML)並不能如你所想,正常地顯示Tab ( )換行符號。標準的超文本網頁並沒有換行符號停頓,因此,「tab」字元沒有任何實意。

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

以上是如何在HTML中插入空格的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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