100% کامل شده تا

لیست‌ها در اچ‌تی‌ام‌ال (HTML Lists)

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


لیست‌های HTML به نویسندگان وب اجازه می‌دهد مجموعه‌ای از موارد مرتبط را به وسیلهٔ لیست‌ها، گروه‌بندی کنند.[۱]


Responsive demo.svg

لیست نامرتب HTML

یک لیست نامرتب با تگ <ul> آغاز می‌شود. هر آیتم لیست با تگ <li> آغاز می‌شود.

آیتم‌های لیست به‌طور پیش‌فرض با bulletها (به فارسی: دایره‌های کوچک سیاه) نشانه‌گذاری می‌شوند:

مثال

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

مثال

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

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

</body>
</html>

Responsive demo.svg



لیست مرتب اچ‌تی‌ام‌ال (Ordered HTML List)

لیست مرتب با تگ <ol> آغاز می‌شود. هر آیتم لیست با تگ <li> آغاز می‌شود.

آیتم‌های لیست با اعداد نشانه‌گذاری می‌شوند:

مثال

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>  

</body>
</html>

Responsive demo.svg



لیست‌های توصیفی اچ‌تی‌ام‌ال (HTML Description Lists)

HTML لیست‌های توصیفی را نیز پشتیبانی می‌کند.

یک لیست توصیفی، لیستی از عبارت‌ها با توصیف هر عبارت است.

تگ <dl> لیست توصیفی را مشخص می‌کند، تگ <dt> عبارت را مشخص می‌کند (نام)، و تگ <dd> هر عبارت را توصیف می‌کند:

مثال

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

مثال

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

Responsive demo.svg



برچسب‌های لیست در اچ‌تی‌ام‌ال (HTML List Tags)


منابع آموزشی




به‌روزرسانی شده: ۸ روز پیش