علامة HTML <ul>
مثال
قائمة HTML غير مرتبة:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد العلامة <ul>قائمة (نقطية) غير مرتبة.
استخدم <ul>العلامة مع العلامة <li> لإنشاء قوائم غير مرتبة.
نصيحة: استخدم CSS لتصميم القوائم .
نصيحة: للقوائم المرتبة ، استخدم علامة <ol> .
دعم المتصفح
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
السمات العالمية
تدعم <ul>العلامة أيضًا السمات العامة في HTML .
سمات الحدث
تدعم <ul>العلامة أيضًا سمات الحدث في HTML .
مزيد من الأمثلة
مثال
عيّن أنواع أنماط القائمة المختلفة (باستخدام CSS):
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال
توسيع وتقليل ارتفاع السطر في القوائم (باستخدام CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul
style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
مثال
قم بإنشاء قائمة داخل قائمة (قائمة متداخلة):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
مثال
قم بإنشاء قائمة متداخلة أكثر تعقيدًا:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
الصفحات ذات الصلة
دروس HTML: قوائم HTML
مرجع DOM HTML: Ul Object
دروس CSS: قوائم التصميم
إعدادات CSS الافتراضية
ستعرض معظم المتصفحات <ul>العنصر بالقيم الافتراضية التالية:
مثال
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}