Emmet: Lorem Ipsum وتفاصيل الوسوم الضمنية

خلال الدروس التسعة الأولى، أتقنت جميع عوامل تشغيل هيكل HTML + النص + الترقيم في Emmet، وأصبحت قادرًا على كتابة HTML بتداخل عشوائي، وسمات عشوائية، وترقيم عشوائي، ومحتوى عشوائي. لكن هناك أداتين قويتين "لتوفير ضغطات المفاتيح" لم تستخدمهما بعد — توليد نصوص Lorem Ipsum التلقائي وقواعد أسماء الوسوم الضمنية الكاملة. الأولى تتيح لك توليد 30 كلمة من Lorem في ثانية واحدة (بدون كتابة يدوية)، بينما الثانية تتيح لك حذف أسماء وسوم li/tr/td/option في سياقات الوالدين ul/table/select. يشرح هذا الدرس كلا الآليتين بالتفصيل، ليكون خاتمة المرح��ة 3.

1. ما ستتعلمه

• مولد Lorem Ipsum: lorem الافتراضي 30 كلمة، loremN يحدد N كلمة
• Lorem متعدد الفقرات: p*3>lorem يولد 3 فقرات، كل منها بنص مستقل
• أسماء الوسوم الضمنية: التبديل التلقائي في سياقات الوالدين ul/ol/table/tr/select/dl
• التضمين + class + id: ul>.item ← <li class="item">، table>#row1>.cell ← <tr id="row1"><td class="cell">
• حدود قواعد التضمين: عندما لا يكون الوالد في القائمة البيضاء، يبقى الافتراضي div (يشمل مفهوم تخصيص snippets.json)

2. قصة حقيقية لمطور واجهة أمامية

(1) نقطة الألم: النصوص النائبة + أسماء الوسوم المتكررة تبطئ التطوير

كانت أليس تنفذ نم��ذج تصميم لقالب مدونة. احتاجت عرض "صفحة مقال مدونة" قياسية — عنوان، معلومات الكاتب، 3 فقرات من النص الأساسي، وسحابة وسوم في الشريط الجانبي. لكنها لم تعرف ما المحتوى الذي ستكتبه (مرحلة التصميم لم يكن فيها محتوى حقيقي بعد)، ولم ترغب في ملئه بنصوص عشوائية (تبدو مزيفة).

جربت أولاً نسخ 30 كلمة من نص Lorem Ipsum من lipsum.com ولصقها في أول <p>. ثم نسخت كتلة أخرى (محتوى مختلف) للثاني <p>، ولصقتها. 3 فقرات تعني 3 جولات نسخ-لصق، أهدرت 3 دقائق. الأسوأ: في اليوم التالي احتاجت فعل الشيء نفسه مرة أخرى — عمل متكرر بحت.

والأسوأ كان "سحابة الوسوم" في الشريط الجانبي — 15 رابط <a>، كل منها يشير إلى #tag-design، #tag-css، وهكذا. كتبت يدويًا:

<a href="" id="tag-design">#design</a>
<a href="" id="tag-css">#css</a>
<!-- ... 13 سطرًا آخر -->

15 سطرًا من HTML استغرقت 5 دقائق.

أخيرًا، كان هناك قسم الجدول — "جدول عرض بيانات" بـ 5 صفوف × 4 أعمدة. فكرت: كل صف وعمود في الجدول يبدو متطابقًا �� هل يمكنني فقط كتابة أسماء الفئات (مثل .row، .cell) وجعل Emmet يملأ <tr>، <td> تلقائيًا؟ الجواب نعم (الدرس 06 غطى هذا)، لكنها أرادت أيضًا "داخل select، فقط اكتب .opt ويتحول تلقائيًا إلى <option>"، و"داخل dl، فقط اكتب .term ويتحول تلقائيًا إلى <dt>" — سيناريوهات لم تدرسها بشكل منهجي بعد.

(2) كيف يحل Lorem + الوسوم الضمنية المشكلة

