前端字符编码-木鱼百科最基础但你不一定都知道

Posted 2022-04-26 水香木鱼

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难

🔎 了解博主

1. 📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江 庆安
2. 🏡 本站首页: 水香木鱼
3. 🚀 博客主页: 陈春波 👉 开源博客【纯前端开发-Vue3+TS+Ant Design of Vue】，来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。
4. 🎨 系列专栏：邂逅HTML
5. 📖 人生格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
6. 🌏 小目标: 成为前端布道师

---

注意在 🎨文末 09 有彩蛋呦!

📑 文章内容

前端字符实体编码,它来喽。🔎 干货 每个人都会寻找到,重要的是寻到它后学会充分的利用才是关键。 —赠予内卷人

实体编码结构: 字符编码以 & (开头) + 实体英文 + ;(结尾)

---

01~05 仅以实体字符编码展示【十进制 和十六进制在此不作展示】 一🚀

01、常用字符编码

编码实体	字符说明	字符演示
 	空格(单倍间距)	水 香 木鱼
 	空格 双倍间距	水 香 木鱼
 	空格(窄间距)	水 香 木鱼
–	短破折号	–
—	长破折号	—
‘	左单引号	‘
’	右单引号	’
‚	单引号	‚
“	左双引号	“
”	右双引号	”
†	匕首	†
‡	双剑号	‡
•	项目符号	•
…	水平省略	…
‰	千分率信号	‰
‹	左单角引号	‹
›	右单角引号	›
®	注册商标	®
&	与	&
⁄	斜线	⁄
×	乘号	×
÷	除号	÷
©	版权	©
™	商标	™
§	小节	§
⁄	斜线	⁄
˜	波浪符	˜
ˆ	上单角引号	ˆ
⁄	斜线	⁄

02、货币字符编码【实体】

编码实体	字符说明	字符演示
€	欧元	€
£	镑（pound）	£
¥	人民币	¥
¢	分（cent）	¢
ℜ	雷亚尔	ℜ

03、货币字符编码【十进制】

十进制 以&#(开头) + 十进制字符 + ;(结尾) 【适用于IT金融行业】

十进制编码	字符说明	字符演示
₠	欧元货币符号	₠
₡	科朗符号	₡
₢	克鲁塞罗符号	₢
₣	法国法郎符号	₣
₤	里拉符号	₤
₥	米耳征	₥
₦	奈拉	₦
₧	比赛塔	₧
₨	卢比符号	₨
₩	赢得了标志	₩
₪	新谢克尔标志	₪
₫	董签	₫
€	欧元	€
₭	基普符号	₭
₮	图格里克标志	₮
₯	德拉克马符号	₯
₰	德国便士符号	₰
₱	比索符号	₱
₲	瓜拉尼符号	₲
₳	澳大利亚元符号	₳
₴	格里夫尼亚符号	₴
₵	塞地符号	₵
₶	里弗符号	₶
₷	SPESMILO标志	₷
₸	坚戈标志	₸
₹	印度卢比符号	₹
₺	土耳其里拉符号	₺
₻	北欧标志符号	₻
₼	英格兰符号	₼
₽	卢布	₽
₾	拉里	₾
₿	比特币	₿

04、字母式编码

编码实体	字符说明	字符演示
ℑ	影像	ℑ
℘	威尔	℘
Ω	欧姆	Ω
℧	姆欧	℧
ℵ	警戒	ℵ

05、箭头字符编码

编码实体	字符说明	字符演示
←	左箭头	←
↑	上箭头	↑
→	右箭头	→
↓	下箭头	↓
↔	左右箭头	↔
↵	左下角	↵
⇐	左边双箭头	⇐
⇑	上双箭头	⇑
⇒	右双箭头	⇒
⇓	下双箭头	⇓
⇔	左右双箭头	⇔
↵	左下角	↵
↵	左下角	↵
↵	左下角	↵

---

---

以下06~结尾字符编码 以十进制、十六进制 作出如下展示:

注意：使用前需要了解 【十进制】 与【十六进制】Unicod编码的应用场景

• JS 【十六进制】
• 网页 【十进制】

在jS 中输出方式

/*可使用转义字符"\\u + 16进制编码*/
<script type="text/javascript">
   console.log("\\u2500","\\u2500");
   //铁汁们,在开发时 可以去打印属于自己风格的编码呦 一💕
</script>

在网页 中输出方式

<!--可使用&# + 十进制编码-->
<i style="font-size:99px"> &#9472;</i>

06、数学运算符编码

演示效果	十进制编码	十六进制编码	实体	字符说明
∀	&#8704	2200	∀	FOR ALL
∂	&#8706	2202	∂	PARTIAL DIFFERENTIAL
∃	&#8707	2203	∃	THERE EXISTS
∅	&#8709	2205	∅	EMPTY SET
∇	&#8711	2207	∇	NABLA
∉	&#8713	2202	∉	NOT AN ELEMENT OF
√	&#8730	221A	√	SQUARE ROOT

