代码编辑区
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网站</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
text-decoration: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这是一个示例页面，用于演示HTML代码调试预览工具的功能。</p>
<a href="#" class="btn">点击按钮</a>
</div>
<script>
document.querySelector('.btn').addEventListener('click', function() {
alert('按钮被点击了！');
});
</script>
</body>
</html>
预览效果
实时预览
输入代码后立即查看效果，无需等待，提高开发效率。
代码高亮
支持多种编程语言的代码高亮显示，让代码更易阅读。
多设备预览
在不同设备尺寸下预览您的网站，确保响应式设计的正确性。
用户评价
张三
这个工具真的很实用，我在学习HTML的时候经常使用它来测试代码，实时预览功能非常棒！
李四
界面简洁，功能强大，是前端开发的好帮手。如果能增加更多的代码模板就更好了。
王五
使用体验很好，代码高亮和自动保存功能很实用。希望未来能支持更多的CSS和JavaScript特性。