欢迎使用 HeyHTML。这是一个运行在浏览器里的可视化 HTML 编辑器，你可以像做 PPT 一样，直接拖拽去搭页面，不用折腾复杂代码。

因为 HeyHTML 现在已经支持了不少功能和快捷键，但暂时还没有完整中文支持，所以第一次用的时候，很多地方可能不太好找，也不知道该怎么用。

这篇文章就简单带大家过一遍 HeyHTML 的主要功能和一些常用技巧，希望能帮你少踩点坑，更快上手。

地址：HeyHTML

---

---

1. 快速上手

打开编辑器

访问 HeyHTML 网页后，你会看到页面顶部有一个控制栏：

点击 Edit 按钮即可进入编辑模式。此时页面会发生两个变化：

1. 控制栏的 Edit 按钮高亮为紫色 — 表示编辑模式已激活。
2. 页面顶部出现功能丰富的工具栏 — 这是你的主要操作面板。
3. 页面内容变为可交互状态 — 你可以点击选择元素、拖动移动位置、双击编辑文字。

再次点击 Edit 按钮可退出编辑模式，恢复正常的页面浏览状态。

三步完成第一次编辑

1. 点击页面上的任意元素（如一段文字、一个按钮、一张卡片）将其选中。
2. 双击选中的文字区域，直接修改内容。
3. 按 Ctrl+S（Mac: Cmd+S）将编辑后的 HTML 文件保存到你的电脑。

就这么简单！你已经完成了第一次编辑。

---

2. 界面概览

编辑模式下的界面由以下几个区域组成：

顶部控制栏

始终固定在页面最顶部，提供全局操作入口：

按钮	功能
Edit	切换编辑模式 / 浏览模式
Open	打开本地 HTML 文件进行编辑
Save As	将当前编辑结果保存为 HTML 文件下载到本地

功能工具栏

位于控制栏下方，显示为一行图标按钮。工具栏分为多个功能组，由竖线分隔：

分组	包含工具
文字格式	加粗、斜体、下划线、删除线
字体与标题	字体家族、字号大小、标题级别（H1–H4，p段落）
对齐方式	左对齐、居中、右对齐
颜色	文字颜色、背景颜色
视觉效果	圆角半径、阴影、不透明度
插入	插入文本框、标题、表格、图片、按钮、分割线、容器、链接
格式刷	复制一个元素的样式并应用到其他元素
元素操作	复制元素、上移一层、下移一层、锁定/解锁、删除
辅助工具	页面排序器、图表排版
历史记录	撤销、重做

提示： 未选中任何元素时，工具栏中的元素操作按钮会显示为灰色不可用状态（插入、页面排序、图表排版、撤销/重做除外）。选中一个元素后，所有按钮都会变为可用。

页面主体

你正在编辑的 HTML 页面内容。在编辑模式下：

• 鼠标悬停在元素上时，元素会显示紫色虚线轮廓，表示它是可选择的。
• 点击选中后，元素显示紫色实线轮廓，同时四角和四边出现 8 个蓝色缩放控制点，如果你发现点击选中无效，可以尝试按住鼠标左键轻微拖动，即可选中。
  

---

3. 选择与导航元素

单击选择

将鼠标移到页面上的任意元素上（文字、图片、按钮、卡片等），元素周围出现紫色虚线框，单击即可选中。选中后虚线变为实线，同时顶部工具栏激活该元素相关的所有操作按钮。

注意，如果你发现点击选中某个元素无效，可以尝试在元素内按住鼠标左键轻微拖动，即可选中。

逐层向上选择（Esc 键）

有时你想选中的元素嵌套在其他元素内部。按 Esc 键可以从当前元素切换到它的父级元素：

段落内的文字 → 段落 → 段落所在的 div → div 所在的 section → ...

每按一次 Esc，选区向外扩展一层。当选中了最外层元素后再按 Esc，会取消全部选中。

所以如果你想选中一个存在复杂嵌套关系的元素，也可以先选中其内部某个元素，再按Esc键直到切换到你想选中的父级元素。

快速定位

