HTML Unordered List | HTML Bulleted List

آموزش لیست نامرتب یا لیست بالت در HTML

آذر 14, 1398

لیست نامرتب (غیر ترتیبی) یا لیست بالت موارد را در قالب بالت (دایره توپر سیاه) نمایش می دهد. زمانی که ترتیب آیتم ها اهمیت نداشته باشد، از لیست نامرتب استفاده می کنیم. تگ ul یک لیست نامرتب تعریف می کند. ۴ نوع لیست غیرترتیبی وجود دارد:

دیسک (دایره توپر)
دایره (دایره توخالی)
مربع
بدون علامت

برای نمایش علامت در لیست نامرتب ۴ نوع مقدار وجود دارد.

توی این پک فوق العاده، صفرتاصد مبانی برنامه نویسی رو جوری یاد میگیری که تو هیچ کلاس آموزشی یا پک دیگه ای نه دیدی نه شنیدی! بدون هیچ کلاسی، با صفرتاصد مبانی برنامه نویسی اپلیکیشن بزن، پروژه محور یاد بگیر و حسابی پول در بیار!

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

توضیحات	نوع
این نوع سبک پیش فرض است و موارد لیست با دایره توپر (شبیه گلوله سیاه) مشخص می شود.	نوع “disc”
موارد لیست با حلقه یا دایره توخالی مشخص می شود.	نوع “circle”
موارد لیست با مربع مشخص می شود.	نوع “square”
موارد لیست هیچگونه علامتی ندارند.	نوع “none”

مثال از لیست نامرتب

<ul>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

خروجی

HTML
Java
JavaScript
SQL

نوع “circle”

<ul type=”circle”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

خروجی

HTML
Java
JavaScript
SQL

نوع “square”

<ul type=”square”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

خروجی

HTML
Java
JavaScript
SQL

نوع “none”

<ul type=”none”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ul>

خروجی

HTML
Java
JavaScript
SQL

توجه: صفت type در HTML5 پشتیبانی نمی شود، به جای آن می توانید از صفت list-style-type در CSS استفاده کنید. مثال زیر صفت style برای تگ ul را نشان می دهد.

<ul style=”list-style-type: square;”>

    <li>HTML</li>

    <li>Java</li>

    <li>JavaScript</li>

    <li>SQL</li>

  </ul>

کد

<!DOCTYPE html>

<html>

<head>

  </head>

<body>

<h2>The type attribute with CSS property</h2>

   <ul style=”list-style-type: square;”>

    <li>HTML</li>

     <li>Java</li>

           <li>JavaScript</li>

           <li>SQL</li>

    </ul>

</body>

</html>

خروجی

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

نام عنصر	Chrome	IE	Firefox	Opera	Safari
<ul>	بله	بله	بله	بله	بله

تفاوت پک های حرفه ای ما با آموزشهای رایگان: بطور خلاصه از زمین تا آسمان! 1-پکها، جدیدترین نسخه نرم افزارها را آموزش می دهند با قابلیت های بسیار بیشتر. 2-پکها توسط متخصص آن نرم افزار، به صورت کاملا پروژه محور و با حل چالش هایی که در مسیر کار عملی و حرفه ای با آن روبرو می شوید تهیه شده اند و بعد از استفاده، کاملا برای بازار کار آماده اید! 3- متد این پکها کاملا کار شده و تا ماهها، در ذهن تان ماندگارند و یادگیری بسیار سریعتر و کاملتری خواهید داشت. آموزشهای رایگان فقط دستورات نرم افزارها را (آنهم ناقص) بیان می کنند و تازه برای ورود به بازار باید ماهها تجربه عملی هم کسب کنید !!

اچ تی ام ال, برنامه نویسی

با این اپلیکیشن ساده، هر زبانی رو فقط با 5 دقیقه در روز، توی 80 روز مثل بلبل حرف بزن! بهترین متد روز، تقویت حافظه، آموزش تصویری. یادگیری زبان کلید یادگیری هر مهارتی در قرن 21 !

میلاد حیدری

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.