开发者工具

HTML 查看器

在线查看、转义与检查 HTML 代码,支持源码转义与预览模式,并实时统计字符总数及换行行段数量。

运行工具

HTML 查看器提供在线查看与检查 HTML 代码的功能。用户可在输入框中粘贴任意 HTML 片段或完整代码,并选择查看模式。该工具支持源码模式与预览模式两种处理方式:在默认的源码模式下,系统会输出转义后的 HTML 文本,避免特殊字符被直接解析;在预览模式下,系统会同时返回原始输入的 HTML 内容以及转义后的文本。无论选择哪种模式,只要输入内容不为空,结果区域都会展示对应的字符总数以及由换行符分隔的行段数量。如果输入为空,工具将直接返回空白内容。若填入源码与预览之外的其他模式参数,系统则会提示模式错误。该工具适合排查网页标签结构、统计代码行数与字符长度,以及获取转义代码。

使用说明

  1. 在 HTML 输入框中粘贴或输入需要查看的 HTML 代码片段,该字段为可选设置。
  2. 在模式输入框中指定处理方式,可填入源码模式(source)或预览模式(preview),默认使用源码模式。
  3. 点击运行按钮,结果区域将根据所选模式展示转义代码或包含原始代码的文本,并附带字符数和行段统计。

示例

  • 在 HTML 输入框中输入 `<p>Hello World</p>`,模式保持默认的 `source`,运行后获得转义文本 `&lt;p&gt;Hello World&lt;/p&gt;`,字符数为 20,行段数为 1。
  • 在 HTML 输入框中输入 `<h1>标题</h1>\n<p>内容</p>`,模式设置为 `preview`,运行后可查看原始 HTML 字符串、转义后文本、字符数以及行段数 2。

常见问题

源码模式与预览模式有什么区别?

源码模式会将输入的 HTML 转换为安全的转义文本;预览模式则在提供转义文本的同时保留输入的原始 HTML 内容以供对比参考。

如果不输入任何内容直接运行会怎样?

如果 HTML 输入留空,工具会直接输出空白结果,不会触发转义处理或行数统计。

输入了不支持的模式名称会发生什么?

若模式字段填入了除 source 和 preview 之外的其他内容,系统将返回模式错误提示,请将其修改为支持的模式后再试。

嵌入此工具

使用以下代码,将这个可直接使用的 SmartPlusLab 工具添加到您的网站。