心情 萌新的 深夜探索富文本编辑器 之旅~

[zz137]

✨【萌新指北】✨ 富文本编辑器：从Word到HTML，轻松排版入门指南 author: zz137
🌸 ⭐ 🎀 ⭐ 🍥 🍥 ⭐ 🎀 ⭐ 🌸
🌟	最近研读wiki发现，咱们论坛从原来的 Discuz! 换成了现在的 Invision Community 后，旧有的排版教程已经不适用了。有几位大佬把新框架的排版逻辑研究得明明白白，但对于刚接触富文本编辑的新人来说，想自然地理解这一切可能还是有点门槛。 于是我做了一些测试，写了一份浅显的科普+引导，致力于用最通俗的话解释排版原理，并提供一些即拿即用的技巧。希望能帮你在发帖、写文章时省点力气。 如果你已经有较高的排版需求，并且想深入学习，强烈推荐去看看大佬们的教程。我这篇只负责“引导”和“日常够用”的部分~
🎵 ✨ 🎵 ✨ 🎵 萌混过关分割线 🎵 ✨ 🎵 ✨ 🎵
🎁	先说结论！ 如果对排版不那么需要：建议先在 Word 里编辑好，再直接粘贴到论坛编辑框；或是复制其他帖子中的精华。 如果你愿意学习，对美要求更高：F12大法+论坛编辑器+查资料，兼具跨设备和各种花样排版。 这里有一些常见的格式和特殊符号： 剧透 怎么用？直接复制，或F12查看HTML代码！ ⚠️施工路牌喵⚠️ 🚧 施工中喵 🚧 本帖刚落地，正在搭帐篷～ 💬 欢迎投喂建议 / 揪bug  |  🐾 用力敲键盘就ok ⚠️ 小心萌翻 · 随时变形  ⚠️ 严肃版： FBI WARNING    本帖正在施工，欢迎提出建议和问题！ ~正文 各种各样的box：模拟按钮、会变白的圆角按钮、。 互动效果：点我跳转一楼（需根据用户ID用）、返回顶部、点我跳转第二页（什么时候我才能有第二页啊哭）、打开必应搜东西（这些都是链接）。 常见装饰emoji： 剧透 ✨ 闪光／星星／魔法感 ✨ ⭐ 🌟 💫 ⚡ 🌠 🔥 💥 💢 💤 💨 〰️ ➰ 〽️ ❤️ 心形／情感点缀 ❤️ ❤️ 🧡 💛 💚 💙 💜 🖤 🤍 🤎 💖 💗 💓 💕 💞 💘 💝 💟 ❣️ 🌸 花朵／植物／自然 🌸 🌼 🌻 🌺 🥀 🌹 🏵️ 💐 🍂 🍃 🍁 🌿 ☘️ 🍀 🌾 🎋 🎍 🎀 物品／装饰小物 🎀 🧸 🎈 🎉 🎊 🎁 🏮 🧧 🔔 🕯️ 📌 📍 🔖 🧷 💌 🎶 🎵 🧩 🔹 几何／线条／边框 ▪️ ▫️ ◻️ ◼️ 🔘 🔵 🟢 🟡 🟠 🟣 🔴 ⚫ ⚪ 🟤 🔸 🔹 🔶 🔷 🔲 🔳 ➕ ➖ ✖️ ➗ ♾️ 🔁 🔂 🔀 🔃 🌀 ☁️ 云／天气／氛围 ☁️ ⛅ 🌈 🌙 ☀️ 🌟 💧 ❄️ ☃️ 🌊 🌪️ 🕳️ 🦋 动物／小可爱点缀 🦋 🐞 🐝 🕊️ 🐚 🌟 来自gocallle的分界线！ 引用 是不是觉得光一条线太逊色了？其实<hr>可以通过各种形式来改变哦，那么请看下面：（可以复制代码粘上去（网上找的））里面的123456对应的就是显示的样子   显示隐藏内容 1.<hr style=" height:2px;border:none;border-top:2px dotted #185598;"> 2.<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"> 3.<hr style="height:1px;border:none;border-top:1px solid #555555;"> 4.<hr style="height:3px;border:none;border-top:3px double red;"> 5.<hr style="height:5px;border:none;border-top:5px ridge green;"> 6.<hr style="height:10px;border:none;border-top:10px groove skyblue;"> 音频： 视频： 阿斯蒂芬：
💠💠💠 ❄️ ✿ ❄️ 💠💠💠
🔍	一点小科普：纯文本 vs 富文本 我们平时接触的文字内容，大致可以分成两类： 纯文本：只有字符本身，没有任何格式。比如在微信聊天框、记事本、B站评论区里输入的文字——你没法单独把某个字变大，更别提用表格排版了。 富文本：带有格式信息的文字。比如在浏览器、Word 里看到的文字，可以设置五颜六色、大小不一的样式，还可以加粗、超链接。 为什么浏览器里能呈现出千变万化的文字？ 主要是 HTML（超文本标记语言） 在背后整活。HTML 通过成对的标签（例如 <p>、<strong>）告诉浏览器如何渲染。万变不离其宗，Word 的底层也用了类似 XML 的标记语言，正因如此， Word 里排好的内容可以直接复制到论坛，格式基本保留。
🎈 🎈 🎈 🎈 分割线 🎈 🎈 🎈 🎈
📄	为什么在 Word 里排版？ 直观且零门槛：无需过多折腾。Word 是经典的所见即所得编辑器，点哪里改哪里，不用记代码。大多数人都会用 Word，复制粘贴就能发帖。 格式兼容度高：论坛引擎对 Word转化富文本格式的支持相当不错。 但是，Word 有限！ ⚠️ 小提醒：相似但不同，偶尔也会有“水土不服”——比如 Word 表格里插入的图片，复制过来可能会消失。遇到这种情况，需要手写 HTML 解决。如果可以的话，学一些HTML会有很大的帮助。
🎐 🎐 🎐 ✨ 🎏 ✨ 🎐 🎐 🎐
🧙	那 HTML 有什么优势吗？ 剧透 小剧场（我是构史大王！） zz137：jojo，用Word排版帖子的能力是有极限的。 乔纳森：嗯？ zz137：我从多年的论坛灌水生涯中学到一件事…… zz137：越是折腾Word里的表格、缩进、自动编号，就越会发现用Word排版帖子的能力是有极限的…… zz137：除非不用Word。 乔纳森：你到底想说什么？ （zz137掏出HTML编辑器） zz137：我受够了！我不做用Word排版帖子的人了，JOJO！ （迪奥亮出 F12 与 Ctrl+c/v ） zz137：我要直接写HTML！ 如果你对网页代码不陌生，直接手写 HTML （应该还没有大佬是完全手写的吧）来排版会更自由稳妥： 兼容性更强：Word 的样式在手机上看可能变形，手写 HTML 可做到响应式布局。 精细控制：边框、间距、背景色……都能按你的想法来。 高级操作上限高：音视频、各种div+span等着你……
📚	我想学排版，从哪开始？（点击进入） 论坛 Wiki：上面有前辈们详细教程的指路，Word 和 HTML(主要) 法都有。 剧透 免责声明：仅代表个人观点，请酌情参考。学排版只能学到方法，纵然会画工，需要心中有沟壑，对美有所理解才能画出千里江山。内容的深度和创意才是帖子真正的价值。（太严肃了吧） 个人读后感和建议：不用HTML的，看(67)45就行；想精通的还是都看为好。 1、次元魔女的表格魔法教室【第n期】：HTML，简单讲述了表格里放图的操作。 2、𝓶𝓪𝓰𝓲𝓬𝓪𝓵表格魔法 ——魔女酱的表格魔法教程的一些解析/补充以及一些“魔法”的测试：HTML，解释了为什么z4a的图片都看不到， 3、𝓶𝓪𝓰𝓲𝓬𝓪𝓵表格魔法 第二弹 ——音视频插入、不透明度、分割线及杂项 (文字及视频教程)：HTML，内容全面，甚至还有视频解说，还对HTML标签有形象的比喻。不过对于音频的内容较今有一处过时，无需使用<video>，<audio>内带src即可（详见前文剧透）。 4、【教程】萌新表格排版教学（随便打了个前缀hhh）：Word+论坛编辑器的表格的简易教程。 5、关于萌新因为不会排版又看不懂魔女酱的教程而气急败坏的从零开始的实战排版学习记录贴？：Word+HTML，记录了一位萌新按照其他大佬帖子自学的过程。 6、聊聊排版吧：2017超早帖子，那个时代还是一片荒芜。 7、新旧更替——一点关于新框架下排版的初步概念引导：远古时代，讲述了一些基础“天文现象”。 发布时间晚的帖子通常内容更先进一些，由发布顺序排序：7641253。 新人不必在意HTML中知识之多，只需了解有行距啊之类的相关概念，用的时候再找、或者问AI，平时可以收藏一些感觉排版好的帖子，有空时研究，或排版时复制。知道“排版就是俄罗斯套娃、盒子嵌套而已，描述清楚了浏览器才会按你预想排版”才是最重要的。 HTML参考资料：有助于知其所以然，推荐 菜鸟教程 和 W3School 。 🎯 只要肯尝试，很快就能排出整洁漂亮的文章～
希望这些小经验能帮到大家。如果有不对的地方，也欢迎大佬们指正补充！ 本萌新在此谢过～（光速逃走）