يوفر Emmet آليتين متكاملتين:

مولد Lorem Ipsum: اكتب lorem أو loremN في اختصار، ويوسعه Emmet تلقائيًا إلى 30 كلمة (أو N كلمة) من Lorem Ipsum. يمكن كتابة فقرات أليس الثلاث الأساسية كالتالي:

article>(p>lorem)*3

ثلاثة عناصر <p>، كل منها بـ 30 كلمة من نص Lorem مستقل (غير متكرر).

قواعد أسماء الوسوم الضمنية الكاملة: في سياقات عناصر وليدة محددة، يؤدي حذف اسم الوسم إلى تبديل Emmet تلقائيًا إلى عنصر وليد معقول — داخل ul/ol يفترض li، داخل table يفترض tr، داخل tr يفترض td، داخل select يفترض option، وداخل dl يفترض dt/dd. يمكن كتابة سحابة وسوم أليس كالتالي:

ul.tag-cloud>(li.tag*3>a{#tag-$})

الوسوم الضمنية تلغي الحاجة لكتابة 70% من أسماء الوسوم بشكل متكرر.

أعادت أليس كتابة صفحة مقال المدونة بالكامل باستخدام Lorem + الوسوم الضمنية:

section.blog>(header>h1{Blog Title: Emmet Boosts Speed 5x}+p.meta{By Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*3>a{#tag-$}))

تحققت أليس وقالت باندهاش: "3 فقرات Lorem من 3 دقائق إلى ثانية واحدة، 15 رابط وسم من 5 دقائق إلى 3 ثوانٍ، وكتابة أسماء الوسوم انخفضت بنسبة 70%. تعزيز كفاءة Emmet في سيناريوهات النصوص النائبة + الوسوم الدلالية يصل إلى 50 ضعفًا أو أكثر."

(3) الفوائد

Lorem Ipsum وقواعد الوسوم الضمنية هما "جوهر توفير ضغطات المفاتيح" في Emmet. الأولى تتيح لك تخطي خطوة "نسخ-لصق النص النائب"، بينما الثانية تتيح لك تخطي "كتابة أسماء الوسوم الشائعة بشكل متكرر". بعد هذا الدرس، تستطيع أليس كتابة 3 فقرات Lorem في ثانية واحدة و15 رابط وسم في 3 ثوانٍ. هذا الدرس هو أيضًا خاتمة المرحلة 3 — المرحلة التالية (المرحلة 4) تنتقل إلى اختصارات CSS، ممتدة قدرات Emmet من HTML إلى CSS.

3. مولد نصوص Lorem Ipsum النائبة

Lorem Ipsum هو النص النائب القياسي في صناعة الطباعة، استخدم لعروض التخطيط منذ القرن السادس عشر. يحتوي Emmet على مولد Lorem مدمج، يمكن الوصول إليه باستخدام lorem أو lipsum ككلمة مفتاحية (هما متطابقان وظيفيًا).

(1) اختصار lorem و loremN

نقطة أساسية: الرقم الذي يلي lorem مباشرة يستخدم كمعامل عدد الكلمات (مثال: lorem5 = 5 كلمات). إذا لم يُعطَ رقم، الافتراضي هو 30 كلمة. عدد الكلمات يقاس بوحدات مفصولة بمسافات، وليس بعدد الأحرف. قد يختلف المحتوى الموسع الفعلي قليلاً عبر المحررات (VSCode و WebStorm يستخدمان نفس الفقرة الأساسية المكونة من 30 كلمة)، لكن عدد الكلمات يلتزم بدقة.

(2) دمج Lorem مع عوامل التشغيل الأخرى

4. أسماء الوسوم الضمنية: ملخص القواعد الكاملة

قدم الدرسان 03 و06 بالفعل مفهوم أسماء الوسوم الضمنية. ينظم هذا الدرس مجموعة القواعد بالكامل ويملأ جميع السيناريوهات الشائعة.

(1) مرجع سريع للوسوم الضمنية

نقطة أساسية: الجدول أعلاه هو المجموعة الكاملة لقواعد التضمين الرسمية لـ Emmet. خارج هذه القواعد الصريحة، حذف اسم الوسم في أي سياق والد آخر يفترض دائمًا div. هذه هي القاعدة الثنائية "التضمين السياقي مقابل div الافتراضي".

(2) مقارنة سيناريوهات قواعد التضمين الشائعة

(3) مجموعات التضمين + class + id

يمكن دمج الوسوم الضمنية بحرية مع .class و #id و [attr]:

ملاحظة: الوسوم الضمنية لا تعمل إلا عند حذف اسم الوسم في الاختصار. إذا كتبت اسم وسم بشكل صريح (مثال: div.item)، لا تنطبق قاعدة التضمين — ستكون دائمًا <div class="item">. تم التأكيد على هذا في الأسئلة الشائعة للدرس 03.

5. أمثلة عملية

تغطي الأمثلة الخمسة التالي�� السيناريوهات الأساسية لـ Lorem والوسوم الضمنية — من Lorem الأساسي إلى عدد كلمات محدد، ومن متعدد الفقرات إلى التضمين + class.

▶ مثال: Lorem أساسي p>lorem (الصعوبة ⭐)

فقرة واحدة، 30 كلمة من Lorem Ipsum — النص النائب الأكثر استخدامًا من قبل المصممين.

الاختصار:

p>lorem

التوسيع:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?</p>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: lorem هي الكلمة المفتاحية لمولد النصوص النائبة في Emmet. الناتج الافتراضي هو 30 كلمة (مفصولة بمسافات) من Lorem Ipsum. p>lorem يضع lorem داخل p، منتجًا فقرة نائبة واحدة بـ 30 كلمة. قد يختلف عدد الكلمات الفعلي قليلاً حسب تنفيذ المحرر (VSCode/WebStorm يستخدمان نفس الفقرة الأساسية المكونة من 30 كلمة). للأطوال الأخرى، استخدم صيغة loremN (مثال: lorem5 = 5 كلمات).

▶ مثال: عدد كلمات محدد p>lorem5 (الصعوبة ⭐)

5 كلمات من Lorem — مناسبة للنصوص النائبة للوصف القصير (عناوين فرعية للبطاقات، تلميحات الأزرار).

الاختصار:

p>lorem5

التوسيع:

<p>Lorem ipsum dolor sit amet.</p>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: الرقم 5 في lorem5 هو معامل عدد الكلمات. يخرج Emmet بالضبط 5 كلمات من Lorem (وهي "Lorem ipsum dolor sit amet." — أول 5 كلمات من Lorem Ipsum). هذا الطول يناسب سيناريوهات الوصف القصير: عناوين فرعية للبطاقات، تلميحات الأزرار، الشعارات. لنص أطول ولكن أقل من 30 كلمة، استخدم lorem10، lorem20، إلخ. لا يوجد حد أعلى صارم لعدد الكلمات (lorem1000 سيتوسع أيضًا)، لكن توليد كميات هائلة من النص سيبطئ استجابة المحرر.

▶ مثال: Lorem متعدد الفقرات (p>lorem)*3 (الصعوبة ⭐⭐)

ثلاثة عناصر <p>، كل منها بـ 30 كلمة مستقلة من Lorem — نص نائب لجسم مقال مدونة.

الاختصار:

(p>lorem)*3

التوسيع (مقتطف):

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: (p>lorem)*3 يكرر قالب p>lorem ثلاث مرات، كل مرة يولد نص Lorem مستقل بـ 30 كلمة (مولد lorem في Emmet ليس نصًا ثابتًا). الفقرات الثلاث تستمد كل منها من فقرات مختلفة في مكتبة Lorem Ipsum، لذا المحتوى غير متكرر. هذا مكافئ لـ p*3>lorem — تحليل Emmet لـ p*3>lorem يكرر أيضًا p ثلاث مرات، ويدرج lorem مستقل في كل مرة. الأقواس تجعل الدلالة أوضح: كرر قالب الفقرة بالكامل 3 مرات داخل المجموعة.

▶ مثال: ملخص التضمين + class ul>.item*3 + table>(.row>.cell*3)*2 + select>option*3 (الصعوبة ⭐⭐)

ثلاثة سيناريوهات للوسوم الضمنية جنبًا إلى جنب — عرض قواعد التضمين لوالدي ul و table و select في مجموعة أمثلة واحدة.

الاختصار (3 توسيعات مستقلة):

ul>.item*3

التوسيع:

<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

الاختصار:

table>(.row>.cell*3)*2

التوسيع:

<table>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
  <tr class="row">
    <td class="cell"></td>
    <td class="cell"></td>
    <td class="cell"></td>
  </tr>
</table>

الاختصار:

select>option*3

التوسيع:

<select name="" id="">
  <option value=""></option>
  <option value=""></option>
  <option value=""></option>
</select>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: ثلاثة اختصارات تعرض ساحات القتال الرئيسية الثلاث للوسوم الضمنية. ul>.item*3: ul هو والد قائمة؛ حذف اسم الوسم يستدل تلقائيًا على li، و3 عناصر li تشترك في class="item". table>(.row>.cell*3)*2: في سياق table، .row ضمنيًا tr، و .cell ضمنيًا td — جدول 2 صف × 3 أعمدة بدون كتابة أي tr/td صراحة. select>option*3: في سياق select، حذف اسم ا��وسم يستدل تلقائيًا على option. ملاحظة: select يفترض name="" و id="" (إعدادات Emnet المسبقة)، و option يفترض value="" — هذه هي السمات الدنيا لوسوم HTML5.

▶ مثال: نموذج + تضمين form#login>(input[type=text name=user]+input[type=password name=pwd]+button{Login}) (الصعوبة ⭐⭐)

نموذج تسجيل دخول مكتوب في سطر واحد — مزيج من التضمين + class + id + السمات + محتوى النص.

الاختصار:

form#login>(input[type=text name=user]+input[type=password name=pwd]+button{Login})

التوسيع:

<form id="login" action="">
  <input type="text" name="user">
  <input type="password" name="pwd">
  <button>Login</button>
</form>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: يجمع هذا المثال جميع عوامل المراحل 1–3 — # (id)، > (تداخل)، + (شقيق)، . (class)، [attr] (سمات)، {} (محتوى نصي)، () (تجميع). form#login يضيف id="login" إلى form (form يفترض action="")؛ داخل الأقواس 3 عناصر شقيقة: input[type=text name=user]، input[type=password name=pwd]، button{Login}. button يفترض بدون سمة type (أزرار HTML5 تفترض سلوك submit، رغم أن type الصريح أوضح). هذا هو المثال الشامل القياسي للمرحلة 3، موضحًا جميع قدرات Emmet في سيناريوهات النماذج.

6. مثال كامل: صفحة مقال مدونة + Lorem + تضمين + ترقيم

دمج Lorem، الوسوم الضمنية، {text}، وترقيم $ — هيكل "صفحة مقال مدونة" كامل مكتوب في سطر واحد.

▶ مثال: هيكل صفحة مقال مدونة (الصعوبة ⭐⭐)

الاختصار:

section.blog>(header>h1{Blog Title: Emmet Boosts Speed 5x}+p.meta{By Alice · 2026-07-30})+(article>(p>lorem)*3)+(aside>ul.tag-cloud>(li.tag*5>a{#tag-$}))

التوسيع:

<section class="blog">
  <header>
    <h1>Blog Title: Emmet Boosts Speed 5x</h1>
    <p class="meta">By Alice · 2026-07-30</p>
  </header>
  <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
    <p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
    <p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
  </article>
  <aside>
    <ul class="tag-cloud">
      <li class="tag"><a href="" id="tag-1">#tag-1</a></li>
      <li class="tag"><a href="" id="tag-2">#tag-2</a></li>
      <li class="tag"><a href="" id="tag-3">#tag-3</a></li>
      <li class="tag"><a href="" id="tag-4">#tag-4</a></li>
      <li class="tag"><a href="" id="tag-5">#tag-5</a></li>
    </ul>
  </aside>
</section>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التحليل: هذا المثال هو المثال الشامل الكامل للمرحلة 3 — يستدعي في آن واحد مولد Lorem، الوسوم الضمنية (ul←li)، المحتوى النصي {Blog Title: Emmet Boosts Speed 5x}، والترقيم $ (tag-1 إلى tag-5). الأقواس متداخلة 3 مستويات: الخارجي (header>...) + (article>...) + (aside>...) يجعل الكتل الثلاث شقيقة داخل section؛ الداخلي (p>lorem)*3 يعطي article ثلاث فقرات Lorem مستقلة؛ الأعمق (li.tag*5>a{#tag-$}) يعطي كل li عنصر a يحمل وسما id ونصًا كلاهما يحمل ترقيم $. صفحة مقال المدونة بالكامل تنتقل من 30+ سطر HTML مكتوب يدويًا إلى سطر Emmet واحد.

❓ أسئلة شائعة

📖 ملخص

• lorem الافتراضي 30 كلمة؛ loremN يحدد N كلمة (مثال: p>lorem5 = 5 كلمات Lorem)
• lorem مولد: (p>lorem)*3 يتوسع إلى 3 فقرات مستقلة، ويمكن دمجه مع {text} + $ في سطر واحد لصفحة كاملة
• الوسوم الضمنية تتبدل تلقائيًا حسب العنصر الوالد: ul←li، table←tr، tr←td، select←option، dl←dt/dd (الوالدين خارج القائمة البيضاء يفترضون div)
• قواعد التضمين لا تعمل إلا عند حذف اسم الوسم؛ كتابة اسم الوسم صراحة لها الأولوية دائمًا
• التضمين + class/id: ul>.item ← <li class="item">، table>#row1>.cell ← <tr id="row1"><td class="cell">

📝 تمارين

1. أساسي (الصعوبة ⭐): اكتب اختصارات Emmet في سطر واحد تتوسع إلى: (أ) فقرة p>lorem (30 كلمة Lorem)؛ (ب) فقرة 8 كلمات p>lorem8؛ (ج) قائمة منسدلة select>option*5 (5 خيارات، للتحقق من سلوك التضمين).
2. متوسط (الصعوبة ⭐⭐): اكتب "شبكة بطاقات" — عنصر section يحتوي 6 بطاقات، كل منها بعنوان ووصف 3 كلمات وزر. المتطلبات: (أ) الوصف مولّد بـ lorem3؛ (ب) العنوان يستخدم محتوى نصي {Card $} + ترقيم؛ (ج) الزر يستخدم وسومًا ضمنية + {Details}. اكتبها كلها في سطر Emmet واحد، واشرح لماذا لا يتداخل lorem3 و {Card $} مع بعضهما.
3. متقدم (الصعوبة ⭐⭐⭐): اكتب هيكل "صفحة رئيسية لمدونة" كامل يحتوي: (أ) عنصر header بشعار + 3 روابط تنقل (باستخدام nav>ul>li*3>a{Nav $})؛ (ب) عنصر main بـ 3 بطاقات مقال، كل منها بعنوان وكاتب و3 فقرات Lorem؛ (ج) عنصر aside بسحابة وسوم (5 وسوم، باستخدام ul.tag-cloud>li.tag*5>a{#tag-$})؛ (د) عنصر footer بحقوق النشر {© 2026 web-tutorial.com}. اكتبها كلها في سطر Emmet واحد (باستخدام + لربط الكتل، أو الأقواس للتجميع)، وتحقق من التوسيع، وقارن فرق الوقت بين كتابة 50+ سطر HTML يدويًا مقابل سطر Emmet واحد.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن