實用!在HTML插入空白的6種方式 – April Yang

您所在的位置:网站首页 html中空行 實用!在HTML插入空白的6種方式 – April Yang

實用!在HTML插入空白的6種方式 – April Yang

2024-04-29 22:06| 来源: 网络整理| 查看: 265

空格符號在HTML中是特殊符號,這篇文章介紹HTML提供的六種寬度不同的空格,及其使用時機與方式。

目錄 快速索引 使用時機 詳細說明與範例 1. ;  2.    3.   4.    5. ‌  6. ‍ 補充一:斷行標籤與 補充二:其他留空白或換行的方式 補充三:HTML Entities 總結 參考資料 快速索引 空格符號效果;按空白鍵產生的空格 (最常用) 半形空格, \LARGE \mathbf{\frac{1}{2}} 個中文字寬 全形空格, 1 個中文字寬  窄空格,約 \LARGE \mathbf{\frac{1}{6}} 個中文字寬‌零寬度,用於切開兩個字元‍零寬度,用於產生連字效果 使用時機

以HTML編輯網頁,尤其在WordPress寫文章或排版,常常遇到:

1. 需要連續輸入空格,但多次按了空白鍵後,網頁卻只顯示一個空格。2. 明明某個地方不想要輸入內容,系統卻強制規定一定要輸入東西。3. 排版時,文字不整齊,左右多或少一些距離。

針對上述三種情況,空格符號便派上用場。

詳細說明與範例 1. ;

no-break space,不換行空格,這是最常使用的空格,也是按下空白鍵產生的空格。連續輸入 ; 會產生累加空格的效果 (其他的空白符號也會),不過該空格佔據的寬度會明顯受到字體的影響。

這種空格符號的另一個用途是禁止自動換行,HTML頁面一般會將自動換行放在空格的地方,但是有些文字內容的排版不適被放在連續一行的行尾和下一行的行首,例如描述時間的「10 PM」,10和PM中間不適合分開,此時可以在編輯器中在10和PM的中間打上;,而非按空白鍵,避免10和PM被分開,更多相關資料請參考維基百科。

在HTML中編輯

;nbsp;是最常用的空格 ;寬度是按空白鍵的大小 ;;但;nbsp寬度不固定;

呈現在螢幕上的內容

;是最常用的空格  寬度是按空白鍵的大小   但寬度不固定;

2.  

en space,en是字體排印的一個計量單位,寬度是字體寬度的一半,例如使用16點 (16px) 字體時,  的寬度就是8點,約佔 \LARGE \frac{1}{2} 個中文字寬度。

在HTML中編輯

;ensp;的寬度只有中文字的一半  這列有一個;ensp;    兩個;ensp;和一個中文字同寬

呈現在螢幕上的內容

 的寬度只有中文字的一半  這列有一個     兩個 和一個中文字同寬

3.  

em space,em是一個字元的寬度,1 em在16點字體時的寬度就是16點,此寬度是 en 的兩倍,約等於1個中文字寬。

在HTML中編輯

;emsp;的寬度和一個中文字一樣  這列有一個;emsp;   段落開頭可用這個空兩格

呈現在螢幕上的內容

 的寬度和一個中文字一樣  這列有一個    段落開頭可用這個空兩格

4.  

thin space,不常用,寬度約是 \LARGE \frac{1}{5} em 或 \LARGE \frac{1}{6} em寬。

在HTML中編輯

通常不會有人使用;thinsp;  好奇還是試一下      五個;thinsp;和一中文字同寬

呈現在螢幕上的內容

通常不會有人使用   好奇還是試一下      五個 和一中文字同寬

5. ‌

zero width non jointer,zero width表示零寬度,螢幕上看不見空白。使用螢幕顯示文字時,有時系統會誤將兩個不應連字的字元連在一起,這種空白符可以抑制這種狀況發生,相關範例請參考維基百科。

6.‍

zero width jointer,同樣零寬度。有些語言,如阿拉伯語或印度語,兩個字元間常需要連字,使用這種空白符號,可以讓兩個本來沒有連在一起的字產生連字效果,相關範例請參考維基百科。

補充一:斷行標籤與

除了空格符號,斷行標籤 或 也非常實用,br是英文有中斷換行之意的break的縮寫。平常在WordPress打文章,按Enter鍵,會自動換到新的一段,但有時候只是想要換行,不想要換到新的一段,或者想要換行,但系統不讓人換行時,在想斷行的地方加上 或 就可以解決這個問題,不過要注意不能把反斜線寫在前面,變成,雖然WordPress編輯器似乎會把認定為斷行標籤,可是事實上反斜線在br前面是不正確的用法。

補充二:記 ;或 什麼的太麻煩了,有還沒有其他留空白或換行方法?

有,HTML還有另一個標籤,標籤區域內的文字,會按照使用者原本的編排方式呈現,不會自動刪減重複的空格和。

在HTML中編輯

;pre;會如實呈現按下的空白 像這列中間 有三個空白 前面不加;br;也可以換行

呈現在螢幕上的內容

會如實呈現按下的空白 像這列中間 有三個空白 前面不加也可以換行

如果是在WordPress編輯器上寫作,系統在「內容區塊」提供「未格式化文字」,使用效果和用標籤把特別編排的文字包圍起來一樣。

unformatted text in wordpress 補充三:HTML Entities

這篇文章用特殊「符號」或空格「符號」稱呼可以達到空格效果的一串編碼,但其實這些東西屬於HTML Entities,只是為了方便解釋,在此稱呼為符號。

HTML Entities是什麼?

寫文章的常常會使用到「空白」、「>」、「



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3