• 鼠标在页面上移动时，当前悬停的元素会自动高亮，帮助你了解点击后将选中哪个元素。
• 编辑器会智能识别可编辑的 HTML 元素，避免选中不必要的内部结构。

---

4. 拖拽移动与智能对齐

自由拖拽

选中任意元素后，按住鼠标左键拖动即可将元素移动到页面上的任意位置。

移动过程中：

• 元素会跟随鼠标实时移动，并带有轻微的半透明效果和投影，方便你观察目标位置。
• 当你接近其他元素时，编辑器会自动显示品红色的对齐辅助线。

智能对齐辅助线

拖拽移动时，HeyHTML 会实时计算当前元素与其他元素的对齐关系，并自动显示辅助线：

辅助线类型	含义
水平线	当前元素与附近元素的顶部、底部或中心水平对齐
垂直线	当前元素与附近元素的左侧、右侧或中心垂直对齐
等间距标记	当三个或以上元素之间的间距相同时，显示等距指示
距离标签	在对齐线的关键位置显示精确的像素距离值（px）

这副对齐系统可以帮你：

• 将多个元素排列在同一水平线上
• 保持元素间的等距排列
• 实现像素级的精准定位

键盘微调（方向键）

选中元素后，使用方向键进行精确微调：

操作	效果
↑ ↓ ← →	向对应方向移动 1 像素
Shift + ↑ ↓ ← →	向对应方向移动 10 像素

---

5. 缩放元素尺寸

选中任意元素后，元素边框上会出现 8 个紫色控制点：

控制点位置	拖拽效果
四角	同时改变宽度和高度（保持或改变宽高比）
上下边中点	仅改变高度
左右边中点	仅改变宽度

拖拽时元素会实时响应，松开鼠标后尺寸即生效。缩放操作同样会记录到撤销历史中。

---

6. 内联文本编辑

进入文本编辑

双击任意包含文字的元素即可进入内联编辑模式。进入编辑模式后：

• 元素边框变为蓝色实线（区别于选择状态的紫色）。
• 你可以像在 Word 或 Google Docs 中一样直接编辑文字。
• 支持光标定位、拖选文字、复制粘贴等所有标准操作。

文字格式化

文本编辑过程中，你可以使用两种方式进行格式化：

方式一：工具栏按钮
选中一段文字后，点击顶部工具栏的格式按钮：

• B — 加粗
• I — 斜体
• U — 下划线
• S — 删除线

方式二：键盘快捷键（编辑文字时）

快捷键（Windows/Linux）	快捷键（Mac）	效果
Ctrl+B	Cmd+B	加粗
Ctrl+I	Cmd+I	斜体
Ctrl+U	Cmd+U	下划线

退出文本编辑

• 点击页面其他位置（元素外部）自动退出编辑模式。
• 按 Esc 键也可以退出文本编辑。

修改字体与字号

选中文字所在的元素（单击选中，无需进入编辑模式），然后：

1. 修改字体 — 点击工具栏的「Font Family」下拉按钮，从 13 种字体中选择。

2. 修改字号 — 点击「字号」按钮，选择 10px 到 48px 之间的尺寸。

3. 修改标题级别 — 点击「H」按钮，将元素转换为段落（P）、一级标题（H1）、二级标题（H2）、三级标题（H3）或四级标题（H4）。

修改文字颜色与背景色

点击工具栏的 文字颜色（字母 A 图标）或 背景颜色（方块图标）按钮：

• 从 40 种预设颜色中快速选择。
• 使用原生取色器选择任意颜色。
• 手动输入十六进制颜色值（如 #4F46E5），按回车确认。

---

7. 格式刷 — 一键复制样式

格式刷是 HeyHTML 的一大效率利器，允许你快速将一个元素的样式复制到其他元素上。

使用方式

1. 选中一个已设置好样式的元素（源元素）。
2. 单击工具栏的格式刷按钮（笔刷图标），此时格式刷按钮呈现浅紫色。
3. 点击另一个元素（目标元素）— 源元素的样式会立即应用到目标元素上。

连续格式刷模式

