English العربية Português 日本語

Emmet: التداخل

HTML عبارة عن شجرة: كل وسم إما ابن لوسم آخر (متداخل داخله) أو أخ (في نفس المستوى، متجاور). > و + هما الاختصار لهاتين العلاقتين.

1. ما ستتعلمه

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

(1) نقطة الألم: كتابة HTML المتداخل يدويًا بطيئة وفوضوية

تعمل أليس في شركة تجارة إلكترونية وتبني صفحة هبوط لمنتج. تحتوي الصفحة على 4 أقسام فقط: شريط تنقل علوي، قسم رئيسي، 3 بطاقات ميزات، وتذييل. تفتح محررها لبدء البرمجة وتواجه فورًا 5 مستويات من التداخل:

HTML 
<body>
  <header>
    <nav>
      <ul>
        <li><a href=""></a></li>
      </ul>
    </nav>
  </header>
  ...
</body>

مع كل مستوى يجب أن تفكر، "داخل أي وسم أنا الآن؟" مع كل </li> يجب أن تتحقق مرة أخرى من ترتيب الإغلاق. تحسب: كتابة هيكل التداخل لهذه الصفحة المكونة من 60 سطرًا ستستغرق 15 دقيقة — و8 من تلك الدقائق تُقضى في "إيجاد موضع الإغلاق الصحيح." كتابة التداخل يدويًا ليست بطيئة فقط، إنها عرضة للخطأ — زلة واحدة وينغلق </div> في المكان الخطأ.

(2) كيف يحلها > و +

يستخدم Emmet عاملين للتعبير عن علاقتي "أصل-ابن" و"أخوة"، مكتوبين تمامًا مثل محددات CSS. تكتب أليس شريط التنقل بالكامل في سطر اختصار واحد:

TEXT 📖 للعرض فقط 
body>header>nav>ul>li*5>a

> تعني "تعمق مستوى واحدًا"، *5 تعني "كرر 5 مرات"، وكل li يحتوي تلقائيًا على a. من 5 مستويات تداخل إلى سطر اختصار واحد — من 15 دقيقة إلى 8 ثوانٍ. بعد هذا الدرس، ستعبر عن هياكل شجرية HTML بأي عمق وأي تفريع في سطر واحد باستخدام > و +.

(3) الفوائد

> و + هما الأساس لـ Emmet — عامل الصعود ^ وعامل الضرب * والتجميع () التي ستتعلمها لاحقًا كلها تُبنى فوقهما. بعد إتقان هذين العاملين، تكتب أليس الهياكل المتداخلة أسرع بـ 10 مرات، مع التوسيع التلقائي الذي يلغي "فوضى ترتيب الإغلاق." الدروس الأربعة التالية تضيف ^ و * و () و . و # و $ بالتسلسل — إنهاء هذا الدرس هو متطلب أساسي للدروس الأربعة التالية.

3. عامل التداخل >: الأصل يحتوي مباشرة على الابن

> تعني انزل — العنصر التالي في الاختصار هو الابن المباشر للعنصر السابق. إنه الرمز الأساسي لـ Emmet للتعبير عن "تداخل أصل-ابن" وهو مطابق لمحدد الابن في CSS.

جزء الاختصار المعنى الموضع المرئي
div>span span هو الابن المباشر لـ div span مزاح مستوى واحد أعمق من div
div>section>p p هو ابن section، و section هو ابن div مستويان من الإزاحة
nav>ul>li 3 مستويات من التداخل 3 مستويات من الإزاحة

نصيحة: > لا يغير موضع العنصر السابق — إنه يحدد فقط أي مستوى تنزل إليه العناصر اللاحقة. بمجرد كتابة >، تبقى جميع العناصر التالية (حتى ظهور ^ أو انتهاء الشجرة الفرعية) في ذلك المستوى.

(1) توضيح التداخل أحادي المستوى

ملاحظة: تمت إزالة الرسم التخطيطي الشجري وفقًا للمادة §7 من هذا البرنامج التعليمي (ميزانية Mermaid) — يُسمح فقط للدرس 6 باستخدام رسم Mermaid واحد. يرجى الرجوع إلى جدول تداخل > أعلاه وجدول الأخوة + أدناه: > يشكل علاقات أصل-ابن (مستوى إزاحة واحد)، بينما + يشكل أخوة نظراء (نفس الإزاحة).

يدخل كلا العنصرين الابنين إلى div عبر >، لذا p و span هما نظراء (أخوة) — لكنهما أبناء لـ div.

4. عامل الأخ +: عناصر متجاورة في نفس المستوى

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

جزء الاختصار المعنى الموضع المرئي
h1+p p هو أخ لـ h1، متجاور كلاهما لهما نفس الإزاحة
div+div عنصرا div كنظراء يشكل سلسلة أخوة
nav+main+aside 3 أخوة في نفس المستوى تخطيط كلاسيكي ثلاثي الأعمدة

نقطة أساسية: عندما يظهر + و > معًا، > هو إشارة "النزول" بينما + هو مجرد "إلحاق في نفس المستوى." على سبيل المثال، a>b+c تعني: أولاً انزل داخل a لإنشاء b، ثم ابق داخل a وألحق c. الهيكل النهائي هو <a><b></b><c></c></a>.

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

تغطي الأمثلة الخمسة التالية جميع السيناريوهات الأساسية لـ > و + — من أبسط "أصل-ابن" إلى الأشجار المختلطة المعقدة متعددة المستويات.

▶ مثال: تداخل أحادي المستوى nav>ul>li (الصعوبة: ★)

ثلاثة مستويات من التداخل الرأسي — أوضح عرض "أصل-ابن".

الاختصار:

HTML 
nav>ul>li

يتوسع إلى:

HTML 
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

الناتج:

TEXT 📖 للعرض فقط 
هيكل تنقل من 3 مستويات: nav يغلف ul، و ul يغلف li. كل `>` يزيح مستوى واحدًا أعمق. بقدر بساطته، يوضح هذا الاختصار الطريقة الأساسية لـ Emmet في التعبير عن "أصل-ابن" — جميع الهياكل الأكثر تعقيدًا تُبنى على هذا الأساس بإضافة عوامل أخرى.

▶ مثال: عناصر أخوة h1+p (الصعوبة: ★)

+ يضع وس��ين كأخوة متجاورين.

الاختصار:

HTML 
h1+p

يتوسع إلى:

HTML 
<h1></h1>
<p></p>

الناتج:

TEXT 📖 للعرض فقط 
وس��ان في نفس مستوى الإزاحة، جنبًا إلى جنب. هذا الهيكل شائع في صفحات المقالات: عنوان متبوع بفقرة. `+` لا ينشئ "حاوية خارجية" جديدة — إنه ببساطة يضع العناصر كأخوة بجوار العنصر السابق.

> ينزل، + يلحق في نفس المستوى — كتابة 5 مستويات من الهيكل المختلط في سطر واحد. لاحظ أن p و footer كلاهما يصبحان أبناء لـ main (لأن + لا يغادر المستوى الحالي).

الاختصار:

HTML 
div>header>h1+nav+main>p+footer

يتوسع إلى:

HTML 
<div>
  <header>
    <h1></h1>
    <nav></nav>
    <main>
      <p></p>
      <footer></footer>
    </main>
  </header>
</div>

الناتج:

TEXT 📖 للعرض فقط 
مسار التحليل: تحت div يوجد header (>); داخل header ثلاثة أخوة — h1، nav، main (متتالية +); أحدث نقطة نزول هي main، لذا main يحتوي على p و footer. ملاحظة: footer هنا ليس تذييل مستوى الصفحة — يصبح ابنًا لـ main، فخ كلاسيكي لخلط ">" و"+". لجعل footer أخًا لـ header و main، تحتاج إلى عامل الصعود ^ (الدرس التالي).

▶ مثال: تداخل متعدد المستويات + ضرب article>section>p*3 (الصعوبة: ★)

> ينزل عدة مستويات، *3 يكرر p النهائي 3 مرات. هذا يستعرض عامل * من الدرس 5 — قواعد الضرب الكاملة مغطاة هناك.

الاختصا��:

HTML 
article>section>p*3

يتوسع إلى:

HTML 
<article>
  <section>
    <p></p>
    <p></p>
    <p></p>
  </section>
</article>

الناتج:

TEXT 📖 للعرض فقط 
`*3` ينطبق على `p`، ويكرره 3 مرات — لاحظ أن جميع عناصر p الثلاثة هم أبناء مباشرون لـ section وأخوة لبعضهم البعض. `article>section` ينزل مرتين (مستويان من الإزاحة)، ثم يكرر 3 فقرات داخل section. لتكرار section أيضًا، يجب أن يكون الاختصار `article>(section>p*3)*2` (باستخدام تجميع الأقواس، مغطى في الدرس 6).

▶ مثال: هيكل صفحة كامل body>header+main+footer (الصعوبة: ★★)

الهيكل الكلاسيكي لصفحة HTML5 — 4 وسوم في المستوى الأعلى، مع body كجذر و header/main/footer كثلاثة أخوة.

الاختصار:

HTML 
body>header+main+footer

يتوسع إلى:

HTML 
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

الناتج:

