الكورس

Advertisements

HTML ul Tag


HTML ul Tag – يحدد الوسم <ul> قائمة غير مرتبة بالعناصر.


 

HTML ul Tag

 

مثال للتوضيح

قائمة غير مرتبة ببعض العناصر:

  • HTML
  • CSS
  • JavaScript
  • Jquery
<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>JavaScript</li>
 <li>Jquery</li>
</ul>
  • HTML
  • CSS
  • JavaScript
  • Jquery

الوسم <li> يٌستخدم لتحديد كل عنصر بالقائمة.

يمكنك إستخدام الوسم <ol> للعناصر المرتبة.


Advertisements

 

أمثلة – <ul>

 

1) القوائم الغير المرتبة بأشكال وأنواع مختلفة

 

<h2>Unorder list with default style</h2>
<ul style="list-style-type: disc;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

<h2>Unorder list with "circle" style</h2>
<ul style="list-style-type: circle;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

<h2>Unorder list with "square" style</h2>
<ul style="list-style-type: square;">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
</ul>

Unorder list with default style

  • HTML
  • CSS
  • JS

Unorder list with “circle” style

  • HTML
  • CSS
  • JS

Unorder list with “square” style

  • HTML
  • CSS
  • JS

 

2) قائمة متداخلة Nested List (ذات مستوى واحد)

 

<ul>
    <li>Category 1</li>
    <li>Category 2
        <ul>
            <li>Child Category 1</li>
            <li>Child Category 2</li>
            <li>Child Category 3</li>
            <li>Child Category 4</li>
        </ul>
    </li>
    <li>Category 3</li>
    <li>Category 4
        <ul>
            <li>Child Category 1</li>
            <li>Child Category 2</li>
            <li>Child Category 3</li>
            <li>Child Category 4</li>
        </ul>
    </li>
</ul>
  • Category 1
  • Category 2
    • Child Category 1
    • Child Category 2
    • Child Category 3
    • Child Category 4
  • Category 3
  • Category 4
    • Child Category 1
    • Child Category 2
    • Child Category 3
    • Child Category 4

 

3) قائمة متداخلة Nested List (أكثر من مستوى)

 

<ul>
    <li>Category 1</li>
    <li>Category 2
        <ul>
         <li>Child cat 1 from Category 2
            <ul>
              <li>Child Cat 1 from child Cat 1</li>
              <li>Child Cat 2 from child Cat 1</li>
              <li>Child Cat 2 from child Cat 1</li>
            </ul>
         </li>
         <li>Child cat 2 from Category 2</li>
        </ul>
    </li>
    <li>Category 3</li>
    <li>Category 4
        <ul>
         <li>Child cat 1 from Category 4
            <ul>
              <li>Child Cat 1 from child Cat 1</li>
              <li>Child Cat 2 from child Cat 1</li>
              <li>Child Cat 2 from child Cat 1</li>
            </ul>
         </li>
         <li>Child cat 2 from Category 4</li>
        </ul>
    </li>
</ul>
  • Category 1
  • Category 2
    • Child cat 1 from Category 2
      • Child Cat 1 from child Cat 1
      • Child Cat 2 from child Cat 1
      • Child Cat 2 from child Cat 1
    • Child cat 2 from Category 2
  • Category 3
  • Category 4
    • Child cat 1 from Category 4
      • Child Cat 1 from child Cat 1
      • Child Cat 2 from child Cat 1
      • Child Cat 2 from child Cat 1
    • Child cat 2 from Category 4

 

السمات العامة – Global Attributes

 

الوسم <ul> يدعم السمات العامة، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.

 


 

سمات الحدث – Event Attributes

 

كما يدعم الوسم <ul> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدثEvent Attributes.

 


 

إقرأ أيضًا – HTML <ul> Tag

 

تعرف على المزيد من المعلومات حول: HTML lists.

الوسوم المتعلقة: <li> – <ol>.

 


 

دعم المتصفحات

 

firefox - الباشمبرمجCHROME - الباشمبرمجIE - الباشمبرمجsafari - الباشمبرمجopera - الباشمبرمج
مدعوممدعوممدعوممدعوممدعوم


الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements