خانه آموزش HTML آموزش تگ های HTML آموزش تگ ul در HTML

آموزش تگ ul در HTML

توسط

۱۳۹۸-۰۴-۰۸

آموزش تگ ul در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ ul در HTML با من همراه باشید.

آموزش تگ ul در HTML

Free-Learn

آنچه در این جلسه میخوانید :

1 تگ UL در HTML
2 مثال از تگ ul در HTML
3 پشتیبانی مرورگرها
4 جدول صفات تگ ul در HTML
5 پشتیبانی از صفات و رویدادهای عمومی
6 نکات و توضیحات
7 دستورات CSS پیش فرض

تگ UL در HTML

تگ ul که مخفف کلمه ( UnOrdered List ) می باشد در لغت به معنی لیست نامرتب می باشد، تگی است که با استفاده از آن میتوان یک لیست نامرتب را در یک صفحه وب ایجاد و یا تعریف کرد.

اینکه میگیم نامرتب یعنی آیتم ها یا گزینه های این لیست هیچگونه شماره یا در کل هیچگونه ترتیبی ندارند و در کنار همه ی گزینه ها یک علامت ( دایره توپُر مشکی ) قرار دارد.

که البته ما میتوانیم به دلخواه این ( دایره توپُر مشکی ) رو با استفاده از CSS تغییر دهیم، مثلا میتونیم حذفش کنیم کامل یا نه مثلا رنگش رو یا شکل دایره توپُر رو تغییر دهیم.

Free-Learn

مثال از تگ ul در HTML

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

<body>

<ul>
 <li>سلام</li>
 <li>خوبی</li>
 <li>من صادق</li>
 <li>هستم</li>
</ul> 

</body>

<body>

<ul>

</ul>

</body>

امتحان کنید

مثال شماره ۲ : سفارشی سازی تگ ul با استفاده از CSS

<style>
ul{
 border-left: 4px solid #00b185;
 background-color: #f1f1f1;
 padding: 10px 20px;
 list-style:none;
}
ul li::before {
 content:"\2023";
 color:#a8a8a8;
 font-weight:bold;
 display:inline-block;
 width:1em;
 margin-left:-1em;
}
</style>

<style>

ul{

border-left: 4px solid #00b185;

background-color: #f1f1f1;

padding: 10px 20px;

list-style:none;

}

ul li::before {

content:"\2023";

color:#a8a8a8;

font-weight:bold;

display:inline-block;

width:1em;

margin-left:-1em;

}

</style>

امتحان کنید

مثال شماره ۳ : ایجاد منوی افقی با استفاده از تگ ul و دستورات CSS

<body>

<div>
 <ul class="top-menu">
 <li><a href="#home">خانه</a></li>
 <li><a href="#">آموزش HTML</a></li>
 <li><a href="#">آموزش CSS</a></li>
 <li><a href="#">درباره من</a></li>
 </ul>
</div>  

</body>

<body>

<div>

<li><a href="#">آموزش HTML</a></li>

<li><a href="#">آموزش CSS</a></li>

<li><a href="#">درباره من</a></li>

</ul>

</div>

</body>

امتحان کنید

مثال شماره ۴ : ایجاد منوی عمودی با استفاده از تگ ul و دستورات CSS

<body>

<div>
 <ul class="top-menu">
 <li><a class="active" href="#home">خانه</a></li>
 <li><a href="#">آموزش HTML</a></li>
 <li><a href="#">آموزش CSS</a></li>
 <li><a href="#">درباره من</a></li>
 </ul>
</div>  

</body>

<body>

<div>

<li><a href="#">آموزش HTML</a></li>

<li><a href="#">آموزش CSS</a></li>

<li><a href="#">درباره من</a></li>

</ul>

</div>

</body>

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ ul در HTML پشتیبانی میکنند یا خیر.

نام مرورگر	Chrome	Firefox	Opera	Safari	IE
پشتیبانی	بله	بله	بله	بله	بله

Free-Learn

جدول صفات تگ ul در HTML

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامتیعنی در HTML5 پشتیبانی نمی شود.)

نام صفت	مقدار	توضیح
compact	compact	باعث میشه آیتم های لیست بصورت فشرده نمایش داده شوند. ()
type	disc square circle	نوع یا شکل آیتم ها یا گزینه های لیست را مشخص میکند. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ ul از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

علاوه بر تگ ul که برای ایجاد لیست نامرتب استفاده می شود، ما با استفاده از تگ ol نیز میتوانیم یک لیست مرتب شده را ایجاد نماییم.

تگ li که درون تگ ul قرار میگیرد با استفاده از آن میتوان آیتم ها یا گزینه های لیست هم نامرتب و هم مرتب را تعریف کرد.

معمولا و بیشترین استفاده از تگ ul در یک صفحه وب برای ایجاد منوی های سایت می باشد، هم منوی افقی و هم منوی عمودی که در مثال های (۳و۴) میتوانید نمونه آن را مشاهده نمایید.

صفت type که درون این تگ مورد استفاده قرار میگیرد در HTML5 منسوخ شده و پشتیبانی نمی شود لذا میتوان از CSS بجای این صفت استفاده نمود.

Free-Learn

دستورات CSS پیش فرض

معمولا مرورگرها تگ ul را بصورت پیش فرض با دستورات CSS زیر نمایش میدهند.

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

ul {

display: block;

list-style-type: disc;

margin-top: 1em;

margin-bottom: 1 em;

margin-left: 0;

margin-right: 0;

padding-left: 40px;

}

Free-Learn

دریافت PDF یا پرینت این مطلب