|
|
تاریخ انتشار:۱۱:۲۸ ۱۳۹۸/۱۰/۷
آموزش html - جلسه هفدهم
آشنایی با لیست ها در HTML
لیست ها در HTML به دو نوع لیست ترتیبی و غیر ترتیبی تقسیم میشوند. در این فصل با نحوه ی ایجاد آنها در اسناد HTML آشنا خواهیم شد.
لیست های ترتیبی و غیر ترتیبیترتیبی : 1. آیتم اول 2. آیتم دوم 3. آیتم سوم 4. آیتم چهارم غیر ترتیبی :
لیست غیر ترتیبی در HTML
یک لیست غیر ترتیبی با تگ <ul> آغاز میشود. هر آیتمی در لیست با تگ <li> آغاز میشود.
آیتم ها در لیست به صورت پیشفرض با بولت هایی(دایره های مشکی کوچک) نشان دار میشوند.
<ul >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ul/ >
خاصیت list-style-type در لیست ها
از خاصیت list-style-type برای مشخص کردن نوع نشانه های(دایره ، مربع و ..) آیتمها در لیست استفاده میشود.
| مقدار |
توضیح |
| disc |
از بولت برای نشان دار کردن آیتم های لیست استفاده میشود(مقدار پیشفرض) |
| circle |
از دایره های تو خالی برای نشان دار کردن آیتم های لیست استفاده میشود |
| square |
از مربع های توپر برای نشان دار کردن آیتم های لیست استفاده میشود |
| none |
از هیچ نشانه ای برای نشان دار کردن آیتم های لیست استفاده نمیشود |
مثال برای مقدار Disc :
<"ul style =" list-style-type :disc >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ul/ >
مثال برای مقدار Circle :
<"ul style =" list-style-type :circle >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ul/ >
مثال برای مقدار Square :
<"ul style =" list-style-type :square >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ul/ >
مثال برای مقدار None :
<"ul style =" list-style-type :none >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ul/ >
لیست های ترتیبی در HTML
یک لیست ترتیبی با تگ <ol> آغاز میشود. آیتم ها در لیست های ترتیبی با تگ <li> آغاز میشوند.
آیتم های لیست به صورت پیشفرض با شماره نشان دار میشوند.
<ol >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ol/ >
خاصیت type در لیست های ترتیبی
خاصیت type لیست های ترتیبی نوع نشانه های آیتم ها در لیست را مشخص میکند.
| نوع |
توضیح |
| "type="1 |
آیتم های لیست به ترتیب از مقدار 1 نشانه گذاری میشوند |
| "type="A |
آیتم های لیست به ترتیب حروف الفبا از مقدار A (حروف بزرگ) مقدار دهی میشوند. |
| "type="a |
آیتم های لیست به ترتیب حروف الفبا از مقدار a (حروف کوچک) مقدار دهی میشوند. |
| "type="I |
آیتم های لیست به ترتیب اعداد یونانی از مقدار I (اعداد بزرگ) مقدار دهی میشوند. |
| "type="i |
آیتم های لیست به ترتیب اعداد یونانی از مقدار i (اعداد کوچک) مقدار دهی میشوند. |
مثالی برای اعداد :
<"ol type = "1 >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ol/ >
مثالی برای حروف بزرگ :
<"ol type = "A >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ol/ >
مثالی برای حروف کوچک :
<"ol type = "a >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ol/ >
مثالی برای اعداد یونانی بزرگ :
<"ol type = "I >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ol/ >
مثالی برای اعداد یونانی کوچک :
<"ol type = "i >
<li >Coffee </li >
<li >Tea </li >
<li >Milk </li >
<ol/ >
لیست های توضیحی در HTML
HTML از لیست های توضیحی پشتیبانی میکند.
لیست های توضیحی لیستی از واژگان(اصطلاحات) هستند که در آن برای هر واژه توضیحی در نظر گرفته شده است.
با استفاده از تگ <dl> میتوان یک لیست توضیحی را تعریف کرد.
تگ <dt> واژه را در لیست تعریف میکند.
تگ <dd> توضیحی را برای هر واژه مشخص میکند.
<dl >
<dt >Coffee </dt >
<dd >- black hot drink </dd >
<dt >Milk </dt >
<dd >- white cold drink </dd >
<dl/ >
لیست ها تودرتو در HTML
لیست ها در HTML میتوانند داخل هم قرار بگیرند.
<ul >
<li >Coffee </li >
li >Tea>
<ul >
<li >Black tea </li >
<li >Green tea </li >
<ul/ >
<li/ >
<li >Milk </li >
<ul/ >
نکته : داخل آیتم های لیست میتوان لیستی جدید تعریف کرد و همین طور میتوان عناصر دیگر HTML همچون لینک ها و تصاویر را داخل آن قرار داد.
لیست های افقی در HTML
لیست ها میتوانند به روش های مختلفی با استفاده از CSS استایل دهی شوند.
یک روش رایج استایل دهی لیست ها برای افقی کردن آنهاست که در منو ها استفاده میشود:
<DOCTYPE html!>
<html >
<head >
<style >
ul { list-style-type : none ; margin : 0 ; padding : 0 ; overflow : hidden ; background-color : #333333 ; }
li { float : left ; }
li a { display : block ; color : white ; text-align : center ; padding : 16px ; text-decoration : none ; }
li a:hover { background-color : #111111 ; }
<style/ >
<head/ >
<body >
<ul >
<li >
<a href = "#home " >Home </a >
<li/ >
<li >
<a href = "#news " >News </a >
<li/ >
<li >
<a href = "#contact " >Contact </a >
<li/ >
<li >
<a href = "#about " >About </a >
<li/ >
<ul/ >
<body/ >
<html/ >
منبع»learnsource
|
|
|
|