常用標籤

標題一

段落文字

超連結

佈局元件

容器區塊

Flexbox 佈局

卡片元件

表格與列表

標準表格

無序列表

編輯器 (HTML/CSS) 已自動儲存

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>HTML 線上編輯器 (免費)</title>
    <style>
        :root { --primary: #4f46e5; --bg: #f9fafb; }
        body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: #1f2937; line-height: 1.5; padding: 2rem; }
        .card { background: white; padding: 2rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); max-width: 600px; margin: 0 auto; text-align: center; }
        h1 { color: var(--primary); margin-bottom: 1rem; }
        p { color: #4b5563; margin-bottom: 1.5rem; }
        .btn { background: var(--primary); color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
        .btn:hover { opacity: 0.9; }
    </style>
</head>
<body>
    <div class="card">
        <h1>✨ 歡迎使用優化版 「HTML 線上編輯器 (免費)」</h1>
		<p>無需安裝任何軟體，打開瀏覽器即可開啟您的編程之旅！這是一款專為初學者與開發者打造的互動式平台，支援 HTML、CSS 與 JavaScript 的即時編寫與同步預覽。透過直觀的語法高亮與錯誤提示，讓您在實作中快速掌握網頁語法，是您學習程式、測試創意、磨練前端技能的最佳數位沙盒。隨寫即見，讓創意瞬間成真！</p>
        <p>現在，您可以嘗試修改左側的程式碼，或從教學選單中插入更多元件！</p>
        <a href="/coding_course/view.php?id=61" class="btn">了解更多</a>
    </div>
</body>
</html>

即時預覽

HTML 線上編輯器 (免費) 由「香港編程學院」提供

常用標籤

標題一

佈局元件

表格與列表

輔助工具