思酷素材 HTML 编辑神器使用教程

思酷素材 HTML 编辑神器可以在浏览器中打开电脑里的网页文件。你可以像编辑文档一样，直接在网页预览中修改标题、正文和链接，调整文字样式，再把结果保存为 HTML 文件。

如果你手上有一份活动页、产品介绍页或网页模板，想把里面的日期、价格或联系方式换成自己的内容，可以从下面的单文件练习开始。手上的网页如果还带有图片、样式文件和其他页面，可以直接看「打开文件夹并编辑多页项目」。

使用前的准备

准备电脑、浏览器和网页文件

1. 使用电脑操作。工具内的使用说明列出的系统要求是 Windows 10 及以上或 macOS 12 及以上。
2. 使用较新版本的 Chrome、Edge、Firefox 或 Safari 打开工具。浏览器和打开文件的方式会影响能否覆盖保存原文件。无论使用哪种浏览器，导入后都可以先试用「另存文件」。
3. 准备一个扩展名为 .html 或 .htm 的网页文件，例如 activity.html 。每个 HTML 页面最大支持 5 MB。
4. 如果网页和 css/ 、 images/ 等文件夹放在一起，请保留这套目录结构。通过「打开文件夹」导入，工具才能在项目里查找页面引用的本地资源。

打开工具并认识界面

用浏览器打开这个网址： sskoo.com/html-edit 进入工具页面，可以直接从首页选择导入方式。

打开后，先认准三个区域。

• 首页导入区 有「导入HTML文件」和「打开文件夹｜适合多文件」两个入口。
• 左侧工具栏 有「快捷操作」「文字排版」「选择颜色」和「Emoji 插入」。导入文件并加载预览后，就可以使用相关编辑按钮。
• 网页预览区 显示你正在处理的页面。上方有「自适应」「桌面」「平板」「手机」四个预览选项。

选择合适的导入方式

你的文件情况	使用的入口
只有一个 HTML 文件，想先看内容或改几行字	导入HTML文件
HTML 旁边有单独的图片、字体或样式文件	打开文件夹｜适合多文件
同一套网页有首页、介绍页等多个 HTML 文件	打开文件夹｜适合多文件

工具预览的是网页的静态内容，也就是打开后能直接显示的文字、排版和部分资源。预览时网页脚本暂停运行，由脚本生成的菜单、列表或其他内容可能看不到。原有脚本会随 HTML 保存或导出。工具的编辑范围主要是页面文字、文字排版和链接，图片、视频和音频的插入与替换需要在其他编辑工具中完成。

第一次使用：导入、改字并另存

第一步：导入一个 HTML 文件

1. 在首页点击「导入HTML文件」。
2. 在浏览器打开的文件窗口中，找到要处理的文件，例如 activity.html 。
3. 选中文件，点击「打开」。
4. 等待网页显示在预览区。确认标题和正文是你要修改的内容。

如果点开的网页有文字却缺少图片或排版，先检查 HTML 文件所在目录里是否还有配套文件。有的话，改用「打开文件夹」。

第二步：直接修改网页上的文字

以把标题中的「周五」改为「周六」为例。

1. 点击左侧的「编辑文件」。进入编辑后，按钮显示为「编辑状态」。
2. 在网页预览中找到标题，用鼠标拖选「周五」两个字。
3. 输入「周六」。输入的新文字会替换刚才选中的部分。
4. 点一下标题旁边的空白处，检查改完的标题和周围的排版。
5. 如果需要继续修改，在下一段文字里点击或拖选后继续输入。改完后，可以点击「编辑状态」退出编辑。退出后，按钮显示为「开始编辑」，本次改动仍留在工作区中。

如果只是想在句末加几个字，点击句末放置光标，再输入新内容即可。

第三步：另存修改后的网页

1. 点击左侧的「另存文件」。
2. 如果出现保存窗口，选择存放位置，并确认文件名。工具通常会建议使用原文件名加上 -已编辑 ，例如 activity-已编辑.html 。
3. 如果浏览器直接开始下载，打开浏览器的下载记录，找到生成的 HTML 文件。
4. 用浏览器打开新文件，确认标题显示为「周六」。

