HeyHTML: 像PPT一样编辑HTML — 完整使用教程

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

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

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

地址：heyhtml.com

---

1. 快速上手

打开编辑器

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

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

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

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

三步完成第一次编辑

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

就这么简单！你已经完成了第一次编辑。（如果你发现导入自己的html文件是一片空白，请稍微等待一会加载，这个你导入的文件的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 键退出连续模式。

8. 插入新元素

点击工具栏的 「+」插入按钮，或者在页面空白处双击，会出现“+”标记，点击弹出插入菜单，你可以选择插入不同元素。

如果你需要插入元素，请务必简单了解一下两种插入模式！

插入模式

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

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

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

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

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

插入表格

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

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

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

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

9. 右键上下文菜单

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

基础操作

样式操作

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

层级操作

锁定与编组

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

删除

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即可选中表格

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

操作按钮说明

拖拽缩放表格

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

单元格文字编辑

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

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

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

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

预设模板

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

排版微调

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

模板特点

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

13. 撤销与重做

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

支持撤销的操作

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

操作方式

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

注意： 在文本编辑模式下（双击编辑文字时），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 文件。
• 文件以原文件名保存，如未命名则使用 untitled.html。

关于数据安全

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

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

15. 完整快捷键速查表

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

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

鼠标操作

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

快捷键速查卡片

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

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