巨人肩膀
改版通知

巨人肩膀网站已全新改版。若您仍依赖旧站功能或数据，欢迎联系我们，我们会协助处理。联系我们

← 返回博客列表

ChatHtml

巨人肩膀助手2号 创建于 2026年2月1日331

直达地址：https://www.atbigapp.com/html

ChatHTML 智能网页 - 用户使用文档

本文档面向使用 ChatHTML 智能网页功能的用户，介绍以 AI 能力为核心的界面布局、HTML 项目管理、代码编辑、预览与导出、AI 对话与分享等操作说明。

一、功能概述

ChatHTML 是一款以 AI 为核心的在线智能网页编辑工具：右侧常驻 ChatHtml 助手，可对当前 HTML 项目提问、生成与修改 HTML/CSS/JS 代码，支持在编辑器中选中内容作为上下文，并支持一键 AI 功能与自定义提示词。同时提供完整的网页项目管理与实时预览能力。

  • ★ AI 能力（核心）
    • 对话式操作：用自然语言对当前网页提问（如「这段 HTML 有什么问题？」）、生成代码（如「帮我写一个响应式导航栏」）或修改内容（如「把按钮改成蓝色」）。
    • 选中即上下文：在 HTML/CSS/JS 任一编辑器中先选中一段代码再发消息，AI 会针对选中内容进行分析或修改，无需手动复制粘贴。
    • 一键 AI 功能：将常用指令配置成工具栏按钮，一键执行；支持使用变量引用当前 HTML/CSS/JS 代码或选中内容。
    • 自定义 AI 功能：自己编写提示词、使用变量（如 {HTMLCode}、{CSSCode}、{JSCode}、{ChooseContent}），创建专属的 AI 功能并可发布给团队使用。
    • 对话结果可写回编辑器：AI 返回的 HTML/CSS/JS 修改结果会进入对比模式，您可查看差异后接受或撤销，再手动保存。
  • 项目管理：创建、打开、搜索、重命名、删除、分享 HTML 项目；支持在新标签页打开。
  • 多编辑器：HTML、CSS、JS 分标签编辑，支持 HTML 模板自定义结构；实时预览与完整代码查看。
  • 导入与导出：支持上传本地 HTML 文件解析并填入编辑器；支持下载完整 HTML 文件、预览区 PDF。
  • 快捷操作：保存（Ctrl+S）、复制、清空、刷新预览等。

使用前请先登录；未登录时若通过链接带项目 ID 访问，可能无法使用保存、分享等能力。

二、界面布局

页面分为三块区域，右侧 AI 对话区与当前 HTML 项目联动，是使用 AI 能力的核心入口：

区域 说明
左侧 项目列表：显示当前账号下的所有 HTML 项目，支持搜索、分页加载更多；顶部有「新建 html」入口
中间 主工作区：左侧为 HTML / CSS / JS / HTML 模板 四个编辑标签，右侧为 预览 / 完整代码；中间分隔条可拖拽调整比例。在任意编辑器中选中代码后，在右侧与 AI 对话即可把选中内容作为上下文
右侧 ★ AI 对话区（ChatHtml 助手）：针对当前 HTML 项目进行提问、生成或修改代码；支持多轮对话、模型切换、对话历史、一键 AI 功能与 AI 工具箱

顶部栏左侧为：导入 HTML、保存（Ctrl+S）、复制、清空、AI 功能按钮、新增 AI 功能（+）；右侧为（当前有项目时）分享、AI 工具箱。

三、项目管理

3.1 新建项目

  • 点击左侧 「+ html」（或「新建 html」）创建空白项目。
  • 新建后主工作区会显示空的 HTML/CSS/JS 编辑器，此时尚未保存到服务器；首次保存（点击保存按钮或 Ctrl+S）时会弹出输入框，要求输入项目名称（必填），确认后才会生成一条项目记录并出现在左侧列表中。

3.2 打开 / 切换项目

  • 在左侧列表中点击某一项目即可打开，主工作区会加载该项目的 HTML、CSS、JS 及模板内容。
  • 若当前有未保存的修改，切换前会提示是否保存，请先保存或选择不保存后再切换。

3.3 搜索项目

  • 在左侧列表上方的搜索框输入关键词，按条件筛选项目列表；列表会随输入自动刷新并支持分页加载更多。

3.4 右键菜单（单条项目）

在左侧列表中右键点击某一项目，可进行：

  • 在新标签页打开：在新浏览器标签中打开该项目
  • 重命名：修改项目名称（不能为空，长度不超过 60 个字符）
  • 分享：生成分享链接与设置，供他人查看或保存为副本
  • 删除：删除该项目（会有确认提示）

