HTML字符转义、特殊字符笔记

转义字符串的由来

HTML中<>&等有特殊含义(<>,用于链接签,&用于转义),不能直接使用。这些符号是不显示在我们最终看到的网页里的,倘若我们需要在页面中显示这些字符,就需要用到转义字符串了。

转义字符串的组成

一个完整的转义字符串,分为三个部分:

  1. 一个&符号,英文为ampersand;
  2. 是实体名字或为#+实体编号;
  3. 一个;号;

例如,常用的大于号>,使用转义字符串后的写法为&gt;&#62;

我们注意到,上面的大于号使用了2种方式的转义,第一种称为实体名称,第二种为实体编号,区别在于实体名称的优点为便于记忆,但兼容性不完美,实体编号则反之。

html特殊字符

html本身存在很多的特殊字符,像我们常见的Copyright符号©,使用特殊字符需要注意以下几点:

  • 这些字符属于unicode字符集,你的文档需要声明为utf-8;
  • 这些字符在htmlcssjs中的书写方式各有不同,例如向左的箭头,如下:
    • HTML: &#8672;
    • CSS: \21E0, css的写法需要加上反斜杠,常用在content属性中
    • JS: \u21E0js的写法需在css的基础上前面加个反斜杠+u
  • 字符在各浏览器的表现略有区别,使用需谨慎
