List در HTML
آموزش گام به گام html از مبتدی تا پیشرفته
نمایش لیست در HTML
لیست‌ها برای جمع‌کردن و نمایش گروهی اطلاعات هستند تا خواندن آن‌ها آسان شود. در توسعه وب مدرن، لیست ها جزو اجزای اصلی وبسایت‌ها هستند که برای ناوبری و نمایش محتوای اصلی به دفعات مورد استفاده قرار می‌گیرند. لیست ها از نگاه ساختاری خوب هستند، چرا که به تولید محتوای ساختار یافته با دسترسی و نگهداری آسان کمک می‌کنند. لیست ها به بازدید‌کنندگان وبسایت کمک می‌کند تا وبسایتتان را آسان تر مطالعه کنند. سادگی لیست ها باعث می شود بتوانید به راحتی صفحات وبسایتتان را نگهداری و به روز کنید.
مزایای عمده استفاده از لیست
- انعطاف‌پذیری: اگر شما بخواهید ترتیب آیتم‌های داخل یک لیست را در یک لیست ترتیبی عوض کنید کافیست آیتم داخل لیست را به اطراف حرکت دهید. در هنگام نمایش مرورگر آن‌ها را به ترتیب نشان می‌دهد.
- ظاهر: استفاده از لیست‌های HTML به شما اجازه می‌دهد تا از کد‌های CSS برای ظاهر لیست استفاده کنید. تگ های <li> از سایر تگ‌ها متفاوت هستند در نتیجه ما می‌توانیم به صورت مستقیم در CSS برای آن‌ها قوانین خاصی تعیین کنید.
- نمایش: لیست ها محتوای خود را به شکل یک ساختار معنا دار نمایش می‌دهند. به عنوان مثال به صفحه‌خوان‌ها اجازه می‌دهد تا به جای متن‌ها و اعداد گیج کننده، محتوا را به شکل ساختار یافته ای نمایش دهند.
انواع لیست
در HTML سه نوع لیست وجود دارد:
- لیست بدون ترتیب: برای گردآوری گروهی از آیتم‌ها بدون ترتیب بکار می رود.
- لیست ترتیبی : برای گردآوری گروهی از آیتم‌ها در یک ترتیب خاص بکار می رود.
- لیست توضیحی: یک لیست متشکل از نام/مقدار برای شرح بخش هایی مانند اصطلاحات و تعاریف می باشد.
برای نمایش لیست در زبان HTML از تگ های <UL> ، <ol> و <li> استفاده می کنیم.
لیست بدون ترتیب (Unrdered List)
لیست بدون ترتیب، بدون شماره علامت گذاری می شود.
مثال:
<html>
<body>
<ul>
<li>html</li>
<li>css</li>
<li>php</li>
</ul>
</body>
</html>
همانطور که مشاهده می کنید تگ والد یا پدر <ul> می باشد و تگ فرزند <li> .
لیست ترتیبی (Ordered List)
این لیست به صورت شماره گذاری شده نمایش می دهد.
<html>
<body>
<ol>
<li>html</li>
<li>css</li>
<li>java</li>
</ol>
</body>
</html>
لیست توضیحی (Description List)
<body>
<dl>
<dt>Shah Code</dt>
<dd>» Is a Learning</dd>
<dt>My Name</dt>
<dd>» Is Hamid</dd>
<dt>My Family</dt>
<dd>» Is Asadi</dd>
</dl>
</body>
مطالب زیر را حتما مطالعه کنید
طراحی جدول ها در بوت استرپ
سیستم Grid در بوت استرپ 4
آشنایی با Bootstrap 4
تایپوگرافی در بوت استرپ 4
آموزش قدم به قدم Bootstrap
دیدگاهتان را بنویسید