میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

لیست در Html

با سلام به خدمت دوستان عزیز و وب دیزاینر در این بخش از آموزش قصد داریم  مطالبی در مورد لیست در Html مباحثی را عنوان کنیم باشد که مفید مواقع شود .

لیست در HTML به توسعه دهندگان وب اجازه می دهد تا مجموعه ای از موارد مرتبط را در لیست ها گروه بندی کنند.
قبل از پرداختن به ادامه آموزش، بد نیست اشاره ای هم داشته باشیم به انواع مختلف لیست در Html
لیست ها در html تقریبا در دو دسته اصلی طبقه بندی می شوند  لیست های شماره ای که در ابتدای آیتم های آن شماره قرار می گیرد و به صورت خودکار مرتب می شوند که به آنها در اصطلاح ordered یا سفارشی و مرتب شده یا ترتیبی می گویند .
و در مقابل لیست هایی که بدون شماره بوده و به جای آن، از علائم نظیر نقطه های مشکی تو پر یا تو خالی و … استفاده می شود ، به این نوع لیست ها، unordered یا نامرتب یا غیر ترتیبی می گویند که البته برخلاف نام آن، تفاوت عمده این دو لیست، تنها در شمار دار بودن یا نبودن آیتم های آنها است .
اما در کنار این دو لیست ، لیست های توصیفی یا توضیحی نیز وجود دارد که جزو دسته های اصلی حساب نمی شود

لیست نامرتب

لیست نامرتب با تگ <ul> شروع می شود.

هر مورد از لیست با تگ <li> شروع می شود.

موارد لیست به صورت پیش فرض با دایره های سیاه کوچک مشخص می شوند .

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

نمایش در مرورگر :
  • قهوه
  • چای
  • شیر

 

خاصیت list-style-type در لیست ها نامرتب

از خاصیت list-style-type برای مشخص کردن نوع نشانه های (دایره ، مربع و ..) آیتم ها در لیست استفاده می شود.

disc  از بولت برای نشان دار کردن آیتم های لیست استفاده می شود (مقدار پیش فرض)

circle  از دایره های تو خالی برای نشان دار کردن آیتم های لیست استفاده می شود

square  از مربع های توپر برای نشان دار کردن آیتم های لیست استفاده می شود

none  از هیچ نشانه ای برای نشان دار کردن آیتم های لیست استفاده نمی شود

 

<ul style=”list-style-type:square >

<li>قهوه</li>

<li>چای</li>

<li>شیر</li>

</ul>

نمایش در مرورگر :

  • قهوه
  • چای
  • شیر

 

 

لیست مرتب

لیست مرتب شده با تگ <ol> شروع می شود.
هر مورد از لیست با تگ <li> شروع می شود.
موارد لیست به طور پیش فرض با شماره مشخص می شوند .

<ol>
<li>قهوه</li>
  <li>چای</li>
  <li>شیر</li>
</ol>

نمایش در مرورگر :

  1. قهوه
  2. چای
  3. شیر

 

خاصیت type در لیست های مرتب

خاصیت type در لیست های مرتب ، نوع نشانه های آیتم ها را مشخص می کند .

“type=”1   آیتم های لیست از مقدار ۱ نشانه گذاری می شوند

“type=”A  آیتم های لیست از حروف الفبا از مقدار A (حروف بزرگ) مقدار دهی می شوند .

“type=”a  آیتم های لیست از حروف الفبا از مقدار a (حروف کوچک) مقدار دهی می شوند.

“type=”I  آیتم های لیست از اعداد یونانی از مقدار I (اعداد بزرگ) مقدار دهی می شوند .

“type=”i  آیتم های لیست از اعداد یونانی از مقدار i (اعداد کوچک) مقدار دهی می شوند .

 

<ol type=“A>

<li>چای</li>

<li>قهوه</li>

<li>شیر</li>

</ol>

نمایش در مرورگر :
  1. چای
  2. قهوه
  3. شیر

 

 

لیست های توصیفی

HTML همچنین از لیست های توصیف پشتیبانی می کند.
تگ <dl> لیست توصیف  را تعریف می کند .
تگ <dt> اصطلاح (نام) را در لیست توصیفی تعریف می کند
تگ <dd> هر اصطلاح را تعریف می کند

<dl>
 <dt>شیر</dt>
  <dd>نوشیدنی سرد و مفید </dd>
  <dt>چای</dt>
  <dd>نوشیدنی گرم و مفید</dd>
</dl>

نمایش در مرورگر :
شیر
نوشیدنی سرد و مفید
چای
نوشیدنی گرم و مفید

 

 

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

ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