⇠  箭头类
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#8672\u21E021E0&#8674\u21E221E2
&#8673\u21E121E1&#8675\u21E321E3
&#8606\u219E219E&#8608\u21A021A0
&#8607\u219F219F&#8609\u21A121A1
&#8592\u21902190&#8594\u21922192
&#8593\u21912191&#8595\u21932193
&#8596\u21942194&#8597\u21952195
&#8644\u21C421C4&#8645\u21C521C5
&#8610\u21A221A2&#8611\u21A321A3
&#8670\u21DE21DE&#8671\u21DF21DF
&#8619\u21AB21AB&#8620\u21AC21AC
&#8668\u21DC21DC&#8669\u21DD21DD
&#8602\u219A219A&#8603\u219B219B
&#8622\u21AE21AE&#8621\u21AD21AD
&#8678\u21E621E6&#8680\u21E821E8
&#8679\u21E721E7&#8681\u21E921E9
&#9650\u25B225B2&#9658\u25BA25BA
&#9660\u25BC25BC&#9668\u25C425C4
&#10132\u27942794&#10137\u27992799
&#10152\u27A827A8&#10162\u27B227B2
&#10140\u279C279C&#10142\u279E279E
&#10143\u279F279F&#10144\u27A027A0
&#10148\u27A427A4&#10149\u27A527A5
&#10150\u27A627A6&#10151\u27A727A7
&#10165\u27B527B5&#10168\u27B827B8
&#10172\u27BC27BC&#10173\u27BD27BD
&#10170\u27BA27BA&#10163\u27B327B3
&#8631\u21B721B7&#8630\u21B621B6
&#8635\u21BB21BB&#8634\u21BA21BA
&#8629\u21B521B5&#8623\u21AF21AF
&#10174\u27BE27BE    
❤  基本形状类
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#10084\u27642764&#9992\u27082708
&#9733\u26052605&#10022\u27262726
&#9728\u26002600&#9670\u25C625C6
&#9672\u25C825C8&#9635\u25A325A3
&#9787\u263B263B&#9786\u263A263A
&#9785\u26392639&#9993\u27092709
&#9742\u260E260E&#9743\u260F260F
&#9990\u270627060&#65533\uFFFDFFFD
&#9729\u26012601&#9730\u26022602
&#10052\u27442744&#9731\u26032603
&#10056\u27482748&#10047\u273F273F
&#10048\u27402740&#10049\u27412741
&#9752\u26182618&#10086\u27662766
&#9749\u97499749&#10050\u27422742
&#9765\u26252625&#9774\u262E262E
&#9775\u262F262F&#9770\u262A262A
&#9764\u26242624&#9988\u27042704
&#9986\u27022702&#9784\u26382638
&#9875\u26932693&#9763\u26232623
&#9888\u26A026A0&#9889\u26A126A1
&#9762\u26222622&#9851\u267B267B
&#9855\u267F267F&#9760\u26202620
¥  货币类
<table class=”zfz_table “cellpadding=”8”cellspacing=”0”>符号UNICODE符号<th colspan=”3”class=”lasttd”>UNICODEHTMLJSCSSHTMLJSCSS$&#36\u00240024¢&#162\u00A200A2£&#163\u00A300A3¤&#164\u00A400A4€&#8364\u20AC20AC¥&#165\u00A500A5₱&#8369\u20B120B1₹&#8377\u20B920B9
½  数学类
<table class=”zfz_table “cellpadding=”8”cellspacing=”0”>符号UNICODE符号<th colspan=”3”class=”lasttd”>UNICODEHTMLJSCSSHTMLJSCSS½&#189\u00BD00BD¼&#188\u00BC00BC¾&#190\u00BE00BE⅓&#8531\u21532153⅔&#8532\u21542154⅛&#8539\u215B215B⅜&#8540\u215C215C⅝&#8541\u215D215D‰&#8240\u20302030%&#37\u00250025<&#60\u003C003C>&#62\u003E003E
♫  音乐符号类
<table class=”zfz_table “cellpadding=”8”cellspacing=”0”>符号UNICODE符号<th colspan=”3”class=”lasttd”>UNICODEHTMLJSCSSHTMLJSCSS♩&#9833\u26692669♪&#9834\u266A266A♫&#9835\u266B266B♬&#9836\u266C266C♭&#9837\u266D266D♯&#9839\u266F266F
✖  对错号
<table class=”zfz_table “cellpadding=”8”cellspacing=”0”>符号UNICODE符号<th colspan=”3”class=”lasttd”>UNICODEHTMLJSCSSHTMLJSCSS &#160\u00A000A0☐&#9744\u26102610☑&#9745\u26112611☒&#9746\u26122612✓&#10003\u27132713✔&#10004\u27142714✕&#10005\u1000510005✖&#10006\u27162716✗&#10007\u27172717✘&#10008\u27182718
★  全都是星星
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#9733\u26052605&#10029\u272D272D
&#10030\u272E272E&#9734\u26062606
&#10026\u272A272A&#10017\u27212721
&#10031\u272F272F&#10037\u27352735
&#10038\u27362736&#10040\u27382738
&#10041\u27392739&#10042\u273A273A
&#10033\u27312731&#10034\u27322732
&#10036\u27342734&#10035\u27332733
&#10043\u273B273B&#10045\u273D273D
&#10059\u274B274B&#10054\u27462746
&#10052\u27442744&#10053\u27452745
♒  星座类
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#9800\u26482648&#9801\u26492649
&#9802\u264A264A&#9803\u264B264B
&#9804\u264C264C&#9805\u264D264D
&#9806\u264E264E&#9807\u264F264F
&#9808\u26502650&#9809\u26512651
&#9810\u26522652&#9811\u26532653
♚  国际象棋类
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#9818\u265A265A&#9819\u265B265B
&#9820\u265C265C&#9821\u265D265D
&#9822\u265E265E&#9823\u265F265F
&#9812\u26542654&#9813\u26552655
&#9814\u26562656&#9815\u26572657
&#9816\u26582658&#9817\u26592659
♣  扑克牌类
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#9824\u26602660&#9827\u26632663
&#9829\u26652665&#9830\u26662666
&#9828\u26642664&#9831\u26672667
&#9825\u26612661&#9826\u26622662
Ω  希腊字母
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
Α&#913\u03910391Β&#914\u03920392
Γ&#915\u03930393Δ&#916\u03940394
Ε&#917\u03950395Ζ&#918\u03960396
Η&#919\u03970397Θ&#920\u03980398
Ι&#921\u03990399Κ&#922\u039A039A
Λ&#923\u039B039BΜ&#924\u039C039C
Ν&#925\u039D039DΞ&#926\u039E039E
Ο&#927\u039F039FΠ&#928\u03A003A0
Ρ&#929\u03A103A1Σ&#931\u03A303A3
Τ&#932\u03A403A4Υ&#933\u03A503A5
Φ&#934\u03A603A6Χ&#935\u03A703A7
Ψ&#936\u03A803A8Ω&#937\u03A903A9
☩  十字
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
&#9768\u26282628&#9769\u26292629
&#10013\u271D271D&#10014\u271E271E
&#10015\u271F271F&#10016\u27202720
&#10010\u271A271A&#8224\u20202020
&#10018\u27222722&#10020\u27242724
&#10019\u27232723&#10021\u27252725
©  法律符号
符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
®&#174\u00AE00AE©&#169\u00A900A9
&#8471\u21172117&#153\u00990099
&#8480\u21202120    
@  标点和符号

