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

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

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

لیست نامرتب

  • مورد اول

  • مورد دوم

  • مورد سوم

  • مورد چهارم

لیست مرتب

  1. مورد اول

  2. مورد دوم

  3. مورد سوم

  4. مورد چهارم

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

لیستهای نامرتب برای مواردی که در آنها شمارش مهم نیست و فرقی نمیکند که هر آیتم در کجا قرار دارد مورد استفاده قرار میگیرند.

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

<html>

<body>



<h2>Unordered List with Default Bullets</h2>



<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>



</body>

</html>

 

البته میتوان با استفاده از ویژگی style، نحوه نمایش آیتمهای لیست نامرتب را تغییر داد. به این صورت که ویژگی style به لیست نامرتب افزوده میشود و شکل نشانه گر را به یکی از اینها تغییر میدهد:

 

  • “style=”list-style-type:disc : آیتمهای لیست به شکل دایره های توپر مشکینشانه گذاری میشوند (پیش فرض هم همین نوع است)

  • “style=”list-style-type:circle : آیتمهای لیست به شکل دایره نشانه گذاری میشوند.

  • “style=”list-style-type:square : آیتمهای لیست با مربع های توپر نشانه گذاری میشوند.

  • “style=”list-style-type:none : آیتمهای لیست با چیزی نشانه گذاری نمیشوند ولی همچنان ماهیت لیست بودن خودشون را حفظ میکنند.

مثال زیر هر چهار نمونه از این نوع استایلهای لیست را در بر دارد و برای دیدن خروجی میتونید این مثال رو توی فایل متنی با پسوند html ذخیره کنید و با یک مرورگر اجراش کنید.

<html>

<body>



<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>



<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>



<h2>Unordered List with Square Bullets</h2>

<ul style="list-style-type:square">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>



<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

 

لیست های مرتب

 

لیستهای مرتب برای مواردی که در آن شمارش مهم است مانند شماره گذاری مراحل انجام یک کار، استفاده میشوند. لیستع مرتب با تگ <ol> شروع میشود. هر آیتم از لیست مرتب مانند لیست نامرتب با تگ <li> آغاز میشود.

با بهره گیری از ویژگی type و مقداری که به آن میدهیم میتوانیم نحوه نشانه گذاری لیست مرتب را تغییر دهیم:

  • “type=”1 : آیتمهای لیست به با عدد شماره گذاری میشوند (پیش فرض هم همین نوع هست).

  • “type=”A : آیتمهای لیست با حروف بزرگ انگلیسی شماره گذاری میشوند.

  • “type=”a : آیتمهای لیست با حروف کوچک انگلیسی شماره گذاری میشوند.

  • “type=”I : آیتمهای لیست با اعداد بزرگ رومی شماره گذاری میشوند.

  • “type=”i : آیتمهای لیست با اعدادکوچک رومی شماره گذاری میشوند.

در مثال زیر همه نوع شماره گذاری آیتمهای لیست را نوشتم حتما این رو تمرین کنید.

<html>

<body>



<h2>Ordered List with Numbers</h2>

<ol type="1">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>



<h2>Ordered List with Letters</h2>



<ol type="A">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>



<h2>Ordered List with Lowercase Letters</h2>



<ol type="a">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>



<h2>Ordered List with Roman Numbers</h2>



<ol type="I">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>



<h2>Ordered List with Lowercase Roman Numbers</h2>


<ol type="i">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>



</body>

</html>

 

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

 

علاوه بر لیستهای مرتب و نامرتب یک نوع لیست دیگر هم هست که بهش لیست توضیحی میگن. لیست توضیحی یک لیست از واژگان با یک توضیح برای هر واژه است.

با تگ <dl> لیست توضیحی را تعریف میکنیم، تگ <dt> برای مشخص کردن واژه و تگ <dd> برای مشخص کردن توضیح برای هر واژه بکار میرود.

<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>

 

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

 

لیستها میتوانند به صورت تو در تو هم استفاده شوند یعنی یک لیست را درون یک لیست دیگر نمایش دهیم.

<html>

<body>



<h2>A Nested List</h2>



<ul>

<li>Coffee</li>

<li>Tea

<ul>

<li>Black tea</li>

<li>Green tea</li>

</ul>

</li>

<li>Milk</li>

</ul>



</body>

</html>

 

هر آیتم از لیست میتونه شامل یک لیست دیگر و همچنین عناصر دیگر مانند تصاویر، لینکها و غیره باشد.

 

لیستهای افقی

لیستهای HTML میتونن با روشهای مختلف با CSS استایل بگیرن. یکی از این روشهای پر کاربرد، نمایش لیست به شکل افقی است که از آن در ایجاد منوهای افقی استفاده میکنند.

<html>

<head>

<style>

ul#menu li {

display:inline;

}

</style>

</head>

<body>



<h2>Horizontal List</h2>



<ul id="menu">

<li>HTML</li>

<li>CSS</li>

<li>JavaScript</li>

<li>PHP</li>

</ul>



</body>

</html>

 

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

 

<html>

<head>

<style>

ul#menu {

padding: 0;

}



ul#menu li {

display: inline;

}



ul#menu li a {

background-color: black;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

}



ul#menu li a:hover {

background-color: orange;

}

</style>

</head>

<body>



<h2>Horizontal List</h2>



<ul id="menu">

<li><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/48">HTML</a></li>

<li><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/49">CSS</a></li>

<li><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/48">JavaScript</a></li>

<li><a href="http://learn.puyapardaz.ir/content/learn/learning-topics/48">PHP</a></li>

</ul>



</body>

</html>

 

دیدگاه‌ها

صفحه‌ها

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.