یک صفحه وب به عنوان یکی از بهترین روشهای ارائه اطلاعات مرتب سازی و نمایه می شود. از طریق HTML می توان دو نوع لیست تهیه کرد.

  • فهرست مرتبشده
  • لیست نامرتب

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

< ul type = “disc/circle/square”>
<li>…….</li>
<li>…….</li>
<li>…….</li>
<li>…….</li>
</ul>

type = “disc” یک دیسک جامد تنظیم می کند. type = “circle” یک دایره خالی تنظیم می کند. type = “مربع” یک مربع جامد تنظیم می کند.

مثال 1

<html>
<ul type ="disc">
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ul>
</html>

خروجی

مثال 2


<ul type = “circle”>
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ul>
</html>

خروجی

ای بالا

ای پنجاب

ای هاریانا

ای نماینده مجلس

لیست های سفارش داده شده

<ol type = “1/A/a”>
<li>………</li>
<li>………</li>
<li>………</li>
<li>………</li>
</ol>

type = “1” اعداد توالی را تعیین می کند. type = “A” مجموعه حروف بزرگ A ، B ، C .. type = “a” ترتیب حروف کوچک a ، b ، c sequ را می دهد

مثال

<html>
<ol type= “1”>
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>

خروجی

  1. بالا
  2. پنجاب
  3. هاریانا
  4. نماینده مجلس

مثال

<html>
<ol type ="A">
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>

خروجی

A.UP

ب.پونجاب

سی هاریانا

D.MP

مثال

<html>
<ol type ="a">
<li>UP</li>
<li>Punjab</li>
<li>Haryana</li>
<li>MP</li>
</ol>
</html>

خروجی

a.UP

ب پونجاب

ج هاریانا

d.MP

لیست های تعریف

<dl>
<dt>……..</dt>  <dd>…….</dd>
<dt>……..</dt>  <dd>…….</dd>
<dt>……..</dt>  <dd>…….</dd>
</dl>

شامل همه موارد لیست تعریف است

شامل اولین لایه موارد است.

شامل تمام لایه دوم موارد لیست است

مثال

<html>
<dl>
<dt>AAAA</dt>  <dd>These are A letters</dd>
<dt>BBBB</dt>  <dd> These are B letters </dd>
<dt>CCCC</dt>  <dd> These are C letters </dd>
</dl>
</html>

خروجی

بله

اینها حروف A هستند

BBBB

اینها حرف B هستند

CCCC

اینها نامه های C هستند

توضیح

شامل همه موارد لیست تعریف است.

AAAA

شامل اولین لایه موارد لیست “AAAA” است.

این حروف است شامل لایه دوم موارد لیست “این حروف A هستند”.

سبک لیست های غیر مرتب

لیست های غیر منظم سبک CSS را بر اساس شناسه ، کلاس یا نام برچسب تنظیم می کنند.

.class{attribute:value}

مثال

<html>
<style type = “text/css”
#b{font-style:italic}
</style>
<body>
<ol class = “b”>
<li>AAA</li>
<li>BBB</li>
</ol>
</body>
</html>

خروجی

  1. AAA
  2. BBB

توضیح: # b {font-style: italic} قلم را به صورت ایتالیک برای کلاس تنظیم می کند = ”a”

سبک لیست های تعریف شده

تعریف را می توان سبک CSS را با شناسه ، کلاس یا نام برچسب آن تنظیم کرد.

برچسب {ویژگی: ارزش}

مثال

<html>
<style type =”text/css”>
dt{color:purple}
dd{font-style:italic}
<style>
<dl>
<dt>AAAAA</dt>   <dd> These are A letters </dd>
<dt>BBBBB</dt> <dd> These are B Letters </dd>
</dl>
</html>

خروجی:

AAAAA

اینها نامه هستند

BBBBB

اینها نامه های B هستند

توضیح: dt {color: purple} & dd {font-style: italic} سبک css را بر اساس نام برچسب تنظیم می کند.