آموزش برنامه نویسی

بیان 2 خاصیت اصلی در معرفی تگ ul در HTML

تگ ul در HTML چیست؟

تگ ul یا لیست بدون ترتیب در HTML

 تگ ul در HTML | برای ساخت لیستی از داده‌ها و محتوا از تگ‌های مختلفی در HTML استفاده می‌شود. یکی از این تگ‌ها تگ ul یا unordered list می‌باشد که به لیست بدون ترتیب معروف است. اگر علاقمند به دریافت اطلاعات کامل در مورد تمامی لیست‌ها هستید پیشنهاد می‌کنیم، مقاله آموزشی میزفا در خصوص آشنایی با لیست‌ها را مطالعه کنید.

تگ‌ UI

    • برای ساخت لیست‌هایی با آیتم‌های بدون ترتیب ساخته می‌شود و آیتم‌های هر لیست به صورت دایره‌هایی تو پر در می‌آید. (البته با ویژگی‌هایی از سی اس اس «

CSS

    • » می‌توانیم این آیتم‌ها را به صورت دایره تو خالی ویا مربع تو پر نیز نمایش دهیم که در این پست به آن‌ نیز می‌پردازیم).

این تگ از نسخه سوم HTML توسط W3C به وب اضافه شده است و برای قرار دادن لیست‌ها از یک تگ زیرمجموعه به نام تگ

  • استفاده می‌کند و هیچ محدودیتی در تعداد آیتم‌های لیست وجود ندارد.

    تگ زیرمجموعه li

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

    • Coffee
    • Tea
    • Coca Colaاستفاده کنیم. این تگ که یک تگ از نوع block-level می‌باشد، امکان سفارشی سازی و زیبا‌سازی بسیاری در CSS دارد و بسیاری از کاربران با سفارشی سازی مخصوص خود از این تگ استفاده می‌کنند.

      نمونه کد لیست‌های بدون ترتیب

      نمونه‌ای از کد ساخت لیست‌های بدون ترتیب را می‌توانید در زیر مشاهده کنید. همانطور که گفته شد، شما می‌توانید به تعداد نامحدودی لیست و عضو داشته باشید.

      • bread
      • coffee beans
      • milk
      • butter

      استایل‌دهی لیست ها

      همانطور که در بخش‌های قبل گفتم، ۳ استایل متفاوت برای لیست ها به صورت پیش‌فرض در HTML ایجاد شده است که می‌توانید از آنها استفاده کنید.

      نمونه استایل‌دهی لیست‌ها را در زیر می‌توانید مشاهده کنید. همچنین پیشنهاد میکنم برای شخصی سازی لیست‌ها کمی در اینترنت جست و جو کنید تا لیست‌ها آنگونه که می‌خواهید بررسی شود.

       

       

      Example of unordered lists:

       

      • Coffee
      • Tea
      • Coca Cola

        نمونه کد تو در تو لیست‌های بدون ترتیب

        با ایجاد کردن چند تگ

          • درون هم می‌توانیم لیست‌هایی تو در تو بسازیم.

        در حالت لیست‌های تو در تو لیست‌ها از سه استایل دایره توپر، مربع تو پر و دایره تو خاله استفاده می‌کنند.

        نمونه‌ی یک لیست بدون ترتیب تو در تو :

        • first item
        • second item
    • second item first subitem
    • second item second subitem

      • second item second subitem first sub-subitem
      • second item second subitem second sub-subitem
      • second item second subitem third sub-subitem

  • second item third subitem

  • third item
تگ ul در HTML
تگ ul در HTML

خاصیت‌های تگ ul

تگ ul در HTML| در جدول زیر خاصیت‌های تگ ul را مشاهده می‌کنید. این تگ از تمامی خاصیت‌های عمومی پشتیبانی می‌کند ولی خاصیت‌های منحصر به فرد آن با توجه به اضافه شدن امکان استایل‌دهی از HTML5 حذف شده است و پشتیبانی نمی‌شود، بنابر‌این جدول زیر تنها برای آشنایی شما با این خاصیت‌ها تهیه شده است و هیچ کاربردی در HTML5 که امروزه استفاده می‌شود ندارد.

خاصیت مقدار توضیحات
compact compact این خاصیت در HTML5 پشتیبانی نمی‌شود.

با این خاصیت لیست کوچکتر از حالت عادی نمایش داده می‌شود.

type disc
square
circle
این خاصیت در HTML5 پشتیبانی نمی‌شود.

این خاصیت برای مشخص کردن نوع نشان لیست استفاده می‌شود.

تگ ul در HTML
تگ ul در HTML

نتیجه گیری

تگ ul در HTML |در این مقاله با تگ ul، خاصیت‌های آن و تگ‌های زیر‌مجموعه آن آشنا شدیم و یاد گرفتید که چگونه یک لیست بدون ترتیب بسازید.

در رابطه با این تگ می‌توانید در وب سایت w3schools نیز بخوانید و اطلاعاتی را بدست آورید.

اگر نکته یا سوالی در رابطه با این تگ به نظرتون رسید، خوشحال میشیم که با ما هم آن را به اشتراک بگذارید.

 

نمایش بیشتر

امیرحسین شمس

امیر حسین شمس | هم اکنون در زمینه های مختلفی چون طراحی سایت ، بهینه سازی سایت ، سئو (SEO) ، امنیت سایت ، آموزش طراحی سایت ، دیجیتال مارکتینگ ، سئو و مشاوره‌ کسب و کارهای اینترنتی فعالیت دارم. از سال 1385 تحصیلات خود را در زمینه ی علوم کامپیوتر شروع کرده و دوره های هوش مصنوعی ، شبکه های عصبی ، منطق فازی ، برنامه نویسی دات نت، طراحی سایت ، دیتابیس ، امنیت دیتابیس ، دیجیتال مارکتینگ، ایمیل مارکتینگ و سئو سایت را بصورت تخصصی گذرانده ام.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
× چگونه می‌توانم به شما کمک کنم؟