لیست های HTML

h2

لیست ها

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

 

Ordered Lists

لیستهای مرتب با تگ <OL> شروع میشوند و عناصر  آن با تگ باز و بسته <li> از هم جدا میشوند. مثال زیر را در نظر بگیرید همانطور که مشاهده میکنید بعد از اجرا گرفتن با لیستی شماره گذاری شده که از ۱ به صورت صعودی رشد میکند مواجه میشویم، این شماره گذاری پیش فرض است. در ادامه مطلب با نوع های دیگر نیز آشنا میشویم:

  
 <html>
 <head>
 <title>ordered list</title>
 </head>
 <body>
 <ol>
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol> 
 </body>
</html>

Capt548ure

Ordered List -خصوصیت type

توسط ویژگی type ما میتوانیم مقادیر دیگری برای شماری گذاری و مرتب کردن آیتم های لیست خود داشته باشیم

 

Type توضیح
type=”1″ آیتم های لیست با اعداد شماره گذاری میشوند(پیش فرض)
type=”A” آیتم های لیست با حروف بزرگ شماره گذاری میشوند
type=”a” آیتم های لیست با حروف کوچک شماره گذاری میشوند
type=”I” آیتم های لیست با حروف بزرگ رومی شماره گذاری میشوند
type=”i” آیتم های لیست با حروف کوچک رومی شماره گذاری میشوند

 <ol type="1|A|a|I|i">
 <li>اولین</li>
 <li>دومین</li>
 <li>سومین</li>
 </ol>

Unordered List

لیستهای نا مرتب با تگ <ul>  شروع و عناصر آن با تگ باز و بسته <li>  از هم جدا میشوند.آیتم ها با گلوله های تو پر   به صورت پیش فرض علامت گذاری میشوند. شکلهای دیگری هم هست که با خصوصیت style میشه آنها را تغییر داد. در بخش css به آن میپردازیم.

 <html>
 <head>
 <title> Unordered List</title>
 </head> 
 <body>
 <ul>
 <li>avalin</li>
 <li>dovomin</li>
 <li>sevomin</li>
 </ul> 
 </body>
</html>

unre

لیستهای  توصیفی :(Description Lists)

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

توضیح هز عنصر را تعریف میکند:

 <html>
 <head>
 <title> Description Lists</title>
 </head> 
 <body>
<dl >
 <dt>Unordered List</dt>
 <dd>- The list items will be marked with bulle</dd>
 <dt>Ordered List</dt>
 <dd> - The list items will be marked with numb </dd>
</dl>
 </body>
</html>

58re

درباره نویسنده

مهارت ها: html,css C#, sql,python

نوشته های مرتبط

نظری بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *