در HTML، لیست‌ها یکی از ساختارهای متداول برای نمایش دادن مجموعه‌ای از آیتم‌ها هستند. لیست‌ها معمولاً برای نمایش دادن مجموعه‌هایی از داده‌ها مانند فهرست‌ها، منوها، یا هر نوع مجموعه‌ای از آیتم‌های مشابه دیگر استفاده می‌شوند. HTML از چند مدل اصلی از لیست‌ها را پشتیبانی می‌کند:
لیست‌های نامرتب (HTML Unordered Lists)
لیست‌های نامرتب (Unordered Lists) در HTML از تگ <ul> برای تعریف و نمایش دادن مجموعه‌ای از آیتم‌ها استفاده می‌کنند که به ترتیب خود به صورت نامرتب نمایش داده می‌شوند. این لیست‌ها معمولاً با نقطه، دایره یا مربع کوچک جلوی هر آیتم نمایش داده می‌شوند.
تگ <ul> از تگ <li> برای تعریف هر آیتم در لیست استفاده می‌کند. برای ساخت لیست نامرتب، تگ <ul> باز می‌شود، سپس تگ‌های <li> برای هر آیتم درون تگ <ul> قرار می‌گیرند، و در نهایت تگ <ul> بسته می‌شود.
مثال:
<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>این کد یک لیست نامرتب با سه آیتم ایجاد می‌کند که به ترتیب نمایش داده می‌شوند.
ویژگی type
ویژگی type به ما این امکان را می‌دهد که نوع نماد استفاده شده برای نشان دادن آیتم‌های لیست را مشخص کنیم. این ویژگی به صورت اختیاری است و مقدار پیش‌فرض آن معمولاً “disc” است که به معنای استفاده از نقطه است.
مثال:
<ul type="square">
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>در این مثال، type=”square” برای تغییر نوع نماد آیتم‌ها به مربع استفاده شده است.
مدل‌های مختلف type در <ul> عبارتند از:
- – نشانه استاندارد (Disc): این مدل نشانه استاندارد استفاده می‌شود که معمولاً یک دایره سیاه است.
- – نشانه مربع (Square): در این حالت، آیتم‌ها با نشانه مربع نمایش داده می‌شوند.
- – نشانه دایره (Circle): آیتم‌ها با نشانه دایره نمایش داده می‌شوند که به طور معمول با دایره سفید و حاشیه‌ای سیاه است.
برای مثال، در زیر یک لیست نامرتب با استفاده از هر سه مدل مختلف type نشان داده شده است:
<ul type="disc">
<li>آیتم ۱</li>
<li>آیتم ۲</li>
<li>آیتم ۳</li>
</ul>
<ul type="square">
<li>آیتم ۱</li>
<li>آیتم ۲</li>
<li>آیتم ۳</li>
</ul>
<ul type="circle">
<li>آیتم ۱</li>
<li>آیتم ۲</li>
<li>آیتم ۳</li>
</ul>
لیست‌های مرتب (HTML Ordered Lists)
در HTML، لیست‌های مرتب (Ordered Lists) برای نمایش دادن مجموعه‌هایی از آیتم‌ها با شماره‌گذاری مرتب استفاده می‌شوند. لیست‌های مرتب با استفاده از تگ <ol> تعریف می‌شوند و هر آیتم لیست با تگ <li> تعریف می‌شود.
در اینجا یک مثال از یک لیست مرتب در HTML است:
<ol>
<li>آیتم ۱</li>
<li>آیتم ۲</li>
<li>آیتم ۳</li>
</ol>
این کد یک لیست مرتب ایجاد می‌کند که شامل سه آیتم می‌باشد که هرکدام با یک شماره مرتب شده‌اند.
ویژگی type
ویژگی type در تگ <ol> نوع شماره‌گذاری آیتم‌ها را مشخص می‌کند. این ویژگی به صورت اختیاری است و به طور پیش‌فرض، از شماره‌گذاری عددی استفاده می‌کند. انواع مختلف type در <ol> شامل موارد زیر می‌شوند:
- – Decimal (1, 2, 3, …): این نوع پیش‌فرض است و آیتم‌ها با اعداد دسیمال شماره‌گذاری می‌شوند.
- – Lower-alpha (a, b, c, …): آیتم‌ها با حروف کوچک الفبا شماره‌گذاری می‌شوند.
- – Upper-alpha (A, B, C, …): آیتم‌ها با حروف بزرگ الفبا شماره‌گذاری می‌شوند.
- – Lower-roman (i, ii, iii, …): آیتم‌ها با اعداد رومی کوچک شماره‌گذاری می‌شوند.
- – Upper-roman (I, II, III, …): آیتم‌ها با اعداد رومی بزرگ شماره‌گذاری می‌شوند.
برای مثال، یک لیست مرتب با استفاده از نوع شماره‌گذاری Upper-alpha به صورت زیر است:
<ol type="A">
<li>آیتم ۱</li>
<li>آیتم ۲</li>
<li>آیتم ۳</li>
</ol>در این مثال، آیتم‌ها با استفاده از حروف بزرگ الفبا شماره‌گذاری می‌شوند.
ویژگی start
در مورد ویژگی start، این ویژگی به شما امکان می‌دهد تا شماره‌گذاری لیست را از عدد دلخواهی شروع کنید. به عبارت دیگر، با استفاده از این ویژگی، می‌توانید شماره‌ی ابتدایی لیست را تعیین کنید. به طور پیش‌فرض، شماره‌گذاری از ۱ شروع می‌شود. مثال زیر نشان دهنده استفاده از ویژگی start است:
<ol start="5">
<li>آیتم ۵</li>
<li>آیتم ۶</li>
<li>آیتم ۷</li>
</ol>
در این مثال، شماره‌گذاری لیست از عدد ۵ شروع می‌شود و آیتم‌ها به ترتیب به عنوان ۵، ۶ و ۷ شماره‌گذاری می‌شوند.
لیست‌های تعریف شده (HTML Definition Lists)
در HTML، لیست‌های تعریف‌نامه‌ای (Definition Lists) برای نمایش دادن مجموعه‌هایی از داده‌های دو قسمتی به عنوان زوج‌های کلید و مقدار (key-value pairs) استفاده می‌شوند. این نوع لیست برای نمایش دادن توضیحات، معانی، ترجمه‌ها و غیره بسیار مفید است. لیست‌های تعریف‌نامه‌ای با استفاده از تگ <dl> تعریف می‌شوند و هر زوج کلید و مقدار با استفاده از تگ‌های <dt> و <dd> به ترتیب تعریف می‌شوند.
در اینجا یک مثال از یک لیست تعریف‌نامه‌ای در HTML است:
<dl>
<dt>مفهوم ۱:</dt>
<dd>توضیح مفهوم ۱</dd>
<dt>مفهوم ۲:</dt>
<dd>توضیح مفهوم ۲</dd>
<dt>مفهوم ۳:</dt>
<dd>توضیح مفهوم ۳</dd>
</dl>
در این مثال، هر زوج کلید و مقدار با استفاده از تگ‌های <dt> (تعریف‌نامه) و <dd> (توضیح) تعریف شده است. متنی که درون تگ <dt> قرار می‌گیرد، به عنوان کلید یا نام تعریف می‌شود و متنی که درون تگ <dd> قرار می‌گیرد، به عنوان مقدار یا توضیح مربوط به کلید می‌باشد.
به عنوان مثال، می‌توانید یک لیست تعریف‌نامه‌ای برای معانی یک واژه درست کنید:
<dl>
<dt>سلامتی:</dt>
<dd>وضعیتی که فرد در آن به طور فیزیکی، روحی و اجتماعی سالم است.</dd>
<dt>خوشبختی:</dt>
<dd>حالتی که فرد در آن احساس خوشحالی، رضایت و رفاه می‌کند.</dd>
<dt>تعادل:</dt>
<dd>وضعیتی که هماهنگی و تعادل در زندگی فرد وجود دارد.</dd>
</dl>
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام