html的特殊字符-css3 content:”特殊符号”应该如何使用

这次给大家带来html的特殊字符-css3 content:”特殊符号”应该如何使用,使用html的特殊符号应该如何使用的注意事项有哪些,下面就是实战案例,一起来看一下。

项目中用到的一些特殊字符和图标

html代码

css代码.cross{ width: 20px; height: 20px; background-color: #F3F9FF; border-radius: 10px; border: 1px solid #DBE6EF; display: inline-block; position: relative; bottombottom: 20px; rightright: 15px; } .cross:after{ content: "\2715";//特殊字符或形状 color: #a2b6c5; font-size: 12px; position: relative; left: 4px; bottombottom: 3px; cursor: pointer; }

就是一个圆圈里面带个叉叉

特殊字符和形状可以省去很多事情,整理了一下网上的,留着以后用

立即学习“前端免费学习笔记(深入)”;

基本形状  ▲ 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      ’ 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         | 124124 007C       ¦ 166 00A6     – 8211 2013      — 8212 2014 … 8230 2026   ¶ 182 00B6        ∼ 8764 223C   ≠ 8800 2260
法律符号 
® 174 00AE    © 169 00A9     ℗ 8471 2117     ™ 153 0099     ℠ 8480 2120

 

各种箭头 

⇠ 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

形状 
⇦ 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
向右的箭头 
➔ 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

 

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

 

数学 
½ 189 00BD  ¼ 188 00BC  ¾ 190 00BE  ⅓ 8531 2153  ⅔ 8532 2154  ⅛ 8539 215B  ⅜ 8540 215C  ⅝ 8541 215D  ‰ 8240 2030  % 37 0025  62 003E 
音乐符号 
♩ 9833 2669  ♪ 9834 266A  ♫ 9835 266B  ♬ 9836 266C  ♭ 9837 266D  ♯ 9839 266F 
对号、错号 
160 00A0  ☐ 9744 2610  ☑ 9745 2611  ☒ 9746 2612  ✓ 10003 2713  ✔ 10004 2714  ✕ 10005 2715  ✖ 10006 2716  ✗ 10007 2717  ✘ 10008 2718 
十字 
☨ 9768 2628  ☩ 9769 2629  ✝ 10013 271D  ✞ 10014 271E  ✟ 10015 271F  ✠ 10016 2720  ✚ 10010 271A  † 8224 2020  ✢ 10018 2722  ✤ 10020 2724  ✣ 10019 2723  ✥ 10021 2725 
星星、星号、雪花 
★ 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 
杂项 
☻ 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 
手型、铅笔、笔 
☜ 9756 261C  ☞ 9758 261E  ☝ 9757 261D  ☟ 9759 261F  ✌ 9996 270C  ✍ 9997 270D  ✎ 9998 270E  ✐ 10000 2710  ✏ 9999 270F  ✑ 10001 2711  ✒ 10002 2712 
天空、植物 
☽ 9789 263D  ☾ 9790 263E  ♂ 9794 2642  ♀ 9792 2640  ☿ 9791 263F  ♁ 9793 2641  ♃ 9795 2643  ♄ 9796 2644  ♅ 9797 2645  ♆ 9798 2646  ♇ 9799 2647 
星座 
♈ 9800 2648  ♉ 9801 2649  ♊ 9802 264A  ♋ 9803 264B  ♌ 9804 264C  ♍ 9805 264D  ♎ 9806 264E  ♏ 9807 264F  ♑ 9809 2651  ♒ 9810 2652  ♓ 9811 2653 
象棋,扑克牌 
♚ 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 
希腊字母 
Α 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

相信看了这些案例你已经掌握了方法,更多精彩请关注创想鸟其它相关文章!

相关阅读:

怎样用h5的sse服务器发送EventSource事件

H5的本地存储和本地数据库详细介绍

h5如何实现记住密码功能

以上就是html的特殊字符-css3 content:”特殊符号”应该如何使用的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545597.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 17:07:54
下一篇 2025年12月21日 17:08:05

相关推荐

  • 学会从头开始学习CSS,掌握制作基本网页框架的技巧

    从零开始学习CSS,掌握网页基本框架制作技巧 前言: 在现今互联网时代,网页设计和开发是一个非常重要的技能。而学习CSS(层叠样式表)是掌握网页设计的关键之一。CSS不仅可以为网页添加样式和布局,还可以为用户呈现独特且具有吸引力的页面效果。在本文中,我将为您介绍一些基本的CSS知识,以及一些常用的代…

    2025年12月24日
    200
  • 揭秘Web标准涵盖的语言:了解网页开发必备的语言范围

    在当今数字时代,互联网成为了人们生活中不可或缺的一部分。作为互联网的基本构成单位,网页承载着我们获取和分享信息的重要任务。而网页开发作为一门独特的技术,离不开一些必备的语言。本文将揭秘Web标准涵盖的语言,让我们一起了解网页开发所需的语言范围。 首先,HTML(HyperText Markup La…

    2025年12月24日
    000
  • 揭开Web开发的语言之谜:了解构建网页所需的语言有哪些?

    Web标准中的语言大揭秘:掌握网页开发所需的语言有哪些? 随着互联网的快速发展,网页开发已经成为人们重要的职业之一。而要成为一名优秀的网页开发者,掌握网页开发所需的语言是必不可少的。本文将为大家揭示Web标准中的语言大揭秘,介绍网页开发所需的主要语言。 HTML(超文本标记语言)HTML是网页开发的…

    2025年12月24日
    400
  • 常用的网页开发语言:了解Web标准的要点

    了解Web标准的语言要点:常见的哪些语言应用在网页开发中? 随着互联网的不断发展,网页已经成为人们获取信息和交流的重要途径。而要实现一个高质量、易用的网页,离不开一种被广泛接受的Web标准。Web标准的制定和应用,涉及到多种语言和技术,本文将介绍常见的几种语言在网页开发中的应用。 首先,HTML(H…

    2025年12月24日
    000
  • 网页开发中常见的Web标准语言有哪些?

    探索Web标准语言的世界:网页开发中常用的语言有哪些? 在现代社会中,互联网的普及程度越来越高,网页已成为人们获取资讯、娱乐、交流的重要途径。而网页的开发离不开各种编程语言的应用和支持。在这个虚拟世界的网络,有许多被广泛应用的标准化语言,用于为用户提供优质的网页体验。本文将探索网页开发中常用的语言,…

    2025年12月24日
    000
  • 深入探究Web标准语言的范围,涵盖了哪些语言?

    Web标准是指互联网上的各个网页所需遵循的一系列规范,确保网页在不同的浏览器和设备上能够正确地显示和运行。这些标准包括HTML、CSS和JavaScript等语言。本文将深入解析Web标准涵盖的语言范围。 首先,HTML(HyperText Markup Language)是构建网页的基础语言。它使…

    2025年12月24日
    000
  • CSS 内容属性详解:content、counter 和 quotes

    CSS 内容属性详解:content、counter 和 quotes CSS(层叠样式表)是前端开发中不可或缺的一部分,它可以帮助我们美化网页并增强用户体验。在CSS中,有一些特殊的属性可以用于控制文本内容的显示,其中包括 content、counter 和 quotes。本文将详细介绍这些属性,…

    2025年12月24日
    000
  • CSS 超链接属性解析:text-decoration 和 color

    CSS 超链接属性解析:text-decoration 和 color 超链接是网页中常用的元素之一,它能够在不同页面之间建立连接。为了使超链接在页面中有明显的标识和吸引力,CSS 提供了一些属性来调整超链接的样式。本文将重点介绍 text-decoration 和 color 这两个与超链接相关的…

    2025年12月24日
    000
  • 看看这些前端面试题,带你搞定高频知识点(一)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:给定一个元素,如何实现水平垂直居中?…

    2025年12月24日 好文分享
    300
  • 看看这些前端面试题,带你搞定高频知识点(二)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:页面导入样式时,使用 link 和 …

    2025年12月24日 好文分享
    200
  • 看看这些前端面试题,带你搞定高频知识点(三)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:清除浮动有哪些方式? 我:呃~,浮动…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(四)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:请你谈一下自适应(适配)的方案 我:…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(五)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:css 如何实现左侧固定 300px…

    2025年12月24日 好文分享
    000
  • 带你吃透CSS3属性:transition 与 transform

    本篇文章带大家了解下css 中的 transition (过渡) 和 transform (动画) 属性,这两个属性的参数确实比较复杂,它们可以做出 css 的一些基础动画效果,平移,旋转,倾角……等等,这些也是我早期学习 css 的难记易忘之处,今天给大家详细总结出来。 一…

    2025年12月24日 好文分享
    000
  • 一文详解CSS3中的Flex布局

    本篇文章带大家了解一下css3中的flex布局,希望对大家有所帮助! 简介 什么是Flex布局 Flex是Flexible Box 的缩写,也称为弹性盒子布局。 Flex布局组成: flex容器(flex container)flex项(flex items)主轴(main axis)交叉轴(cro…

    2025年12月24日 好文分享
    000
  • 【整理总结】这些高级CSS技巧,你会几种?

    本篇文章带你玩转css,分享一些高级css技巧,快来看看你是否都会呀! 学习目标 能够使用精灵图能够使用字体图标能够写出 CSS 三角能够写出常见的 CSS 用户界面样式能够说出常见的布局技巧 精灵图 1. 为什么需要精灵图? 客户端要访问一个网页时,浏览器会向服务器发送请求,服务器接收到请求后,会…

    2025年12月24日 好文分享
    000
  • 手把手教你使用CSS实现酷炫六边形网格背景图

    本篇文章给大家分享不规则图形背景排版高阶技巧,介绍一下如何使用css实现酷炫六边形网格背景图,希望对大家有所帮助! 今天,收到一个很有意思的提问,如何实现类似如下的背景效果图: 嗯?核心主体是由多个六边形网格叠加形成。 立即学习“前端免费学习笔记(深入)”; 那么我们该如何实现它呢?使用纯 CSS …

    2025年12月24日 好文分享
    000
  • CSS新特性学习:方向裁切overflow:clip

    本篇文章将介绍一个新特性,从 chrome 90 开始,overflow 新增的一个新特性 — overflow: clip,使用它,轻松的对溢出方向进行控制。 overflow: clip 为何 首先,简单介绍下 overflow: clip 的用法。 overflow: clip: …

    2025年12月24日 好文分享
    000
  • 看看CSS如何利用计数器来实现长按点赞累积动画

    本篇文章给大家分享一个css自定义计数器的使用小技巧,聊聊如何利用它实现长按点赞累积动画,希望对大家有所帮助! 【推荐学习:css视频教程】 在某条 APP 中,如果长按点赞,会出现这样花里胡哨的动画,如下 立即学习“前端免费学习笔记(深入)”; 这个动画有两部分组成,其中这个随机表情的实现可以参考…

    2025年12月24日 好文分享
    000
  • 详解用SVG给 favicon 添加标识

    怎么使用svg给 favicon 添加标识?下面本篇文章给大家介绍一下使用 svg 生成带标识的 favicon的方法,希望对大家有所帮助! 之前做了一个 Chrome 插件,可以根据地址的不同生成不同的图标,这样可以很方便的区分不同的开发环境,效果如下 主要实现过程其实不复杂,首先获取网站 fav…

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信