آموزش لیست‌ها در HTML: طراحی و استایل‌دهی لیست‌های مرتب و نامرتب

< ul >
    < li > آیتم اول < / li >
    < li > آیتم دوم < / li >
    < li > آیتم سوم < / li >
< / ul >

< ol >
    < li > مرحله اول < / li >
    < li > مرحله دوم < / li >
    < li > مرحله سوم < / li >
< / ol >

< ol type="a" >
    < li > گزینه اول < / li >
    < li > گزینه دوم < / li >
< / ol >

< dl >
    < dt > HTML < / dt >
    < dd > زبان نشانه‌گذاری برای ساخت صفحات وب. < / dd >
    < dt > CSS < / dt >
    < dd > زبان استایل‌دهی برای طراحی صفحات وب. < / dd >
< / dl >

< ul style="list-style-type: square;">
    < li > آیتم اول < / li >
    < li > آیتم دوم < / li >
< / ul >

< ul style="list-style-type: none;" >
    < li > آیتم اول < / li >
    < li > آیتم دوم < / li >
< / ul >

< ol reversed >
    < li > مرحله سوم < / li >
    < li > مرحله دوم < / li >
    < li > مرحله اول < / li >
< / ol >

< ul style="list-style-type: square; margin: 20px; padding: 10px; background-color: #f5f5f5;" >
    < li style="color: red;"> آیتم اول < / li >
    < li style="color: blue;"> آیتم دوم < / li >
< / ul >

< ! DOCTYPE html >
< html lang="fa" dir="rtl" >
< head >
    < meta charset="UTF-8" >
    < meta name="viewport" content="width=device-width, initial-scale=1.0" >
    < meta name="description" content="آموزش لیست‌های HTML" >
    < meta name="keywords" content="HTML, لیست HTML, لیست مرتب, لیست نامرتب" >
    < meta name="author" content="نام شما" >
    < title > آموزش لیست‌های HTML < / title >
    < style >
        body {
            font-family: Arial, sans-serif;
        }
        ul {
            list-style-type: square;
            background-color: #f9f9f9;
            padding: 10px;
            margin: 20px;
        }
        ol {
            background-color: #f1f1f1;
            padding: 10px;
            margin: 20px;
        }
    < / style >
< / head >
< body >
    < header >
        < h1 > آموزش لیست‌های HTML < / h1 >
    < / header >
    < main >
        < section >
            < h2 > لیست نامرتب < / h2 >
            < ul >
                < li > آیتم اول < / li >
                < li > آیتم دوم < / li >
                < li > آیتم سوم < / li >
            < / ul >
        < / section >
        < section >
            < h2 > لیست مرتب < / h2 >
            < ol type="i" >
                < li > مرحله اول < / li >
                < li > مرحله دوم < / li >
                < li > مرحله سوم < / li >
            < / ol >
        < / section >
        < section >
            < h2 > لیست تعریف < / h2 >
            < dl >
                < dt > HTML < / dt >
                < dd > زبان نشانه‌گذاری صفحات وب. < / dd >
                < dt > CSS < / dt >
                < dd > زبان استایل‌دهی صفحات وب. < / dd >
            < / dl >
        < / section >
    < / main >
    < footer >
        < p > © 2024 طراحی شده توسط نام شما < / p >
    < / footer >
< / body >
< / html >