快速双击格式刷按钮可以进入连续模式：

• 格式刷按钮会出现深紫色，表示连续模式已激活。
• 你可以连续点击多个目标元素，每个都会被应用相同的样式。
• 再次点击格式刷按钮或按 Esc 键退出连续模式。

格式刷会复制的样式属性

格式刷会复制以下 CSS 属性：

• 字体家族（font-family）
• 字号（font-size）
• 字体粗细（font-weight）
• 文字颜色（color）
• 背景颜色（background-color）
• 文字对齐（text-align）
• 行高（line-height）
• 边框圆角（border-radius）
• 盒阴影（box-shadow）
• 内边距（padding）
• 外边距（margin）

---

8. 插入新元素

点击工具栏的 「+」插入按钮，或者在页面空白处双击，会出现“+”标记，点击弹出插入菜单，你可以选择插入不同元素。
如果你需要插入元素，请务必简单了解一下两种插入模式！

插入模式

我们支持两种插入模式：float模式和flow模式：

• float模式下：插入元素将会以悬浮的方式插入，不会影响当前的页面布局，插入后你可以随意拖动到你想要放置的位置。
  

• flow模式下：如果你当前选中了元素，新插入元素会嵌入到所选中元素之后，如果当前没有选中元素，新插入元素将嵌入到页面顶部。在flow模式下，我们建议您先选中需要插入的位置上方的元素。
  

注意：如果你是通过双击页面的方式插入元素，在flow模式下，会将新插入元素插入在双击位置，但是如果位置在页面布局之外，新插入元素将会插入到页面末尾。

我们推荐您通过点击功能导航栏中的插入按钮进行插入操作。需要以flow模式插入时，推荐先选中元素再插入，这样可以精准的将元素插入到所选元素位置之后。

插入表格

选择「表格」后会弹出对话框，你可以设置：

• 行数（Rows）
• 列数（Columns）

点击确认后，一个指定尺寸的表格会立即插入页面。插入后你可以：

• 选中表格进行拖拽移动
• 双击单元格编辑内容
• 右键表格区域进行行列操作

---

9. 右键上下文菜单

在编辑模式下，右键点击任意元素会弹出上下文菜单，提供以下快捷操作：

基础操作

菜单项	说明
✏️ 编辑文字	进入内联编辑模式（同双击）
📋 复制元素	在当前位置复制一份元素副本，元素副本将会插入在被复制元素下方

样式操作

菜单项	快捷键	说明
🎨 复制样式	Ctrl+Shift+C	复制当前元素的所有内联样式
🖌️ 粘贴样式	Ctrl+Shift+V	选中某个元素，将之前复制的样式应用到此元素
🧹 清除样式	—	清除元素的所有内联 CSS 样式

提示： 复制样式后，样式数据存储在内存中，不会因为选中其他元素而丢失。你可以先复制一个按钮的样式，然后选中多个元素粘贴。

层级操作

菜单项	说明
⬆️ 上移一层	将元素向前移动一个位置（与上一个兄弟元素交换）
⬇️ 下移一层	将元素向后移动一个位置（与下一个兄弟元素交换）
⏫ 置顶	将元素移动到父容器的最前面
⏬ 置底	将元素移动到父容器的最后面

锁定与编组

菜单项	快捷键	说明
🔒 锁定元素	Ctrl+L	锁定后元素无法移动、缩放或删除，避免误操作
🔓 解锁元素	Ctrl+L	解除锁定，恢复可编辑状态
🔗 编组	Ctrl+G	将多个选中元素合并为一个组
🔓 取消编组	Ctrl+Shift+G	将组拆分为独立元素

锁定状态的视觉提示： 被锁定的元素右上角会显示一个小锁图标 🔒，同时选中轮廓变为灰色。

删除

菜单项	快捷键	说明
🗑️ 删除元素	Del	删除选中的元素（支持批量删除）

---

10. 多选与编组

多选元素

按住 Ctrl（Mac: Cmd）键后点击元素，可以将其添加到当前选区中，实现多选。

多选后的变化：