更多数学运算符编码请移步 W3c 中文网

07、箱型图编码

演示效果	十进制编码	十六进制编码	字符说明
─	&#9472	2500	横线
│	&#9474	2502	竖线
┄	&#9476	2504	横向三点
┆	&#9478	2506	竖向三点
┊	&#9482	250A	竖向四点
┌	&#9476	250C	左上角
┐	&#9488	2510	右上角
└	&#9492	2514	左下角
┘	&#9496	2518	右下角
╬	&#9580	256C	菊花
╳	&#9587	2573	×

更多箱型图编码请移步 W3c 中文网

08、块元素编码

演示效果	十进制编码	十六进制编码	字符说明
▙	&#9625	2599	象限左上，左下，右下
▚	&#9626	259A	象限左上右下
▞	&#9630	259E	象限右上和左下
▐	&#9616	2590	正确的半块

更多块元素编码请移步 W3c 中文网

注意：为了节约宝贵时间,更多的字符编码, 移步w3school 自行查找

---

09、酷炫美化console.log

注意:以下 格式不可格式化,否则图形会导致变形,建议 选中copy👇

<script type="text/javascript">
    var res = `
       __  __     ____         _       __           __    __
      / / / /__  / / /___     | |     / /___  _____/ /___/ /
     / /_/ / _ \\\\/ / / __ \\\\    | | /| / / __ \\\\/ ___/ / __  / 
    / __  /  __/ / / /_/ /    | |/ |/ / /_/ / /  / / /_/ /  
   /_/ /_/\\\\___/_/_/\\\\____/     |__/|__/\\\\____/_/  /_/\\\\__,_/                                                             
`
console.log(res,"酷炫的字符编码")
</script>

佛祖保佑，让BUG 消失

<script type="text/javascript">
let Nobug = [
    "                   _ooOoo_",
    "                  o8888888o",
    "                  88\\" . \\"88",
    "                  (| -_- |)",
    "                  O\\\\  =  /O",
    "               ____/`---'\\\\____",
    "             .'  \\\\\\\\|     |//  `.",
    "            /  \\\\\\\\|||  :  |||//  \\\\",
    "           /  _||||| -:- |||||-  \\\\",
    "           |   | \\\\\\\\\\\\  -  /// |   |",
    "           | \\\\_|  ''\\\\---/''  |   |",
    "           \\\\  .-\\\\__  `-`  ___/-. /",
    "         ___`. .'  /--.--\\\\  `. . __",
    "      .\\"\\" '<  `.___\\\\_<|>_/___.'  >'\\"\\".",
    "     | | :  `- \\\\`.;`\\\\ _ /`;.`/ - ` : | |",
    "     \\\\  \\\\ `-.   \\\\_ __\\\\ /__ _/   .-` /  /",
    "======`-.____`-.___\\\\_____/___.-`____.-'======",
    "                   `=---='",
    "^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
    "         佛祖保佑       愿永无BUG"
]
console.log(Nobug.join('\\n'));
</script>

时间美化

<script type="text/javascript">
let styleone = 'background: #00cc00; color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px'
let styletwo = 'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px'
console.log("%c响应数据%c"+new Date(),styleone,styletwo)
</script>

版权声明

<script type="text/javascript">
/* 样式代码 */
        var styleTitle1 = `font-size: 20px;font-weight: 600;color: rgb(244,167,89);`
        var styleTitle2 = `font-style: oblique;font-size:14px;color: rgb(244,167,89);font-weight: 400;`
        var styleContent = `color: rgb(30,152,255);`

        /* 内容代码 */
        var title1 = '👩‍🚀 水香木鱼 '
        var title2 = '生活如水,你对它柔,它便对你柔。'

        // => 读取配置型（在配置文件里配置这些会变动的网址）
        var openUrl = 'https://shadow.org.cn'
        var content = `
        版 本 号：2.1.0    【博客版本：0.01】
        编译日期：2022-4-23 01:16:16 
        版权声明：
        1. 博客版权完全属于 "水香木鱼".
        2. 博客中文章，任何个人和机构在遵守下列条件的前提下授权永久使用：
            1）可进行任何形式的转载,前提是标注 转载于[水香木鱼](文章地址)
            2）保留此版权信息在控制台输出,我们保留对此版权信息的最终解释权.
        🏠Blog主页:  $openUrl`
        console.log(`%c$title1 %c$title2%c$content`, styleTitle1, styleTitle2, styleContent)
</script>

博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了(前端字符编码大全)，希望可以帮到大家，谢谢。

👉 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟

😛 您的支持就是我更新的最大动力。👇

---

往期精彩

前端css解决z-index 上层元素遮挡下层元素的方法

vue实现echarts可视化【定制主题 + 通用写法】

前端实现div标签p标签等吸顶效果【Vue+原生JS组合写法】

OCR文字识别【前端渲染，后端进行逻辑处理】

vue实现按钮弹框【弹出图片、视频、表格、表单等】