四、编辑与预览

4.1 编辑器标签（HTML / CSS / JS / HTML 模板）

  • HTML：编辑网页结构内容；占位提示为「请输入 html 代码或让 ChatHtml 助手帮您生成」。
  • CSS：编辑样式；占位提示为「请输入 css 代码或让 ChatHtml 助手帮您生成」。
  • JS：编辑 JavaScript；占位提示为「请输入 js 代码或让 ChatHtml 助手帮您生成」。
  • HTML 模板：编辑完整页面的骨架（含 {HTMLCode}、{CSSCode}、{JSCode} 占位符），用于控制最终合并后的完整 HTML 结构；可点击「重置 HTML 模板」恢复默认模板。

编辑器中修改内容后，页面会标记为「有未保存的更改」（保存按钮会高亮）；Ctrl+S 可快速保存。

4.2 对比模式（AI 修改后）

当 ChatHtml 助手 返回对 HTML/CSS/JS 的修改结果时，对应编辑器会进入对比模式：左侧为修改前内容，右侧为 AI 生成的内容。您可以选择：

  • 接受：采用 AI 的修改，退出对比模式，之后可继续编辑或保存。
  • 撤销：恢复为修改前的内容，退出对比模式；或使用对话区上方的「撤销」按钮一次性恢复本次对话对编辑器的所有修改。

未点击接受或撤销前，不会影响已保存到服务器的内容；只有点击保存后才会写入服务器。

4.3 预览与完整代码

  • 预览：右侧主区域默认显示预览标签，以 iframe 形式实时渲染当前 HTML+CSS+JS 合并后的效果；可点击「刷新」重新加载预览。
  • 完整代码：切换到「完整代码」标签可只读查看合并后的完整 HTML 源码（不直接编辑）。
  • 下载：在预览区时可下载** PDF**；任意时候都可从下载菜单中选择下载完整代码（.html 文件）。下载功能可能受会员或权限限制。

五、导入与导出

5.1 导入 HTML

  • 点击顶部 「导入 HTML」（上传图标）打开上传弹窗。
  • 选择本地 HTML 文件并确认，系统会解析并将 HTML 结构、CSS、JS 分别填入当前项目的对应编辑器；若当前为新建未保存项目，会先填入内容，保存时再输入项目名称。
  • 导入后请检查各标签页内容是否符合预期，必要时在「HTML 模板」中调整结构。

5.2 导出

  • 下载完整代码：点击预览区右上角「下载」图标，选择「下载完整代码」，将当前合并后的完整 HTML 保存为 .html 文件。
  • 下载 PDF：在「预览」标签下，从同一「下载」菜单选择「下载 PDF」，将当前预览页面导出为 PDF（可能受会员或权限限制）。

六、★ AI 能力详解（核心功能）

ChatHTML 的核心价值是让用户用自然语言完成网页的编写与修改：提问、生成代码、改样式或逻辑，无需记忆语法或反复查文档。以下为 AI 相关能力的完整说明。

6.1 AI 能做什么（典型场景）

场景 说明 示例
提问与解读 针对当前 HTML/CSS/JS 或选中代码进行解释、查错、给建议，仅回答不修改 「这段 CSS 有什么问题？」「选中的 JS 能否优化？」
生成代码 根据描述生成 HTML/CSS/JS 片段或完整页面，可写回对应编辑器 「帮我写一个带渐变背景的登录框」「根据 {HTMLCode} 和 {CSSCode} 补全响应式样式」
修改内容 按你的要求修改结构、样式或逻辑，结果进入对比模式供确认 「把主标题改成红色」「给按钮加圆角和阴影」
多轮对话 在对话中连续追问、细化需求，或基于上一轮结果继续改 先「加一个导航栏」，再「把导航栏改成固定在顶部」

重要：发送消息前若先在某一编辑器中选中一段代码，AI 会将该选中内容作为上下文（对应变量 {ChooseContent}），便于「只针对这一段」提问或修改。

6.2 基本使用（对话区）

  • 右侧为 ChatHtml 助手 对话区，始终针对当前打开的 HTML 项目进行对话。
  • 在输入框中用自然语言输入问题或需求（如「给页面加一个页脚」），点击发送即可；支持多轮对话、上传图片（若当前模型支持多模态）。
  • 若当前没有任何已保存的项目就发送消息，系统会引导你先新建并保存项目（输入项目名称），再继续对话；保存成功后会自动继续发送您刚才输入的消息。
  • 将 AI 结果写回编辑器：当 AI 返回可写入的 HTML/CSS/JS 时，对应编辑器会进入对比模式；在对比视图中选择接受则采用 AI 的修改，选择撤销或使用对话区的「撤销」则恢复修改前内容。写回后仍需点击保存才会持久化到服务器。

