بهترین سایت برای توسعه دهندگان وب

دروس HTML5

شروع HTML مقدمه HTML ویرایشگران HTML مثالهای اساسی HTML المان های HTML ویژگی های HTML عناوین HTML بندهای HTML سبک های HTML قالب بندی HTML نقل قول های HTML نظرات HTML رنگهای HTML HTML و CSS پیوندهای HTML تصاویر HTML جداول HTML لیست های HTML بلوک های HTML کلاس های HTML شناسه های HTML فریم های HTML HTML و JavaScript مسیرهای پرونده HTML HTML قسمت هدینگ چیدمان های HTML HTML پاسخگو کد رایانه HTML موجودیت HTML نمادهای HTML رمزگذاری HTML رمزگذاری URL HTML HTML و XHTML

HTML فرم ها

فرم های HTML عناصر فرم HTML انواع ورودی HTML صفات ورودی HTML

HTML5

مقدمه HTML5 پشتیبانی HTML5 عناصر جدید HTML5 عناصر معنایی HTML5 مهاجرت از HTML4 راهنمای سبک HTML5

HTML گرافیک

HTML Canvas HTML SVG

HTML رسانه

HTML ویدیوی HTML صوت HTML افزونه های HTML یوتیوب HTML

HTML API

مکان جغرافیایی HTML کشیدن / رها کردن HTML HTML ذخیره وب HTML کارهای وب HTML و SSE

HTML مثال

مثالهای HTML آزمون ها HTML تمرینات HTML گواهی HTML خلاصه HTML قابلیت دسترسی به HTML

HTML منابع

لیست برچسب های HTML صفات HTML صفات جهانی HTML رویدادهای HTML رنگهای HTML کانواس HTML صوتی / تصویری HTML نسخه معتبر HTML مجموعه نویسه های HTML رمزگذاری URL HTML رمزگذاری زبان HTML پیام های HTTP روشهای HTTP مبدل PX به EM میانبرهای صفحه کلید

HTML5 درسهایی برای مبتدیان

لیست های HTML

 نمونه لیست های HTML

لیست نامرتب:

  • پاراگراف
  • پاراگراف
  • پاراگراف
  • پاراگراف

لیست مرتب شده:

  1. نکته اول
  2. نکته دوم
  3. نکته سوم
  4. نکته چهارم
خودتان آزمایش کنید »

لیست نامرتب HTML

لیست نامرتب با برچسب <ul> شروع می شود. هر مورد از لیست با برچسب <li> شروع می شود.

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

مثال

<ul>
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ul>

خودتان آزمایش کنید »


لیست HTML نامرتب - Bullet Item List را انتخاب کنید

ویژگی list-style-type در CSS برای تعریف سبک نشانگر مورد list استفاده می شود. این می تواند یکی از مقادیر زیر را داشته باشد:

مقدار توضیح
disc نشانگر مورد لیست را به یک گلوله تنظیم می کند (پیش فرض)
circle نشانگر مورد لیست را به یک دایره تنظیم می کند
square نشانگر مورد لیست را به یک مربع تنظیم می کند
none موارد لیست علامت گذاری نمی شوند

مثال - حالت دیسک یا گلوله

<ul style="list-style-type:disc;">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ul>
  • کافه
  • چایی
  • شیر
خودتان آزمایش کنید »

مثال - دایره

<ul style="list-style-type:circle;">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ul>
  • کافه
  • چایی
  • شیر
خودتان آزمایش کنید »

مثال - مربع

<ul style="list-style-type:square;">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ul>
  • کافه
  • چایی
  • شیر
خودتان آزمایش کنید »

مثال - خالی

<ul style="list-style-type:none;">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ul>
  • کافه
  • چایی
  • شیر
خودتان آزمایش کنید »

لیست مرتب

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

موارد لیست با شماره های پیش فرض برچسب گذاری می شوند:

مثال

<ol>
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

لیست HTML مرتب - نوع ویژگی

ویژگی type از برچسب <ol> نوع نشانگر مورد لیست را تعریف می کند:

نوع توضیحات
type="1" موارد لیست با شماره شماره گذاری می شوند (پیش فرض)
type="A" شماره لیست ها با حروف بزرگ شماره گذاری می شود
type="a" شماره لیست ها با حروف کوچک شماره گذاری می شود
type="I" موارد لیست با شماره های بزرگ رومی شماره گذاری می شوند
type="i" موارد لیست با شماره های کوچک رومی شماره گذاری می شوند

شماره:

<ol type="1">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

حروف بزرگ:

<ol type="A">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

حروف کوچک:

<ol type="a">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

اعداد بزرگ رومی:

<ol type="I">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

اعداد کوچک رومی:

<ol type="i">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

لیست های توصیف HTML

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

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

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

مثال

<dl>
  <dt>کافه</dt>
  <dd>- نوشیدنی گرم سیاه </dd>
  <dt>شیر</dt>
  <dd>- نوشیدنی سرد سفید </dd>
</dl>
کافه
- نوشیدنی گرم سیاه
شیر
- نوشیدنی سرد سفید
خودتان آزمایش کنید »

لیست های تو در تو HTML

لیست را می توان تو در تو قرار داد (لیست در لیست):

مثال

<ul>
  <li>کافه</li>
  <li>چایی
    <ul>
      <li> چایی سیاه</li>
      <li> چایی سبز</li>
    </ul>
  </li>
  <li>شیر</li>
</ul>
  • کافه
  • چایی
    • چایی سیاه
    • چایی سبز
  • شیر
خودتان آزمایش کنید »

توجه:: موارد لیست می توانند شامل لیست جدید و سایر المان های HTML مانند تصاویر و پیوندها و غیره باشند.


شمارش چک لیست

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

مثال

<ol start="50">
  <li>کافه</li>
  <li>چایی</li>
  <li>شیر</li>
</ol>
  1. کافه
  2. چایی
  3. شیر
خودتان آزمایش کنید »

لیست افقی با CSS

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

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

مثال

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

li {
  float: right;
}

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">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">تماس</a></li>
  <li><a href="#about">در مورد ما</a></li>
</ul>

</body>
</html>
خودتان آزمایش کنید »

نکته: می توانید در آموزش CSS ما درباره CSS بیشتر بیاموزید .


خلاصه درس

  • از المان <ul> در HTML برای تعریف یک لیست غیر مرتب استفاده کنید
  • از ویژگی list-style-type برای تعریف نشانگر مورد لیست استفاده کنید
  • برای تعریف یک مورد از المان <ol> در HTML استفاده کنید
  • از ویژگی type HTML برای تعریف نوع شماره گذاری استفاده کنید
  • برای تعریف مورد لیست از عنصر <li> در HTML استفاده کنید
  • برای تعریف لیست توضیحات از عنصر <dl> در HTML استفاده کنید
  • از عنصر <dt> در HTML برای تعریف اصطلاح توصیف استفاده کنید
  • برای توصیف اصطلاح در لیست توصیف از عنصر <dd> در HTML استفاده کنید
  • لیست ها می توانند تو در تو قرار بگیرند
  • موارد لیست می تواند شامل سایر المان های HTML باشد
  • برای نمایش لیستی به صورت افقی از float:left و display:inline خاصیت CSS استفاده کنید:

تمرینات HTML

خود را امتحان کنید

تمرین:

لیست مورد را با متن "کافه" در داخل مورد اضافه کنید:<ul>.

<ul>کافه</ul>

شروع کنید


برچسب های لیست HTML

برچسب توضیحات
<ul> لیست نامرتبی را تعریف می کند
<ol> لیست مرتب شده ای را تعریف می کند
<li> یک مورد لیست را تعریف می کند
<dl> لیست شرح را تعریف می کند
<dt> اصطلاحی را در لیست توضیحات تعریف می کند
<dd> این اصطلاح را در یک لیست توصیف توصیف می کند

برای مشاهده لیست کامل تمام برچسب های مرجع برچسبHTML موجود ، از HTML ما دیدن کنید .






این سایت برای آموزش ، آزمایش و یادگیری بهینه شده است. نمونه ها را می توان برای بهبود ساده کرد خواندن و درک اساسی. آموزشها ، پیوندها و مثالها مرتباً تجدید نظر می شوند تا از آنها جلوگیری شود خطاها ، اما ما نمی توانیم صحت و عملکرد کامل همه مطالب را تضمین کنیم. با استفاده از این سایت ، شما موافقت می کنید که مطالعه کرده اید و پذیرفته ایدمقررات استفاده , کوکی و سیاست های حفظ حریم خصوصی. کپی رایت 1999-2020 حق چاپ و .. محفوظ توسط احمد فرجی
سایت توسط چارچوب farsiw3.ir طراحی شده است.

Farsiw3.ir