介绍

具有实时预览功能的 HTML 运行器可为您在编写 HTML 时提供最快的反馈循环。您无需保存文件和刷新浏览器,而是可以在代码旁边实时看到渲染的输出。

什么是实时预览 HTML 运行器?

实时预览 HTML 运行器是一种在线工具,可在您编写 HTML 代码时呈现它。每次执行代码时,预览面板都会更新,准确显示浏览器如何解释您的标记、样式和脚本。

这与传统开发不同,在传统开发中,您在文本编辑器中编写代码,保存文件,然后手动刷新浏览器。使用实时预览运行器,可以立即得到反馈 - 无需额外的步骤。

实时预览的主要特点

  • 即时渲染 - 单击“运行”并立即查看渲染的 HTML
  • 并排布局 - 左侧编辑器,右侧预览(堆叠在移动设备上)
  • 完整文档支持 - CSS 和 JavaScript 在预览中执行
  • 控制台输出 - 显示 JavaScript 日志、错误和警告
  • 沙盒执行 - 为了安全起见,您的代码在隔离的 iframe 中运行

如何使用实时预览运行器

  1. 打开HTML 代码运行器
  2. 在编辑器中编写或粘贴 HTML 代码
  3. 单击“运行”或按 Ctrl+Enter
  4. 预览面板显示渲染的输出
  5. 修改代码并再次运行以查看更改

实时预览的用例

  • 在项目中实现 CSS 布局之前对其进行测试
  • 通过查看即时视觉结果来学习 HTML
  • 单独调试渲染问题
  • 响应式设计原型
  • 预览电子邮件模板

常见问题解答

单击“运行”或按 Ctrl+Enter 时预览会更新。这使您可以控制代码的执行时间。

是的。 CSS 动画、过渡和关键帧动画都可以在实时预览中正确渲染。

是的。脚本标记中包含的 JavaScript 在沙盒预览 iframe 中执行。