微页面 HTML 组件编写规则

适用对象：在营销通微页面设计器中自行编写 HTML 的运营 / 设计 / 市场人员
适用组件：微页面设计器 → 「HTML」组件
版本：v1.0

「HTML 组件」让你在微页面里自由编排版式：不再受固定组件模板限制，可以直接写 HTML 与内联样式，做出标题组、标签、卡片矩阵、FAQ、说明块、信任背书、双栏信息、分区 CTA 等区块。

为了页面安全、多端显示一致，组件对"能写什么"做了明确限制。本文写清楚了可以写、不能写、以及怎么写，照着写即可。

一、先了解：什么时候用 HTML 组件

适合用 HTML 组件：

标题组、副标题、装饰性文字
标签 / 徽标 / 卖点 chips
卡片矩阵、双栏或多栏信息
常见问题（FAQ）、说明块、条款摘要
信任背书、数据战绩展示
分区 CTA 的视觉强调块（横幅式引导区域）

不适合用 HTML 组件（请使用对应的原生组件）：

需要真实提交的表单（输入框、单选、多选、日期、地区等）→ 用「表单」类组件
视频播放、轮播、时间线等带真实交互行为的模块 → 用对应的原生组件

关键原则：HTML 组件负责"好看"，不负责"能提交 / 能播放 / 能滚动"。凡是需要真实运行时的功能，都不要只用 HTML 结构"假装"出来。

二、快速开始

一个最简可用的 HTML 区块：

<div style="padding: 24px 20px; background: #ffffff;">
  <h2 style="margin: 0 0 12px; font-size: 22px; line-height: 1.3; color: #181c25;">活动标题</h2>
  <p style="margin: 0; font-size: 14px; line-height: 1.7; color: #4f5562;">这里写活动说明。</p>
</div>

写的时候记住三条：

用一个根元素（如 <div>）把整个区块包起来；
所有样式直接写在元素的 style="" 里（叫"内联样式"）；
只用本文列出的标签，其余标签无法通过校验。

三、支持使用的标签

HTML 组件只支持以下标签，使用列表之外的标签时，页面保存 / 校验会不通过：

标签	用途
`div`	区块容器、布局、卡片、装饰块
`section`	语义化分区容器
`p`	段落文字
`span`	行内文字、标签、装饰小元素
`strong`	加粗强调
`a`	文本链接
`img`	图片
`br`	换行
`h1` `h2` `h3` `h4` `h5`	各级标题（最多到 h5，不支持 h6）
`ul` `ol` `li`	无序 / 有序列表

说明：以上为当前版本支持的标签集合，最终以正式帮助文档发布的版本为准（见"九、常见问题"Q11）。

四、支持的属性

场景	可用属性	说明
所有元素	`style`	内联样式，推荐的主要写法
链接 `a`	`href`、`title`、`target`	文本链接地址与提示
图片 `img`	`src`、`alt`、`width`、`height`、`style`	图片地址、替代文字、尺寸
语义	`title` 等常规语义属性	按需使用

不支持的属性：

任何 on 开头的事件属性（如 onclick、onmouseover）——出于安全原因一律禁止；
任何模板语法（如 {{ }}、<% %>、${ }）。

五、样式怎么写

5.1 只用内联样式

所有样式通过元素的 style 属性直接书写：

<div style="padding: 20px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 16px; color: #ffffff;">
  内容
</div>

5.2 不要依赖外部样式

不要使用 <style> 标签；
不要依赖样式类名（class）——系统不会加载外部样式表，class 不会生效；
不要引用宿主页面之外的 CSS 文件。

5.3 当前不支持的 CSS 能力

以下写法在当前版本中不生效或会导致校验失败，请用静态样式替代：

不支持的写法	替代做法
`:hover` / `:focus` 等交互态	直接输出静态样式（组件内不做悬停 / 聚焦态）
`::before` / `::after` 伪元素	用真实的 `<div>` / `<span>` 元素承载装饰
`@keyframes` 动画	不使用动画，输出静态视觉
媒体查询 `@media`	页面本身按移动端宽度自适应，无需媒体查询
引用外部字体 / 图片文件	图片建议用平台图片能力上传后引用；装饰纹理可用背景图

5.4 布局与自适应建议

页面面向移动端，内容宽度自适应即可，不要写死固定宽度，否则窄屏会出现横向滚动；
区块左右内边距建议 padding: 0 20px 或 20px ~ 24px；
正文建议 14px ~ 16px，大标题建议 22px ~ 28px（移动端阅读舒适）；
布局优先用 flex；
用圆角（border-radius）、阴影（box-shadow）、渐变（linear-gradient）来营造层次；
一个页面尽量统一一套配色，不要混搭多套风格。

六、安全与合规限制

以下几类内容会被系统拦截，任何情况下都不能写：

