HTML代码预览工具

​x
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML代码预览工具</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: white;
        }
​
        .feature-list {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin: 20px auto;
            max-width: 800px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            border: 1px solid #e9ecef;
        }
​
        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 16px;
            background: white;
            border: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }
​
        .feature-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
​
        .feature-item:last-child {
            margin-bottom: 0;
        }
​
        .feature-icon {
            width: 32px;
            height: 32px;
            fill: #339af0;
            flex-shrink: 0;
        }
​
        .feature-content {
            flex: 1;
        }
​
        .feature-title {
            font-size: 18px;
            font-weight: 600;
            color: #1864ab;
            margin: 0 0 8px 0;
        }
​
        .feature-description {
            font-size: 14px;
            color: #495057;
            line-height: 1.6;
            margin: 0;
        }
​
        h1 {
            text-align: center;
            color: #1864ab;
            margin: 40px 0;
            font-size: 2em;
        }
    </style>
</head>
<body>
    <h1>欢迎使用HTML代码预览工具</h1>
    
    <div class="feature-list">
        <div class="feature-item">
            <svg class="feature-icon" viewBox="0 0 24 24">
                <path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>
            </svg>
            <div class="feature-content">
                <h2 class="feature-title">实时预览</h2>
                <p class="feature-description">编写代码的同时，右侧窗口实时显示效果，所见即所得。</p>
            </div>
        </div>
​
        <div class="feature-item">
            <svg class="feature-icon" viewBox="0 0 24 24">
                <path d="M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z"/>
            </svg>
            <div class="feature-content">
                <h2 class="feature-title">错误检测</h2>
                <p class="feature-description">自动检测代码错误，底部错误控制台实时显示详细信息。</p>
            </div>
        </div>
​
        <div class="feature-item">
            <svg class="feature-icon" viewBox="0 0 24 24">
                <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/>
            </svg>
            <div class="feature-content">
                <h2 class="feature-title">本地保存</h2>
                <p class="feature-description">支持将编辑的HTML代码保存为本地文件，方便后续使用和修改。</p>
            </div>
        </div>
​
        <div class="feature-item">
            <svg class="feature-icon" viewBox="0 0 24 24">
                <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
            </svg>
            <div class="feature-content">
                <h2 class="feature-title">全屏预览</h2>
                <p class="feature-description">支持预览窗口全屏模式，方便查看最终效果。</p>
            </div>
        </div>
​
        <div class="feature-item">
            <svg class="feature-icon" viewBox="0 0 24 24">
                <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
            </svg>
            <div class="feature-content">
                <h2 class="feature-title">一键分享</h2>
                <p class="feature-description">点击上传按钮即可生成在线链接，方便分享给他人。</p>
            </div>
        </div>
    </div>
</body>
</html>
错误信息

上传成功

关注我
