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

转义字符串的由来

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

转义字符串的组成

一个完整的转义字符串，分为三个部分：

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

例如，常用的大于号>，使用转义字符串后的写法为>或>

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

html特殊字符

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

• 这些字符属于unicode字符集，你的文档需要声明为utf-8;
• 这些字符在html、css、js中的书写方式各有不同，例如向左的箭头⇠，如下：
  • HTML： ⇠
  • CSS： \21E0, css的写法需要加上反斜杠，常用在content属性中
  • JS： \u21E0，js的写法需在css的基础上前面加个反斜杠+u
• 字符在各浏览器的表现略有区别，使用需谨慎

⇠  箭头类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
⇠	&#8672	\u21E0	21E0	⇢	&#8674	\u21E2	21E2
⇡	&#8673	\u21E1	21E1	⇣	&#8675	\u21E3	21E3
↞	&#8606	\u219E	219E	↠	&#8608	\u21A0	21A0
↟	&#8607	\u219F	219F	↡	&#8609	\u21A1	21A1
←	&#8592	\u2190	2190	→	&#8594	\u2192	2192
↑	&#8593	\u2191	2191	↓	&#8595	\u2193	2193
↔	&#8596	\u2194	2194	↕	&#8597	\u2195	2195
⇄	&#8644	\u21C4	21C4	⇅	&#8645	\u21C5	21C5
↢	&#8610	\u21A2	21A2	↣	&#8611	\u21A3	21A3
⇞	&#8670	\u21DE	21DE	⇟	&#8671	\u21DF	21DF
↫	&#8619	\u21AB	21AB	↬	&#8620	\u21AC	21AC
⇜	&#8668	\u21DC	21DC	⇝	&#8669	\u21DD	21DD
↚	&#8602	\u219A	219A	↛	&#8603	\u219B	219B
↮	&#8622	\u21AE	21AE	↭	&#8621	\u21AD	21AD
⇦	&#8678	\u21E6	21E6	⇨	&#8680	\u21E8	21E8
⇧	&#8679	\u21E7	21E7	⇩	&#8681	\u21E9	21E9
▲	&#9650	\u25B2	25B2	►	&#9658	\u25BA	25BA
▼	&#9660	\u25BC	25BC	◄	&#9668	\u25C4	25C4
➔	&#10132	\u2794	2794	➙	&#10137	\u2799	2799
➨	&#10152	\u27A8	27A8	➲	&#10162	\u27B2	27B2
➜	&#10140	\u279C	279C	➞	&#10142	\u279E	279E
➟	&#10143	\u279F	279F	➠	&#10144	\u27A0	27A0
➤	&#10148	\u27A4	27A4	➥	&#10149	\u27A5	27A5
➦	&#10150	\u27A6	27A6	➧	&#10151	\u27A7	27A7
➵	&#10165	\u27B5	27B5	➸	&#10168	\u27B8	27B8
➼	&#10172	\u27BC	27BC	➽	&#10173	\u27BD	27BD
➺	&#10170	\u27BA	27BA	➳	&#10163	\u27B3	27B3
↷	&#8631	\u21B7	21B7	↶	&#8630	\u21B6	21B6
↻	&#8635	\u21BB	21BB	↺	&#8634	\u21BA	21BA
↵	&#8629	\u21B5	21B5	↯	&#8623	\u21AF	21AF
➾	&#10174	\u27BE	27BE

❤  基本形状类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
❤	&#10084	\u2764	2764	✈	&#9992	\u2708	2708
★	&#9733	\u2605	2605	✦	&#10022	\u2726	2726
☀	&#9728	\u2600	2600	◆	&#9670	\u25C6	25C6
◈	&#9672	\u25C8	25C8	▣	&#9635	\u25A3	25A3
☻	&#9787	\u263B	263B	☺	&#9786	\u263A	263A
☹	&#9785	\u2639	2639	✉	&#9993	\u2709	2709
☎	&#9742	\u260E	260E	☏	&#9743	\u260F	260F
✆	&#9990	\u2706	2706	0	&#65533	\uFFFD	FFFD
☁	&#9729	\u2601	2601	☂	&#9730	\u2602	2602
❄	&#10052	\u2744	2744	☃	&#9731	\u2603	2603
❈	&#10056	\u2748	2748	✿	&#10047	\u273F	273F
❀	&#10048	\u2740	2740	❁	&#10049	\u2741	2741
☘	&#9752	\u2618	2618	❦	&#10086	\u2766	2766
☕	&#9749	\u9749	9749	❂	&#10050	\u2742	2742
☥	&#9765	\u2625	2625	☮	&#9774	\u262E	262E
☯	&#9775	\u262F	262F	☪	&#9770	\u262A	262A
☤	&#9764	\u2624	2624	✄	&#9988	\u2704	2704
✂	&#9986	\u2702	2702	☸	&#9784	\u2638	2638
⚓	&#9875	\u2693	2693	☣	&#9763	\u2623	2623
⚠	&#9888	\u26A0	26A0	⚡	&#9889	\u26A1	26A1
☢	&#9762	\u2622	2622	♻	&#9851	\u267B	267B
♿	&#9855	\u267F	267F	☠	&#9760	\u2620	2620

¥  货币类

<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
	HTML	JS	CSS		HTML	JS	CSS
★	&#9733	\u2605	2605	✭	&#10029	\u272D	272D
✮	&#10030	\u272E	272E	☆	&#9734	\u2606	2606
✪	&#10026	\u272A	272A	✡	&#10017	\u2721	2721
✯	&#10031	\u272F	272F	✵	&#10037	\u2735	2735
✶	&#10038	\u2736	2736	✸	&#10040	\u2738	2738
✹	&#10041	\u2739	2739	✺	&#10042	\u273A	273A
✱	&#10033	\u2731	2731	✲	&#10034	\u2732	2732
✴	&#10036	\u2734	2734	✳	&#10035	\u2733	2733
✻	&#10043	\u273B	273B	✽	&#10045	\u273D	273D
❋	&#10059	\u274B	274B	❆	&#10054	\u2746	2746
❄	&#10052	\u2744	2744	❅	&#10053	\u2745	2745

♒  星座类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♈	&#9800	\u2648	2648	♉	&#9801	\u2649	2649
♊	&#9802	\u264A	264A	♋	&#9803	\u264B	264B
♌	&#9804	\u264C	264C	♍	&#9805	\u264D	264D
♎	&#9806	\u264E	264E	♏	&#9807	\u264F	264F
♐	&#9808	\u2650	2650	♑	&#9809	\u2651	2651
♒	&#9810	\u2652	2652	♓	&#9811	\u2653	2653

♚  国际象棋类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♚	&#9818	\u265A	265A	♛	&#9819	\u265B	265B
♜	&#9820	\u265C	265C	♝	&#9821	\u265D	265D
♞	&#9822	\u265E	265E	♟	&#9823	\u265F	265F
♔	&#9812	\u2654	2654	♕	&#9813	\u2655	2655
♖	&#9814	\u2656	2656	♗	&#9815	\u2657	2657
♘	&#9816	\u2658	2658	♙	&#9817	\u2659	2659

♣  扑克牌类

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
♠	&#9824	\u2660	2660	♣	&#9827	\u2663	2663
♥	&#9829	\u2665	2665	♦	&#9830	\u2666	2666
♤	&#9828	\u2664	2664	♧	&#9831	\u2667	2667
♡	&#9825	\u2661	2661	♢	&#9826	\u2662	2662

Ω  希腊字母

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
Α	&#913	\u0391	0391	Β	&#914	\u0392	0392
Γ	&#915	\u0393	0393	Δ	&#916	\u0394	0394
Ε	&#917	\u0395	0395	Ζ	&#918	\u0396	0396
Η	&#919	\u0397	0397	Θ	&#920	\u0398	0398
Ι	&#921	\u0399	0399	Κ	&#922	\u039A	039A
Λ	&#923	\u039B	039B	Μ	&#924	\u039C	039C
Ν	&#925	\u039D	039D	Ξ	&#926	\u039E	039E
Ο	&#927	\u039F	039F	Π	&#928	\u03A0	03A0
Ρ	&#929	\u03A1	03A1	Σ	&#931	\u03A3	03A3
Τ	&#932	\u03A4	03A4	Υ	&#933	\u03A5	03A5
Φ	&#934	\u03A6	03A6	Χ	&#935	\u03A7	03A7
Ψ	&#936	\u03A8	03A8	Ω	&#937	\u03A9	03A9

☩  十字

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
☨	&#9768	\u2628	2628	☩	&#9769	\u2629	2629
✝	&#10013	\u271D	271D	✞	&#10014	\u271E	271E
✟	&#10015	\u271F	271F	✠	&#10016	\u2720	2720
✚	&#10010	\u271A	271A	†	&#8224	\u2020	2020
✢	&#10018	\u2722	2722	✤	&#10020	\u2724	2724
✣	&#10019	\u2723	2723	✥	&#10021	\u2725	2725

©  法律符号

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
®	&#174	\u00AE	00AE	©	&#169	\u00A9	00A9
℗	&#8471	\u2117	2117	™	&#153	\u0099	0099
℠	&#8480	\u2120	2120

@  标点和符号

符号	UNICODE			符号	UNICODE
	HTML	JS	CSS		HTML	JS	CSS
«	&#171	\u00AB	00AB	»	&#187	\u00BB	00BB
‹	&#139	\u008B	008B	›	&#155	\u009B	009B
“	&#8220	\u201C	201C	”	&#8221	\u201D	201D
‘	&#8216	\u2018	2018	’	&#8217	\u2019	2019
•	&#8226	\u2022	2022	◦	&#9702	\u25E6	25E6
¡	&#161	\u00A1	00A1	¿	&#191	\u00BF	00BF
℅	&#8453	\u2105	2105	№	&#8470	\u2116	2116
&	&#38	\u0026	0026	@	&#64	\u0040	0040
℞	&#8478	\u211E	211E	℃	&#8451	\u2103	2103
℉	&#8457	\u2109	2109	°	&#176	\u00B0	00B0
|	&#124	\u007C	007C	¦	&#166	\u00A6	00A6
–	&#8211	\u2013	2013	—	&#8212	\u2014	2014
…	&#8230	\u2026	2026	¶	&#182	\u00B6	00B6
∼	&#8764	\u223C	223C	≠	&#8800	\u2260	2260

总结归类：

1.特色的

©	©	©	版权标志
|		|	竖线，常用作菜单或导航中的分隔符
·	·	·	圆点，有时被用来作为菜单分隔符
↑	↑	↑	上箭头，常用作网页“返回页面顶部”标识
€	€	€	欧元标识
²	²	²	上标2，数学中的平方，在数字处理中常用到，例如：1000²
½	½	½	二分之一
♥	♥	♥	心型，用来表达你的心

2常用的

	 		空格
&	&	&	and符号，与
“	"	“	引号
©	©	©	版权标志
®	®	»	注册标志
™	™	™	商标标志
“	“	“	左双引号
”	”	”	右双引号
‘	‘	‘	做单引号
’	’	’	右单引号
«	«	«	左三角双引号
»	»	»	右三角双引号
‹	‹	‹	左三角单引号
›	›	›	右三角单引号
§	§	§	章节标志
¶	¶	¶	段落标志
•	•	•	列表圆点（大）
·	·	·	列表圆点（中）
…	…	…	省略号
|		|	竖线
¦	¦	¦	断的竖线
–	–	–	短破折号
—	—	—	长破折号

3.货币类

¤	¤	¤	一般货币符号
$		$	美元符号
¢	¢	¢	分
£	£	£	英镑
¥	¥	¥	日元
€	€	€	欧元

4 数学类

<	&lt;	<	小于号
>	&gt;	>	大于号
≤	&le;	≤	小于等于号
≥	&ge;	≥	大于等于号
×	&times;	×	乘号
÷	&divide;	÷	除号
−	&minus;	−	减号
±	&plusmn;	±	加/减 号
≠	&ne;	≠	不等于号
¹	&sup1;	¹	上标1
²	&sup2;	²	上标2
³	&sup3;	³	上标3
½	&frac12;	½	二分之一
¼	&frac14;	¼	四分之一
¾	&frac34;	¾	四分之三
‰	&permil;	‰	千分率
°	&deg;	°	度
√	&radic;	√	平方根
∞	&infin;	∞	无限大

5.方向类

←	←	←	左箭头
↑	↑	↑	上箭头
→	→	→	右箭头
↓	↓	↓	下箭头
↔	↔	↔	左右箭头
↵	↵	↵	回车箭头
⌈	⌈	⌈	左上限
⌉	⌉	⌉	右上限
⌊	⌊	⌊	左下限
⌋	⌋	⌋	右下限

6 其它

♠	♠	♠	黑桃
♣	♣	♣	梅花
♥	♥	♥	红桃，心
♦	♦	♦	方块牌
◊	◊	◊	菱形
†	†	†	匕首
‡	‡	‡	双剑号
¡	¡	¡	反向感叹号
¿	¿	¿	反向问号

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

参考：

• http://114.xixik.com/character/
• http://www.gzui.net/465
• http://zhengmifan.com/news/notebook/801