禁止项	举例	原因
脚本	`<script>`、外部脚本依赖	安全与合规
内嵌框架	`<iframe>`	安全与跨端一致性
样式表标签	`<style>`、`<link>`	只允许内联样式，避免污染宿主
内联矢量图标签	`<svg>`	不支持的标签
事件处理属性	`onclick`、`onload` 等所有 `on*`	安全
模板语法	`{{ }}`、`<% %>`、`${ }`	防止模板注入
宿主外 CSS	引入外部样式文件	样式隔离
白名单外的标签	`<em>`、`<button>`、`<input>`、`<form>`、`<table>` 等	不在支持列表内
伪造真实功能	只用 HTML 结构"假装"表单 / 视频 / 轮播 / 时间线	无法真实运行，请改用原生组件

所有限制的目的都是：保证页面在任何终端都安全、稳定、渲染一致。

七、交互动作怎么配

HTML 组件里的元素可以配置"点击后做什么"，操作方式如下：

在 HTML 编辑器 / 设计器中，选中要添加点击行为的元素（如一个 CTA 视觉块）；
打开该元素的动作（跳转）设置；
选择动作类型，并填写目标。

可配置的常见动作类型：

跳转到本微页面内的其他页面（多页模式下特别常用）；
打开外部链接；
拨打电话；
打开地图；
在线咨询；
查看文件；
跳转小程序 / 会员应用页等（具体可选类型以设计器实际下拉项为准）。

配置要点：

先选中元素，再配动作：只有被编辑器识别为可配置的元素才能添加动作；
多页模式下，跳转目标选择页面名称即可，无需手写页面地址；
表单提交后的跳转，请用表单组件自身的提交设置，不要在 HTML 里写提交逻辑；
HTML 里的 CTA 区块只负责视觉引导，真正的提交按钮必须用原生表单组件。

说明：源码级（直接手写属性）的动作配置方式是否对外开放，正在确认中，见"待确认事项"。

八、正确 / 错误示例对照

8.1 样式：内联 vs 外部样式

❌ 错误：用 <style> + class