练习时保留 -已编辑 后缀，方便区分原文件和修改后的文件。如果原网页依赖同一目录下的图片或样式文件，请把新 HTML 放回原网页所在的目录，再打开检查。

修改文字样式和段落排版

调整选中文字的外观

1. 点击「编辑文件」或「开始编辑」。
2. 在预览区拖选要调整的文字，例如活动名称。
3. 在左侧「文字排版」中选择所需样式。
4. 回到预览区检查变化。如果想继续改同一段中的其他文字，重新拖选对应部分再操作。

想做的调整	使用的控件
放大或缩小文字	「选择字号」，例如 16px 或 24px
更换字体	「选择字体」，例如微软雅黑、宋体或 Arial
调整粗细	「字重」下的「细」「标准」「粗」或「超粗」
添加斜体、下划线或突出显示	「斜体」「下划线」或「高亮」
清除所选文字的部分格式	「清除格式」，之后在预览里查看结果
更改文字颜色	在「选择颜色」中点击色块，或设置「自定义颜色」后点击「应用」

字体的实际显示取决于查看网页的电脑是否有相应字体。发给别人之前，可以在另一台电脑上打开导出的网页看一下。

调整整段文字、标题和列表

1. 把光标点在目标段落里。要同时处理多段时，拖选所需段落。
2. 打开「选择段落类型」，根据内容选择「正文」「一级标题」至「六级标题」「无序列表」或「有序列表」。
3. 在「对齐」中选择「左对齐」「居中」或「右对齐」。例如，选中活动主标题所在段落后点击「居中」。
4. 需要调整每行之间的距离时，拖动「行高」滑块。滑块旁的数字越大，通常行与行之间的间隔越宽。
5. 检查结果。无序列表适合并列项目，有序列表适合步骤或排名。

段落类型、对齐和行高会作用于光标所在的段落或选区涉及的段落。只想突出一个词时，使用字重、颜色或高亮更合适。

插入 Emoji 表情

1. 在预览区点一下要插入表情的位置，例如活动标题末尾。
2. 在左侧展开「Emoji 插入」。
3. 选择一个分类，再点击要插入的表情。
4. 检查表情是否出现在光标位置。如果插入前选中了一段文字，表情会替换选中的文字，可以用「撤销操作」恢复。

查找替换和编辑链接

查找或批量替换当前页的文字

例如，一页里多次出现「报名截止」，现在需要统一改成「报名结束」。

1. 点击左侧的「查找替换」。
2. 在「查找」框输入 报名截止 ，查看匹配数量。
3. 点击「上一个」或「下一个」，逐处确认找到的是目标文字。
4. 在「替换为」框输入 报名结束 。
5. 只改正在查看的一处时，点击「替换当前」。确认本页的匹配项都要改时，点击「全部替换」。
6. 检查替换结果。误改时，点击「撤销操作」。

「替换为」留空会删除匹配文字。查找范围是当前页面中可见的正文文字，英文匹配不区分大小写。如果项目里有多个页面，切换到下一页后再查找一次。匹配过多时，可以输入更完整的词句来缩小范围。

给文字添加链接

1. 在预览中选中同一段落内的一段普通文字，例如「查看报名详情」。
2. 点击左侧「编辑链接」。这时会打开「插入链接」窗口。
3. 在「链接地址」中填写目标，例如 https://example.com/signup 。
4. 检查「显示文字」。它决定读者在页面上看到的内容，例如「查看报名详情」。
5. 在「打开方式」中选择「当前页面」或「新窗口或标签页」。
6. 点击「应用链接」，再保存或另存页面。

修改已有链接并检查结果

1. 在编辑状态下，把光标点进已有链接的文字里，或选中链接文字。
2. 点击「编辑链接」。
3. 修改地址、显示文字或打开方式，再点击「应用链接」。
4. 保存或另存后，在浏览器中单独打开生成的 HTML，点击链接确认结果。编辑器内的预览会限制外部链接跳转，因此请在保存后的网页里检查外链。

