تگ li در HTML

  /  فرانت اند   /  HTML   /  تگ li در HTML

با استفاده از تگ li در HTML میتوانید مورد های یک لیست مرتب یا نامرتب را تعریف کنید.

مثال

در مثال زیر ما یک لیست مرتب با تگ <ol> و یک لیست نامرتب با تگ <ul> تعریف کرده ایم:

<ol>
<li>سیب</li>
<li>گیلاس</li>
<li>موز</li>
</ol>

<ul>
<li>سیب</li>
<li>گیلاس</li>
<li>موز</li>
</ul>


تعریف و کاربرد

تگ li در HTML یک مورد را در لیست تعریف می کند.

از تگ <li> در لیست های مرتب شده <ol> یا لیست های نامرتب <ul> یا فهرست های منو <menu> استفاده می شود.

موارد تعریف شده در لیست های <ul> یا <menu> به صورت نقطه دایره شکل تو پر نمایش داده می شود.

موارد تگ <li> در عنصر <ol> معمولاً به صورت اعداد یا حروف نمایش داده می شوند.


پشتیبانی مرورگر ها

عنصر
<li>بلهبلهبلهبلهبله

خواص

خاصیتمقدارتوضیح
valuenumberنقطه شروع شمارش لیست های مرتب شده تگ <ol> را مشخص می کند

خواص عمومی

تگ li از خواص عمومی در HTML پشتیبانی میکند.

رویداد های عمومی

تگ li از رویداد های عمومی در HTML پشتیبانی میکند.

تنظیمات پیش فرض CSS

اکثر مرورگر ها عنصر li در HTML را با تنظیمات پیش فرض زیر نمایش می دهند:

li {
  display: list-item;
}

مثال های بیشتر

استفاده از ویژگی value در لیست های مرتب شده:

<ol>
<li value="100">میز</li>
<li>صندلی</li>
<li>آب</li>
<li>درخت</li>
<li>پلنگ</li>
<li>خرس</li>
</ol>


تعریف انواع لیست ها با CSS:

<ol>
<li>قهوه</li>
<li style="list-style-type:lower-alpha">چای</li>
<li>شیر</li>
</ol>
<ul>
<li>سیب</li>
<li style="list-style-type:square">موز</li>
<li>هندوانه</li>
</ul>


ایجاد یک لیست درون لیستی دیگر ( لیست های تو در تو ):

<ul>
<li>قهوه</li>
<li>چای
<ul>
<li>چای سیاه</li>
<li>چای سبز</li>
</ul>
</li>
<li>شیر</li>
</ul>


یک لیست تو در تو پیچیده تر:

<ul>
<li>قهوه</li>
<li>چای
<ul>
<li>چای سبز</li>
<li>چای سیاه
<ul>
<li>آفریقا</li>
<li>چین</li>
</ul>
</li>
</ul>
</li>
<li>شیر</li>
</ul>

برای دسترسی به آموزش های بیشتر و ویدیو های من ، کلمه کلیدی متین برونسی را داخل گوگل سرچ کنید.

ارسال یک نظر