1. 引言

博主最近在写公众号时发现公众号编辑器虽然整体看起来非常 精简、清爽（如下图），但在实际使用中也暴露出一个比较明显的问题：一旦想实现稍微复杂一点的页面效果，仅靠编辑器里“肉眼可见”的那些控件，几乎很难完成。

尤其是当你看到一些设计精美、结构复杂的公众号文章时，很容易产生一个疑问：

这些页面，到底是怎么做出来的？

|

如果从 技术实现的角度 来推测，本质问题其实只有一个：

公众号到底支持哪些 HTML 标签和样式？

但比较遗憾的是，博主在网上翻了很久，并没有找到一篇官方或系统性说明的文章。搜索结果要么是零散经验帖，要么就是一堆需要付费、直接粘贴模板的网站，几乎没人真正讲清楚：

公众号究竟“允许”我们用到什么程度？

于是，“如何搞清楚公众号支持哪些 HTML / CSS 能力”，就成了本文要解决的核心问题。

这一次，博主借助 AI 的能力，从编辑器本身出发，一步一步拆解、分析、验证，尝试揭开公众号富文本背后的真实边界。

2. 公众号支持的能力

从公众号编辑器的顶部工具栏可以看到，官方已经把可用能力几乎全部明牌摆出来了，整体可以分为两大类：多媒体能力 和 扩展能力。

2.1 多媒体

目前编辑器原生支持的多媒体类型如下：

• 图片：支持从本地上传、图片库选择、微信扫码上传、AI配图；
• 视频：支持从视频库、公众号/服务号内容链接、视频详情页和腾讯视频链接；
• 音频：支持从素材库、视频号、搜索音乐；

2.2 扩展能力

除了多媒体，公众号还提供了一些“业务级组件”，包括：

• 超链接：仅支持公众号文章；
• 小程序：微信打开小程序，右上角复制链接，并支持文字、图片以及小程序卡片的形式展现；
• 模板：自己保存的公众号模板，直接插入即可；
• 投票：新建投票和选择已新建的投票；
• 搜索：设置文章搜索关键词，帮助用户更快捷检索号内关联内容
• 地理位置：插入地理位置
• 视频号：插入视频号
• 其它：账号名片、问答、礼物、收入变现。

3. 页面分析

要搞清楚公众号真正支持哪些 HTML / CSS，最直接的办法不是猜，而是 反向分析页面结构。这样，编辑器支持的所有能力，都会“汇聚”到同一个页面中，具体做法也很简单：

• 新建一篇公众号文章
• 把编辑器中所有能插的组件、能力，尽可能都插一遍
• 使用公众号的预览功能
• 对预览页面的 HTML 结构进行分析

接下来，博主使用 Codex 对页面结构进行分析，逐一提取被保留下来的标签、属性和样式，最终整理出了公众号当前相对稳定、可用的能力范围。下面是整理后的结果。

3.1 基础 HTML 标签（文本排版）

标签	说明
p, br	用途：段落、换行 *安全属性*：style(行高/颜色/字号/对齐/字间距)、class *备注*：公众号会在外层再包一层 <section>，行高默认约 1.6–1.8。
span	用途：行内装饰 *安全属性*：style(颜色/字体/背景/字重/下划线) *备注*：适合局部高亮、加粗、下划线（用 text-decoration 或 border-bottom）。
strong, b, em, i, u, s, del	用途：语义/强调 *安全属性*：继承 style *备注*：均可用；删除线建议 text-decoration: line-through;。
h1–h3	用途：标题 *安全属性*：style(字号/颜色/对齐/字重/间距) *备注*：编辑器常转成带 class=rich_media_title 的 h2/h1；可直接用。
ul, ol, li	用途：列表 *安全属性*：style(行高/颜色/缩进) *备注*：列表符号保留；可自定义 list-style-type（圆点/数字/空心）。
blockquote	用途：引用 *安全属性*：style(左边框、背景、内边距) *备注*：或使用官方组件 mp-common-blockquote（见下）。
code, pre	用途：行内/块代码 *安全属性*：style(等宽字体、背景) *备注*：可用，但超长行可能被强制换行；慎用大面积 pre。
img	用途：图片/GIF *安全属性*：src、data-src、data-w/h、style(宽高/圆角/阴影) *备注*：建议宽度≤100%；上传后微信会替换为 CDN 链接并附 data-imgfileid。
a	用途：超链接 *安全属性*：href、target=_blank、style *备注*：公众号自动加跳转鉴权；可用作目录、外链。
table, thead, tbody, tr, td	用途：表格（轻量） *安全属性*：border, padding, text-align, background *备注*：支持简单表格，复杂跨行列表现不佳。
section, div	用途：结构/容器 *安全属性*：style 任意常用布局 *备注*：微信编辑器大量使用 section 包裹；div 亦保留。

3.2 官方富媒体 / 业务组件

组件标签	说明
<mp-common-profile>	用途：公众号名片 *关键属性*：data-nickname, data-headimg, data-alias, data-service_type *说明*：点击可关注/跳主页。
<mp-common-videosnap>	用途：视频号卡片 *关键属性*：data-url, data-username, data-desc, data-width/height *说明*：内含播放器占位，可横竖屏。
<mp-common-mpaudio>	用途：音频 *关键属性*：name, author, voice_encode_fileid, play_length *说明*：原生音频控件。
<mp-common-vote>	用途：投票卡片 *关键属性*：data-votesubject JSON *说明*：文章内投票。
<mp-common-search>	用途：搜索卡 *关键属性*：data-keywords, data-headimg, data-nickname *说明*：站内搜索入口。
<mp-common-videosnap>	用途：视频号短视频/直播 *关键属性*：同上 *说明*：用于嵌入视频号内容。
<mp-common-profile>	用途：公众号/个人名片 *关键属性*：同上 *说明*：常用于互推。
<a class=“weapp_text_link” …>	用途：小程序文字卡 *关键属性*：data-miniprogram-appid, data-miniprogram-path *说明*：点击直达小程序。
<a class=“wx_poi_link” …>	用途：地理位置 *关键属性*：data-name, data-address, data-latitude/longitude *说明*：打开地图地点详情。
<iframe src="//v.qq.com/txp/iframe/player.html?..">	用途：腾讯视频 *关键属性*：width/height, allowfullscreen *说明*：微信允许的唯一外部 iframe 类型。
<mp-common-answer>	用途：问一问卡片 *关键属性*：data-question_text, data-content_text *说明*：互动问答。

3.3 常用且安全的内联 CSS 属性

文字：font-size, font-family, font-weight, color, letter-spacing, line-height, text-align, text-decoration, text-indent

盒模型：margin, padding, border, border-radius, box-shadow, background/background-color/background-image(含 base64), width/max-width, height/max-height

布局：display(block/inline/inline-block/flex), flex-* 系, justify-content, align-items, gap, float(慎用), vertical-align

图像 / 动效：object-fit, border-radius, filter: brightness/contrast, transition/animation(简单；复杂动画通常被忽略，建议不用)

3.4 典型会被过滤或失效的内容

• 所有 <script>、内联事件（onclick 等）、外链 CSS/JS。
• position: fixed/sticky、超高 z-index 的浮层、全屏遮罩。
• 复杂 SVG、Canvas、非腾讯源音视频、指向非腾讯视频的 iframe。
• 表单元素（input/textarea/button/select）正文中通常被移除。

4. 结语

本文基于公众号编辑器的实际页面，通过预览与结构拆解，并借助 Codex 对页面 HTML 进行分析整理，系统梳理了公众号当前支持的 HTML、CSS 以及官方富媒体组件能力。

从结果来看，公众号并非不支持复杂页面，而是把能力限制在一个可用但并不透明的范围内，创作者想做更复杂的排版，只能不断试错了。至于公众号为什么多年不对编辑器做实质性优化，也确实让人费解，或许是稳定性优先，或许是历史包袱太重，但连支持范围都不愿意明确说明，就挺无语的了~