大家可以参考的示例：

青玉案·元夕 宋 · 辛弃疾 东风夜放花千树，更吹落、星如雨。 宝马雕车香满路。 凤箫声动，玉壶光转，一夜鱼龙舞。 蛾儿雪柳黄金缕，笑语盈盈暗香去。 众里寻他千百度， 蓦然回首，那人却在，灯火阑珊处。 ✦ 灯火阑珊 人间惊鸿 ✦

🎧🎬 动画 · 新番 每周追番 · 热血与治愈 《间谍过家家》《咒术回战》 🎮🕹️ 游戏 · 佳作 开放世界 · RPG · 独立游戏 《去月球》《星穹铁道》《明日方舟》 🎌🌸 什么是「二次元」？ 指动画、漫画、游戏、轻小说等二维虚拟世界。 它带来感动、梦想与陪伴，已成为当代青年文化的重要部分。 ✨ 热爱即正义 · 保持少年心 ✨ 🎐🎴🍡

测试区（废墟一片……）

剧透

 <测试>

可用：点我跳转一楼 点我跳转第二页

【1】href+id锚点跳转

点我跳转到下面答案

跳转成功！能看到这个说明锚点没被过滤

【2】button按钮

点我弹窗

【3】style文字颜色样式

红色字 和 蓝底白字

