HTML特殊字符顯示

xiyang 發布于2019-08-01 15:59 / 2683人閱讀

摘要：有些字符在里有特別的含義，比如小于號就表示的開始，這個小于號是不顯示在我們最終看到的網頁里的。如何顯示空格通常情況下，會自動截去多余的空格。

有些字符在HTML里有特別的含義，比如小于號<就表示HTML Tag的開始，這個小于號是不顯示在我們最終看到的網頁里的。那如果我們希望在網頁中顯示一個小于號，該怎么辦呢？這就要說到HTML字符實體(HTML Character Entities)了。

HTML字符實體(Character Entities)

有些字符在HTML里有特別的含義，比如小于號<就表示HTML Tag的開始，這個小于號是不顯示在我們最終看到的網頁里的。那如果我們希望在網頁中顯示一個小于號，該怎么辦呢？

這就要說到HTML字符實體(HTML Character Entities)了。

一個字符實體(Character Entity)分成三部分：第一部分是一個&符號，英文叫ampersand；第二部分是實體(Entity)名字或者是#加上實體(Entity)編號；第三部分是一個分號。

比如，要顯示小于號，就可以寫<或者<。

用實體(Entity)名字的好處是比較好理解，一看lt，大概就猜出是less than的意思，但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實體(Entity)編號，各種瀏覽器都能處理。

注意：Entity是區分大小寫的。

如何顯示空格

通常情況下，HTML會自動截去多余的空格。不管你加多少空格，都被看做一個空格。比如你在兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網頁中增加空格，你可以使用表示空格。

最常用的字符實體(Character Entities)

顯示結果    說明             Entity Name        Entity Number
         顯示一個空格                       
<        小于             <                <
>        大于             >                >
&        &符號            &            &
"        雙引號          "            "
"       單引號                           '

其他常用的字符實體(Character Entities)

結果   說明      Entity Name    Entity Number
?     版權       ©         ©
?     注冊商標    ®          ®
×     乘號       ×        ×
÷     除號       ÷       ÷

更多字符實體(Character Entities)

字符 十進制字符編號  實體名字    說明
--- �          ---        未使用Unused
---           ---        未使用Unused
---           ---        未使用Unused
---           ---        未使用Unused
---           ---        未使用Unused
---           ---        未使用Unused
---            ---       未使用Unused
---            ---       未使用Unused
---            ---       未使用Unused
--- 	 --- 制表符Horizontal tab
--- 
 --- 換行Line feed
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 回車Carriage Return
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
---  --- 未使用Unused
    --- Space
