Softonic

HTML 渲染查看器

步 1 / 2
下一步

粘贴任意 HTML（一份邮件模板、一段抓取来的页面片段、文档里的一个示例），再点击“渲染”，即可看到它在隔离的 iframe 中被绘制出来。该框架以浏览器最严格的沙箱运行：脚本不会执行，表单无法提交，标记既不能跳转，也无法触及周围的页面。要回答“这段标记究竟长什么样”，这是无需搭建预发布服务器的最快方式。

如何预览 HTML

  1. 1

    粘贴你的 HTML

    把一份完整文档或一段松散片段放进源代码框。你粘贴什么，就原样渲染什么。

  2. 2

    点击“渲染”

    查看器把你的 HTML 写入一个隔离的 iframe，并直接在页面上显示结果。

  3. 3

    查看预览

    框架会像浏览器那样绘制你的标记：标题、表格、列表、内联样式和 SVG 都会呈现出来。

  4. 4

    调整后再次渲染

    修改源代码，想渲染多少次就渲染多少次，以对比每个版本的样子。

为什么框架要被隔离

粘贴进来的 HTML 可能包含任何东西：<script> 标签、<img onerror="..."> 之类的把戏、一个把数据发往某处的表单，或是一个加载其他站点的 <iframe>。为了不让这些东西触及页面，预览被写入一个 sandbox 属性为空的 <iframe sandbox>，这是最严格的设置。在该模式下，浏览器会同时阻止脚本执行、表单提交、弹出窗口、顶层导航以及同源访问。你能看到视觉结果，却不给标记任何权限。

由于脚本永不运行，凡是依赖 JavaScript 的东西（加载时注水的 Web 组件、自行绘制的图表、挂载到空 <div> 的框架）都只会显示其静态标记，而非脚本运行后的结果。这是一种有意的取舍：以安全、可预期的预览取代交互式预览。

查看器擅长渲染的内容

内容类型 说明
邮件 HTML 基于表格的布局和内联样式会像大多数客户端那样绘制
博客正文 标题、列表、引用和图片完全无需脚本即可呈现
抓取来的片段 显示你抓到的标记是否完整到足以独立成立
内联 SVG 可按任意尺寸绘制，便于检查图标
静态组件标记 标记会被渲染；其 JavaScript 行为则不会

这个工具的好用途

  • 邮件模板质检。 粘贴你邮件编辑器导出的内容，无需给自己发测试邮件即可查看布局。
  • 抓取数据的快速核对。 你从页面抓了一段 innerHTML：它能否渲染回有意义的样子？若不能，这段片段多半不完整。
  • Markdown 转 HTML 的复核。 让文本经过一个转换器（HTML 转 Markdown 工具可做往返转换），再在此预览得到的 HTML。
  • 学习与教学。 粘贴文档里的一个示例，观察浏览器究竟如何排布它。

需要留意的地方

  • 相对 URL。 以 /assets/logo.png 这类相对路径引用的图片和样式表没有可解析的服务器，因此不会加载。若需要图片显示，请使用绝对的 https:// URL 或 data: URI。
  • 外部资源。 从其他站点加载的字体、样式表和图片取决于那些站点是否允许；有些会发送阻止在框架内加载的响应头。
  • 无脚本。 若你的标记只有靠 JavaScript 才会“活”起来，预览显示的是它在脚本运行前的状态。这是预期行为，而非缺陷。

常见问题

安全。预览运行在一个不授予任何权限的完全隔离的 iframe 中，因此脚本无法执行，标记也无法触及周围的页面。即便是恶意 HTML，也只能在框架内绘制自身。

不会。沙箱完全阻止脚本执行，因此 <script> 标签和内联事件处理程序都会被忽略。你看到的是静态标记，而这正是预览安全的原因。

相对路径没有可解析的对象，而有些主机会发送阻止其图片在框架内加载的响应头。请使用绝对的 https:// URL，或把图片以 data: URI 的形式内嵌。

可以。把整份文档（doctype、<head>、<body> 全都）粘贴进来，它就会按原样渲染。松散的片段同样可行；其余部分由浏览器补全。

本工具把你粘贴的 HTML 当作文本来渲染；它从不抓取 URL。你能精确控制渲染的内容，这对邮件模板、抓取片段和快速调试都很有用。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

邮箱验证器

验证邮箱地址：RFC 5322 语法检查、实时 MX 记录查询，并显示本地部分、域名和长度详情。不会发送任何邮件。

EditorConfig 生成器

按你的缩进、换行符和字符集规则生成 .editorconfig，再为仓库里的每种语言加上正确的区块：Python、Go、YAML、Makefile 等等。

证书解码器

粘贴一张 X.509 PEM 证书，并查看解码后的字段：主体、颁发者、序列号、签名算法、有效期及主体备用名称（SAN）。

此工具还提供其他语言版本