آموزش لیست ها در HTML

4 سال پیش

امتیاز دهید post

آموزش لیست ها در HTML

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش لیست ها در HTML خواهیم پرداخت.

HTML سه روش برای مشخص کردن لیست اطلاعات به نویسندگان وب ارائه می دهد. همه لیست ها باید حاوی یک یا چند عنصر لیست باشند. لیست ها ممکن است حاوی –

<ul> – یک لیست نا مرتب است. این موارد با استفاده از بولت های ساده لیست می شود.
<ol> – یک لیست مرتب شده. این از طرح های مختلف اعداد برای لیست موارد شما استفاده می کند.
<dl> – یک لیست تعریف. این موارد شما را به همان ترتیب که در دیکشنری مرتب شده اند، مرتب می کند.

لیست های نا مرتب HTML

لیست نا مرتب مجموعه ای از موارد مرتبط است که ترتیب خاصی ندارند. این لیست با استفاده از تگ <HTML <ul ایجاد می شود. هر مورد از لیست با یک بولت مشخص شده است.

مثال

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Unordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ul&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/body&gt;
   
&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<ul>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

نوع ویژگی

برای مشخص کردن نوع بولتی که می خواهید می توانید از ویژگی type برای تگ <ul> استفاده کنید. به طور پیش فرض، این یک دیسک است. در زیر گزینه های احتمالی آورده شده است

&lt;ul type = "square"&gt;
&lt;ul type = "disc"&gt;
&lt;ul type = "circle"&gt;

مثال

در زیر مثالی آورده شده است که ما از <ul type = “square”> استفاده کردیم

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Unordered List&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;ul type = "square"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/body&gt;

&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

مثال

در زیر مثالی آورده شده است که ما از <ul type = “disc”> استفاده کردیم –

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Unordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ul type = "disc"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

مثال

در زیر مثالی آورده شده است که ما از <ul type = “circle”> استفاده کردیم –

Live Demo
&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Unordered List&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;ul type = "circle"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

Live Demo

<!DOCTYPE html>

<html>

<head>

<title>HTML Unordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ul>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

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

اگر شما ملزم به قرار دادن موارد خود در یک لیست شماره دار به جای بولت شده باشید، از لیست مرتب در HTML استفاده می شود. این لیست با استفاده از تگ <ol> ایجاد می شود. شماره گذاری از یک شروع می شود و برای هر عنصر لیست مرتب شده پی در پی که با <li> تگ می شود، یک عدد اضافه می شود.

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;ol&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<ol>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

نوع ویژگی

برای تعیین نوع شماره گذاری مورد نظر خود می توانید از ویژگی type برای تگ<ol> استفاده کنید. به طور پیش فرض، این یک عدد است. در زیر گزینه های احتمالی وجود دارد –

&lt;ol type = "1"&gt; - Default-Case Numerals.
&lt;ol type = "I"&gt; - Upper-Case Numerals.
&lt;ol type = "i"&gt; - Lower-Case Numerals.
&lt;ol type = "A"&gt; - Upper-Case Letters.
&lt;ol type = "a"&gt; - Lower-Case Letters.

<ol type = "1"> - Default-Case Numerals.

<ol type = "I"> - Upper-Case Numerals.

<ol type = "i"> - Lower-Case Numerals.

<ol type = "A"> - Upper-Case Letters.

<ol type = "a"> - Lower-Case Letters.

مثال

در زیر مثالی آورده شده است که ما از <ol type = “1”> استفاده کردیم

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;

   &lt;body&gt;
      &lt;ol type = "1"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;

&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

مثال

در زیر مثالی آورده شده است که ما از <ol type = “I”> استفاده کردیم

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ol type = "I"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

مثال

در زیر مثالی آورده شده است که در آن از <ol type = “i”> استفاده کردیم

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ol type = "i"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

مثال

در زیر مثالی آورده شده است که در آن از <ol type = “A”> استفاده کردیم

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ol type = "A"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

مثال

در زیر مثالی آورده شده است که ما از <ol type = “a”> استفاده کردیم

&lt;!DOCTYPE html&gt;
&lt;html&gt;
   
   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ol type = "a"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

ویژگی start

برای تعیین نقطه شروع شماره گذاری مورد نیاز می توانید از ویژگی start برای تگ <ol> استفاده کنید. در زیر گزینه های احتمالی وجود دارد –

&lt;ol type = "1" start = "4"&gt;    - Numerals starts with 4.
&lt;ol type = "I" start = "4"&gt;    - Numerals starts with IV.
&lt;ol type = "i" start = "4"&gt;    - Numerals starts with iv.
&lt;ol type = "a" start = "4"&gt;    - Letters starts with d.
&lt;ol type = "A" start = "4"&gt;    - Letters starts with D.

<ol type = "1" start = "4"> - Numerals starts with 4.

<ol type = "I" start = "4"> - Numerals starts with IV.

<ol type = "i" start = "4"> - Numerals starts with iv.

<ol type = "a" start = "4"> - Letters starts with d.

<ol type = "A" start = "4"> - Letters starts with D.

مثال

در زیر مثالی آورده شده است که در آن از <ol type = “i” start = “4”> استفاده کردیم

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Ordered List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;ol type = "i" start = "4"&gt;
         &lt;li&gt;Beetroot&lt;/li&gt;
         &lt;li&gt;Ginger&lt;/li&gt;
         &lt;li&gt;Potato&lt;/li&gt;
         &lt;li&gt;Radish&lt;/li&gt;
      &lt;/ol&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Ordered List</title>

</head>

<body>

<li>Beetroot</li>

<li>Ginger</li>

<li>Potato</li>

<li>Radish</li>

</ol>

</body>

</html>

خروجی

Beetroot
Ginger
Potato
Radish

Beetroot

Ginger

Potato

Radish

لیست های تعریف HTML
HTML و XHTML از سبک لیستی پشتیبانی می کند که لیست تعریف نامیده می شود، جایی که ورودی ها مانند یک دیکشنری یا دائره المعارف ذکر شده اند. لیست تعریف روش ایده آل برای ارائه واژه نامه، لیست اصطلاحات یا لیست نام / ارزش دیگر است.

لیست های تعریف از سه برچسب زیر استفاده می کند.

<dl> – شروع لیست را تعریف می کند
<dt> – ترم
<dd> – تعریف اصطلاح
</dl> – انتهای لیست را تعریف می کند

مثال

&lt;!DOCTYPE html&gt;
&lt;html&gt;

   &lt;head&gt;
      &lt;title&gt;HTML Definition List&lt;/title&gt;
   &lt;/head&gt;
    
   &lt;body&gt;
      &lt;dl&gt;
         &lt;dt&gt;&lt;b&gt;HTML&lt;/b&gt;&lt;/dt&gt;
         &lt;dd&gt;This stands for Hyper Text Markup Language&lt;/dd&gt;
         &lt;dt&gt;&lt;b&gt;HTTP&lt;/b&gt;&lt;/dt&gt;
         &lt;dd&gt;This stands for Hyper Text Transfer Protocol&lt;/dd&gt;
      &lt;/dl&gt;
   &lt;/body&gt;
    
&lt;/html&gt;

<!DOCTYPE html>

<html>

<head>

<title>HTML Definition List</title>

</head>

<body>

<dl>

<dd>This stands for Hyper Text Markup Language</dd>

<dd>This stands for Hyper Text Transfer Protocol</dd>

</dl>

</body>

</html>

خروجی

HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

HTML

This stands for Hyper Text Markup Language

HTTP

This stands for Hyper Text Transfer Protocol

منبع.

لیست جلسات قبل آموزش برنامه نویسی HTML

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش لیست ها در HTML

آموزش لیست ها در HTML

لیست های نا مرتب HTML

مثال

خروجی

نوع ویژگی

مثال

خروجی

مثال

خروجی

مثال

خروجی

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

مثال

خروجی

نوع ویژگی

مثال

خروجی

مثال

خروجی

مثال

خروجی

مثال

خروجی

مثال

خروجی

ویژگی start

مثال

خروجی

مثال

خروجی

لیست جلسات قبل آموزش برنامه نویسی HTML

دیدگاه شما

بدون دیدگاه

آموزش لیست ها در HTML

لیست های نا مرتب HTML

مثال

خروجی

نوع ویژگی

مثال

خروجی

مثال

خروجی

مثال

خروجی

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

مثال

خروجی

نوع ویژگی

مثال

خروجی

مثال

خروجی

مثال

خروجی

مثال

خروجی

مثال

خروجی

ویژگی start

مثال

خروجی

مثال

خروجی

لیست جلسات قبل آموزش برنامه نویسی HTML

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه