HTML 实时预览

在输入框中编写 HTML 代码,下方沙箱 iframe 会即时渲染预览效果。可选择是否补全完整文档骨架,并统计行数、字符数与标签数。预览在沙箱中运行且不启用脚本,全部在浏览器本地完成。

HTML 输入 等待输入
文档骨架

输入时会自动延迟约 300ms 刷新预览;也可点击「刷新预览」立即渲染。

实时预览
输入 HTML 代码后,渲染结果将显示在这里。

预览使用沙箱 iframe(sandbox,未启用 allow-scripts),页面内的 JavaScript 不会执行,链接与表单提交也会被阻止。

统计与源码
行数—
字符数—
标签数—
实际渲染的文档内容将显示在这里。

「标签数」统计开始标签(含自闭合标签)的总数。

预览规则
  • 预览通过 iframe 的 srcdoc 写入文档,不发起任何网络请求。
  • iframe 使用 sandbox 属性且未授予 allow-scripts,因此页面内脚本不会运行。
  • 未授予 allow-same-origin,预览内容无法访问宿主页面数据。
  • 「补全完整文档」会包裹 <!DOCTYPE html>、<html>、<head>、<body>。
  • 行数按换行符统计;字符数按字符个数统计(含空格与换行)。
  • 标签数统计开始标签(含 <br/> 等自闭合标签)的出现次数。