剑阁峥嵘而崔嵬,一夫当关,万夫莫开 🏆 @蜀道难
🔎 了解博主
- 📢 个人简介: 哈喽！小伙伴们，我是水香木鱼，水瓶座一枚 😜 来自于黑龙江 庆安
- 🏡 本站首页: 水香木鱼
- 🚀 博客主页: 陈春波 👉 开源博客【纯前端开发-
Vue3+TS+Ant Design of Vue】，来 Star⭐Gitee吧 ! 拥有属于我们自己的 Blog。 - 🎨 系列专栏：邂逅HTML
- 📖 人生格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。
- 🌏 小目标: 成为前端布道师
注意在 🎨文末 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"> ─</i>
06、数学运算符编码
| 演示效果 | 十进制编码 | 十六进制编码 | 实体 | 字符说明 |
|---|---|---|---|---|
| ∀ | ∀ | 2200 | ∀ | FOR ALL |
| ∂ | ∂ | 2202 | ∂ | PARTIAL DIFFERENTIAL |
| ∃ | ∃ | 2203 | ∃ | THERE EXISTS |
| ∅ | ∅ | 2205 | ∅ | EMPTY SET |
| ∇ | ∇ | 2207 | ∇ | NABLA |
| ∉ | ∉ | 2202 | ∉ | NOT AN ELEMENT OF |
| √ | √ | 221A | √ | SQUARE ROOT |
07、箱型图编码
| 演示效果 | 十进制编码 | 十六进制编码 | 字符说明 |
|---|---|---|---|
| ─ | ─ | 2500 | 横线 |
| │ | │ | 2502 | 竖线 |
| ┄ | ┄ | 2504 | 横向三点 |
| ┆ | ┆ | 2506 | 竖向三点 |
| ┊ | ┊ | 250A | 竖向四点 |
| ┌ | ┄ | 250C | 左上角 |
| ┐ | ┐ | 2510 | 右上角 |
| └ | └ | 2514 | 左下角 |
| ┘ | ┘ | 2518 | 右下角 |
| ╬ | ╬ | 256C | 菊花 |
| ╳ | ╳ | 2573 | × |
08、块元素编码
| 演示效果 | 十进制编码 | 十六进制编码 | 字符说明 |
|---|---|---|---|
| ▙ | ▙ | 2599 | 象限左上，左下，右下 |
| ▚ | ▚ | 259A | 象限左上右下 |
| ▞ | ▞ | 259E | 象限右上和左下 |
| ▐ | ▐ | 2590 | 正确的半块 |
注意：为了节约宝贵时间,更多的字符编码, 移步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>
更多unicode 移步52uni
博主致谢
非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了
(前端字符编码大全)，希望可以帮到大家，谢谢。
👉 如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
😛 您的支持就是我更新的最大动力。👇
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
