这个HTML预览工具支持哪些技术？

支持HTML5、CSS3和JavaScript。所有代码都在沙箱化的iframe中运行，确保安全隔离。支持实时刷新，无需手动点击刷新按钮。

代码会保存吗？

代码仅保存在你的浏览器本地存储中，关闭页面后不会丢失。但建议定期导出备份重要代码。所有代码完全在本地运行，不会被上传到任何服务器。

可以预览响应式设计吗？

可以。你可以手动调整预览区域的大小来测试不同屏幕尺寸下的显示效果，以模拟手机、平板和桌面端的浏览体验。

支持哪些外部资源库？

你可以在HTML代码中通过CDN链接引入外部库，如通过引入jQuery、React、Vue.js等。确保使用完整的HTTPS链接。

🔧 HTML实时预览

免费在线HTML实时预览编辑器，左侧编写HTML/CSS/JS代码，右侧实时渲染显示效果。支持自动刷新、响应式预览、一键复制代码。适合前端开发调试和学习HTML。

HTML / CSS / JS 代码

<!DOCTYPE html>
<html>
<head>
<style>
body{font-family:sans-serif;padding:20px;background:#f8fafc;color:#1e293b}
h1{color:#06b6d4}
.card{background:white;border-radius:8px;padding:16px;box-shadow:0 2px 4px rgba(0,0,0,.1);margin:10px 0}
button{background:#06b6d4;color:white;border:none;padding:8px 16px;border-radius:6px;cursor:pointer}
button:hover{background:#0891b2}
</style>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "首页",
      "item": "https://webtools-cn.github.io/tools-site/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "在线工具",
      "item": "https://webtools-cn.github.io/tools-site/#online-tools"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "🔧 HTML实时预览",
      "item": "https://webtools-cn.github.io/tools-site/html-preview/"
    }
  ]
}
</script>
</head>
<body>
<h1>👋 你好，世界！</h1>
<div class="card">
  <p>在左侧编辑代码，右侧实时预览效果。</p>
  <button onclick="alert('Hello!')">点我试试</button>
</div>

<!-- 反馈收集 -->
<div id="feedback-widget" style="position:fixed;bottom:20px;right:20px;z-index:1000">
<button id="feedback-toggle" onclick="toggleFeedback()" style="width:48px;height:48px;border-radius:50%;background:rgba(6,182,212,.2);border:2px solid rgba(6,182,212,.5);color:#22d3ee;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);transition:all .2s" onmouseover="this.style.background='rgba(6,182,212,.4)'" onmouseout="this.style.background='rgba(6,182,212,.2)'">💬</button>
<div id="feedback-panel" style="display:none;position:absolute;bottom:56px;right:0;width:320px;background:#1e293b;border:1px solid rgba(6,182,212,.3);border-radius:12px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,.4)">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
<span style="color:#f1f5f9;font-size:.95rem;font-weight:600">📝 反馈建议</span>
<button onclick="toggleFeedback()" style="background:none;border:none;color:#64748b;font-size:1.2rem;cursor:pointer">✕</button>
</div>
<select id="feedback-type" style="width:100%;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:8px 10px;color:#e2e8f0;font-size:.85rem;margin-bottom:8px;outline:none">
<option value="feedback">💡 功能建议</option>
<option value="bug">🐛 问题反馈</option>
<option value="other">💬 其他</option>
</select>
<textarea id="feedback-text" placeholder="请描述您的建议或遇到的问题..." style="width:100%;height:100px;background:#0f172a;border:1px solid rgba(148,163,184,.2);border-radius:6px;padding:10px;color:#e2e8f0;font-size:.85rem;resize:vertical;outline:none;font-family:inherit" maxlength="1000">

0/1000

预览效果 (实时渲染)

🔧 HTML实时预览

如何使用HTML实时预览

常见问题

这个HTML预览工具支持哪些技术？

代码会保存吗？

可以预览响应式设计吗？

支持哪些外部资源库？