← 返回首页 🌐 English

HTML预览器

?

📖 HTML预览使用指南

操作步骤
1
编写HTML代码

在左侧编辑器中输入HTML标签和内容

HTML编辑区
2
查看实时预览

右侧区域实时显示渲染效果

预览区域
3
添加CSS/JS

可切换添加样式和脚本代码

CSS/JS标签
4
复制代码

点击复制完整代码

复制按钮
💡 支持CSS和JavaScript可实时调试
使用场景
💻 前端调试

快速测试HTML/CSS代码效果

📧 邮件模板

编辑HTML邮件模板时实时看效果

📚 学习HTML

学HTML时边写代码边看效果

左边写代码，右边实时看效果，支持多种示例模板

💻 HTML代码
👁️ 预览效果
\n\n

学生成绩表

\n \n \n \n \n \n \n \n \n \n
姓名语文数学英语总分
张三928895275
李四859289266
王五908592267
\n

意见反馈

\n', form: '\n\n\n \n \n \n\n

用户注册表单

\n
\n
\n
\n
\n
\n
\n \n
\n

意见反馈

\n', animation: '\n\n\n \n \n \n\n
\n

弹跳+旋转动画效果

\n

意见反馈

\n', card: '\n\n\n \n \n \n\n

产品卡片展示

\n
\n
产品一
这是一个优秀的产品，具有很多出色的功能特性。
了解更多 →
\n
产品二
创新的设计理念，为您带来全新体验。
了解更多 →
\n
产品三
简单易用，效率提升，让您事半功倍。
了解更多 →
\n
\n

意见反馈

\n' }; function updatePreview() { var code = document.getElementById('html-editor').value; var iframe = document.getElementById('html-preview'); if (!code.trim()) { iframe.srcdoc = ''; return; } iframe.srcdoc = code; } function loadExample(type) { if (examples[type]) { document.getElementById('html-editor').value = examples[type]; updatePreview(); showToast('示例已加载'); } } function clearEditor() { document.getElementById('html-editor').value = ''; document.getElementById('html-preview').srcdoc = ''; showToast('已清空'); } function copyToClipboard(text) { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(text).then(function() { showToast('已复制到剪贴板'); }).catch(function() { fallbackCopy(text); }); } else { fallbackCopy(text); } } function fallbackCopy(text) { var textarea = document.createElement('textarea'); textarea.value = text; textarea.style.position = 'fixed'; textarea.style.opacity = '0'; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); showToast('已复制到剪贴板'); } catch (e) { showToast('复制失败'); } document.body.removeChild(textarea); } function showToast(msg) { var e = document.querySelector('.toast'); if (e) e.remove(); var t = document.createElement('div'); t.className = 'toast'; t.textContent = msg; document.body.appendChild(t); setTimeout(function() { t.classList.add('show'); }, 10); setTimeout(function() { t.classList.remove('show'); setTimeout(function() { t.remove(); }, 300); }, 2000); } document.getElementById('html-editor').addEventListener('input', function() { clearTimeout(debounceTimer); debounceTimer = setTimeout(updatePreview, 300); });

意见反馈