ฉันจะเปิดไฟล์ HTML ออนไลน์และดูพรีวิวได้อย่างไร?

วางโค้ด HTML หรือโหลดไฟล์ลงในตัวแก้ไข แล้วพรีวิวที่เรนเดอร์จะอัปเดตทันที ไม่ต้องติดตั้งซอฟต์แวร์ใด ๆ ทุกอย่างทำงานโดยตรงในเบราว์เซอร์

โปรแกรมดู HTML ในโทรศัพท์มือถือคืออะไรและใช้งานอย่างไร?

ตัวดู HTML นี้ทำงานโดยตรงในเบราว์เซอร์ของโทรศัพท์ Samsung, iPhone หรือ Android ทุกรุ่น ไม่ต้องดาวน์โหลดแอปใด ๆ เพียงเปิดหน้าเว็บแล้วเริ่มใช้งานได้เลย

ฉันทดสอบ CSS และ JavaScript ภายนอกได้ไหม?

ได้ ทรัพยากรภายนอกมาตรฐานสามารถโหลดในพรีวิวได้หากนโยบายความปลอดภัยของเบราว์เซอร์อนุญาต

โค้ด HTML ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ การเรนเดอร์ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ โค้ดไม่มีทางออกไปจากอุปกรณ์ของคุณ

จะปิดโปรแกรมดู HTML ได้อย่างไร?

หากต้องการปิดโหมดตัวดู HTML ในแอปอย่าง Messenger หรือ Zalo ให้ไปที่การตั้งค่าแอปและค้นหาตัวเลือก 'เบราว์เซอร์ภายใน' หรือ 'ตัวดู HTML' แล้วปิดใช้งาน

เปิดไฟล์ HTML ออนไลน์ - ตัวดู HTML ตัวแก้ไข และพรีวิวสด

เปิดและพรีวิวไฟล์ HTML ออนไลน์ฟรี แก้โค้ดพร้อมดูผลสดแบบเรียลไทม์ จัดรูปแบบและทดสอบเว็บเพจได้ทันที ใช้เป็นโปรแกรมดู HTML ในเบราว์เซอร์

ตัวดู HTML

1486

แก้ไข

โค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>สวัสดีชาวโลก!</h1>
        <p>นี่คือการแสดงตัวอย่างสดของโค้ด HTML ของคุณ</p>
        <button onclick="alert('ใช้งานได้!')">คลิกฉัน</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>สวัสดีชาวโลก!</h1>
        <p>นี่คือการแสดงตัวอย่างสดของโค้ด HTML ของคุณ</p>
        <button onclick="alert('ใช้งานได้!')">คลิกฉัน</button>
    </div>
</body>
</html>

ดูตัวอย่าง

ดูตัวอย่างสด

คุณอาจต้องใช้สิ่งนี้ด้วย

HTML เป็น JSON

แปลงโครงสร้าง HTML เป็น JSON tree

เปิดเครื่องมือ

ตัวย่อ/จัดรูปแบบ HTML

ย่อขนาดหรือจัดรูปแบบข้อความ HTML ด้วยการเยื้อง 2/4 ช่องว่าง

เปิดเครื่องมือ

โปรแกรมดู Markdown

ดูตัวอย่างและแก้ไข Markdown ด้วยการแสดงผลแบบเรียลไทม์

เปิดเครื่องมือ

โปรแกรมดู XML ออนไลน์

เปิด ดู และจัดรูปแบบไฟล์ XML ออนไลน์ พร้อมมุมมองแบบต้นไม้และการตรวจสอบ

เปิดเครื่องมือ

วิธีใช้ตัวดู HTML

พิมพ์หรือวางโค้ด HTML ของคุณลงในบานหน้าต่างแก้ไข

บานหน้าต่างดูตัวอย่างจะอัปเดตโดยอัตโนมัติเพื่อแสดงผลลัพธ์

ใช้ปุ่มแถบเครื่องมือเพื่อคัดลอก ล้าง หรือสลับเต็มหน้าจอ

คุณสมบัติหลัก

ดูตัวอย่างแบบเรียลไทม์

ดูผลลัพธ์การแสดงผลโค้ด HTML ของคุณทันทีขณะที่คุณพิมพ์

ความเป็นส่วนตัวต้องมาก่อน

โค้ดของคุณจะไม่ออกจากเบราว์เซอร์ การประมวลผลทั้งหมดทำในเครื่อง

การออกแบบที่ตอบสนอง

ใช้มุมมองแบบแยกหรือไปที่เต็มหน้าจอเพื่อประสบการณ์การแก้ไขที่ดีขึ้น

