HTML预览工具

HTML 编辑器

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f0f8ff;
            margin: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        h1 {
            color: #3498db;
            text-align: center;
        }
        .card {
            background-color: #f9f9f9;
            border-left: 4px solid #3498db;
            padding: 15px;
            margin: 15px 0;
            border-radius: 5px;
        }
        ul {
            line-height: 1.8;
        }
        @media (max-width: 600px) {
            .container {
                padding: 15px;
                margin: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎使用 HTML 预览工具</h1>
        <p>这是一个示例 HTML 页面，您可以编辑左侧的代码并点击"运行"按钮查看效果。</p>
        
        <div class="card">
            <h3>功能特点</h3>
            <ul>
                <li>实时预览 HTML 代码</li>
                <li>保存项目到本地</li>
                <li>管理已保存的项目</li>
                <li>移动端适配</li>
            </ul>
        </div>
        
        <div class="card">
            <h3>使用说明</h3>
            <p>1. 在编辑器中修改 HTML 代码</p>
            <p>2. 点击"运行"按钮查看效果</p>
            <p>3. 点击"保存为项目"按钮将代码保存</p>
        </div>
        
        <p style="text-align: center; margin-top: 30px; color: #7f8c8d;">
            © 2023 HTML预览工具
        </p>
    </div>
</body>
</html>

点击"运行预览"按钮将在全屏窗口中查看HTML效果

我的项目

暂无项目

您还没有保存任何项目，请返回编辑器创建并保存项目。

HTML预览工具

这是一个简单易用的HTML预览工具，专为移动端设计。您可以在编辑器中编写HTML代码并实时预览效果，还可以将代码保存为项目以便日后使用。

本工具完全在浏览器中运行，不会将您的代码发送到任何服务器，所有数据都保存在您的设备本地。

版本: 1.0.0
开发者: HTML工具团队