HTML
CSS
JavaScript
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>预览页面</title> </head> <body> <h1 style="text-align: center; margin-top: 50px;">HTML 在线运行工具</h1> <p style="text-align: center; color: #666;">在这里编辑代码，右侧实时预览效果</p> </body> </html>
HTML
body { background: #f5f7fa; font-family: 'Arial', sans-serif; } h1 { color: #2c3e50; margin-top: 60px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } p { color: #34495e; font-size: 1.1rem; margin-top: 20px; }
CSS
// 页面加载完成后执行 window.onload = function() { const h1 = document.querySelector('h1'); // 点击标题改变颜色 h1.addEventListener('click', function() { const colors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12']; const randomColor = colors[Math.floor(Math.random() * colors.length)]; this.style.color = randomColor; }); }
JavaScript
实时预览