• 每个被选中的元素都会显示紫色轮廓。
• 页面右下角会出现多选信息面板，显示选中数量和快捷操作按钮。
• 你可以同时拖动、复制、删除、锁定或编组所有选中的元素。

多选面板功能

右下角的多选面板显示：

• 选中的元素数量（如「3 elements selected」）
• 快捷操作按钮：复制样式、粘贴样式、删除、编组、取消选中
• 可用的快捷键提示

编组（Group）

选中多个元素后，按 Ctrl+G（Mac: Cmd+G）或在右键菜单中选择「编组」，可以将它们合并为一个组：

• 组内的元素将被包裹在一个容器中。
• 编组后，点击组的任意部分即可选中整个组，拖动组可整体移动。
• 组的选中轮廓为紫色虚线（区别于普通元素的实线轮廓）。

取消编组（Ungroup）

选中一个组后，按 Ctrl+Shift+G（Mac: Cmd+Shift+G）或在右键菜单中选择「取消编组」，组会被拆分为原来的独立元素。

---

11. 表格编辑

HeyHTML 提供了完整的表格编辑能力：

选中表格

• 单击单元格 — 选中该单元格。
• 单击表格外边框 — 选中整个表格，如果你觉得点击表格外边框困难，可以按 Esc 键回退到父层级直到选中表格。
• 鼠标右键 - 点击select entire table即可选中表格

选中表格或者某一单元格后，右键可以看到操作菜单：

操作按钮说明

Insert Row Above: 在表格上方新插入一行

Insert Row Below: 在表格下方新插入一行

Insert Column Left: 在表格左侧插入一列

Insert Column Right: 在表格右侧插入一列

Delete Current Row: 删除当前单元格所在行

Delete Current Column: 删除当前单元格所在列

Toggle Table Style: 切换表格样式

拖拽缩放表格

选中整个表格后，可以拖拽表格的控制点来改变表格尺寸。表格会自动按比例调整列宽，保持整体布局协调。

单元格文字编辑

双击任意单元格进入编辑模式，支持：

• 输入和修改文字内容。
• Shift+Enter — 在单元格内插入换行符 <br>。
• 使用工具栏格式化单元格内的文字。

---

12. 图表面板 — 数据可视化排版

点击工具栏的 图表排版按钮（四宫格图标），会在页面右侧打开图表面板。这个面板专为数据可视化和信息图表排版设计。

预设模板

点击模板即可将其插入页面：

模板名称	用途	包含内容
Data Card（数据卡片）	单个大型指标展示	大号数字 + 标签 + 趋势指示
Metric Row（指标行）	带进度条的指标	标签 + 进度条 + 百分比
Comparison（对比数据）	两值对比展示	左侧数值 + VS 标签 + 右侧数值
Table Heading（表格标题）	表格顶部信息	主标题 + 副标题 + 更新时间
Legend（图例）	彩色图例列表	颜色圆点 + 名称 + 数值
Annotation（数据注解）	文字标注	箭头 + 说明文字
Badge（状态徽章）	状态标签组	4 种颜色的状态徽章
KPI Grid（KPI 网格）	2×2 指标矩阵	4 个指标卡片的网格布局

排版微调

面板下方提供排版微调控件：

控件	功能
字体大小滑块	调整数值文字的字体大小
字重选择	切换轻/常规/中等/加粗
颜色主题	切换预设的颜色方案

模板特点

• 所有模板均带有完整的 CSS 样式，插入即可用。
• 模板中的文字可双击编辑修改。
• 模板元素可自由拖拽移动、缩放。
• 所有操作均可撤销。

---

13. 撤销与重做

HeyHTML 拥有完整的历史记录系统，几乎所有操作都可以撤销和重做。

支持撤销的操作

• 移动元素（拖拽和方向键微调）
• 缩放元素
• 修改样式（颜色、字体、圆角、阴影等）
• 编辑文字内容
• 插入和删除元素
• 修改标签类型（如 P→H1）
• 复制、粘贴、删除元素
• 编组和取消编组
• 锁定和解锁
• 层级调整
• 表格行列操作
• 插入/清除分页标记