符号UNICODE符号UNICODE
HTMLJSCSSHTMLJSCSS
«&#171\u00AB00AB»&#187\u00BB00BB
&#139\u008B008B&#155\u009B009B
&#8220\u201C201C&#8221\u201D201D
&#8216\u20182018&#8217\u20192019
&#8226\u20222022&#9702\u25E625E6
¡&#161\u00A100A1¿&#191\u00BF00BF
&#8453\u21052105&#8470\u21162116
&&#38\u00260026@&#64\u00400040
&#8478\u211E211E&#8451\u21032103
&#8457\u21092109°&#176\u00B000B0
|&#124\u007C007C¦&#166\u00A600A6
&#8211\u20132013&#8212\u20142014
&#8230\u20262026&#182\u00B600B6
&#8764\u223C223C&#8800\u22602260


总结归类:

1.特色的
©&copy;©版权标志
| |竖线,常用作菜单或导航中的分隔符
·&middot;·圆点,有时被用来作为菜单分隔符
&uarr;上箭头,常用作网页“返回页面顶部”标识
&euro;欧元标识
²&sup2;²上标2,数学中的平方,在数字处理中常用到,例如:1000²
½&frac12;½二分之一
&hearts;心型,用来表达你的心

2常用的
 &nbsp; 空格
&&amp;&and符号,与
&quot;引号
©&copy;©版权标志
®&reg;»注册标志
&trade;商标标志
&ldquo;左双引号
&rdquo;右双引号
&lsquo;做单引号
&rsquo;右单引号
«&laquo;«左三角双引号
»&raquo;»右三角双引号
&lsaquo;左三角单引号
&rsaquo;右三角单引号
§&sect;§章节标志
&para;段落标志
&bull;列表圆点(大)
·&middot;·列表圆点(中)
&hellip;省略号
| |竖线
¦&brvbar;¦断的竖线
&ndash;短破折号
&mdash;长破折号

3.货币类
¤&curren;¤一般货币符号
$ $美元符号
¢&cent;¢
£&pound;£英镑
¥&yen;¥日元
&euro;欧元
4 数学类
<&lt;<小于号
>&gt;>大于号
&le;小于等于号
&ge;大于等于号
×&times;×乘号
÷&divide;÷除号
&minus;减号
±&plusmn;±加/减 号
&ne;不等于号
¹&sup1;¹上标1
²&sup2;²上标2
³&sup3;³上标3
½&frac12;½二分之一
¼&frac14;¼四分之一
¾&frac34;¾四分之三
&permil;千分率
°&deg;°
&radic;平方根
&infin;无限大
5.方向类
&larr;左箭头
&uarr;上箭头
&rarr;右箭头
&darr;下箭头
&harr;左右箭头
&crarr;回车箭头
&lceil;左上限
&rceil;右上限
&lfloor;左下限
&rfloor;右下限
其它

&spades;黑桃
&clubs;梅花
&hearts;红桃,心
&diams;方块牌
&loz;菱形
&dagger;匕首
&Dagger;双剑号
¡&iexcl;¡反向感叹号
¿&iquest;¿反向问号


原文:http://zhengmifan.com/news/notebook/801

参考:

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2019 FE blog All Rights Reserved.

访客数 : | 访问量 :