لیست های HTML

قسمت هفدهم-لیست های HTML

دسته بندی: آموزش HTML

نویسنده: زهرا بهرامی

۰ نظر

منتشر شده در ۱۲ آبان ۱۳۹۷

آپدیت شده در ۱۴ آبان ۱۳۹۷

قدم قبلی >

< قدم بعدی

در این آموزش html به لیست های HTML می پردازیم.

فهرست نامحدود HTML

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

آیتم های لیست به طور پیش فرض با گلوله (حلقه های کوچک سیاه و سفید) مشخص می شوند:

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

<ul>

<li>Coffee</li>

</ul>

لیست عناصر مورد نظر را انتخاب کنید

ویژگی list-style-type برای تعیین استایل علامت لیست مورد استفاده می شود:

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<li>Coffee</li>

</ul>

مرتب سازی لیست HTML

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

موارد لیست با عدد به طور پیش فرض مشخص می شوند:

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

<ol>

<li>Coffee</li>

</ol>

تگ انتخاب نوع برچسب نشانگر لیست

خصیصه نوع برچسب <ol>، نوع برچسب نشانگر لیست را تعریف می کند:

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

فهرست توضیحات HTML

HTML نیز از لیست توضیحات پشتیبانی می کند.

فهرست توصیفی یک لیست از اصطلاحات است، با شرح هر اصطلاح.

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

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

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dd>- white cold drink</dd>

</dl>

لیست های حاوی HTML

لیست را می توان توزیع کرد (لیست داخل لیست ها):

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

۱۰

<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

</ul>

نکته : اقلام لیست می تواند شامل لیست جدید و دیگر عناصر HTML مانند تصاویر و لینک ها و غیره باشد.

شمارش کنترل لیست

به طور پیش فرض یک لیست مرتب از شمارۀ ۱ آغاز می شود. اگر می خواهید شروع به شمارش از یک عدد مشخص شده، می توانید از ویژگی start استفاده کنید:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<li>Coffee</li>

</ol>

لیست افقی با CSS

لیست های HTML را می توان با بسیاری از روش های مختلف با CSS طراحی کرد.

یکی از راه های محبوب این است که لیستی را به صورت افقی بنویسید تا یک فهرست ناوبری ایجاد کنید:

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

۲۸

۲۹

۳۰

۳۱

۳۲

۳۳

۳۴

۳۵

۳۶

۳۷

۳۸

۳۹

۴۰

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: ۰;

padding: ۰;

overflow: hidden;

background-color: #۳۳۳۳۳۳;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: ۱۶px;

text-decoration: none;

}

li a:hover {

background-color: #۱۱۱۱۱۱;

}

</style>

</head>

<body>

<ul>

<li><a href="#contact">Contact</a></li>

<li><a href="#about">About</a></li>

</ul>

</body>

</html>

گام قبلی >

< گام بعدی

آموزش طراحی فروشگاه فایل با وردپرس

آموزش ویدیویی سئو وردپرس

آموزش طراحی فروشگاه فایل با وردپرس

آموزش ویدیویی سئو وردپرس

قسمت هفدهم-لیست های HTML