操作方式

操作	快捷键（Windows/Linux）	快捷键（Mac）	说明
撤销	Ctrl+Z	Cmd+Z	回退到上一步
重做	Ctrl+Y 或 Ctrl+Shift+Z	Cmd+Y 或 Cmd+Shift+Z	恢复被撤销的操作

你也可以点击工具栏最右侧的撤销/重做按钮。

注意： 在文本编辑模式下（双击编辑文字时），Ctrl+Z 和 Ctrl+Y 会优先由浏览器处理文字内容的撤销/重做，不会触发编辑器的整体撤销/重做。

---

14. 文件操作

打开 HTML 文件

方式一：控制栏按钮
点击顶部控制栏的 Open 按钮，从文件选择器中选择一个 .html 文件。

方式二：快捷键
按 Ctrl+O（Mac: Cmd+O）。

打开文件后，文件内容会加载到编辑区域中，你可以立即开始编辑。

保存 HTML 文件

方式一：控制栏按钮
点击顶部控制栏的 Save As 按钮。

方式二：快捷键
按 Ctrl+S（Mac: Cmd+S）。

保存时：

• 编辑器会自动清理所有编辑器注入的属性和元素（如 data-hve-* 标记、编辑器 UI 组件等）。
• 输出的是干净的、可直接使用的 HTML 文件。
• 文件以原文件名保存，也可根据需要自命名。

关于数据安全

HeyHTML 完全在你的浏览器中运行：

• 无需注册账号 — 打开即用。
• 无需上传文件到服务器 — 你的 HTML 内容和编辑操作全部在本地浏览器中完成。
• 支持离线使用 — 页面加载完毕后，断开网络也能正常编辑。
• 数据不会外泄 — 没有任何内容会被发送到云端。

---

15. 完整快捷键速查表

全局快捷键（编辑模式下）

功能	Windows / Linux	Mac
撤销	Ctrl+Z	Cmd+Z
重做	Ctrl+Y 或 Ctrl+Shift+Z	Cmd+Y 或 Cmd+Shift+Z
保存	Ctrl+S	Cmd+S
打开文件	Ctrl+O	Cmd+O
复制元素	Ctrl+D	Cmd+D
复制样式	Ctrl+Shift+C	Cmd+Shift+C
粘贴样式	Ctrl+Shift+V	Cmd+Shift+V
编组	Ctrl+G	Cmd+G
取消编组	Ctrl+Shift+G	Cmd+Shift+G
锁定/解锁	Ctrl+L	Cmd+L
页面排序器	Ctrl+Shift+P	Cmd+Shift+P
删除元素	Delete 或 Backspace	Delete 或 Backspace
取消选择 / 选择父级	Esc	Esc
微调移动 1px	↑ ↓ ← →	↑ ↓ ← →
微调移动 10px	Shift+↑↓←→	Shift+↑↓←→

文本编辑快捷键（双击编辑文字时）

功能	Windows / Linux	Mac
加粗	Ctrl+B	Cmd+B
斜体	Ctrl+I	Cmd+I
下划线	Ctrl+U	Cmd+U
单元格内换行	Shift+Enter	Shift+Enter

鼠标操作

操作	效果
单击元素	选中元素
Ctrl/Cmd + 单击	多选（添加到选区）
双击文字元素	进入内联编辑模式
右键元素	打开上下文菜单
拖拽选中的元素	移动元素位置
拖拽控制点	缩放元素尺寸
双击格式刷按钮	进入连续格式刷模式

---

16. 常见问题与技巧

Q1: 如何选中一个嵌套很深的元素？

使用 Esc 键逐级向上选择。每次按 Esc，选区会从当前元素切换到它的父元素。当你到达想要的那一层时停止即可。

Q2: 我移动元素后想恢复到原始位置怎么办？

按 Ctrl+Z（Mac: Cmd+Z）撤销移动操作。所有移动、缩放、样式修改都可以撤销。

Q3: 如何快速统一多个元素的样式？