วางโค้ด HTML หรือเปิดไฟล์ในตัวดู HTML ออนไลน์นี้ แล้วพรีวิวที่เรนเดอร์แล้วจะปรากฏทันทีในแผงข้างตัวแก้ไข—ไม่ต้องอัปโหลด ไม่ต้องติดตั้ง แก้ไข markup ในเบราว์เซอร์ ดูผลลัพธ์แบบสด และโหลด CSS กับ JavaScript ภายนอกเพื่อทดสอบหน้าเว็บแบบสมบูรณ์ การประมวลผลทั้งหมดเกิดขึ้นในเครื่อง โค้ดของคุณไม่มีทางออกไปจากอุปกรณ์

วิธีใช้ตัวดู HTML

1
วางหรือพิมพ์ HTML ของคุณ
พิมพ์ markup ลงในแผงแก้ไข หรือวางเนื้อหาจากไฟล์ HTML ที่มีอยู่โดยตรง
2
ดูพรีวิวแบบสด
แผงพรีวิวเรนเดอร์ HTML โดยอัตโนมัติทุกครั้งที่มีการเปลี่ยนแปลง แสดงให้เห็นว่าหน้าจะมีลักษณะอย่างไรในเบราว์เซอร์
3
ทดสอบ CSS และ JavaScript
เพิ่มแท็ก <style> และ <script> แบบ inline หรือภายนอกเพื่อดูการจัดรูปแบบและพฤติกรรมเชิงโต้ตอบในมุมมองเดียวกัน
4
คัดลอก ล้าง หรือเต็มหน้าจอ
ใช้แถบเครื่องมือเพื่อคัดลอกโค้ด ล้างตัวแก้ไข หรือสลับเป็นโหมดเต็มหน้าจอเพื่อพื้นที่ทำงานที่กว้างขึ้น

แหล่งอ้างอิง

WHATWG — HTML Standard
ข้อกำหนดที่มีชีวิตซึ่งกำหนดไวยากรณ์ HTML องค์ประกอบ และพฤติกรรมการเรนเดอร์ในเบราว์เซอร์สมัยใหม่
MDN — HTML
เอกสารอ้างอิงและบทช่วยสอนที่ครอบคลุมสำหรับองค์ประกอบ HTML แอตทริบิวต์ และแนวทางปฏิบัติที่ดีที่สุด

เครื่องมือที่เกี่ยวข้อง

HTML Minifier

ลบช่องว่างและความคิดเห็นเพื่อลดขนาด HTML สำหรับการผลิต

HTML เป็น JSON

แปลง markup HTML เป็นรูปแบบ JSON ที่มีโครงสร้าง

Markdown Viewer

พรีวิว Markdown ที่เรนเดอร์เป็น HTML แบบเรียลไทม์

CSS Minifier

บีบอัด stylesheet ที่ใช้จัดรูปแบบพรีวิว HTML ของคุณ

คำถามที่พบบ่อย

ฉันจะเปิดไฟล์ HTML ออนไลน์และดูพรีวิวได้อย่างไร?: วางโค้ด HTML หรือโหลดไฟล์ลงในตัวแก้ไข แล้วพรีวิวที่เรนเดอร์จะอัปเดตทันที ไม่ต้องติดตั้งซอฟต์แวร์ใด ๆ ทุกอย่างทำงานโดยตรงในเบราว์เซอร์
โปรแกรมดู HTML ในโทรศัพท์มือถือคืออะไรและใช้งานอย่างไร?: ตัวดู HTML นี้ทำงานโดยตรงในเบราว์เซอร์ของโทรศัพท์ Samsung, iPhone หรือ Android ทุกรุ่น ไม่ต้องดาวน์โหลดแอปใด ๆ เพียงเปิดหน้าเว็บแล้วเริ่มใช้งานได้เลย
ฉันทดสอบ CSS และ JavaScript ภายนอกได้ไหม?: ได้ ทรัพยากรภายนอกมาตรฐานสามารถโหลดในพรีวิวได้หากนโยบายความปลอดภัยของเบราว์เซอร์อนุญาต
โค้ด HTML ของฉันถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?: ไม่ การเรนเดอร์ทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ โค้ดไม่มีทางออกไปจากอุปกรณ์ของคุณ
จะปิดโปรแกรมดู HTML ได้อย่างไร?: หากต้องการปิดโหมดตัวดู HTML ในแอปอย่าง Messenger หรือ Zalo ให้ไปที่การตั้งค่าแอปและค้นหาตัวเลือก 'เบราว์เซอร์ภายใน' หรือ 'ตัวดู HTML' แล้วปิดใช้งาน