HTML/CSS/JS 在线预览工具

HTML

CSS

JavaScript

HTML index.html

<!DOCTYPE html>
<html>
<head>
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎使用在线预览工具</h1>
    <p>编辑左侧代码，实时查看右侧预览效果</p>
    <div id="demo"></div>
</body>
</html>

CSS style.css

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    color: #333;
}

h1 {
    color: #4a6baf;
}

JavaScript script.js

document.getElementById('demo').innerHTML = '这是通过JavaScript动态添加的内容';
console.log('页面加载完成');