在线HTML编辑器-实时预览-三栏分屏-代码片段编写-W3CTool

快捷选择模板

入门基础空白页最简 HTML5 骨架

表单卡片登录页居中卡片式登录表单

响应式Grid 响应式卡片Grid 布局的响应式卡片墙

动画CSS 动画按钮多种 CSS 动画效果按钮合集

看板拖拽业务看板三列任务看板 (Todo/Doing/Done)

聊天UI 聊天界面简洁的左右气泡聊天窗口

操作工具栏

HTML

富文本模式

wangEditor 所见即所得，编辑的内容会同步到 HTML。切回代码模式后保留。

CSS

/* 在这里编写样式 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #ff5b2d 0%, #ff8b5b 100%);
  color: #fff;
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero {
  text-align: center;
  background: rgba(255, 255, 255, 0.12);
  padding: 48px 64px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}
.hero h1 {
  font-size: 32px;
  margin: 0 0 12px;
}
.hero p {
  margin: 0 0 20px;
  opacity: 0.9;
}
button {
  background: #fff;
  color: #ff5b2d;
  border: none;
  padding: 10px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}
button:hover { transform: translateY(-2px); }
.out { margin-top: 16px; font-weight: 600; }

JavaScript

// 在这里编写 JavaScript
document.getElementById('btn').addEventListener('click', () => {
  const out = document.getElementById('out')
  const n = (out.dataset.n ? parseInt(out.dataset.n, 10) : 0) + 1
  out.dataset.n = n
  out.textContent = '🎉 已被点击 ' + n + ' 次'
})

实时预览

桌面 (1280×800)

桌面平板手机

代码统计

HTML 行 / 字符

7 / 190

CSS 行 / 字符

40 / 859

JS 行 / 字符

7 / 260

总字符数

1,309

文件大小

2.34 KB

CDN 库

0 个

工具说明

工具介绍

所见即所得的浏览器端 HTML 编辑器，HTML / CSS / JS 三栏分屏 + 实时 iframe 沙箱预览，6 个内置模板一键加载，支持 jQuery / Vue / React / Tailwind / Element Plus / ECharts 等 10 个常用 CDN 库一键注入。自动保存到 LocalStorage，支持桌面 / 平板 / 手机三种预览尺寸，可下载为单文件 HTML 或分别下载 HTML / CSS / JS。

支持的 CDN 库

jQuery 3.7	经典 DOM 库，最广泛兼容的脚本工具	Vue 3.4	渐进式框架，CDN 引入即可在页面内使用 Vue
React 18 + ReactDOM	Facebook UI 库，CDN 引入后可使用无 JSX 写法	Tailwind CSS	Utility-first 框架，无需手写 CSS 即可构建样式
Element Plus	Vue 3 桌面端组件库	ECharts 5	百度图表库，覆盖折线 / 柱状 / 饼图等
Axios / Day.js / Lodash	日常工具集，按需勾选	Bootstrap 5	经典 UI 框架，含 grid + components

使用步骤

选择模板或空白页

点击 6 个模板卡片快速加载，或直接编辑空白页

编写 HTML / CSS / JS

使用 Tab 切换三种语言（Tab 键插入缩进），自动保存到 LocalStorage

（可选）注入 CDN 库

点击「注入 CDN」勾选需要的外置库，iframe 会自动重建加载

实时预览

下方 iframe 沙箱每 0.6s 自动刷新一次，可切换桌面 / 平板 / 手机尺寸

下载 / 分享

一键下载为单文件 HTML，或分别下载 HTML / CSS / JS 三件套

功能特性

三栏分屏编辑

HTML / CSS / JS 独立编辑，支持 Tab 缩进，自适应高度

实时预览

编辑即刷新，0.6s 防抖；可关闭自动预览后手动运行

iframe 沙箱

sandbox='allow-scripts' 隔离，禁止同源导航 / 表单，防恶意代码影响主站

自动保存

每 1.5s 防抖写入 LocalStorage，关闭浏览器后下次自动恢复

常见问题

Q1: 预览不生效或显示空白？

检查 JS 控制台输出（页面底部"日志"区）。常见原因：① 语法错误被 iframe 沙箱捕获；② 引用了 file:// 协议的本地资源，浏览器会拦截；③ 第三方 CDN 加载失败（试试切换到国内镜像）。

Q2: 与"HTML工具"有什么区别？

HTML工具侧重代码转换（格式化/压缩/转义/转 JSX）；本编辑器侧重"带实时预览的编写体验"，三栏分屏 + iframe 沙箱 + 模板 + CDN 注入。两者可互补：复杂页面先在本编辑器调试，再贴到 HTML 工具做生产压缩。

Q3: 编辑的内容会保存到服务器吗？

不会。所有内容只在浏览器本地 LocalStorage 中自动保存（每 2 秒一次），关闭浏览器后下次打开会自动恢复。如需彻底清除，点击工具栏"清空"按钮。

Q4: 下载的 HTML 是单文件吗？

是。CSS 内联到 <style>，JS 内联到 <script>。已勾选的 CDN 库通过 <script src="..."> 引入，因此离线后只有 CDN 库不可用，业务代码仍可运行。

Q5: 如何调试 iframe 里的 JS？

工具栏点击"在新窗口打开"会以弹窗打开完整预览；或在浏览器 DevTools 中通过 Sources > top > [Iframe] 进入调试。

Q6: iframe 沙箱安全吗？

安全。所有预览在 sandbox="allow-scripts" 的 iframe 中执行，禁用 allow-same-origin、allow-top-navigation、allow-forms 等危险能力，无法访问父页面 cookie/localStorage/摄像头等。

使用场景

场景	说明
代码片段验证	快速测试一段 HTML/CSS/JS 效果，无需启动 IDE 与本地服务器
Demo 编写	为方案讲解、需求评审、Bug 复现准备可点击的最小 Demo
面试/笔试	在线编写笔试题 HTML/JS，下载为单文件归档
教学演示	为前端教学准备可实时互动的样例（点击按钮观察 CSS 动画等）
Bug 复现	把用户报障的页面精简到一个可分享的 HTML 文件，便于排查
组件库试用	勾选 jQuery/Vue/React/Tailwind/ECharts 等 CDN，立即试写组件