HTML 在线运行
模板
打开
运行
格式化
反转义
下载
清空
HTML 代码
1057 字符
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{{ t("预览") }}</title> <style> body { font-family: system-ui, sans-serif; padding: 20px; line-height: 1.6; color: #333; } h1 { color: #0c713b; } button { padding: 8px 16px; background: #0c713b; color: #fff; border: 0; border-radius: 4px; cursor: pointer; margin-right: 6px; } button:hover { background: #0a5a30; } .box { padding: 12px; background: #f5f5f5; border-radius: 6px; margin: 12px 0; } </style> </head> <body> <h1>{{ t("HTML 在线运行") }}</h1> <p>{{ t("在左侧编辑 HTML/CSS/JS，右侧实时预览。") }}</p> <div class="box"> <p>{{ t("计数：") }}<span id="c">0</span></p> <button onclick="document.getElementById('c').textContent = +document.getElementById('c').textContent + 1">+1</button> <button onclick="console.log('Hello from iframe!', {time: new Date()})">log</button> <button onclick="console.warn('这是警告')">warn</button> <button onclick="console.error('这是错误')">error</button> </div> <p>{{ t("试试修改代码，预览自动更新；点击上方按钮看 console 输出。") }}</p> </body> </html>
运行结果