使用格式刷：先选中一个已设置好样式的元素 → 点击格式刷按钮 → 点击其他元素。双击格式刷按钮可进入连续模式，批量应用样式。

或者使用样式复制粘贴：Ctrl+Shift+C 复制样式 → 选中目标元素 → Ctrl+Shift+V 粘贴样式。

Q4: 我不小心把元素移动到了错误的位置，而且做了很多其他操作？

你可以多次按 Ctrl+Z（Mac: Cmd+Z）逐步撤销，直到恢复到想要的状态。编辑器的撤销历史支持 100 步。

Q5: 如何防止某些元素被意外修改？

选中元素后按 Ctrl+L（Mac: Cmd+L）锁定它。锁定后的元素：

• 不能被选中、移动、缩放。
• 不能被删除。
• 右上角显示锁图标 🔒。

再次按 Ctrl+L 解锁。

Q6: 编辑器的修改会影响原始文件吗？

不会。编辑器在你的浏览器中运行，所有修改都在内存中进行。只有当你主动点击「Save As」保存文件后，修改才会写入你下载的新文件中。原始的本地文件不会被自动覆盖。

Q7: 如何在手机或平板上使用？

HeyHTML 是响应式的 Web 应用，支持在移动浏览器中打开使用。在触屏设备上：

• 点击代替鼠标单击来选中元素。
• 双击进入文字编辑模式。
• 长按可以触发右键菜单功能。
• 工具栏会自动适配屏幕宽度。

Q8: 编辑器支持哪些浏览器？

推荐使用最新版本的 Chrome、Edge、Firefox 或 Safari。所有现代浏览器均可正常使用。

Q9: 导出的 HTML 代码干净吗？

是的。保存时编辑器会自动清理所有编辑器相关的标记（data-hve-* 属性、编辑器注入的样式和元素、contenteditable 属性等），导出的 HTML 文件只包含你的页面内容。

Q10: 可以同时编辑多个页面吗？

页面的左上角控制栏提供了 Open 按钮，可以打开新的 HTML 文件。不过当前编辑器设计为单页面编辑模式，建议使用浏览器多个标签页来同时编辑多个文件。

进阶技巧

1. 快速布局对齐 — 选中多个元素后，先用拖拽 + 对齐辅助线大致定位，再用方向键微调至精确位置。

2. 批量格式化 — 利用格式刷的连续模式，快速将页面中所有同类元素（如所有按钮、所有卡片）统一为相同样式。

3. 元素层级管理 — 通过右键菜单的「上移/下移/置顶/置底」功能控制元素的叠加顺序，配合编组功能管理复杂布局。

4. 数据图表制作 — 使用图表排版面板快速搭建数据展示型页面。先插入模板，再修改文字内容，最后微调排版参数，比从零搭建快 10 倍。

5. 保护关键元素 — 在布局定型后，将不需要再修改的元素（如页头、页脚）锁定，避免在编辑其他内容时误操作。

---

快捷键速查卡片

收藏此卡片，快速查阅常用快捷键。

功能	Windows/Linux	Mac
撤销	Ctrl + Z	Cmd + Z
重做	Ctrl + Y	Cmd + Y
保存	Ctrl + S	Cmd + S
复制元素	Ctrl + D	Cmd + D
复制样式	Ctrl + Shift + C	Cmd + ⇧ + C
粘贴样式	Ctrl + Shift + V	Cmd + ⇧ + V
编组	Ctrl + G	Cmd + G
取消编组	Ctrl + Shift + G	Cmd + ⇧ + G
锁定 / 解锁	Ctrl + L	Cmd + L
删除	Del / Backspace	Del
选择父级 / 取消选中	Esc	Esc
微调移动 1px	↑ ↓ ← →	↑ ↓ ← →
微调移动 10px	Shift + ↑ ↓ ← →	⇧ + ↑ ↓ ← →
编辑文字	双击元素	双击元素
多选	Ctrl + 点击	Cmd + 点击
页面排序器	Ctrl + Shift + P	Cmd + ⇧ + P

---

本教程适用于 HeyHTML 2026 年 5 月版本。功能持续更新中。