از لیست های html برای گروه بندی محتوا استفاده کنید و به آن استایل دهید تا با طراحی شما مطابقت داشته باشد، فقط مطمئن شوید که از نوع درستی از لیست استفاده می کنید.
تعاریف کلیدی
- لیست های HTML برای سازماندهی و ارائه داده ها در یک صفحه وب ضروری هستند. سه نوع اصلی وجود دارد: لیست های مرتب، نامرتب و لیست های توصیفی.
- لیست های مرتب شده از اعداد یا کاراکترهای دیگر برای سفارش دادن موارد استفاده می کنند. ویژگی type اجازه سفارشی‌سازی را می‌دهد، در حالی که ویژگی‌های start و reversed موقعیت و ترتیب شروع را تغییر می‌دهند.
- لیست های نامرتب موارد مرتبط را بدون ترتیب خاصی گروه بندی می کنند. سبک گلوله را می توان با استفاده از CSS سفارشی کرد.
لیست HTML یک عنصر ساختاری ضروری برای هر گروه از داده های مرتبط در یک صفحه وب است. خواه در حال ایجاد یک منو، سازماندهی اقلام موجود در فروش، یا تلاش برای ارائه داده های پیچیده به شکلی خواناتر باشید، لیست های زیر به شما کمک می کند کار را انجام دهید.
سه نوع اصلی از لیست های HTML وجود دارد که هر کدام هدف ساختاری خاصی را در توسعه وب انجام می دهند.
1. فهرست سفارش داده شده
لیست مرتب شده HTML به شما امکان می دهد لیستی از موارد مرتبط را در یک ترتیب خاص گروه بندی کنید. برای ایجاد یک لیست مرتب شده جدید، باید از تگ
- استفاده کنید. تگ
- است. هر عنصر لیست (برچسب
- ) شامل یک آیتم خاص در لیست خواهد بود.
<!-- Ordered list -->
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>این کد نمای زیر را ارائه می دهد:
باید توجه داشته باشید که نوع سفارش پیش‌فرض لیست مرتب شده اعداد است، اما می‌توانید با استفاده از ویژگی type این مورد را تغییر دهید. ویژگی type به شما این قدرت را می دهد که تصمیم بگیرید چه عنصری لیست شما را سفارش دهد. شما می توانید از حروف الفبا (بزرگ یا کوچک)، اعداد یا اعداد رومی (بزرگ یا کوچک) استفاده کنید.
<!-- Ordered list -->
<ol type="a">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>افزودن ویژگی type به تگ
- نمای به روز شده زیر را ارائه می کند:
- برای هر آیتم لیست استفاده کنید:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>این کد نمای زیر را ارائه می دهد:
سبک گلوله پیش فرض برای یک لیست نامرتب یک دیسک است. در گذشته، می‌توانستید از ویژگی type برای تنظیم سبک گلوله یک لیست نامرتب استفاده کنید. با این حال، صفت نوع لیست نامرتب اکنون یک ویژگی منسوخ شده است. جایگزین توصیه شده برای یک ظاهر طراحی نامرتب لیست، ویژگی CSS list-style-type است.
<style>
ul { list-style-type: square; }
</style>کد بالا نما را به موارد زیر به روز می کند:
ویژگی CSS list-style-type به شما امکان می دهد از مجموعه ای از سبک های مختلف گلوله، از جمله دایره ها، تصاویر سفارشی، نمادها یا نمادها استفاده کنید. با CSS که چیدمان آیتم های لیست را تغییر می دهد، حتی می توانید از لیست های نامرتب برای ایجاد نوارهای پیمایش استفاده کنید.
لیست های تو در تو
لیست تودرتو یک عنصر لیست است که بخشی از لیست دیگری است. می توانید با استفاده از ترکیبی از عناصر لیست مرتب و/یا نامرتب یک لیست تودرتو ایجاد کنید. این ساختارها می توانند سلسله مراتب پیچیده تری را نشان دهند.
<H3>Chicken Pasta Insturctions</H3>
<ol>
<li>Boil pasta.</li>
<li>
Season chicken breast.
<ul>
<li>salt and pepper</li>
<li>paprika</li>
<li>garlic powder</li>
<li>Italian seasoning</li>
</ul>
</li>
<li>Heat olive oil in pot over medium-high heat.</li>
<li>Add chicken breast to pan and cook for 5 minutes.</li>
<li>Add heavy cream and parmesan cheese to empty pot.</li>
<li>Add pasta and slice chicken to cream sauce.</li>
</ol>این کد نمای زیر را ارائه می دهد:
3. فهرست توضیحات
عنصر لیست توضیحات به شما امکان می دهد لیستی از اصطلاحات و جزئیات مرتبط با آنها ایجاد کنید. تگ
- شما را قادر می سازد تا یک لیست توضیحات جدید ایجاد کنید که باید با عناصر
- (اصطلاح توضیحات) و
- (جزئیات توضیحات) استفاده کنید.
<h3>Popular Laptops</h3>
<dl>
<dt>MacBook Pro</dt>
<dd>
Provides up to 22 hours of battery life,
has an advanced camera, and a magic keyboard with touch ID.
</dd>
<dt>MSI GS76 Stealth</dt>
<dd>
A powerful gaming laptop with supercharged graphics and customized keys.
</dd>
</dl>کد بالا نمای زیر را ارائه می دهد:
محتوای خود را با فهرست HTML مناسب سازماندهی کنید
لیست HTML که برای استفاده در پروژه توسعه وب خود انتخاب می کنید باید به محتوایی که می خواهید به کاربران خود ارائه دهید بستگی دارد. به عنوان مثال، اگر می خواهید یک لیست متوالی مانند مراحل تهیه یک وعده غذایی یا تکمیل یک کار ایجاد کنید، لیست سفارشی بهترین گزینه شما است.
با این حال، اگر می‌خواهید اطلاعات مرتبطی را که به یک سری مراحل (مانند چک لیست) نیاز ندارند، گروه بندی کنید، یک لیست نامرتب گزینه مناسب‌تری خواهد بود. علاوه بر این، اگر می خواهید یک واژه نامه یا لیستی از سوالات متداول ایجاد کنید، لیست توضیحات انتخاب بهتری است.
علاوه بر ویژگی type، دو ویژگی دیگر وجود دارد که می توانید با تگ
- استفاده کنید: start و reversed.
ویژگی start به شما این امکان را می دهد که از هر موقعیتی با استفاده از یک مقدار صحیح شروع به سفارش کنید. برای مثال، اگر start=”3″ را به تگ
- اضافه کنید، بدون تعیین نوع، شروع به ترتیب دادن لیست از شماره سه می کند. اگر یک type=”a” یا type=”I” اختصاص دهید، به ترتیب از c یا III شروع به سفارش می کند.
<!-- Ordered list -->
<ol type="I" start="3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>کد بالا نمای زیر را ارائه می دهد:
ویژگی reversed به شما امکان می دهد ترتیب لیست را معکوس کنید. یک مقدار بولی را می پذیرد و مقدار پیش فرض آن نادرست است.
<!-- Ordered list -->
<ol reversed="true">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>این کد خروجی زیر را در مرورگر تولید می کند:
2. لیست نامرتب
لیست نامرتب به شما امکان می دهد موارد مرتبطی را که ترتیب آنها مهم نیست گروه بندی کنید. به طور پیش فرض، یک مرورگر از یک نقطه گلوله برای برچسب زدن هر مورد استفاده می کند.
برای ایجاد یک لیست نامرتب جدید، باید از تگ
- به عنوان عنصر والد و تگ
- برای هر آیتم لیست استفاده کنید:
- گروه بندی می کند و حاوی تگ های