# HTML 查看器
URL: https://discuvr.org/html-viewer/?hl=zh-hans
Last updated: 2026-11-08
MCP tool: `inspect_html`
粘贴 HTML，即可在沙盒中按手机、平板或桌面宽度实时预览。美化、压缩、通过控制台运行脚本，并发现真实的标记问题。
一封邮件模板、工单里的一段代码、一份导出的报表：有时你只是想看看一段 HTML 渲染出来是什么样子。粘贴进来，它会在你输入时实时渲染，运行在一个受限的框架里，宽度由你选择。在预览旁边，你还可以整理代码、压缩代码、带控制台运行其中的脚本，并查看标记中真正存在的问题清单。
## 功能说明
- 输入时实时预览；超过 200,000 个字符后会暂停，直到你点击"刷新"。
- 手机、平板、桌面和全宽四种预览尺寸，另可全屏查看。
- 脚本默认关闭；开启后可以看到控制台输出和错误。
- 美化杂乱的标记或将其压缩，不改动 pre、script 或 style 中的内容。
- 检查报告：元素数量、标题大纲以及具体问题。
- 打开本地 .html 文件，复制或下载结果。
## 工作原理
1. 粘贴 HTML、打开 .html 文件，或加载示例。
2. 选择预览宽度，并决定是否允许运行脚本。
3. 美化、压缩或检查，然后复制或下载结果。
## 为什么预览运行在沙盒中
粘贴的 HTML 可能包含并非你编写的脚本、表单和链接。预览运行在带 sandbox 属性的 iframe 中，拥有独立的不透明源（opaque origin），因此其中的任何内容都无法读取本站的 Cookie 或你的会话，无法以你的名义提交数据，也无法让当前页面跳转。在你开启之前，脚本始终处于关闭状态。
## 检查会看哪些内容
它用标准的 HTML 解析器读取标记，只报告实际看到的问题：打开后从未关闭的标签、没有对应开始标签的结束标签、缺少 alt 文本的图片、重复的 id、未加 rel="noopener" 就在新标签页打开的链接、跳级的标题层级、通过 http:// 加载的资源；对于完整页面，还会检查是否缺少 doctype、title、lang 或 viewport 标签。
## 检查有意不报告的内容
它报告错误，而不是风格。HTML 标准允许省略的结束标签，例如 、、、 和 ，永远不会被列为未闭合；
、![]()
和 等空元素本来就不需要结束标签。空的 alt="" 算作有替代文本，这对装饰性图片是正确的。带 target="_blank" 的链接只要有 rel="noopener" 或 rel="noreferrer" 就能通过。 中普通的 http:// 链接不算不安全；只有会被加载的资源才算，例如图片、脚本、样式表和 iframe。标题层级往回升（从 h4 到 h2）没有问题；只有向下跳过一级（从 h2 到 h4）才会报告。doctype、title、lang 和 viewport 检查只在粘贴的是完整页面时运行，即包含 doctype 或 html、head、body 标签，因此邮件片段或 CMS 代码片段不会因此被扣分。
## 发送前检查 HTML 邮件
先用手机宽度（375 px）预览，因为很多人在手机上打开邮件，然后再看平板（768 px）和桌面（1280 px）。保持脚本关闭：邮件客户端不运行 JavaScript，所以不运行脚本的预览更接近读者看到的效果。图片使用以 https:// 开头的绝对地址，因为预览和收件人的邮件应用都看不到你电脑上的文件。压缩会删除普通注释，但保留以 。它不会保留 写法中的结束标记 ，所以使用这种写法的模板不要压缩，否则 Outlook 可能隐藏其后的所有内容。预览是浏览器的渲染效果；Windows 版经典 Outlook 用 Word 引擎绘制邮件，大批量发送前请先给自己发一封测试邮件到那里看看。
## 问题
**我的 HTML 会被上传或保存吗？**
预览、美化和压缩都在你的浏览器中完成。只有检查报告会把标记发送到服务器，在服务器上解析后于同一次响应中返回：不会写入磁盘，也不会记录日志，使用统计只保存数量。
**为什么我的脚本没有运行？**
粘贴的代码不可信，所以脚本默认关闭。勾选"运行脚本"后，预览会在启用 JavaScript 的状态下重新加载，仍然位于沙盒内，控制台输出会显示在预览下方。
**为什么相对路径的图片或样式表加载不出来？**
预览是根据粘贴的文本生成的，而不是从你的电脑或服务器加载的，因此像 images/logo.png 这样的相对路径会在本站上查找，结果找不到。请使用绝对 URL，或者添加一个指向文件真实位置的 标签。
**美化会改变页面的外观吗？**
它只会重新调整标签之间的缩进，不会改动 pre、textarea、script 和 style 中的内容。行内元素之间的空白偶尔可能略有变化，所以格式化之后请再看一下预览。
**能处理多大的文档？**
检查报告最多接受 1,000,000 个字符，最多列出 200 个问题。为了保持输入流畅，实时预览在超过 200,000 个字符后会暂停；点击"刷新"或按 Ctrl+Enter 即可更新。
**可以预览 HTML 邮件模板吗？**
可以。粘贴邮件的 HTML 或打开 .html 文件，把宽度切换到"手机"（375 px）和"桌面"（1280 px）查看两种布局，再点"检查"找出没有 alt 文本的图片和通过未加密 http:// 加载的资源。预览使用你浏览器的渲染引擎，而每个邮件客户端都有自己的引擎，很多还会丢弃部分 CSS，所以它大致显示浏览器中网页邮箱的效果，并不完全等于每个收件箱的显示。邮件客户端不会运行 JavaScript，请保持"运行脚本"关闭。正式发送前，先给读者常用的客户端发一封测试邮件。
**打开别人发给我的 HTML 文件安全吗？**
比直接打开更安全。打开文件会把它载入你浏览器中的编辑器，除非你点击检查，否则不会向服务器发送任何内容。预览在一个隔离的沙箱框架中运行，脚本和表单提交都处于关闭状态，所以页面无法运行代码、提交表单或访问本站的 Cookie。带完整 http(s) 地址的图片和样式表仍会加载，因此发件人可能知道文件已被打开。先阅读源代码，保持运行脚本关闭，绝不要在别人发来的页面里输入密码。
**为什么打开文件后中文变成了 �?**
打开文件总是按 UTF-8 读取文件，并忽略其中的 标签。用 GBK 或 GB2312 保存的页面（旧版 Windows 编辑器和导出文件中很常见）会用不是有效 UTF-8 的字节存储汉字，所以每个字都显示为替换字符 �。请在编辑器中打开文件，重新另存为 UTF-8（记事本：另存为，编码选 UTF-8；VS Code：点击状态栏中的编码，再选 Save with Encoding），然后在这里重新打开。也可以先用浏览器打开文件，查看源代码后粘贴到这里，因为浏览器已经按页面自己的 charset 解码过了。
**为什么表单或在新标签页打开的链接在预览中没有反应?**
沙箱始终不允许提交表单或弹出窗口，即使打开了运行脚本也一样，所以点击提交不会发送任何内容，带 target="_blank" 的链接和 window.open() 调用都会被拦截。这样粘贴进来的页面就无法发送数据或打开其他网站。普通链接会在预览框内打开，而拒绝被嵌入框架的网站会显示为空白或被拒绝。要检查表单，请在源代码中查看它的 action、method 和字段；检查也会列出每个缺少 rel="noopener" 的 target="_blank" 链接。真实的提交请在你自己的开发服务器上测试。
## 更多开发者工具
- [IP 子网计算器](https://discuvr.org/ip-subnet-calculator/?hl=zh-hans)
- [编码 / 解码](https://discuvr.org/encode-decode/?hl=zh-hans)
- [Unix 时间戳转换器](https://discuvr.org/timestamp-converter/?hl=zh-hans)
- [系统架构图生成器](https://discuvr.org/system-diagram/?hl=zh-hans)
## 常一起使用
- [文本比较](https://discuvr.org/text-diff/?hl=zh-hans)
- [网站安全扫描](https://discuvr.org/security-scan/?hl=zh-hans)
---
Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.