html在线编辑预览器

HTML

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1欢迎html在线编辑预览器</h1>
    <p>编辑左侧代码，实时查看下方效果</p>
    <button id="demo-btn">点击我</button>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}
h1 {
    color: #4285f4;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}
#demo-btn {
    background: #4285f4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}
#demo-btn:hover {
    background: #3367d6;
}

JavaScript

document.getElementById('demo-btn').addEventListener('click', function() {
    alert('按钮被点击了！');
    this.textContent = '已点击';
});