لیست ها در Html به دو صورت می باشند . لیست های مرتب و نامرتب . یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند.
آیتم های لیست نامرتب معمولا بوسیله یک دایره سیاه کوچک مشخص می شوند.یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند.
آیتم های لیست مرتب بوسیله اعداد مشخص می شوند. کاربرد لیست ها در صفحات وب بسیار پر کاربرد و حائز اهمیت می باشد که در ادامه به طور کامل این قسمت را برای شما آموزش میدهم .
تگ های مربوط به لیست در Html 3 تگ <ul>, <li>, <ol> می باشد .
لیست های نامرتب در HTML
یک لیست نامرتب با تگ <ul> و هر آیتم در لیست با تگ <li>شروع می شوند
<h3>HTML Unordered Lists</h3>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- خروجی کد به شکل زیر می باشد
- Coffee
- Milk
یک لیست مرتب با تگ <ol> و هر آیتم در لیست با تگ <li>شروع می شوند. آیتم های لیست مرتب بوسیله اعداد مشخص می شوند.
لیست های مرتب در HTML
<p></p><p style="text-align: left;" dir="ltr"><h3>HTML Ordered Lists</h3><ol><li>Coffee</li><li>Milk</li></ol>
</p>- خروجی کد به شکل زیر می باشد
- Coffee
- Milk
HTMLلیست تعریفی در
یک لیست تعریفی لیستی از آیتم ها است، که به توضیح هر یک از آیتم ها می پردازد. لیست تعریف با تگ <dl> مشخص می شود.
تگ <dl> در ترکیب با تگ<dt> مورد استفاده قرار می گیرد. و تگ <dd> به توصیف آیتم در لیست می پردازد.
|
1
2
3
4
5
6
|
<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd></dl> |
انواع مختلف لیست مرتب
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html><html><body><h4>Numbered list:</h4><ol><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>Letters list:</h4><ol type='A'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>Lowercase letters list:</h4><ol type='a'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>Roman numbers list:</h4><ol type='I'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol><h4>Lowercase Roman numbers list:</h4><ol type='i'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ol></body></html> |
انواع مختلف لیست نامرتب
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html><html><body><h4>Disc bullets list:</h4><ul type='disc'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ul><h4>Circle bullets list:</h4><ul type='circle'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ul><h4>Square bullets list:</h4><ul type='square'><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li></ul></body></html> |
نمونه لیست تو در تو
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html><html><body><h4>A nested List:</h4><ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea</li></ul></li><li>Milk</li></ul></body></html> |
نمونه دوم لیست تو در تو
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html><html><body><h4>A nested List:</h4><ul><li>Coffee</li><li>Tea<ul><li>Black tea</li><li>Green tea<ul><li>China</li><li>Africa</li></ul></li></ul></li><li>Milk</li></ul></body></html> |