常用的HTML和CSS content属性特殊字符归纳

今天药忘吃喽~ 2023-05-29 05:19 11阅读 0赞

# 常用的HTML和CSS content属性特殊字符归纳 #

今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。

因为这些字符属于unicode字符集，所以，我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式；

还有一点需要注意的是，部分字符在不同浏览器中显示的效果不同，所以在使用的时候，需要自己在不同的浏览器中进行试验。在苹果和安卓等系统的智能设备下的识别度也比较差，所有希望慎用。

废话不多说上干货：

## 各种箭头 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

⇠ 8672 21E0  
⇢ 8674 21E2  
⇡ 8673 21E1  
⇣ 8675 21E3  
↞ 8606 219E  
↠ 8608 21A0  
↟ 8607 219F  
↡ 8609 21A1  
← 8592 2190  
→ 8594 2192  
↑ 8593 2191  
↓ 8595 2193  
↔ 8596 2194  
↕ 8597 2195  
⇄ 8644 21C4  
⇅ 8645 21C5  
↢ 8610 21A2  
↣ 8611 21A3  
⇞ 8670 21DE  
⇟ 8671 21DF  
↫ 8619 21AB  
↬ 8620 21AC  
⇜ 8668 21DC  
⇝ 8669 21DD  
↚ 8602 219A  
↛ 8603 219B  
↮ 8622 21AE  
↭ 8621 21AD

## 形状 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

⇦ 8678 21E6  
⇨ 8680 21E8  
⇧ 8679 21E7  
⇩ 8681 21E9  
↷ 8631 21B7  
↶ 8630 21B6  
↻ 8635 21BB  
↺ 8634 21BA  
⟳ 10227 27F3  
⟲ 10226 27F2  
⟰ 10224 27F0  
⟱ 10225 27F1  
↵ 8629 21B5  
↯ 8623 21AF  
⇵ 8693 21F5

## 向右的箭头 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

➔ 10132 2794  
➙ 10137 2799  
➨ 10152 27A8  
➲ 10162 27B2  
➜ 10140 279C  
➞ 10142 279E  
➟ 10143 279F  
➠ 10144 27A0  
➤ 10148 27A4  
➥ 10149 27A5  
➦ 10150 27A6  
➧ 10151 27A7  
➵ 10165 27B5  
➸ 10168 27B8  
➼ 10172 27BC  
➽ 10173 27BD  
➺ 10170 27BA  
➳ 10163 27B3  
➾ 10174 27BE

## 基本形状 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

▲ 9650 25B2  
► 9658 25BA  
▼ 9660 25BC  
◄ 9668 25C4  
❤ 10084 2764  
✈ 9992 2708  
★ 9733 2605  
✦ 10022 2726  
☀ 9728 2600  
◆ 9670 25C6  
◈ 9672 25C8  
▣ 9635 25A3

## 标点 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

« 171 00AB  
» 187 00BB  
‹ 139 008B  
› 155 009B  
“ 8220 201C  
” 8221 201D  
‘ 8216 2018  
’ 8217 2019  
• 8226 2022  
◦ 9702 25E6  
¡ 161 00A1  
¿ 191 00BF  
℅ 8453 2105  
№ 8470 2116  
& 38 0026  
@ 64 0040  
℞ 8478 211E  
℃ 8451 2103  
℉ 8457 2109  
° 176 00B0  
124 007C  
¦ 166 00A6  
– 8211 2013  
— 8212 2014  
… 8230 2026  
¶ 182 00B6  
∼ 8764 223C  
≠ 8800 2260

## 法律符号 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

® 174 00AE  
© 169 00A9  
℗ 8471 2117  
™ 153 0099  
℠ 8480 2120

## 货币 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

$ 36 0024  
¢ 162 00A2  
£ 163 00A3  
¤ 164 00A4  
€ 8364 20AC  
¥ 165 00A5  
₱ 8369 20B1  
₹ 8377 20B9

## 数学 ##

##### 图形样式 用于HTML（在字符前加 &\# ） 用于 CSS （在字符前加 \\ ） 和 JavaScript（在字符前加 \\u ） #####

