易混HTML Entities與正確使用方法

在頁面上,表示HTML實體有多種方式,比如有“&+name;”、“&#+10進制ID”、“&#x+16進制ID”。而“\u+16進制”一般用於CSS的content樣式屬性。

空字符 – null

空字符:\u0000

空白 – whitespace

空字符表示沒有字符,不佔頁面物理位置,空白是有物理位置的。空白包括空格、製表符、回車符和換行符。

空格-space: ,&#x20,\u0020;

不間斷空格:  或   或 \u00A0;

Tab: 	 或 	 或 \u0009;

回車-CR:
 或&#xD 或 \u000D;

換行符-LF:
 或 \u000A;

  • 不間斷空格和空格的區別是,後者出現多個湊在一起的時候會坍塌成一個空格,而不間斷空格無論出現多少個都不會坍塌。
  • 在HTML頁面中,元素換行不是通過CR或LF,而是通過<br>標籤。CR和LF主要在<pre>標籤中起作用。
  • 空格、製表符、回車符和換行符的顯示受white-space樣式的影響。

單引號、雙引號

不同語言的引用符號不盡相同(https://en.wikipedia.org/wiki/Quotation_mark),如果直接在頁面上輸入,則需要很多頁面,而且也太過繁瑣,一般是通過CSS屬性quotes,或者使用content結合:before和:after一起設置。

/* Set two levels of quotation marks*/

q { quotes: "«" "»" "‹" "›"; }

q:before { content: open-quote }

q:after  { content: close-quote }

如果再結合:lang選擇器,就可以對任何本地化修改引號符了。

英文單引號(')

IE8不支持&apos;,所以一般使用&#39; 或&#x27; 或 \u0027。

英文雙引號(")

&quot; 或&#34; 或&#22; 或 \u0022

中文單引號左(‘)

\u2018,&#8216; 或&#x2018;

中文單引號右(’)

\u2019,&#8217; 或&#x2019;

中文雙引號左(“)

\u201C,&#8220; 或&#x201C;

中文雙引號右(”)

\u201D,&#8221; 或&#x201D;

之所以大規模使用了(')和(")是因爲以前的打字機和電腦中沒有相應的對稱引用符號,所以都用了垂直的符號。現在部分軟件可以直接把垂直符改成對稱引用符號。但這種自動轉換不是很完善。因此,隨着客戶端字符集越來越豐富,我們也應該正確使用這些字符。

連字符、減號、破折號、下劃線

下面幾個字符差別非常小,需要仔細觀察。從長度分析:mdash > ndash = 減號 > 連字符 = hyphen-minus;從位置高度分析:ndash = mdash = hyphen > minus = hyphen-minus > 下劃線。

Hyphen-minus(-):&#45; 或&#x2D; 或 \u002D

下劃線(_):&#95; 或或&#x5F; 或 \u005F

減號(−):&minus; 或 &#x2212; 或 \u2212

連字符(‐):&hyphen; 或&#x2010; 或 \u2010

Ndash(–):&ndash;或 &#8211 或 &#x2013; 或 \u2013

Mdash(—):&mdash; 或 &#8212 或&#x2014; 或 \u2014

  • Hyphen-minus是一般寫代碼時用到的符號,鍵盤上的小寫符號就是它;
  • 在鍵盤上,hyphen-minus之上就是下劃線,通過shift鍵可以獲取;
  •  減號一般用於數學表達式;
  • 連字符顧名思義就是鏈接兩個單詞,組成一個新單詞,比如left-handed。
  • ndash用於表示範圍,比如2–9。
  • mdash用於鏈接句子,比如Star Wars is—as everyone knows—amazing。

省略符

有些人會用三個句號來表示,其實這是錯誤的表示方法,應該使用省略符。

省略符:&hellip; 或 &#8230; 或&#x2026; 或\u2026

大於號、小於號

因爲HTML標籤使用的就是這兩個符號,如果直接在頁面輸入大於或小於號會導致頁面顯示異常。一般來說,只有初學者會誤用這兩個符號。

小於號:&lt; 或 &#60; 或&#x3c; 或\u003C

大於號:&gt; 或 &#62; 或&#x3E; 或\u003E。

和符號、或符號

容易誤用的是&符號,在英文頁面直接使用可能會導致單詞顯示有問題。因爲“&+name;”會表示另一個特殊字符,如果&正好位於單詞前面,而且後面有“;”,那就糟糕了。所以,一般用&amp;替代。

和符號:&amp; 或 &#38; 或 &#x26; 或\u0026

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章