عارض HTML

اكتب أو الصق HTML وشاهد النتيجة المعروضة فوراً في المتصفح.

التخطيط:السكربتات معزولة ولا يمكنها التشغيل.

كود HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

معاينة

حول هذه الأداة

يتيح عارض HTML كتابة أو لصق كود HTML ورؤية النتيجة المعروضة في المتصفح فوراً. يُعرض المعاينة في iframe معزول مع تعطيل السكربتات، مما يتيح معاينة HTML من مصادر غير موثوقة بأمان.

يدعم الأداة مستندات HTML الكاملة (مع head وCSS المضمّن وكتل style) وكذلك مقاطع HTML. تجري جميع المعالجة محلياً في متصفحك.

كيفية الاستخدام

اكتب أو الصق HTML في محرر الكود على اليسار.
انقر على عرض لتحديث المعاينة.
انتقل إلى تخطيط مكدّس للحصول على منطقة معاينة أعلى.
استخدم Tab لتحريك الأسطر في المحرر.

حالات الاستخدام

مطورو الواجهة الأمامية يختبرون مقاطع HTML بسرعة. مطورو البريد الإلكتروني يعاينون قوالب HTML. الطلاب يتعلمون HTML ويجربون الوسوم ويرون النتائج فوراً. مراجعو الكود يتحققون بصرياً من الإخراج المعروض.

الأسئلة الشائعة

لماذا السكربتات معطّلة؟ — يستخدم iframe المعاينة sandbox="allow-same-origin" لمنع تشغيل JavaScript، مما يتيح معاينة HTML من مصادر مجهولة بأمان.
هل يمكنني معاينة CSS؟ — نعم. أضف وسوم style في HTML أو استخدم الأنماط المضمّنة. قد تُحجب أوراق الأنماط الخارجية من مصادر أخرى بواسطة CSP.
هل يدعم مستندات HTML الكاملة؟ — نعم. يمكنك لصق مستند HTML كامل يتضمن DOCTYPE وhead وbody.