HTML在线编辑器

📖 HTML在线编辑器使用说明

HTML在线编辑器提供HTML、CSS、JavaScript三栏代码编辑和实时预览。支持语法高亮（HTML标签蓝色/属性绿色/值黄色、CSS选择器粉色、JS关键字紫色）、23种HTML元素标签快捷插入、9种代码模板、Tab缩进、自动运行模式、内置控制台、全屏编辑（含退出按钮）和一键下载HTML文件。左右分栏时编辑器高度等于屏幕高度，上下分栏时各占屏幕一半。

一、核心功能

功能	说明
语法高亮	HTML/CSS/JS全部彩色高亮，标签/属性/值/关键字/字符串/注释/数字各有颜色
23种元素	H1-H3/P/A/IMG/DIV/SPAN/UL/OL/TABLE/FORM/INPUT/BTN/SEC/HDR/FTR/NAV/VIDEO/B/I/BR/HR
9种模板	空白/Hello/落地页/卡片/表单/表格/Flex/Grid/动画
全屏+退出	全屏编辑器占满屏幕，右上角有"✕ 退出全屏"按钮
自适应高度	左右分栏=屏幕高度，上下分栏=各半屏

二、使用场景

2.1 前端快速原型

快速验证HTML结构和CSS样式想法。

2.2 代码片段测试

测试代码片段确认效果后集成到项目。

2.3 CSS/JS学习

即时实验新属性和API，配合控制台查看。

2.4 Bug复现

创建最小可复现代码示例。

2.5 邮件模板

编写HTML邮件模板实时预览。

2.6 组件开发

独立开发测试UI组件。

2.7 教学演示

课堂实时演示代码效果。

2.8 面试验证

快速验证代码方案。

三、使用教程

第1步：开始编写

选择模板或使用元素标签按钮快速插入HTML标签。

第2步：运行预览

"▶ 运行"或Ctrl+Enter，"⚡ 自动"开启自动刷新。

第3步：调试

"🖥️"打开控制台查看JS输出。

第4步：全屏

"⛶"进入全屏，右上角"✕ 退出全屏"退出。

第5步：保存

"💾"下载HTML文件，"📋"复制代码。

第6步：清空

"🗑️"清除所有内容。

四、常见问题

4.1 支持ES6+吗？

支持，使用现代浏览器引擎。

4.2 可以引入外部库吗？

可以，用script/link标签引入CDN。

4.3 语法高亮有哪些颜色？

HTML：标签蓝、属性绿、值黄、注释灰。CSS：选择器粉、属性绿、值黄。JS：关键字紫、函数青、字符串黄、数字橙、注释灰。

4.4 元素按钮有哪些？

23种：H1-H3、P、A、IMG、DIV、SPAN、UL、OL、TABLE、FORM、INPUT、BTN、SECTION、HEADER、FOOTER、NAV、VIDEO、STRONG、EM、BR、HR。

4.5 代码会保存吗？

不自动保存，请下载文件。

4.6 预览安全吗？

sandbox隔离iframe。

4.7 数据安全吗？

100%浏览器端，不传输服务器。