add:

🔹 文字样式大测试 🔹

红 · 蓝 · 绿

黄黑 · 黑白 · 粉紫

12px · 16px · 24px · 32px

normal粗细 · 粗体bold · 更粗900 · 斜体

下划线 · 删除线 · 上划线 · 波浪下划线

宋体 · 微软雅黑 · 等宽Courier · 手写体

字间距2px · 紧缩-1px · 单词 间距 8px

渐变背景文字

普通阴影 · 发光红影 · 立体偏移

绿圆 · 红方

【4】details标签,被转成span吗

点我展开隐藏内容在这里

【5】iframe嵌入

【6】onmouseover鼠标悬停变色

把鼠标放我身上变橙色

【7】href普通超链接跳转

打开必应搜东西

【8】script，被露头就秒了大雾

【9】audio音频

【测试块10】embed图片

正规detail

剧透

啦啦啦

 

接着测：

【基础核心排版标签】

核心排版: 粗体, 斜体, 下划线, 删除线, code, kbd, samp

这里是一个 blockquote 引用，通常会缩进。

• 无序列表项 1
• 无序列表项 2

1. 有序列表项 1
2. 有序列表项 2

// 代码块
function test(){
    console.log('Hello'); 
}

---

 

看来还是标准的好用：

#include <cstdio>
using namespace std;
int main() {
  printf("hello %d",1);
  return 0;
}

表格示例

表头1	表头2
单元格1	单元格2

【一般文字样式】

模拟按钮

模拟通知卡片

【可能的增量技术】

◉ 上/下标: 文字^上标和_下标

◉ 缩写: HTML (鼠标悬停查看全称)

◉ 简单的SVG:  蓝色圆形=SVG存活。

◉ Data URI 测试: 点击查看数据URI文字

◉ 60% - Meter 元素

◉ 70% - Progress 元素

◉ 漢ㄏㄢˋ - Ruby 注音元素

 

半透明渐变黑色区域

宽度50%，水平居中。
背景为半透明黑色渐变（从较深到较浅）。

✅ 所有样式均内联，无预设 style 标签。

 

圆角框

修改日志：

剧透

计划事项：添加个人攻略，降低门槛，使HTML学习速成化；修改主题标题和标签。

2026/4/27 21:19 添加对各个攻略的观看建议与个人对于HTML排版的看法。
2026/4/27 15:27 修改正文措辞；修复了内部剧透因项目列表圆点颜色为白而导致的不可视问题。
2026/4/27   5:38 修改了带不良情感色彩的词语，加入了图片+tavbe进行正文排版。
2026/4/26   5:30 将攻略性质改为引导性质；修改至语言通俗；使用div+span进行纯蓝背景排版。
2026/4/26   2:26 加入两个示例（"二次元"与"元夕"）。
2026/4/25   2:48 添加修改日志，添加攻略性质正文，将测试内容收纳。
2026/4/25   2:12 测试任务"HTML中的大多数标签是否可用"完成，解除版主观看限制。

<留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改><留一行方便改>

1 小时前，由zz137修改
不能当版本说明来用的修改理由不是好功能！

[ㅤ凯ㅤ]

哇喔~这真是厉害了啊！！原来是超级程序员萌新啊！摸摸~

[safcz]

帮你 @tetrohedro上一位排版探索者

还有MCIN也是通过不断地探索成了同盟排版大佬呢，可以和他交流一下