ایجاد لیست های مرتب و نامرتب در اچ تی ام ال
در اچ تی ام ال دو نوع لیست داریم ، لیست های مرتب و نامرتب ، برای ایجاد لیست های مرتبط از تگ <ol> و برای ایجاد لیست های نامرتب از تگ <ul> استفاده میکنیم.
چگونه لیستی مرتب از اعداد ایجاد کنم ؟
برای اینکه لیستی مرتب از اعداد ایجاد کنیم از صفت type در <ol> استفاده مکنیم.
به این صورت
<ol type="1">
<li>Item1</li>
<li>Item2>/li>
<li>Item3</i>
</ol>
خروجی
- item1
- item2
- item3
میخواهم لیست من از عدد مشخصی شروع بشه ، برای اینکار از صفت start استفاده میکنیم.
<ol type="1" start="7">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
خروجی
- item1
- item2
- item3
چگونه می توانم لیستی مرتب با حروف انگلیسی ایجاد کنم؟
برای این کار هم از صفت type به صورت زیر استفاده میکنیم.
<ol type="A">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
خروجی
- item1
- item2
- item3
چگونه میتوانم لیستی مرتب با اعداد رومی ایجاد کنم؟
برای این کار کافیست مقدار صفت را به این صورت تغریف کنیم.type=”I”
<ol type="I">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
خروجی
- item1
- item2
- 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
خب حالا یه مثال کاربردی و مهم از لیست ها
چطور با استفاده از لیست یک منو ایجاد کنیم؟
خب یه لیست ایجاد میکنیم که ایتم های آن لینک هستن !!!
<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>
خروجی
