سرخط خبرها

تگ ul و li در HTML

تگ ulو li در HTML
تگ ulو li در HTML

لیست ها در css یکی از بخش های مهم هستند و علاوه بر اینکه برای نمایش فهرست وار مطالب مورد استفاده قرار میگیرند ، امروزه در طراحی صفحات وب ، در منو ها بیشتر به چشم میخورند به صورتی که بسیاری از منوهای آبشاری و بازشو با استفاده از همین لیست ها در css و html ایجاد میشوند.

خواستم وقتی میام،این آموزش خیلی جالب رو هم براتون بزارم. امیدوارم که معنی ul و li رو بدونید. ul مثل پدر و li مثل یه بچه هست.

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

مشخصه ی لیست در css به شما اجازه میده تا :

  • نشانگر خاصی رو برای موارد لیست های مرتب انتخاب کنید (لیست هایی با تگ ol )
  • نشانگر خاصی رو برای موارد لیست های نامرتب انتخاب کنید ( لیست هایی با تگ ul )
  • تعیین یک تصویر به عنوان نشانگر موارد لیست ها ( تگ های li )
  • و …

لیست

اگر با html آشنایی داشته باشید ( مشاهده سری کامل آموزش html) میدونید که دو نوع لیست داریم.

  • لیست های بدون ترتیب unordered list = ul که موارد موجود در این لیست ها با بولت ( • ) نشون داده میشوند و درون تگ ul قرار میگیرند.
  • لیست های دارای ترتیبordered list = ol که موارد موجود در این لیست ها با شماره و یا حروف نشون داده میشوند و درون تگ ol قرار میگیرند.

حال با استفاده از CSS میتونید در تمام این موارد تغییر ایجاد کنید و نحوه ی نمایش اونها رو تغییر بدید و یا به جای بولت یا اعداد از تصاویری که خودتون تعیین میکنید استفاده کنید.

لیست ها یکی از مهمترین و پرکاربردترین عناصر در طراحی سایت می باشند از این عناصر برای دسته بندی اطلاعات و تعیین سلسله مراتب استفاده می شود.

لیست ها به سه دسته منظم ، توضیحی و نامنظم تقسیم می شوند.

 

لیست های بدون ترتیب تگ ul =unorder list

یکی دیگر از مهمترین تگهای اچ تی ام ال در طراحی قالب سایت ، تگ ul و ترکیب آن با تگ li می باشد.

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

در این بخش از آموزش Html  ،  تگ Ul  و  تگ Li را به شما آموزش می دهیم. برای ایجاد لیست هایی که ترتیب آیتم های آنها اهمیت ندارد باید ازتگ ul که ابتدای عبارت Unordered List است استفاده کنید.

از تگ Ul برای نمایش لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.
این تگ شامل خاصیت TYPE می باشد که مواردی را در خود جای داده است.در کل این تگ علامات و نشانه های ما را در قسمت مورد نظر نمایش می دهد.

یک لیست نشانه ای ، مجموعه ای از موارد و آیتم های متفاوت در مورد یک موضوع خاص است که در ابتدای خط تعریف هر آیتم ، یک نشانه ( Bullet ) قرار می گیرد .
برای ایجاد لیست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای لیست های بدون ترتیب استفاده می شود . هر یک از آیتم های لیست توسط یک تگ درونی < li > در تگ< ol > تعریف می شود . متن بین تگ باز و بسته < li > ، عنوان یا متن آن آیتم است .

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

 
<!doctype html>
<html>
<head>
 <title>test</title>
</head>
<body>
 <ul>
 <li>Lorem.</li>
 <li>Velit.</li>
 <li>Nemo.</li>
 <li>Incidunt.</li>
 </ul>
</body>
</html>
  
نتیجه :
  • Lorem.
  • Velit.
  • Nemo.
  • Incidunt.

به طور پیش فرض هر کدام از آیتم های لیست های نامنظم (تگ li ) دارای یک نشانگر می باشد.

Example
کد خروجی
< ul > List of Lessons
< li > English < /li >
< li > MathMatic < /li >
< li > History < /li >
< /ul >
List of Lessons

  • English
  • MathMatic
  • History

صفت های تگ ul

این تگ دارای صفات زیادی نیست و مهمترین آن عبارت است از:

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

۱٫ disc : این نشانگر، نشانگر پیش فرض لیست می باشد که یک دایره توپر می باشد.
۲٫ circle : این نشانگر یک دایره توخالی می باشد.
۳٫ square : این نشانگر یک مربع توپر می باشد.
<!doctype html>
 <html>
 <head>
  <title>test</title>
 </head>
 <body>
  <ul type="disc">
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  </ul>
  <ul type="circle">
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  </ul>
  <ul type="square">
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  </ul>
 </body>
 </html>
 
نتیجه
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.
  • Lorem ipsum.

لیست های منظم تگ ol = order list

برای ایجاد لیست های ترتیبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای لیست های ترتیبی استفاده می شود . هر یک از آیتم های لیست توسط یک تگ درونی < li > در تگ< ol > تعریف می شود . متن بین تگ باز و بسته < li > ، عنوان یا متن آن آیتم است .

 

این لیست ها با تگ ol آغاز می شوند و آیتم آن نیز با تگ li ، تفاوت این لیست با لیست نامنظم در نشانگر آن است لیست های نامنظم نشانگر همه آیتم ها یکی است ولی در لیست های منظم ، آیتم ها یا دارای شماره منحصر به فرد یا الفبای منحصر به فرد می باشد به مثال زیر نگاه کنید:

<!doctype html>
<html>
<head>
 <title>test</title>
</head>
<body>
 <ol>
 <li>Lorem.</li>
 <li>Velit.</li>
 <li>Nemo.</li>
 <li>Incidunt.</li>
 </ol>
</body> 
</html>
 

 نتیجه

  1. Lorem.
  2. Velit.
  3. Nemo.
  4. Incidunt.

 

Example
کد خروجی
< ol > List of Lessons
< li > English < /li >
< li > MathMatic < /li >
< li > History < /li >
< /ol >
List of Lessons

  1. English
  2. MathMatic
  3. History

 صفت های تگ ol

از جمله صفات این تگ عبارتند از:

صفت type : این صفت شمارشگر آیتم ها را تعیین می کنید که  مقادیر آن عبارتند از:

۱٫ ۱ : این مقدار، پیش فرض لیست های منظم می باشد و نوع شمارشگر را عدد تعیین می کند.

۲٫ A : این شمارشگر حروف بزرگ لاتین می باشد.

۳٫ a : این شمارشگر حروف کوچک لاتین می باشد.

۴٫ I : این نشانگر حروف بزرگ رومی می باشد.

۵٫ i : این نشانگر حروف کوچک رومی می باشد.

 
<!doctype html>
 <html>
 <head>
 <title>test</title>
 </head>
 <body>
 <ol type="1">
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 </ol>
 <ol type="A">
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 </ol>
 <ol type="a">
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 </ol>
 <ol type="I">
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 </ol>
 <ol type="i">
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 </ol>
 </body>
 </html>

نتیجه :

  1. Lorem ipsum.
  2. Lorem ipsum.
  3. Lorem ipsum.
  1. Lorem ipsum.
  2. Lorem ipsum.
  3. Lorem ipsum.
  1. Lorem ipsum.
  2. Lorem ipsum.
  3. Lorem ipsum.
  1. Lorem ipsum.
  2. Lorem ipsum.
  3. Lorem ipsum.
  1. Lorem ipsum.
  2. Lorem ipsum.
  3. Lorem ipsum.

 

تگ LI= list item

با ادغام تگ های li , ul برای نمایش لیست های نامرتب استفاده می کنند.توجه داشته باشید که برای ورود دستورات خود در این لیست ابتدا باید تگ Ul را قرار داد و سپس دستورات را در تگ Li وارد کرد.توجه داشته باشید که این تگ می تواند به صورت یکه هم نوشته شود.

مثال زیر کاربرد تگ li و تگ ul را در بخش آموزش html نشان می دهد.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
  </ul>

نتیجه :

  • Coffee
  • Tea
  • Milk

 

 صفت های تگ li 

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

صفت type

این صفت دارای مقادیر زیر می باشد که توضیح آن در بالا آمده است.
۱
A
a
I
i
disc
square
circle

صفت vlaue

این صفت تعیین می کند که از آن li به بعد شمارشگر از چه مقداری شروع کند( این فقط برای آیتم های لیست های منظم می باشد).

<!doctype html>
 <html>
 <head>
  <title>test</title>
 </head>
 <body>
  <ol type="1">
  <li value="20">Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li value="30">Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  <li>Lorem ipsum.</li>
  </ol>
 </body>
 </html>

 نتیجه :

  1. Lorem ipsum.
  2. Lorem ipsum.
  3. Lorem ipsum.
  4. Lorem ipsum.
  5. Lorem ipsum.
  6. Lorem ipsum.
  7. Lorem ipsum.
QR Code For: تگ ul و li در HTML

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.