ایجاد لیست های مرتب و نامرتب در اچ تی ام ال

ایجاد لیست های مرتب و نامرتب در اچ تی ام ال

در اچ تی ام ال دو نوع لیست داریم ، لیست های مرتب و نامرتب ، برای ایجاد لیست های مرتبط از تگ <ol> و برای ایجاد لیست های نامرتب از تگ <ul> استفاده میکنیم.

چگونه لیستی مرتب از اعداد ایجاد کنم ؟

برای اینکه لیستی مرتب از اعداد ایجاد کنیم از صفت type در <ol> استفاده مکنیم.

به این صورت

<ol type="1">
<li>Item1</li>
<li>Item2>/li>
<li>Item3</i>
</ol>

خروجی

  1. item1
  2. item2
  3. item3

میخواهم لیست من از عدد مشخصی شروع بشه ، برای اینکار از صفت start استفاده میکنیم.

<ol type="1" start="7">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

خروجی

  1. item1
  2. item2
  3. item3

چگونه می توانم لیستی مرتب با حروف انگلیسی ایجاد کنم؟

برای این کار هم از صفت type به صورت زیر استفاده میکنیم.

<ol type="A">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

خروجی

  1. item1
  2. item2
  3. item3

چگونه میتوانم لیستی مرتب با اعداد رومی ایجاد کنم؟

برای این کار کافیست مقدار صفت را به این صورت تغریف کنیم.type=”I”

<ol type="I">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>

خروجی

  1. item1
  2. item2
  3. item3

چطور لیستی نامرتب ایجاد کنم؟

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

خروجی

  • item1
  • item2
  • item3

چطور لیستی ایجاد کنم که دایره نشون داده بشه ؟

برای اینکار از تگ type با مقدار circle استفاده میکنیم.

<ul type="circle">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

خروجی

  • item1
  • item2
  • item3

چطور لیستی ایجاد کنم که دایره توپر نشون داده بشه ؟

برای اینکار از تگ type با مقدار disc استفاده میکنیم.

<ul type="disc">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

خروجی

  • item1
  • item2
  • item3

چطور لیستی ایجاد کنم که مربع نشون داده بشه ؟

برای اینکار از تگ type با مقدار squareاستفاده میکنیم.

<ul type="square">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

خروجی

  • item1
  • item2
  • item3

خب حالا یه مثال کاربردی و مهم از لیست ها

چطور با استفاده از لیست یک منو ایجاد کنیم؟

آموزش ایجاد لینک در html

خب یه لیست ایجاد میکنیم که ایتم های آن لینک هستن !!!

<ul>
<li><a href="link" title="">home</a></li>
<li><a href-"" title="">blog</a></li>
<li><a href="" title="">email</a></li>
<li><a href="" title="">contact</a></li>
</ul>

خروجی

نظرات۰

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی