在线HTML代码编辑器 — 编写、预览、分享HTML/CSS代码

HTML 代码编辑器 HTML5
实时预览 就绪
就绪 行数:0 字符:0 1:1 不换行 Ctrl+Enter 运行 · Ctrl+S 下载 · Ctrl+F 查找 --

常见问题

在左侧代码编辑区直接编写HTML代码,右侧窗口会实时显示预览效果。您也可以从 模板下拉菜单 选择预设模板快速开始,使用 格式化 按钮整理代码缩进,或使用 下载 按钮保存为HTML文件。

是的,编辑器会在您停止输入1.5秒后自动将代码保存到浏览器的 localStorage 中。即使关闭页面或刷新浏览器,再次打开时也会自动恢复上次编辑的内容。如要手动保存,按 Ctrl+S 可下载到本地。

编辑器支持以下快捷键:
Ctrl+Enter 运行并更新预览 · Ctrl+S 下载HTML文件
Ctrl+Shift+C 复制代码 · Tab / Shift+Tab 缩进
Esc 退出全屏模式 · Ctrl+/ 打开快捷键帮助

工具栏中的设备图标按钮可以切换预览窗口的显示尺寸:桌面(全宽)、平板(768px)、手机(375px)。这方便您测试网页在不同屏幕尺寸下的响应式效果。

非常安全。预览使用 iframe sandbox 沙箱隔离,您的代码仅存储在浏览器的本地存储中,不会上传到任何服务器。所有编辑、预览和保存操作都在您的浏览器中本地完成,充分保障您的代码隐私和数据安全。

Ctrl+F 打开查找对话框,按 Ctrl+H 打开替换对话框。您也可以在工具栏中点击 查找替换 按钮,输入关键字快速定位或批量替换代码中的文本。支持大小写匹配和正则表达式搜索。

编辑器支持所有HTML版本(HTML4、HTML5、XHTML等)和所有CSS框架(Bootstrap、Tailwind CSS、Foundation、Bulma等)。您可以自由编写任意前端代码,预览窗口会实时渲染效果。模板库中已包含Bootstrap卡片等预设示例供参考。

编辑器会自动将您的代码编码到页面URL的 # 号后面。复制浏览器地址栏中的完整URL发送给他人,对方打开链接即可自动加载您编写的代码。注意:特别长的代码可能无法完整编码到URL中,建议使用下载功能保存为HTML文件分享。

点击工具栏中的 导入 按钮,或直接将HTML文件拖拽到编辑器区域,即可将本地HTML文件的内容加载到编辑器中。支持 .html.htm.txt 格式的文件。

可以。在工具栏的字体大小下拉菜单中(显示当前字号),您可以选择12px到20px之间的不同字号。选择后会立即生效,并且您的偏好会自动保存,下次打开页面时自动恢复。

自动换行(Word Wrap)让长代码行自动折行到下一行显示,无需水平滚动即可阅读完整代码。点击工具栏中的 换行 按钮即可切换。开启后在状态栏会显示绿色圆点指示。

有的。我们非常重视用户隐私。您的代码仅存储在浏览器本地,不会上传到任何服务器。完整隐私政策请查看 隐私政策页面。关于我们团队的更多信息请查看 关于我们页面

HTML在线编辑使用指南

快速开始

从模板下拉菜单中选择一个预设模板,即可获得完整的HTML文档结构。在左侧编辑区直接修改代码,右侧预览实时同步更新。使用 Ctrl+Enter 手动触发预览刷新。

响应式测试

使用设备预览按钮(桌面/平板/手机)快速切换预览尺寸,测试您的网页在不同屏幕宽度下的显示效果。平板模式为768px宽度,手机模式为375px宽度。

代码格式化

点击格式化按钮自动整理HTML代码缩进,让代码结构更清晰易读。编辑器还支持语法高亮、括号匹配、标签自动闭合和代码折叠功能,提升编码效率。

保存与导出

编辑器每1.5秒自动保存一次代码到浏览器本地存储,关闭页面后重新打开自动恢复。需要导出时,点击下载按钮或按 Ctrl+S 保存为独立的HTML文件。

查找与替换

Ctrl+F 快速查找代码中的关键字,按 Ctrl+H 打开替换面板。支持大小写匹配和正则表达式搜索,帮助您快速定位和批量修改代码内容。

文件导入

点击工具栏的导入按钮或直接将HTML文件拖拽到编辑器中,即可快速加载本地文件进行编辑。支持 .html.htm.txt 格式文件。

编辑器主题

点击工具栏的主题切换按钮,可在深色和浅色编辑器主题之间切换。深色主题适合夜间编码,浅色主题在强光环境下更清晰,满足不同场景的编码需求。