½ 189 00BD  
¼ 188 00BC  
¾ 190 00BE  
⅓ 8531 2153  
⅔ 8532 2154  
⅛ 8539 215B  
⅜ 8540 215C  
⅝ 8541 215D  
‰ 8240 2030  
% 37 0025  
< 60 003C

> 62 003E
> 
>     ## 音乐符号
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ♩	9833	2669
>       ♪	9834	266A
>       ♫	9835	266B
>       ♬	9836	266C
>       ♭	9837	266D
>       ♯	9839	266F
>       
>       ## 对号、错号
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       空格	160	00A0
>       ☐	9744	2610
>       ☑	9745	2611
>       ☒	9746	2612
>       ✓	10003	2713
>       ✔	10004	2714
>       ✕	10005	10005
>       ✖	10006	2716
>       ✗	10007	2717
>       ✘	10008	2718
>       
>       ## 十字
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ☨	9768	2628
>       ☩	9769	2629
>       ✝	10013	271D
>       ✞	10014	271E
>       ✟	10015	271F
>       ✠	10016	2720
>       ✚	10010	271A
>       †	8224	2020
>       ✢	10018	2722
>       ✤	10020	2724
>       ✣	10019	2723
>       ✥	10021	2725
>       
>       ## 星星、星号、雪花
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ★	9733	2605
>       ✭	10029	272D
>       ✮	10030	272E
>       ☆	9734	2606
>       ✪	10026	272A
>       ✡	10017	2721
>       ✯	10031	272F
>       ✵	10037	2735
>       ✶	10038	2736
>       ✸	10040	2738
>       ✹	10041	2739
>       ✺	10042	273A
>       ✱	10033	2731
>       ✲	10034	2732
>       ✴	10036	2734
>       ✳	10035	2733
>       ✻	10043	273B
>       ✽	10045	273D
>       ❋	10059	274B
>       ❆	10054	2746
>       ❄	10052	2744
>       ❅	10053	2745
>       
>       ## 杂项
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ☻	9787	263B
>       ☺	9786	263A
>       ☹	9785	2639
>       ✉	9993	2709
>       ☎	9742	260E
>       ☏	9743	260F
>       ✆	9990	2706
>       �	65533	FFFD
>       ☁	9729	2601
>       ☂	9730	2602
>       ❄	10052	2744
>       ☃	9731	2603
>       ❈	10056	2748
>       ✿	10047	273F
>       ❀	10048	2740
>       ❁	10049	2741
>       ☘	9752	2618
>       ❦	10086	2766
>       ☕	9749	9749
>       ❂	10050	2742
>       ☥	9765	2625
>       ☮	9774	262E
>       ☯	9775	262F
>       ☪	9770	262A
>       ☤	9764	2624
>       ✄	9988	2704
>       ✂	9986	2702
>       ☸	9784	2638
>       ⚓	9875	2693
>       ☣	9763	2623
>       ⚠	9888	26A0
>       ⚡	9889	26A1
>       ☢	9762	2622
>       ♻	9851	267B
>       ♿	9855	267F
>       ☠	9760	2620
>       
>       ## 手型、铅笔、笔
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ☜	9756	261C
>       ☞	9758	261E
>       ☝	9757	261D
>       ☟	9759	261F
>       ✌	9996	270C
>       ✍	9997	270D
>       ✎	9998	270E
>       ✐	10000	2710
>       ✏	9999	270F
>       ✑	10001	2711
>       ✒	10002	2712
>       
>       ## 天空、植物
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ☽	9789	263D
>       ☾	9790	263E
>       ♂	9794	2642
>       ♀	9792	2640
>       ☿	9791	263F
>       ♁	9793	2641
>       ♃	9795	2643
>       ♄	9796	2644
>       ♅	9797	2645
>       ♆	9798	2646
>       ♇	9799	2647
>       
>       ## 星座
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ♈	9800	2648
>       ♉	9801	2649
>       ♊	9802	264A
>       ♋	9803	264B
>       ♌	9804	264C
>       ♍	9805	264D
>       ♎	9806	264E
>       ♏	9807	264F
>       ♑	9809	2651
>       ♒	9810	2652
>       ♓	9811	2653
>       
>       ## 象棋，扑克牌
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       ♚	9818	265A
>       ♛	9819	265B
>       ♜	9820	265C
>       ♝	9821	265D
>       ♞	9822	265E
>       ♟	9823	265F
>       ♔	9812	2654
>       ♕	9813	2655
>       ♖	9814	2656
>       ♗	9815	2657
>       ♘	9816	2658
>       ♙	9817	2659
>       ♠	9824	2660
>       ♣	9827	2663
>       ♥	9829	2665
>       ♦	9830	2666
>       ♤	9828	2664
>       ♧	9831	2667
>       ♡	9825	2661
>       ♢	9826	2662
>       
>       ## 希腊字母
>       
>       ##### 图形样式	用于HTML（在字符前加 &# ）	用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
>       
>       Α	913	0391
>       Β	914	0392
>       Γ	915	0393
>       Δ	916	0394
>       Ε	917	0395
>       Ζ	918	0396
>       Η	919	0397
>       Θ	920	0398
>       Ι	921	0399
>       Κ	922	039A
>       Λ	923	039B
>       Μ	924	039C
>       Ν	925	039D
>       Ξ	926	039E
>       Ο	927	039F
>       Π	928	03A0
>       Ρ	929	03A1
>       Σ	931	03A3
>       Τ	932	03A4
>       Υ	933	03A5
>       Φ	934	03A6
>       Χ	935	03A7
>       Ψ	936	03A8
>       Ω	937	03A9

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML的特殊字符

