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
- Child cat 1 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
- Child cat 1 from Category 4
السمات العامة – Global Attributes
الوسم <ul> يدعم السمات العامة، تعرف عليهم عن طريق هذا الرابط: السمات العامة – Global Attributes.
سمات الحدث – Event Attributes
كما يدعم الوسم <ul> سمات الحدث أيضًا، تعرف عليهم عن طريق هذا الرابط: سمات الحدث – Event Attributes.
إقرأ أيضًا – HTML <ul> Tag
تعرف على المزيد من المعلومات حول: HTML lists.
دعم المتصفحات
![]() | ![]() | ![]() | ![]() | ![]() |
مدعوم | مدعوم | مدعوم | مدعوم | مدعوم |
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!
Advertisements