TEXT 📖 للعرض فقط 
هيكل HTML5 القياسي ثلاثي الأقسام: header في الأعلى، main في المنتصف، footer في الأسفل — جميعهم أبناء مباشرون لـ body. هذا هو "اختصار الهيكل" لمعظم المواقع الحديثة. احفظه كنقطة انطلاق لأي صفحة. من هنا، انزل داخل header و main لملء المحتوى.

6. مثال كامل: هيكل صفحة مقال مدونة

ادمج > و + لبناء هيكل صفحة مقال مدونة كامل دلاليًا.

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

الاختصار:

HTML 
body>header+main>article>(header>h1+p.time)+section*3>p+aside>ul>li*3+footer

يتوسع إلى:

HTML 
<body>
  <header></header>
  <main>
    <article>
      <header>
        <h1></h1>
        <p class="time"></p>
      </header>
      <section>
        <p></p>
      </section>
      <section>
        <p></p>
      </section>
      <section>
        <p></p>
      </section>
      <aside>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </aside>
      <footer></footer>
    </article>
  </main>
  <footer></footer>
</body>

الناتج:

TEXT 📖 للعرض فقط 
مفتاح تحليل هذا السطر: بدءًا من body، أولاً انزل داخل main (>), main يحتوي على article (انزل مجددًا بـ >). داخل article، الأقواس تجمع header (الذي يحتوي على h1 و p.time) كشجرة فرعية مستقلة، ثم `*3` يكرر 3 sections (كل منها يحتوي على p). أخيرًا، `+` يرتب aside و footer بشكل مسطح. ملاحظة: footer الأبعد هو أخ لـ header و main; article أيضًا لديه footer داخلي خاص به في مستوى إزاحة مختلف. هذا هو التداخل والأخوة المختلطان في أكثر صورهما نموذجية.

❓ أسئلة شائعة

س أيهما له أولوية أعلى، > أم +؟
ج > يتم تحليله دائمًا أولاً. عندما يصادف Emmet >، يدفع العناصر اللاحقة إلى مستوى جديد؛ + فقط يلحق الأخوة داخل المستوى الحالي. "للترتيب المسطح أولاً ثم النزول" أو "النزول أولاً ثم الصعود"، تحتاج إلى عامل الصعود ^ (الدرس 5) أو التجميع () (الدرس 6).
س في a>b+c، هل b و c أخوة؟
ج نعم. a>b+c يتوسع إلى <a><b></b><c></c></a> — b و c كلاهما أبناء لـ a، أخوة لبعضهم البعض، لكن جميعهم داخل a. + لا يجعل c يهرب من a.
س لماذا ينتهي footer داخل main في div>header>h1+nav+main>p+footer؟
ج لأن أحدث > دفع السياق داخل main، و + افتراضيًا يلحق الأخوة في المستوى الحالي (داخل main). لذا footer يصبح ابنًا لـ main بدلاً من أن يكون أخًا لـ header/main. هذا النوع من "التداخل العرضي" يتطلب عامل الصعود ^ للإصلاح (الدرس 5).
س هل يمكنني استخدام المسافات بدلاً من > و +؟
ج لا. المسافات هي "رموز إيقاف" في Emmet — Emmet يتوقف عن التحليل عندما يصادف مسافة. div p و div>p مختلفان ت��امًا: الأول لن يتوسع أبدًا، بينما الثاني يتوسع إلى هيكل متداخل. إذا أردت "تنسيق" اختصارك في المحرر للقراءة، النهج الرسمي الحالي هو استخدام الأقواس للتجميع (الدرس 6).

📖 ملخص

📝 تمارين

  1. أساسي (الصعوبة: ★): اكتب 4 اختصارات Emmet تتوسع إلى: (أ) div يحتوي على p؛ (ب) h1 و p كأخوة؛ (ج) nav يحتوي على ul، و ul يحتوي على 3 li؛ (د) body يحتوي على header و main و footer كثلاثة أخوة.
  2. متوسط (الصعوبة: ★★): حلل الاختصار div>(header>ul>li*2>a)+footer>p (لا تتسرع في كتابة الإجابة — ارسم أولاً التسلسل الهرمي على الورق)، اذكر جميع علاقات أصل-ابن، ثم وسّع في محررك للتحقق.
  3. متقدم (الصعوبة: ★★★): استخدم اختصار Emmet واحدًا لتوسيع هيكل "صفحة هبوط منتج" كامل — يحتوي على تنقل علوي، قسم رئيسي، 3 بطاقات ميزات، وتذييل سفلي. اشرح لماذا يحدد عدد عاملي > و + عمق التداخل النهائي، واكتب 3 نسخ مبسطة مكافئة على الأقل (باستخدام الأقواس أو الصعود).
Web-Tutorial.com

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

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

100%