html特殊字符的学习

谁践踏了优雅/ 2024年05月06日 21:22/ 0 赞/ 79 阅读

相关注释和特殊字符(HTML)

注释和特殊字符(HTML) <!DOCTYPE html> <html lang="en"> <head> <meta chars

曾经终败给现在/ 2023年10月03日 12:22/ 0 赞/ 24 阅读

相关常用的HTML和CSS content属性特殊字符归纳

常用的HTML和CSS content属性特殊字符归纳今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可

今天药忘吃喽~/ 2023年05月29日 05:19/ 0 赞/ 12 阅读

相关 HTML中的注释以及常用的特殊字符

HTML中的注释以及常用的特殊字符注释如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。添加注释是为了更好地

雨点打透心脏的1/2处/ 2022年12月15日 00:10/ 0 赞/ 156 阅读

相关 css利用content属性显示一个特殊符号①

<div class="step"></div> .step \{width: 20px; height: 0px;position:relative;\} .

╰半橙微兮°/ 2022年12月09日 05:20/ 0 赞/ 148 阅读

相关 HTML CSS特殊字符总结

HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权

女爷i/ 2022年09月24日 05:17/ 0 赞/ 318 阅读

相关 css3 attr和content 属性

比如我们要实现一个悬浮提示的功能。传统方法，使用title属性就能实现，但是现在我们要更美观，可以使用css3提供的`attr：能够在css中获取到元素的某个属性值，然后插入到

落日映苍穹つ/ 2022年07月17日 00:09/ 0 赞/ 211 阅读

相关 html特殊字符编码css3 content:"我是特殊符号"

项目中用到的一些特殊字符和图标 html代码 <div class="cross"></div> css代码 .cross\

￡神魔★判官ぃ/ 2022年05月27日 02:40/ 0 赞/ 314 阅读

相关 HTML特殊字符的html、js、css写法汇总

⇠ 箭头类 <table style="color:rgb(68,68,68);line-height:24px;font-family:'microsoft yahe

超、凢脫俗/ 2022年05月21日 08:59/ 0 赞/ 239 阅读

相关 HTML和CSS特殊字符表

HTML有许多特殊的字符，您对此有多少了解？平时在WEB制作中，您又有用到多少？或者说你在平时使用之时，是否也会碰到，有许多特殊字符要如何打印出来？比如说“笑脸”，比如说“版权

向右看齐/ 2022年03月17日 16:36/ 0 赞/ 293 阅读