<style>
  .card { padding: 20px; border-radius: 12px; background: #f7f8fa; }
</style>
<div class="card">内容</div>

✅ 正确：每个元素直接写内联样式

<div style="padding: 20px; border-radius: 12px; background: #f7f8fa;">内容</div>

8.2 装饰元素：用真实标签，而不是伪元素

❌ 错误：依赖 ::before / ::after

<div style="position: relative;">
  <span class="dot"></span>
</div>
<!-- 依赖 .dot::before 画圆点，不会生效 -->

✅ 正确：用真实的 <div> / <span> 承载装饰

<div style="display: flex; align-items: center; gap: 8px;">
  <span style="width: 6px; height: 6px; border-radius: 50%; background: #ff5e3a;"></span>
  <span style="font-size: 13px; color: #ff5e3a;">限时进行中</span>
</div>

8.3 图标 / 纹理：背景图或几何形状，不用内联 SVG 标签

❌ 错误：直接写 <svg> 标签

<svg width="24" height="24"><circle cx="12" cy="12" r="10" fill="#409EFF"/></svg>

✅ 正确：用 CSS 几何形状（圆点、圆角块）或背景图实现

<span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #409EFF, #667eea);"></span>

8.4 点击交互：用动作设置，不用事件属性

❌ 错误：写 onclick 事件

<div onclick="window.location.href='https://example.com'">立即报名</div>

✅ 正确：在编辑器中选中该元素后，通过动作设置配置跳转

<div style="display: inline-block; padding: 12px 32px; border-radius: 999px; background: linear-gradient(135deg, #667eea, #764ba2); color: #ffffff; font-size: 15px; font-weight: 600;">立即报名</div>

选中上面的 <div>，在元素动作设置里选择"跳转页面 / 打开链接"等即可。

8.5 表单：用原生表单组件，不用 HTML 伪装

❌ 错误：手写输入框和提交按钮

<div>
  <input type="text" placeholder="请输入姓名" />
  <button>提交</button>
</div>

✅ 正确：输入与提交交给「表单」类组件，HTML 只做视觉说明块

<div style="padding: 16px 20px; border-radius: 12px; background: rgba(64,158,255,0.08);">
  <p style="margin: 0; font-size: 13px; line-height: 1.7; color: #4f5562;">填写下方表单即可完成报名，名额有限，先到先得。</p>
</div>

8.6 整页背景：用根元素撑满，避免底部白边

❌ 错误：背景只画在局部，页面底部露出白底

<div style="background: linear-gradient(135deg, #f0f9eb, #f9f4ff); padding: 40px 20px;">
  <h2 style="color: #67C23A;">报名成功</h2>
</div>

✅ 正确：只有 HTML 区块的整页页面（如成功页），让根元素撑满可视区域

<div style="min-height: 100vh; background: linear-gradient(135deg, #f0f9eb, #f9f4ff); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px;">
  <h2 style="color: #67C23A; font-size: 24px; margin-bottom: 12px;">报名成功</h2>
  <p style="color: #909399; font-size: 14px;">我们已发送确认信息到您的手机</p>
</div>

若页面是"表单 + HTML"等多个组件混排，请把背景设在页面级背景上（在设计器页面设置里配置），不要只写在单个组件上。

8.7 文字强调：用 `strong` / `span`，不用 `<em>`

❌ 错误：使用不在支持列表内的 <em>

<p>限时<em>最后 3 天</em></p>

✅ 正确：用 <strong> 或 <span>

<p style="font-size: 14px; color: #4f5562;">限时<strong style="color: #ff5e3a;">最后 3 天</strong></p>

8.8 一个"照着就能用"的完整示例（标签 + 卡片矩阵 + CTA 视觉块）

<div style="padding: 28px 20px; background: #ffffff;">
  <h2 style="margin: 0 0 8px; font-size: 22px; line-height: 1.3; color: #181c25;">为什么选择我们</h2>
  <p style="margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: #4f5562;">三大核心优势，帮你更快找到客户。</p>

  <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;">
    <span style="padding: 4px 12px; border-radius: 999px; background: rgba(64,158,255,0.12); color: #409EFF; font-size: 12px;">智能获客</span>
    <span style="padding: 4px 12px; border-radius: 999px; background: rgba(64,158,255,0.12); color: #409EFF; font-size: 12px;">数据驱动</span>
    <span style="padding: 4px 12px; border-radius: 999px; background: rgba(64,158,255,0.12); color: #409EFF; font-size: 12px;">一站式</span>
  </div>

  <div style="display: flex; gap: 12px;">
    <div style="flex: 1; padding: 16px; border-radius: 12px; background: linear-gradient(135deg, #667eea, #764ba2); color: #ffffff;">
      <div style="font-size: 16px; font-weight: 700;">高效</div>
      <p style="margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.85);">一键触达目标客户</p>
    </div>
    <div style="flex: 1; padding: 16px; border-radius: 12px; background: #f7f8fa; color: #181c25;">
      <div style="font-size: 16px; font-weight: 700;">安全</div>
      <p style="margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: #4f5562;">企业级数据保障</p>
    </div>
  </div>

  <div style="margin-top: 18px; padding: 22px 20px; border-radius: 16px; text-align: center; background: linear-gradient(135deg, #ff8e6e, #ff5e3a); box-shadow: 0 14px 30px rgba(255,94,58,0.35);">
    <div style="font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: 0.05em;">限时报名中</div>
    <p style="margin: 6px 0 0; font-size: 13px; color: rgba(255,255,255,0.9);">名额有限，尽快提交</p>
  </div>
</div>

上面的橙色 CTA 区块只是视觉块。要让它可点击，请在设计器中选中它并配置动作（见第七节）。

九、常见问题 FAQ

Q1：我粘贴的 HTML 样式不生效，怎么办？
A：先检查是否用了 <style>、class 或外部样式表。HTML 组件只认内联样式，请把样式写进元素的 style="" 里，并确认标签在支持列表内。

Q2：为什么保存时提示校验失败 / 被拦截？
A：通常是用了禁止项——脚本、iframe、<style>、<svg>、onclick 等事件属性、模板语法，或白名单外的标签。对照第六节逐项排查。

Q3：能用 CSS 动画、悬停（hover）效果吗？
A：不能。HTML 组件只输出静态视觉，:hover、:focus、::before、@keyframes、媒体查询都不支持。

Q4：能用 SVG 图标吗？能用 emoji 吗？
A：不能直接写 <svg> 标签。图标建议用 CSS 几何形状（圆点、圆角块）或平台图片能力实现。emoji 默认不建议使用，如需使用请与运营 / 产品确认。

Q5：表单、视频、轮播能做进 HTML 吗？
A：不能。这类需要真实运行时的功能，请使用对应的原生组件；HTML 里只做视觉呈现，不要用假结构替代。

Q6：多页微页面之间怎么跳转？
A：在编辑器中选中元素后，通过动作设置选择目标页面即可，不需要手写页面地址。表单提交后的跳转在表单组件里单独配置。

Q7：页面底部出现白色空隙怎么解决？
A：如果是"只有 HTML 区块"的整页（如成功页），让根元素加 min-height: 100vh 撑满；如果是多组件混排页面，请把背景设置在页面级背景上。

Q8：能在 HTML 里直接引用外部图片链接吗？
A：不建议。请优先使用平台图片能力上传 / 引用图片，保证稳定与合规。

Q9：写固定宽度后手机上出现横向滚动怎么办？
A：去掉写死的 width，改用自适应布局（width: 100%、flex、百分比）。

Q10：粘贴代码时需要转义吗？
A：不需要。请直接写 <div> 这样的原始 HTML，不要写成 \u003cdiv\u003e 这类转义形式。

Q11：支持哪些标签，最终以什么为准？
A：以第三节列出的标签为准；最终以正式帮助文档发布的版本为准。不在列表内的标签请暂缓使用。

Q12：一个页面可以放多个 HTML 区块吗？
A：可以。每个区块各用一个根元素包裹，并保持全页配色统一。

如对本文规则有疑问，请联系营销通产品团队或您的客户成功经理。

2026-09-14