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

最新推荐文章于 2022-12-30 11:26:40 发布
最新推荐文章于 2022-12-30 11:26:40 发布
阅读量673 收藏 7
点赞数
分类专栏： 前端 文章标签： html css 前端
原文链接：https://blog.csdn.net/zx562602419/article/details/81020342
版权

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

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

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

废话不多说上干货：

各种箭头
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
⇠867221E0
⇢867421E2
⇡867321E1
⇣867521E3
↞8606219E
↠860821A0
↟8607219F
↡860921A1
←85922190
→85942192
↑85932191
↓85952193
↔85962194
↕85972195
⇄864421C4
⇅864521C5
↢861021A2
↣861121A3
⇞867021DE
⇟867121DF
↫861921AB
↬862021AC
⇜866821DC
⇝866921DD
↚8602219A
↛8603219B
↮862221AE
↭862121AD
形状
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
⇦867821E6
⇨868021E8
⇧867921E7
⇩868121E9
↷863121B7
↶863021B6
↻863521BB
↺863421BA
⟳1022727F3
⟲1022627F2
⟰1022427F0
⟱1022527F1
↵862921B5
↯862321AF
⇵869321F5
向右的箭头
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
➔101322794
➙101372799
➨1015227A8
➲1016227B2
➜10140279C
➞10142279E
➟10143279F
➠1014427A0
➤1014827A4
➥1014927A5
➦1015027A6
➧1015127A7
➵1016527B5
➸1016827B8
➼1017227BC
➽1017327BD
➺1017027BA
➳1016327B3
➾1017427BE
基本形状
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
▲965025B2
►965825BA
▼966025BC
◄966825C4
❤100842764
✈99922708
★97332605
✦100222726
☀97282600
◆967025C6
◈967225C8
▣963525A3
标点
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
«17100AB
»18700BB
‹139008B
›155009B
“8220201C
”8221201D
‘82162018
’82172019
•82262022
◦970225E6
¡16100A1
¿19100BF
℅84532105
№84702116
&380026
@640040
℞8478211E
℃84512103
℉84572109
°17600B0
124007C
¦16600A6
–82112013
—82122014
…82302026
18200B6
∼8764223C
≠88002260
法律符号
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
®17400AE
©16900A9
℗84712117
™1530099
℠84802120
货币
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
$360024
¢16200A2
£16300A3
¤16400A4
€836420AC
¥16500A5
₱836920B1
₹837720B9
数学
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
½18900BD
¼18800BC
¾19000BE
⅓85312153
⅔85322154
⅛8539215B
⅜8540215C
⅝8541215D
‰82402030
%370025
<60003C
>62003E
音乐符号
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
♩98332669
♪9834266A
♫9835266B
♬9836266C
♭9837266D
♯9839266F
对号、错号
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
空格16000A0
☐97442610
☑97452611
☒97462612
✓100032713
✔100042714
✕1000510005
✖100062716
✗100072717
✘100082718
十字
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
☨97682628
☩97692629
✝10013271D
✞10014271E
✟10015271F
✠100162720
✚10010271A
†82242020
✢100182722
✤100202724
✣100192723
✥100212725
星星、星号、雪花
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
★97332605
✭10029272D
✮10030272E
☆97342606
✪10026272A
✡100172721
✯10031272F
✵100372735
✶100382736
✸100402738
✹100412739
✺10042273A
✱100332731
✲100342732
✴100362734
✳100352733
✻10043273B
✽10045273D
❋10059274B
❆100542746
❄100522744
❅100532745
杂项
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
☻9787263B
☺9786263A
☹97852639
✉99932709
☎9742260E
☏9743260F
✆99902706
�65533FFFD
☁97292601
☂97302602
❄100522744
☃97312603
❈100562748
✿10047273F
❀100482740
❁100492741
☘97522618
❦100862766
☕97499749
❂100502742
☥97652625
☮9774262E
☯9775262F
☪9770262A
☤97642624
✄99882704
✂99862702
☸97842638
⚓98752693
☣97632623
⚠988826A0
⚡988926A1
☢97622622
♻9851267B
♿9855267F
☠97602620
手型、铅笔、笔
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
☜9756261C
☞9758261E
☝9757261D
☟9759261F
✌9996270C
✍9997270D
✎9998270E
✐100002710
✏9999270F
✑100012711
✒100022712
天空、植物
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
☽9789263D
☾9790263E
♂97942642
♀97922640
☿9791263F
♁97932641
♃97952643
♄97962644
♅97972645
♆97982646
♇97992647
星座
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
♈98002648
♉98012649
♊9802264A
♋9803264B
♌9804264C
♍9805264D
♎9806264E
♏9807264F
♑98092651
♒98102652
♓98112653
象棋，扑克牌
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
♚9818265A
♛9819265B
♜9820265C
♝9821265D
♞9822265E
♟9823265F
♔98122654
♕98132655
♖98142656
♗98152657
♘98162658
♙98172659
♠98242660
♣98272663
♥98292665
♦98302666
♤98282664
♧98312667
♡98252661
♢98262662
希腊字母
图形样式用于HTML（在字符前加 &# ）用于 CSS （在字符前加 \ ） 和 JavaScript（在字符前加 \u ）
Α9130391
Β9140392
Γ9150393
Δ9160394
Ε9170395
Ζ9180396
Η9190397
Θ9200398
Ι9210399
Κ922039A
Λ923039B
Μ924039C
Ν925039D
Ξ926039E
Ο927039F
Π92803A0
Ρ92903A1
Σ93103A3
Τ93203A4
Υ93303A5
Φ93403A6
Χ93503A7
Ψ93603A8
Ω93703A9
slongzhang_
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中content属性,CSS3的content属性详解
weixin_33673142的博客
06-05 8979
CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。插入纯文字content:"插入的文章"，或者content:none不插入内容html:这是h1这是h2cssh1::after{content:"h1后插入内容"}h2::after{content:...
CSS content 添加 HTML 实体
wuxiaopengnihao1的博客
07-18 362
HTML提供了一些显示保留字符的方法。保留字符是为HTML保留的字符或基本键盘中不存在的字符。例如‘HTML实体。本示例使用CSS添加大于号和小于号，然后使用其对应的转义Unicode添加大于号和小于号。**示例**本示例使用使用CSS的HTML实体在文档中添加一些内容。...
CSS 特殊字符 ‘#‘ 、‘.’ 、‘*’、‘：’、空格“ ”、 ‘＞’ ， ‘，’
LlanyW的专栏
12-30 5443
上面的代码运行后，你会发现，页面中出现一个高20px，宽500px，红色背景的一个层，它可以表明#号是控制id为“csdn”的这个DIV的，也就是说css中#号是控制和他同名的网页元素的。*号是css中的通配符，意思是所有的标签都有的属性，表示所有的标签都遵循的统一样式。运行上面的代码你会发先，“第一个层”和“第二个层”拥有的是相同的css属性。上面的*号设置了页面中所有文字大小后面在没有单独设置的情况下为14像素。
图标元素动画效果
qq_22317389的博客
04-24 541
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
HTML+CSS个人笔记
qq_53233068的博客
09-10 4294
HTML+CSS个人笔记 HTML(Hyper Text Markup Language) 浏览器 什么是浏览器内核？ 浏览器所采用的渲染引擎（“Rendering Engine”）是浏览器最核心的组成部分，通俗的叫浏览器内核。 五大主流浏览器 浏览器 内核 简介 IE Trident 微软 仅支持windows Safari Webkit 苹果 Mac Firedox（火狐） Gecko Mozilla基金会 支持Windows、Linux、Mac Chrome（谷
浅谈html特殊字符 编码css3 content:”我是特殊符号”
12-30
项目中用到的一些特殊字符和图标 html代码 XML/HTML Code复制内容到剪贴板 <div u00a0class=cross></div>  css代码 CSS Code复制内容到剪贴板 .cross{  width: 20px;  height: 20px;  background-color:...
浅谈html特殊字符 编码css3 content:"我是特殊符号"
09-28
下面小编就为大家带来一篇浅谈html特殊字符 编码css3 content:"我是特殊符号"。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML+CSS布局(常用css控制属性)小结
09-25
几天一直在研究HTML+CSS布局。并没有把所有的布局都弄明白，只学了一点常用的css控制属性，此图只为说明功能，感兴趣的各位可以参考下哈，希望可以帮助到你
css常用代码大全(html+css代码).pdf
07-13
css常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdfcss常用代码大全(html+css代码).pdf
详解CSS 伪元素及Content 属性
12-11
 说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接添加两个class为.before和.after不是一样...
如何在前端项目中单独引入 ElementUI 图标以及使用
都随它大小便吧
01-18 6390
首先 element-ui 图标是基于字体文件的的形式实现的，如woff和ttf等。有时候一些需求用CSS的before和after为元素实现，自然用到 content 属性，而这个content不仅仅可以承载空格，还可以承载字符编码的。
css属性 content
liting_1992的博客
10-29 1万+
CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。 值 1.默认值：normal：: :before 和 :after 伪类元素中会被对待none 2.none ： 不会产生伪类 3.string 4.url：图片路径。URI 值会指定一个外部资源（图片的url）。如果该不能展示，它会被图片忽略或显示一些占位（如无图片标志）。 注：这种方式引入的图片，无法设置图片的宽高 5.attr()：
css和html中content,CSS中需要明白的content属性_html/css_WEB-ITnose
weixin_39884877的博客
06-29 630
如果你是一个前端开发者,可能知道有一些很好的伪类的改变,比如CSS content属性.如果不熟悉这些概念的,可能需要去复习一篇了.在这篇文章中.我们主要是看 content属性. CSS的 content 属性需要在 ::before和::after 伪类元素中使用. 属性会在页面上生成content中的内容,当然需要您的浏览器支持这个属性.content 属性的基本语法.content 属性的...
html中content属性,CSS3的content属性用法详解
weixin_34173656的博客
06-05 7200
Content属性应该算是使用最常用的一个css属性之一吧，比如我们创建一个聊天气泡、超链接的立体翻转特效、添加图标。都要使用到content属性，当然这个属性要结合：before和：after伪类使用。下面详细介绍它的用法。CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够...
WEB HTML知识整理 css
m0_46207738的博客
04-23 481
CSS文本样式——字体样式 值 说明 xx-small 设置字体大小,每个之从小到大的固定值
web前端知识点小结 （一）
xgq330409675的博客
06-19 2128
html标签含义 &amp;amp;amp;amp;amp;lt;!–…–&amp;amp;amp;amp;amp;gt;:定义注释 &amp;amp;amp;amp;amp;lt;!DOCTYPE&amp;amp;amp;amp;amp;gt; ：定义文档类型 &amp;amp;amp;amp;amp;lt;html&amp;amp;amp;amp;amp;gt;:html文档的总标签 &amp;amp;amp;amp;amp;lt;head
常用的HTML和CSS content属性特殊字符归纳
热门推荐
张鑫的博客
07-12 2万+
今天在做开发的时候，需要用到CSS的content属性，加入一些特殊字符来实现网页效果。但是特殊字符那么多，怎么可能记得住，所以谷歌百度搜索之后找到了一个比较全的，在这里进行归纳备忘，为了和我有相同需求的童鞋以及自己日后再用到的时候提供方便。 因为这些字符属于unicode字符集，所以，我们在使用的时候需要将添加这些字符的代码声明为UTF-8格式； 还有一点需要注意的是，部分字符在不同...
03_CSS字符属性
java_996的博客
11-04 277
CSS字符属性： 在字符属性中初步有以下四个属性 font-family：设置字符字体 font-size：设置字符大小 font-weight：设置字符粗细 font-style：设置字符分格 font-family属性 ​ 使用font-family：" "; 定义字体类型，可以给body标签设置来改变整个页面的文字字体 ​ 各种字体使用英文状态下的逗号隔开，浏览器会依次渲染，直到设置字体是系统有安装时，用当前字体显示，如果设置的字体电脑系统都没有安装则使用浏览器默认字体
css特殊符号
love_weiai的博客
11-16 2652
基本形状 ▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC ◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605 ✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8 ▣ 9635 25A3 标点,特殊符号 « 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D ‘ 8216 2018 ’ 82
HTML属性转换,使用Perl将CSS样式属性转换为HTML属性
最新发布
05-25
可以使用Perl中的正则表达式来实现CSS样式属性到HTML属性的转换。 以下是一个简单的Perl脚本示例，可以将CSS样式属性转换为HTML属性： ``` #!/usr/bin/perl use strict; use warnings; my %css_to_html = ( 'color' => 'text', 'background-color' => 'bgcolor', 'font-size' => 'size', ); while (my $line = <>) { chomp $line; $line =~ s/\s*([a-z-]+):\s*([^;]+);?/ $css_to_html{$1}="$2"/ge; print "$line\n"; } ``` 这个脚本将输入的CSS样式属性行转换为HTML属性行，并输出结果。在这个脚本中，我们使用了一个哈希表来存储CSS属性和HTML属性之间的对应关系。然后，我们使用正则表达式来匹配CSS属性行，并用哈希表中的对应HTML属性替换它们。 例如，如果我们有以下的CSS样式行： ``` p { color: red; background-color: yellow; font-size: 20px; } ``` 使用上面的脚本，将会得到以下的HTML属性行： ``` <p text="red" bgcolor="yellow" size="20px"> ``` 需要注意的是，这个脚本只是一个简单的示例，对于更复杂的CSS样式属性转换可能需要更复杂的正则表达式和更完整的哈希表。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值