📋 محتويات الصفحة
📖 الوصف
Emmet هي مجموعة من الأدوات المدمجة في المحررات لتسريع كتابة HTML, CSS, وبنية الصفحات. تعمل كـ"Zen Coding" - تكتب اختصاراً قصيراً وتوسعه إلى كود كامل بضغطة زر (Tab). على سبيل المثال: تكتب `ul>li*5>a` وتضغط Tab فيتحول إلى قائمة HTML كاملة. Emmet يدعم كل المحررات الحديثة مثل VS Code (مدمج افتراضياً)، ...
🎯 يستخدم في
مجالات استخدام هذه الأداة
تسريع كتابة HTML/XHTML
تسريع كتابة CSS/Sass/Less
توليد بنية صفحة كاملة بسرعة
كتابة قوالب البريد الإلكتروني
العمل في أي محرر يدعم Emmet
✨ المميزات
أبرز مميزات هذه الأداة
سريع جداً - اختصارات تتحول لكود كامل
مدمج في VS Code افتراضياً
دعم CSS缩写 (مثل `m10-20` → `margin: 10px 20px`)
دعم التخصيص (Snippets
Syntax Profiles)
دعم Wrap - لف تحديد بـHTML
دعم Lorem Ipsum لتوليد نص عشوائي
يعمل مع HTML
CSS
Sass
Less
Pug
وغيرها
Loops وعبارات شرطية بسيطة
⚠️ العيوب
نقاط يجب مراعاتها
يحتاج حفظ الاختصارات (منحنى تعلم)
لا يعمل بدون محرر يدعمه
اختصارات CSS قد تكون صعبة الحفظ
لا يدعم التوليد الديناميكي (بيانات من API)
قد يصعب قراءته في معادلات معقدة
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
<!-- بنية صفحة كاملة -->
<!-- اختصار: html:5 + Tab -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!-- اختصارات HTML شائعة -->
<!-- div.container>header+main+footer -->
<div class="container">
<header></header>
<main></main>
<footer></footer>
</div>
<!-- ul>li.item*3>a{Item $} -->
<ul>
<li class="item"><a href="">Item 1</a></li>
<li class="item"><a href="">Item 2</a></li>
<li class="item"><a href="">Item 3</a></li>
</ul>
<!-- form>input[type=email]+input[type=password]+button[type=submit]{Submit} -->
<form action="">
<input type="email" name="" id="">
<input type="password" name="" id="">
<button type="submit">Submit</button>
</form>
<!-- اختصارات CSS شائعة -->
<!-- m10 → margin: 10px; -->
<!-- p10-20 → padding: 10px 20px; -->
<!-- df → display: flex; -->
<!-- jcc → justify-content: center; -->
<!-- aic → align-items: center; -->
<!-- w100p → width: 100%; -->
<!-- bd1-s-#333 → border: 1px solid #333; -->
<!-- trf → transform: ; -->
<!-- @m320 → @media screen and (max-width: 320px) -->
<!-- Lorem Ipsum -->
<!-- lorem20 → 20 كلمة عشوائية -->
<!-- p*3>lorem10 → 3 فقرات كل منها 10 كلمات -->📚 أدوات أخرى في HTML
قد يعجبك أيضاً
Alpine.js HTML
مكتبة JavaScript خفيفة للتفاعلات في HTML (Minimal JavaScript Framework)
Astro HTML
⭐إطار ويب لبناء مواقع محتوى سريعة (Content-focused Web Framework)
Handlebars
⭐محرك قوالب منطقي (Logic-less Template Engine)
HTMX
مكتبة HTML لتفاعلات خادم-عميل بدون JavaScript (Hypermedia-Driven Library)
Markdown
⭐لغة ترميز خفيفة للنصوص (Lightweight Markup Language)
MDX
⭐Markdown مدمج مع JSX (Markdown + JSX Component System)