! ! --- 驚嘆號Exclamation mark
" " "  雙引號Quotation mark
# # --- 數字標志Number sign
$ $ --- 美元標志Dollar sign
% % --- 百分號Percent sign
& & & Ampersand
" ' --- 單引號Apostrophe
( ( --- 小括號左邊部分Left parenthesis
) ) --- 小括號右邊部分Right parenthesis
* * --- 星號Asterisk
+ + --- 加號Plus sign
, , --- 逗號Comma
- - --- 連字號Hyphen
. . --- 句號Period (fullstop)
/ / --- 斜杠Solidus (slash)
0 0 --- 數字0 Digit 0
1 1 --- 數字1 Digit 1
2 2 --- 數字2 Digit 2
3 3 --- 數字3 Digit 3
4 4 --- 數字4 Digit 4
5 5 --- 數字5 Digit 5
6 6 --- 數字6 Digit 6
7 7 --- 數字7 Digit 7
8 8 --- 數字8 Digit 8
9 9 --- 數字9 Digit 9
: : --- 冒號Colon
; ; --- 分號Semicolon
< < <  小于號Less than
= = --- 等于符號Equals sign
> > >  大于號Greater than
? ? --- 問號Question mark
@ @ --- Commercial at
A A --- 大寫A Capital A
B B --- 大寫B Capital B
C C --- 大寫C Capital C
D D --- 大寫D Capital D
E E --- 大寫E Capital E
F F --- 大寫F Capital F
G G --- 大寫G Capital G
H H --- 大寫H Capital H
I I --- 大寫J Capital I
J J --- 大寫K Capital J
K K --- 大寫L Capital K
L L --- 大寫K Capital L
M M --- 大寫M Capital M
N N --- 大寫N Capital N
O O --- 大寫O Capital O
P P --- 大寫P Capital P
Q Q --- 大寫Q Capital Q
R R --- 大寫R Capital R
S S --- 大寫S Capital S
T T --- 大寫T Capital T
U U --- 大寫U Capital U
V V --- 大寫V Capital V
W W --- 大寫W Capital W
X X --- 大寫X Capital X
Y Y --- 大寫Y Capital Y
Z Z --- 大寫Z Capital Z
[ [ --- 中括號左邊部分Left square bracket
 \ --- 反斜杠Reverse solidus (backslash)
] ] --- 中括號右邊部分Right square bracket
^ ^ --- Caret
_ _ --- 下劃線Horizontal bar (underscore)
` ` --- 尖重音符Acute accent
a a --- 小寫a Small a
b b --- 小寫b Small b
c c --- 小寫c Small c
d d  --- 小寫d Small d
e e  --- 小寫e Small e
f f  --- 小寫f Small f
g g  --- 小寫g Small g
h h  --- 小寫h Small h
i i  --- 小寫i Small i
j j  --- 小寫j Small j
k k  --- 小寫k Small k
l l  --- 小寫l Small l
m m  --- 小寫m Small m
n n  --- 小寫n Small n
o o  --- 小寫o Small o
p p  --- 小寫p Small p
q q  --- 小寫q Small q
r r  --- 小寫r Small r
s s  --- 小寫s Small s
t t  --- 小寫t Small t
u u  --- 小寫u Small u
v v  --- 小寫v Small v
w w  --- 小寫w Small w
x x  --- 小寫x Small x
y y  --- 小寫y Small y
z z  --- 小寫z Small z
{ {  --- 大括號左邊部分Left curly brace
| |  --- 豎線Vertical bar
} }  --- 大括號右邊部分Right curly brace
~ ~  --- Tilde
---   --- 未使用Unused
        空格Nonbreaking space
? ¡  ¡ Inverted exclamation
￠ ¢  ¢  貨幣分標志Cent sign
￡ £  £ 英鎊標志Pound sterling
¤ ¤  ¤  通用貨幣標志General currency sign
￥ ¥  ¥ 日元標志Yen sign
| ¦  ¦ or &brkbar;  斷豎線Broken vertical bar
§ §  §  分節號Section sign
¨ ¨  ¨ or ¨  變音符號Umlaut
? ©  ©  版權標志Copyright
a ª  ª  Feminine ordinal
? «  « Left angle quote, guillemet left
? ¬  ¬  Not sign
     Soft hyphen
