آموزش تگ li در HTML

6 شهریور 1401
ارسال شده توسط
آموزش html css

آموزش تگ li در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ li در HTML به صورت کامل آشنا بشید.

تگ li در HTML

تگ li یکی از پرکاربرد ترین تگ های HTML  محسوب میشود. چرا که برای هر سایتی ما نیاز به یک منو داریم که همان منو را با استفاده از این تگ ایجاد می نماییم. تگ li در واقع مخفف شده عبارت List Item است. از این تگ میتوانیم هم بای لیست های مرتب و هم نا مرتب استفاده کنیم.

مثال از تگ li در HTML

در ادامه دوره آموزشی html css پروژه محور به چند تا از مثال های این تگ میپردازیم تا بتوانید خیلی بهتر با این تگ آشنا شوید.

مثال اول : استفاده از تگ li در داخل تگ ul برای ایجاد و مشخص نمودن آیتم های لیست یا منو غیرقابل شمارش

<body>
  <ul>
     <li>سایت آموزشی وردپرس پوش</li>
     <li>سایت آموزشی وردپرس پوش</li>
     <li>سایت آموزشی وردپرس پوش</li>
  </ul>
</body>

دومین مثال : استفاده از تگ li در داخل تگ ol برای مشخص کردن آیتم های لیست یا منو قابل شمارش

<body>
  <ol>
     <li>سایت آموزشی وردپرس پوش</li>
     <li>سایت آموزشی وردپرس پوش</li>
     <li>سایت آموزشی وردپرس پوش</li>
  </ol> 
</body>

مثال شماره ۳ : استفاده از صفت value برای تگ ol

<body>
  <ol>
     <li value="10">Salam</li>
     <li>Khobi?</li>
     <li>Man</li>
     <li>Sadegh</li>
     <li>Hastam</li>
  </ol>
</body >

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

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

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ li در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

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

جدول صفات تگ li در HTML

جدول زیر به شما کمک میکند تا صفات تگ li را به همراه مقادیری را که میتوانیم در این تگ استفاده کنیم را مشاهده نماییدم.

جدول صفات تگ li در HTML

پشتیبانی تگ li از صفات و رویدادهای عمومی

تگ li قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

دستورات پیش فرض CSS 

بیشتر مرورگرها تگ li را با کد های اختصاصی CSS بشکل زیر نمایش میدهند. شما هم میتوانید بدون ایجاد هیچ تغییری از آن استفاده کنید.

li {
  display: list-item;
}
برای امتیاز به این نوشته کلیک کنید!
[کل: 1 میانگین: 5]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها:

دیدگاهتان را بنویسید