6.3 变量（自定义 AI 功能时）

在「新增 AI 功能」或编辑已有 AI 功能时，提示词中可使用以下变量（点击变量名可插入到光标处）：

变量 说明
{HTMLCode} 当前项目的 HTML 编辑器全部内容
{CSSCode} 当前项目的 CSS 编辑器全部内容
{JSCode} 当前项目的 JS 编辑器全部内容
{ChooseContent} 当前在编辑器中选中的内容（未选中则为空）

示例提示词：「帮我生成一个包含 {HTMLCode}、{CSSCode}、{JSCode} 的完整网页，并优化 {ChooseContent} 这段的样式。」

6.4 模型与对话

  • 对话区顶部可选择模型（如多模态/仅文本等），根据需要切换；多模态模型支持在对话中上传图片（如截图或设计稿），便于让 AI 按图生成或修改页面。
  • 开启新对话：点击「新对话」会清空当前对话内容并开始新一轮对话，不影响已保存的项目内容。
  • 对话历史：通过「对话历史记录」可查看或恢复历史会话，便于延续之前的修改或分析。
  • 知识库：可从对话区入口进入 知识库（ChatHtml 相关），获取更多提示示例与最佳实践。

6.5 AI 功能按钮与工具箱（一键执行）

  • AI 功能按钮：顶部栏会展示你已配置的 AI 功能按钮（一键执行预设提示词）；点击后自动以当前项目的 HTML/CSS/JS 及选中内容作为上下文执行，无需每次输入相同指令。
  • 新增 AI 功能：点击「+」或「新增 AI 功能」（需登录），可自定义名称与提示词，并使用上述变量；保存后该功能会出现在工具栏，供自己或团队一键使用。
  • AI 工具箱：从右侧 AI 工具箱 可浏览、添加更多官方或社区的 AI 能力（模型、模板等），扩展可用的 AI 功能。
  • 管理已添加的 AI 功能：对已添加的 AI 功能按钮右键可进行编辑、发布/取消发布、删除等操作。

七、分享

7.1 生成分享

  • 在左侧项目列表中右键某一项目，选择 「分享」；或在已打开该项目时点击顶部栏的分享图标。
  • 在分享弹窗中可设置分享链接、有效期等（若产品支持）；复制链接发送给他人即可。

7.2 保存他人分享的项目

  • 打开他人提供的分享链接后，若页面提供 「保存」 或「保存到我的项目」等按钮，点击即可将当前分享的 HTML 项目另存为自己账号下的一份新项目（名称可能带「share」等后缀），随后可在自己的项目列表中打开和编辑。

八、快捷键与常用操作汇总

操作 说明
Ctrl+S / Cmd+S 保存当前项目
保存按钮 点击顶部保存图标保存；有未保存修改时会高亮（如红色）提示
复制 复制当前激活标签（HTML/CSS/JS）中的全部内容到剪贴板
清空 清空当前激活标签中的内容（有确认提示）
刷新 在预览区右上角点击刷新图标，重新加载 iframe 预览

（以上为默认设定，若产品后续调整以实际界面为准。）

九、注意事项

  1. 登录与权限：使用项目列表、保存、导入、分享、新增 AI 功能等均需登录；部分导出（如 PDF）或高级能力可能依赖会员或权限。
  2. 未保存修改：有未保存修改时，保存按钮会高亮提示；切换项目、刷新或关闭页面前请先保存，否则修改可能丢失。
  3. 新建项目命名：第一次保存新建项目时必须输入项目名称，且不能为空、长度不超过 60 个字符。
  4. ★ 选中内容即上下文：在 HTML/CSS/JS 任一编辑器中先选中要分析的代码再在右侧发消息，AI 会优先针对选中内容作答或修改；未选中时则针对整个项目内容。
  5. ★ AI 结果应用：AI 返回的 HTML/CSS/JS 修改会进入对比模式，需在编辑器中接受修改后，再点击保存才会写入服务器；若选择撤销则不会改变当前已保存内容。
  6. HTML 模板：若使用自定义 HTML 模板，请确保保留 {HTMLCode}、{CSSCode}、{JSCode} 等占位符，否则合并预览可能异常。

文档基于当前产品实现整理，若功能或界面有更新，以实际产品为准。