? ®  ® 注冊商標標志Registered trademark
ˉ ¯  ¯ or &hibar; 長音符號Macron accent
° °  ° 度數標志Degree sign
± ±  ±  加或減Plus or minus
2 ²  ²  上標2 Superscript two
3 ³  ³  上標3 Superscript three
′ ´  ´ 尖重音符Acute accent
μ µ  µ Micro sign
? ¶  ¶  Paragraph sign
· ·  ·  Middle dot
? ¸  ¸ Cedilla
1 ¹  ¹  上標1 Superscript one
o º  º  Masculine ordinal
? »  » Right angle quote, guillemet right
? ¼  ¼  四分之一Fraction one-fourth
? ½  ½  二分之一Fraction one-half
? ¾  ¾  四分之三Fraction three-fourths
? ¿  ¿  Inverted question mark
à À  À  Capital A, grave accent
á Á  Á  Capital A, acute accent
? Â  Â Capital A, circumflex
? Ã  Ã  Capital A, tilde
? Ä  Ä  Capital A, di?esis / umlaut
? Å  Å Capital A, ring
? Æ  Æ Capital AE ligature
? Ç  Ç  Capital C, cedilla
è È  È  Capital E, grave accent
é É  É  Capital E, acute accent
ê Ê  Ê Capital E, circumflex
? Ë  Ë  Capital E, di?esis / umlaut
ì Ì  Ì  Capital I, grave accent
í Í  Í  Capital I, acute accent
? Î  Î Capital I, circumflex
? Ï  Ï  Capital I, di?esis / umlaut
D Ð  Ð Capital Eth, Icelandic
? Ñ  Ñ  Capital N, tilde
ò Ò  Ò  Capital O, grave accent
ó Ó  Ó  Capital O, acute accent
? Ô  Ô Capital O, circumflex
? Õ  Õ  Capital O, tilde
? Ö  Ö  Capital O, di?esis / umlaut
× ×  × 乘號Multiply sign
? Ø  Ø  Capital O, slash
ù Ù  Ù  Capital U, grave accent
ú Ú  Ú  Capital U, acute accent
? Û  Û Capital U, circumflex
ü Ü  Ü  Capital U, di?esis / umlaut
Y Ý  Ý  Capital Y, acute accent
T Þ  Þ Capital Thorn, Icelandic
? ß  ß Small sharp s, German sz
à à  à  Small a, grave accent
á á  á  Small a, acute accent
a â  â Small a, circumflex
? ã  ã  Small a, tilde
? ä  ä  Small a, di?esis / umlaut
? å  å Small a, ring
? æ  æ Small ae ligature
? ç  ç  Small c, cedilla
è è  è  Small e, grave accent
é é  é  Small e, acute accent
ê ê  ê Small e, circumflex
? ë  ë  Small e, di?esis / umlaut
ì ì  ì  Small i, grave accent
í í  í  Small i, acute accent
? î  î Small i, circumflex
? ï  ï  Small i, di?esis / umlaut
e ð  ð Small eth, Icelandic
? ñ  ñ  Small n, tilde
ò ò  ò  Small o, grave accent
ó ó  ó  Small o, acute accent
? ô  ô Small o, circumflex
? õ  õ  Small o, tilde
? ö  ö  Small o, di?esis / umlaut
÷ ÷  ÷  除號Division sign
? ø  ø  Small o, slash
ù ù  ù  Small u, grave accent
ú ú  ú  Small u, acute accent
? û  û Small u, circumflex
ü ü  ü  Small u, di?esis / umlaut
y ý  ý  Small y, acute accent
t þ  þ Small thorn, Icelandic
? ÿ  ÿ  Small y, umlaut

轉載文章：
實體字符對照表

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50246.html

react 渲染 html 特殊字符的bug

摘要：答案寫在最前面然后在需要轉換的地方調用這個方法生成即可，原因是無法渲染字符熟悉的人，應該都知道那些特殊字符會以的方式處理。于是我在網絡上搜索了渲染字符，然后發現官方給了方案因為要防止注入。框架是帶來思想，解決問題的，而不應當被框架限制。答案寫在最前面(demo)： function translateHtmlCharater(html) { var div = documen...

shleyZ 2019-08-01 15:14 評論0 收藏0
前端常用代碼片段(四)

摘要：盡量避免使用表達式又稱動態屬性。使用計算數組中的重復項如果你想計算數組中的每個值有多少重復值，也可以快速幫到你。前端常用代碼片段(一) 點這里前端常用代碼片段(二) 點這里前端常用代碼片段(三) 點這里前端常用代碼片段(四) 點這里前端常用代碼片段(五) 點這里前端常用代碼片段(六) 點這里 1.簡述一下你對HTML語義化的理解？并寫出一段語義化的HTML？語義化是指根據內容的結...

worldligang 2019-08-23 14:41 評論0 收藏0
學習前端筆記1（HTML）

摘要：注此文是在看過許多學習資料和視頻之后，加上自身理解拼湊而成，僅作學習之用。宋體無文檔聲明瀏覽器以怪異模式解析宋體標簽宋體不使用宋體代碼來實現頁面表現宋體學習宋體重點在于語義性。（注：此文是在看過許多學習資料和視頻之后，加上自身理解拼湊而成，僅作學習之用。若有版權問題，麻煩及時聯系）標準頁面結構： ? ? ? Html發展歷史：? ? 注：每一種HTML需要有對應的doctype聲明。? ...

xeblog 2019-04-23 11:56 評論0 收藏0