HTML 測試工具

即時編輯、預覽和測試 HTML 代碼，支援語法檢查和響應式設計

HTML 語法正確

HTML 代碼編輯器

在下方編輯您的 HTML 代碼，支援即時語法檢查

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 測試頁面</title>
    <style>
        body {
            font-family: 'Microsoft JhengHei', Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .demo-box {
            border: 2px dashed #ccc;
            padding: 20px;
            margin: 20px 0;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>歡迎使用 HTML 測試工具</h1>
        <p>這是一個測試頁面，您可以在左側編輯 HTML 代碼，右側會即時顯示結果。</p>
        
        <div class="demo-box">
            <h2>功能特色</h2>
            <ul>
                <li>即時預覽</li>
                <li>語法檢查</li>
                <li>響應式設計</li>
                <li>繁體中文支援</li>
            </ul>
        </div>
        
        <div class="demo-box">
            <h3>測試按鈕</h3>
            <button onclick="alert('按鈕點擊成功！')" style="padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
                點擊測試
            </button>
        </div>
    </div>
</body>
</html>

即時預覽

右側顯示 HTML 代碼的渲染結果

使用說明

基本功能

• 即時編輯 HTML 代碼
• 即時預覽渲染結果
• 語法錯誤檢查
• 支援響應式設計
• 繁體中文完整支援

進階功能

• 三種檢視模式切換
• 代碼複製與下載
• 沙盒安全預覽
• 支援 CSS 和 JavaScript
• 快速重置和清空

💡 提示

使用此工具可以快速測試 HTML 代碼片段、響應式設計效果，以及進行前端開發的快速原型設計。所有代碼都在瀏覽器本地執行，確保安全性。