链接地址也可以使用 #contact 这类页内定位地址，前提是页面有对应位置。项目中的其他页面可以填写 about.html 这类相对路径。邮箱和电话可以分别填写 mailto:hello@example.com 和 tel:4001234567 。

打开文件夹并编辑多页项目

选择网页项目的根文件夹

假设你的网页文件放在名为 website 的文件夹里，里面有首页、介绍页和配套资源。

website/
├── index.html
├── about.html
├── css/
│   └── style.css
└── images/
    └── banner.jpg

1. 在工具首页点击「打开文件夹｜适合多文件」。如果已经在编辑器里，点击左侧「打开文件夹」。
2. 在选择窗口中选中整个 website 文件夹。工具会读取文件夹中的 HTML 页面以及预览所需的配套资源。
3. 等待页面加载。文件夹顶层如果有符合大小限制的 index.html 或 index.htm ，通常会优先打开该首页。
4. 检查左侧「项目页面」列表。列表中会显示找到的 HTML 文件，子文件夹中的页面会带有路径。

切换页面并分别保存

1. 在「项目页面」中点击 about.html ，预览切换到介绍页。
2. 按单文件的方式修改文字、样式或链接。
3. 修改后保存或另存这一页，再处理其他页面。「保存文件」和「另存文件」都针对当前打开的页面。
4. 需要检查站内跳转时，先退出编辑状态，再点击预览中的项目内链接。链接指向已导入的页面时，可以在项目中切换到对应页面。指向本页已有位置的链接也可以用于预览跳转。

在同一次项目会话里，切换页面会暂留上一页的未保存修改。重新导入、打开另一个文件夹或关闭编辑器之前，逐页保存或另存修改过的页面。浏览器草稿只保留最近备份的一页。

保留配套文件的原目录结构

项目预览会尝试从所选文件夹中找到图片、样式、字体等资源。「另存文件」生成的是当前页的 HTML，网页里引用的资源仍需要从原有路径读取。

例如， about.html 里的图片引用是 images/banner.jpg ，把 about-已编辑.html 放在原 about.html 同一层，浏览器就仍然可以在旁边的 images/ 文件夹中寻找图片。如果要交付整套网页，可以把改好的页面和资源文件一起放在一套完整的目录中。

检查不同屏幕下的显示效果

切换预览宽度

在预览区上方点击相应选项，观察标题、段落、图片和按钮的位置。

预览选项	设置宽度	可以检查什么
自适应	随当前预览区宽度变化	当前窗口中页面是否易读
桌面	1280 像素	宽屏下的内容排列
平板	768 像素	中等宽度下的布局和换行
手机	390 像素	窄屏下标题、按钮和段落是否挤在一起

当前预览宽度会显示在预览工具栏上。若固定宽度大于可见区域，可以横向滚动预览区查看页面另一侧。切换宽度仅改变查看方式，适合在改完较长的标题、按钮文字或链接文字后做一轮检查。

切换工具的深色和浅色主题

点击工具右上角的太阳或月亮图标，可以在深色和浅色界面之间切换。主题设置应用于编辑工具的界面。要调整网页中的文字颜色，请使用左侧「选择颜色」。

保存、撤销和恢复

选择保存原文件还是创建副本

操作	结果	适合的场景
保存文件	获得写入权限后，覆盖当前页面对应的原 HTML 文件	已确认修改，打算直接更新原文件
另存文件	通过保存窗口或浏览器下载生成一份 HTML	初次练习、保留原版、提交给别人，或当前导入方式无法覆盖保存

使用「保存文件」时，如果浏览器询问是否允许写入，请确认目标文件正确，再允许写入。看到「已保存」提示后，可以从原位置打开网页检查。若工具提示「当前导入方式不支持覆盖保存」，直接使用「另存文件」。

如果另存时浏览器直接下载，工作区仍可能提示有未保存修改。先从下载记录找到导出的 HTML 并打开核对，确认文件里有刚才的修改。

撤销和重做刚才的操作

• 撤销操作 会回退最近一次可撤销的编辑。例如，批量替换的结果有误，可以撤销。
• 重做操作 会重新应用刚才撤销的修改。
• 光标在预览区时，可以按 Ctrl + Z 撤销，按 Ctrl + Shift + Z 或 Ctrl + Y 重做。Mac 可用 Command 替代 Ctrl 。
• 重新载入页面、切换项目页面或恢复文件后，当前撤销记录会重新开始。需要保留一个版本时，请先另存。

恢复为最初导入的内容

1. 点击左侧「恢复文件」。
2. 阅读弹窗提示。确认要放弃当前页面的编辑记录后，点击「确定」。
3. 检查页面是否已回到最初导入时的内容。
4. 如果你之前已覆盖保存过原文件，现在又希望把最初内容写回磁盘，请再执行一次「保存文件」或「另存文件」。

从浏览器恢复上次草稿

编辑时，工具会尝试把未保存的修改备份到当前浏览器。如果上次关闭前忘记保存，可以尝试下面的步骤。

1. 用原来的浏览器和浏览器用户配置，按原来的方式重新打开工具。
2. 在首页查看是否有「恢复上次草稿」按钮。
3. 如果有，点击按钮并确认恢复的是需要的页面。
4. 点击「另存文件」，把恢复后的内容保存为 HTML。
5. 如果草稿来自多文件项目，把导出的 HTML 放回该页面原来的目录，再检查图片和样式。

草稿只保留最近一次成功备份的页面。浏览器存储被清理、禁用或备份失败时，首页可能没有恢复按钮。看到「修改已备份到此浏览器」后，仍可用「保存文件」或「另存文件」把改动保存到磁盘。

常见问题

找不到文件，或者导入后提示失败

检查文件名的真实扩展名和文件大小。工具接收 .html 或 .htm ，每页最大 5 MB。类似 activity.html.txt 的文件实际仍是文本文件。如果使用文件夹入口，确认所选文件夹或其子文件夹中至少有一个符合要求的 HTML 页面。

预览里缺少图片、样式、菜单或部分文字

先检查图片和样式文件是否也在所选文件夹中。如果之前只导入了 HTML，改用「打开文件夹」。依赖网络的资源需要浏览器能访问对应地址，由脚本生成的内容可能只在单独打开网页时显示。完成保存后，可以用浏览器单独打开输出文件，对照检查。

排版按钮没有改变文字

先在预览区拖选一段文字，再点击字体、字号、颜色或粗细按钮。修改对齐、行高或段落类型时，把光标点进目标段落即可。如果应用了字体但变化不明显，可以先用字号或颜色确认当前选区，再检查所选字体是否安装在电脑上。

查找不到眼睛看到的那句话

先确认正在查看正确的页面，再用较短的关键词查找。一句话如果横跨两个独立段落或被手动换行分隔，整句查找可能匹配不到。图片里的文字也无法通过页面文字查找来替换。

能预览项目，为什么打开另存的 HTML 后图片不见了

查看输出文件是否被保存到了下载目录或其他位置。网页用相对路径引用资源时，浏览器会从新 HTML 所在的位置寻找文件。把输出文件放回原网页所在目录，或按原来的层级把配套资源一起复制过去，再重新打开检查。

文件打开后出现中文乱码

用文本编辑器打开原 HTML，查看它的字符编码。将副本以 UTF-8 编码保存后，再导入这份副本。确认原本的中文在文本编辑器里正常显示后再转换，避免把已乱码的内容直接保存下来。

交付前检查

1. 用浏览器直接打开保存或另存后的 HTML，核对标题、正文、日期和联系方式。
2. 点击修改过的链接，确认地址和打开方式符合预期。
3. 检查图片、字体、样式及其他页面是否能从保存后的文件所在目录正常加载。
4. 用桌面和平板或手机宽度检查关键内容是否换行合理。
5. 多页项目逐页确认修改后的文件都已保存，再关闭编辑器。