این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ ul در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ ul در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ UL در HTML
تگ ul که مخفف کلمه ( UnOrdered List ) می باشد در لغت به معنی لیست نامرتب می باشد، تگی است که با استفاده از آن میتوان یک لیست نامرتب را در یک صفحه وب ایجاد و یا تعریف کرد.
اینکه میگم نامرتب یعنی آیتم های این لیست هیچگونه شماره یا در کل هیچگونه ترتیبی ندارند و در کنار همه ی گزینه ها بصورت پیش فرض یک علامت ( دایره توپُر مشکی ) قرار دارد.
که البته ما میتوانیم به دلخواه این ( دایره توپُر مشکی ) رو با استفاده از CSS تغییر دهیم، مثلا میتونیم حذفش کنیم کامل یا نه مثلا رنگش رو یا شکل دایره توپُر رو تغییر دهیم.
Free-Learn
مثال از تگ ul در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده از تگ ul ( بدون هیچ استایل )
|
1 2 3 4 5 6 7 8 9 |
<body> <ul> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> </body> |
مثال شماره ۲ : استایل دادن به تگ ul با استفاده از CSS
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul class="MyList"> <li><a href="https://free-learn.ir/">سایت آموزشی فری لرن</a></li> <li><a href="https://free-learn.ir/">سایت آموزشی فری لرن</a></li> <li><a href="https://free-learn.ir/">سایت آموزشی فری لرن</a></li> <li><a href="https://free-learn.ir/">سایت آموزشی فری لرن</a></li> </ul> </body> |
مثال شماره ۳ : ایجاد منوی افقی با استفاده از تگ ul
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul> <li><a href="#">خانه</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JS</a></li> </ul> </body> |
مثال شماره ۴ : ایجاد منوی عمودی با استفاده از تگ ul
|
1 2 3 4 5 6 7 8 9 10 |
<body> <ul> <li><a href="#">خانه</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JS</a></li> </ul> </body> |
مثال شماره ۵ : مشخص کردن نوع علامت گذاری آیتم ها با استفاده از CSS
|
1 2 3 4 5 |
<ul style="list-style-type:circle;"> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> <li>سایت آموزشی فری لرن</li> </ul> |
مثال شماره ۶ : ایجاد یک لیست تودرتو با استفاده از تگ ul
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<body> <ul> <li>ONE</li> <li>TWO <ul> <li>Three</li> <li>Four <ul> <li>Five</li> <li>Six</li> </ul> </li> </ul> </li> <li>Seven</li> <li>Eight</li> </ul> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ ul در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ ul در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
( علامت
یعنی در HTML5 منسوخ شده )
| نام صفت | مقدار | توضیح |
|---|---|---|
| type | disc square circle |
شکل علامت گذاری آیتم هارو مشخص میکند () |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ ul از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- تگ ul برای ایجاد لیست نامرتب استفاده میشه و تگ ol برای ایجاد لیست مرتب شده.
- تگ li که درون تگ ul یا تگ ol قرار میگیرد با استفاده از آن میتوان آیتم های لیست را تعریف کرد.
Free-Learn
دستورات CSS پیش فرض
معمولا مرورگرها تگ ul را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.
|
1 2 3 4 5 6 7 8 9 |
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; } |
