لیست های شماره گذاری شده مجموعه ای از آیتم ها با شماره های متوالی آنها هستند. نوع و نوع شماره گذاری بستگی به پارامترهای عنصر دارد
- ، که برای ایجاد لیست استفاده می شود. مقادیر زیر را می توان به عنوان عناصر شماره گذاری استفاده کرد:
- اعداد عربی (1، 2، 3، ...);
- اعداد عربی با صفر اول برای ارقام کمتر از ده (01، 02، 03، ...، 10);
- حروف لاتین بزرگ (A، B، C، ...)؛
- حروف لاتین کوچک (a، b، c، ...)؛
- اعداد رومی بزرگ (I، II، III، ...)؛
- اعداد رومی کوچک (i، ii، iii، ...)؛
- شماره گذاری ارمنی;
- شماره گذاری گرجی.
- ... هر عدد صحیح مثبت را می توان به عنوان یک مقدار مشخص کرد. مهم نیست که چه نوع شماره گذاری تنظیم شده است، حتی اگر از حروف لاتین به عنوان یک لیست استفاده شود. اگر ویژگی های شروع و مقدار به طور همزمان به لیست اعمال شوند، آنگاه مورد دوم اولویت دارد و شماره گذاری از روی عدد مشخص شده توسط مقدار نمایش داده می شود، همانطور که در مثال 1 نشان داده شده است.
مثال 1. شماره گذاری مجدد یک لیست
لیست ها - شما باید مراقب محل کار خود باشید.
- نور اتاق را طوری تنظیم کنید که منبع نور در کنار یا پشت اپراتور باشد.
- برای جلوگیری از عوارض پزشکی، توصیه می شود صندلی با صندلی نرم انتخاب کنید.
اولین عنصر لیست در این مثال با عدد رومی IV شروع می شود، زیرا ویژگی start = "4" مشخص شده است، سپس عدد V دنبال می شود، و آخرین عنصر خارج از نظم قرار می گیرد و به عدد X اختصاص می یابد (شکل . 1).
برنج. 1. اعداد رومی در لیست
نوشتن اعداد
به طور پیش فرض، یک لیست شماره دار شکل خاصی دارد: ابتدا یک عدد وجود دارد، سپس یک نقطه، و سپس متن از طریق یک فاصله نمایش داده می شود. این شکل از نوشتن واضح و راحت است، اما برخی از توسعه دهندگان ترجیح می دهند روشی متفاوت برای قالب بندی شماره گذاری لیست ها ببینند. یعنی به جای نقطه، یک پرانتز بسته وجود دارد، همانطور که در شکل نشان داده شده است. 2 یا چیزی مشابه
برنج. 2. مشاهده لیست شماره دار با پرانتز
سبک‌ها به شما امکان می‌دهند نحوه شماره‌گذاری مجدد فهرست‌ها را با استفاده از ویژگی‌های محتوا و ضدافزایش تغییر دهید. ابتدا باید گزینه counter-reset را تنظیم کنید: مورد برای انتخابگر اول، این امر ضروری است تا شماره گذاری در هر لیست جدید از نو شروع شود. در غیر این صورت شماره گذاری ادامه می یابد و به جای 1،2،3 عدد 5،6،7 را مشاهده خواهید کرد. مقدار مورد یک شناسه منحصر به فرد برای شمارنده است، ما خودمان آن را انتخاب می کنیم. در مرحله بعد، باید نشانگرهای اصلی را از طریق ویژگی style-style-type با مقدار none پنهان کنید.
ویژگی content معمولاً همراه با :: after و :: قبل از شبه عناصر کار می کند. بنابراین، li :: قبل از ساخت می گوید که مقداری محتوا باید قبل از هر عنصر لیست اضافه شود (مثال 2).
مثال 2. ایجاد شماره گذاری خودتان
Li :: قبل (محتوا: شمارنده (مورد) ")"؛ / * یک پرانتز به اعداد اضافه کنید * / counter-increment: item; / * نام پیشخوان را تنظیم کنید * /)
ویژگی content با مقدار شمارنده (اقلام) یک عدد را خروجی می دهد. با اضافه کردن پرانتز همانطور که در این مثال نشان داده شده است، شماره مورد نیاز را بدست می آوریم. برای افزایش یک عدد لیست به افزایش متقابل نیاز است. توجه داشته باشید که از همان شناسه ای به نام آیتم در سرتاسر استفاده می شود. کد نهایی در مثال 3 نشان داده شده است.
مثال 3. تغییر نمای یک لیست
لیست ها - اولین
- دومین
- سوم
- چهارم
به این ترتیب می توانید هر نوع لیست شماره گذاری را انجام دهید، مثلاً یک عدد را در کروشه بگیرید، در این حالت فقط یک خط در استایل ها تغییر می کند.
محتوا: "[" شمارنده (مورد) "]";
لیست با حروف روسی
یک لیست شماره دار با حروف لاتین وجود دارد، اما هیچ حروف روسی برای لیست وجود ندارد. آنها را می توان به طور مصنوعی با استفاده از تکنیک فوق اضافه کرد. از آنجایی که شماره‌گذاری از طریق استایل‌ها انجام می‌شود، خود لیست اصلی باقی می‌ماند، فقط کلاس انتخاب شده به آن اضافه می‌شود، بیایید آن را سیریلیک بنامیم (مثال 4).
مثال 4. کد برای ایجاد یک لیست
- یکی
- دو
- سه
اضافه کردن حروف با استفاده از :: قبل از شبه عنصر و ویژگی content انجام می شود. از آنجایی که هر خط باید حرف خود را داشته باشد، از کلاس شبه استفاده می کنیم: nth-child (1)، شماره حرف در پرانتز نوشته می شود. البته حرف اول A، دومی B، سومی C و ... تمام این مجموعه به صورت زیر به انتخابگر li اضافه می شود (مثال 5).
مثال 5. با استفاده از شبه کلاس: nth-child
سیریلیک li: nth-child (1) :: قبل (محتوا: "a)"; ) .cyrilic li: nth-child (2) :: before (محتوا: "ب)"; ) .cyrilic li: nth-child (3) :: before (محتوا: "در)"; )
در این مثال، هر حرف با یک پرانتز، تمام حروف کوچک همراه است. شما می توانید راه خود را برای شماره گذاری لیست تعریف کنید، به عنوان مثال، می تواند شامل حروف بزرگ با نقطه، با یک یا دو براکت یا فقط حروف باشد. برخلاف شماره گذاری استاندارد، ما در اینجا آزادیم که هر کاری می خواهیم انجام دهیم. یک لیست ده حرفی تقریباً برای همه موقعیت ها باید کافی باشد، اما اگر ناگهان معلوم شود که کافی نیست، هیچ چیز مانع از آن نمی شود که فهرست خود را گسترش دهیم تا حداقل تمام حروف الفبای روسی را شامل شود.
در نهایت تراز و موقعیت حروف را تنظیم می کنیم، در صورت تمایل اندازه فونت، رنگ و سایر پارامترها را نشان می دهیم (مثال 6).
مثال 6. فهرست با حروف روسی
فهرست کنید - بورش
- کتلت پایک
- کولبیاکا
- قارچ در خامه ترش
- پنکیک با خاویار
- کواس
نتیجه این مثال در شکل نشان داده شده است. 3.
یک لیست گلوله ای با اضافه کردن یک گلوله کوچک در جلوی هر آیتم لیست، معمولاً یک دایره پر تعریف می شود. خود لیست با استفاده از یک ظرف تشکیل می شود
- و هر مورد لیست با یک برچسب شروع می شود
- همانطور که در زیر نشان داده شده است.
- نکته اول
- نکته دوم
- نکته سوم
تگ پایان باید در لیست موجود باشد.
اگرچه لازم نیست، اما به شما توصیه می کنیم همیشه آن را اضافه کنید تا به وضوح موارد موجود در لیست را جدا کنید.
- چبوراشکا
- کروکودیل گنا
- شاپوکلیاک
- موش لاریسا
- اولین
- دومین
- سوم
- اولین
- دومین
- سوم
- اولین
- دومین
- سوم
- تغییر در باور مذهبی (اختیاری: بودیسم، کنفوسیوس، هندوئیسم). پیشنهاد ویژه - یهودیت و اسلام با هم.
- تغییر در اعتقاد به عصمت طرف محبوب;
- اعتقاد به وجود بیگانگان؛
- ترجیح برای نظام سیاسی به عنوان بهترین نوع خود (اختیاری: فئودالیسم، سوسیالیسم، کمونیسم، سرمایه داری).
- (LI - آیتم فهرست). برچسب بزنید
- نیازی به تگ پایان مناسب ندارد، اگرچه وجود آن در اصل ممنوع نیست. مرورگرها معمولاً هنگام نمایش یک سند، هر مورد جدید لیست را در یک خط جدید شروع می کنند.
اطلاعات ارائه شده برای ایجاد یک لیست گلوله ای ابتدایی کافی است. در اینجا نمونه ای از یک سند HTML است که از یک لیست گلوله ای استفاده می کند که در یک مرورگر همانطور که در شکل نشان داده شده است نمایش داده می شود. 2.1.
مثال لیست گلوله علائم زودیاک:
- برج حمل
- ثور
- دوقلوها
- باکره
- ترازو
- عقرب
- قوس
- برج جدی
- دلو
- ماهی ها
برنج. 2.1.مرورگر لیست گلوله ای را نمایش می دهد
توجه داشته باشید که علاوه بر موارد لیست با برچسب مشخص شده است
- ، سایر عناصر HTML ممکن است وجود داشته باشد. در مثال بالا یکی از این عناصر متن ساده است که یک آیتم لیست نیست، بلکه نقش عنوان آن را ایفا می کند.
توجه داشته باشید
برخی از کتاب های درسی HTML به شما دستور می دهند که از تگ ظرف برای تنظیم عنوان لیست استفاده کنید.
(LH - سرصفحه فهرست، سرصفحه فهرست). این تگ در حال حاضر توسط هیچ یک از مرورگرهای اصلی شناسایی نمی شود و بخشی از مشخصات HTML نیست. بنابراین، کاربرد آن بی معنی می شود، اگرچه منجر به هیچ خطایی نخواهد شد. در تگ
- دو پارامتر را می توان مشخص کرد: COMPACT و TYPE.
- .
مثال ضبط:
- .
توجه داشته باشید
مرورگرها تفسیرهای مختلفی برای تعیین نوع گلوله برای یک آیتم فهرست جداگانه دارند. مرورگر نت اسکیپ نوع نشانگر را برای این و همه موارد بعدی تغییر می دهد تا زمانی که با تغییر دیگری از نوع نشانگر مواجه شود. اینترنت اکسپلورر فقط نشانگر این عنصر را تغییر می دهد.
نشانگرهای لیست گرافیکی
گرافیک را می توان به عنوان نشانگر لیست استفاده کرد، که به طور گسترده برای ایجاد اسناد HTML جذاب و زیبا استفاده می شود. در واقع چنین امکانی مستقیماً توسط زبان HTML ارائه نمی شود، بلکه تا حدودی به صورت مصنوعی پیاده سازی می شود. این بدان معنا نیست که انجام این کار توصیه یا مذموم نیست، بلکه فقط به این معنی است که هیچ ساختار زبان HTML خاصی در اینجا استفاده نخواهد شد.
برای درک این ایده، باید بدانید که لیست ها چگونه در صفحات HTML پیاده سازی می شوند. به نظر می رسد که تگ لیست
- (و همچنین برچسب های انواع دیگر لیست ها، که در زیر در نظر گرفته شده است) تنها وظیفه را انجام می دهد - به مرورگر می گوید که تمام اطلاعاتی که بعد از این برچسب قرار دارند باید با تغییر به سمت راست (تورفتگی) با مقدار مشخصی نمایش داده شوند. برچسب ها
- که به موارد منفرد لیست اشاره می کند نشانگرهای استاندارد آیتم لیست را ارائه می دهد.
اگر نیاز به ساخت لیستی با نشانگرهای گرافیکی داشته باشیم، می‌توانیم بدون تگ کار کنیم.
- ... درج تصویر گرافیکی مورد نظر در مقابل هر عنصر لیست کافی خواهد بود. تنها مشکلی که در این مورد باید حل شود، جداسازی عناصر لیست از یکدیگر خواهد بود. برای این کار می توانید از تگ های پاراگراف استفاده کنید
یا تغذیه خط اجباری
... نمونه ای از اجرای یک لیست با نشانگرهای گرافیکی که نمایش آن در شکل نشان داده شده است. 2.2 در زیر نشان داده شده است:که فقط یکبار مخابره می شود. اندازه یک فایل حاوی یک تصویر کوچک نیز بسیار کوچک است.
توجه داشته باشید
روش های ایجاد لیست با نشانگرهای گرافیکی به نوبه خود در فصل 8 مورد بحث قرار می گیرند.
HTML از سه نوع مختلف لیست پشتیبانی می کند که هر کدام لیست خاص خود را دارند:
لیست های شماره گذاری شده
در یک لیست شماره گذاری شده، مرورگر به طور خودکار اعداد آیتم ها را به ترتیب، با مقداری (معمولاً 1) شروع می کند. این به شما امکان می دهد موارد را بدون شکستن شماره گذاری در لیست درج و حذف کنید، زیرا بقیه اعداد به طور خودکار مجدداً محاسبه می شوند.
لیست های شماره گذاری شده با استفاده از یک عنصر بلوک ایجاد می شوند
برچسب بزنید- مورد 1
- مورد 2
- مورد 3
عناصر یک لیست شماره گذاری شده باید شامل چندین عنصر لیست باشند، همانطور که در مثال زیر نشان داده شده است:
مثال: فهرست شماره گذاری شده
- خودتان انرا آزمایش کنید "
آموزش گام به گام
- کلید را بگیر
- کلید را داخل قفل قرار دهید
- کلید را دو دور بچرخانید
- کلید را از قفل خارج کنید
- در را باز کن
آموزش گام به گام
- کلید را بگیر
- کلید را داخل قفل قرار دهید
- کلید را دو دور بچرخانید
- کلید را از قفل خارج کنید
- در را باز کن
گاهی اوقات، وقتی به کدهای HTML موجود نگاه می کنید، با استدلال مواجه می شوید نوعدر عنصر
- A - حروف لاتین بزرگ (A، B، C...)؛
- الف - حروف لاتین کوچک (a، b، c...)؛
- I - اعداد رومی بزرگ (I، II، III ...)؛
- i - اعداد رومی کوچک (i، ii، iii...)؛
- 1 - اعداد عربی (1، 2، 3...) (به طور پیش فرض استفاده می شود).
- به روش زیر:
-
در این صورت شماره‌گذاری ترتیبی فهرست قطع می‌شود و شماره‌گذاری از این نقطه و در این مورد از هفت شروع می‌شود.
نمونه ای از استفاده از ویژگی مقداربرچسب زدن
در این مثال، "First List Item" شماره 1، "Second List Item" شماره 7 و "Third List Item" شماره 8 خواهد بود.
قالب بندی لیست های شماره گذاری شده با CSS
برای تغییر اعداد لیست، از ویژگی استفاده کنید لیست-سبک-نوعشیوه نامه های CSS:
- ... مرورگر هر مورد لیست را تورفتگی می کند و به طور خودکار گلوله ها را نمایش می دهد.
- نکته اول
- نکته دوم
- نکته سوم
- قرار دادن فقط متن ضروری نیست، قرار دادن هر عنصری از محتوای جریانی (لینک ها، پاراگراف ها، تصاویر و غیره) مجاز است.
- امکان ایجاد یک لیست تودرتو یا یک لیست سطح دوم وجود دارد. برای قرار دادن یک لیست، لیست جدید را در داخل عنصر توصیف کنید
- لیست از قبل موجود است هنگامی که یک لیست گلوله‌ای را در لیست دیگری قرار می‌دهید، مرورگر به‌طور خودکار سبک گلوله‌ای را برای لیست سطح دوم تغییر می‌دهد. هر لیستی را می توان در لیست دیگر تودرتو کرد. مثال زیر ساختار یک لیست گلوله‌ای را نشان می‌دهد که درون یک آیتم شماره‌دار دوم قرار گرفته است.
- خودتان انرا آزمایش کنید "
- دوشنبه
- ارسال ایمیل
- بازدید از ویرایشگر
- انتخاب موضوع
- طرح تزئین شده
- گزارش نهایی
- مشاهده پیام عصر
- سهشنبه
- برنامه را اصلاح کنید
- ارسال تصاویر
- چهار شنبه...
- دوشنبه
- ارسال ایمیل
- بازدید از ویرایشگر
- انتخاب موضوع
- طرح تزئین شده
- گزارش نهایی
- مشاهده پیام عصر
- سهشنبه
- برنامه را اصلاح کنید
- ارسال تصاویر
- چهار شنبه...
- خودتان انرا آزمایش کنید "
- قهوه
- قهوه
- قهوه
- قهوه
- قهوه
- شیر
- قهوه
- شیر
- قهوه
- شیر
- قهوه
- شیر
- خودتان انرا آزمایش کنید "
- ثور
- جوزا
- برج حمل
- ثور
- جوزا
- (از اصطلاح انگلیسی تعریف - یک کلمه تعریف شده، اصطلاح) و
- (از تعریف انگلیسی توضیحات - شرح اصطلاح تعریف شده).
- ترم اول
- شرح ترم اول
- ترم دوم
- شرح ترم دوم
- خودتان انرا آزمایش کنید "
- شبکه جهانی وب
- - از انگلیسی شبکه جهانی وب (WWW) یک سیستم توزیع شده است که دسترسی به اسناد متصل به هم واقع در رایانه های مختلف متصل به اینترنت را فراهم می کند.
- اینترنت
- - مجموعه ای از شبکه ها که از یک پروتکل مبادله واحد برای انتقال اطلاعات استفاده می کنند.
- سایت
- - مجموعه ای از صفحات وب منفرد که توسط پیوندها و یک طرح واحد به هم مرتبط می شوند.
- بدمینتون
- بیسبال
- Chomolungma
- چوگوری
- کانچن جونگا
- قله به شدت سقوط کرد
- کوچه تنتروم
- اینسانو
- دریای فیلیپین
- دریای عرب
- دریای مرجانی
- قرمز
- سبز
- آبی
سبک های لیست های شماره گذاری شده
مثال معنی شرح الف، ب، ج آلفا پایین تر حروف کوچک الف، ب، ج آلفای بالا حروف بزرگ i، ii، iii رومی پایین اعداد رومی با حروف کوچک I، II، III روم بالا اعداد رومی بزرگ مثال: اعمال یک ویژگی CSS لیست-سبک-نوع
لیست های گلوله شده
لیست های گلوله ای اساساً شبیه به لیست های شماره گذاری شده هستند، با این تفاوت که شامل شماره گذاری متوالی آیتم ها نیستند. لیست های گلوله ای با استفاده از یک عنصر بلوک ایجاد می شوند
برچسب بزنیددر مثال زیر، می‌توانید ببینید که به‌طور پیش‌فرض، یک نشانگر دایره کوچک پر شده در جلوی هر آیتم فهرست اضافه می‌شود:
داخل تگ
لیست های تو در تو
هر لیستی را می توان در لیست دیگر تودرتو کرد. عنصر داخلیمثال: لیست های تودرتو
قالب بندی لیست های گلوله ای
برای تغییر ظاهر نشانگر لیست، از ویژگی استفاده کنید لیست-سبک-نوعشیوه نامه های CSS:
مثال زیر سبک های مختلف لیست های گلوله ای را نشان می دهد:
مثال: سبک های لیست گلوله ای
دیسک:
دایره:
مربع:
هیچ یک:
نشانگرهای گرافیکی
HTML توانایی ایجاد لیست با نشانگرهای گرافیکی را دارد. زمانی که گلوله‌های فهرست دایره‌ها یا مربع‌های استاندارد هستند یک چیز است و زمانی که خود توسعه‌دهنده نشانگر را مطابق با طراحی صفحه انتخاب می‌کند کاملاً چیز دیگری است. از تصاویر کوچک اغلب برای زیبا جلوه دادن موارد لیست استفاده می شود.
برای جایگزینی یک نشانگر معمولی با یک نشانگر گرافیکی، ویژگی را جایگزین کنید لیست-سبک-نوعدر هر ملک لیست-سبک-تصویرو آدرس URL تصویر را مشخص کنید:مثال: نشانگرهای گرافیکی
علائم زودیاک
علائم زودیاک
لیست های تعریف (توضیح).
لیست های تعریف برای ایجاد، به عنوان مثال، واژگان شخصی شما از اصطلاحات بسیار مفید هستند. هر مورد در لیست تعریف دارای دو بخش است: یک اصطلاح و تعریف آن.
شما کل لیست را در یک عنصر قرار می دهید
فهرست تعاریف اغلب در نشریات علمی، فنی و آموزشی استفاده می شود و با کمک آنها واژه نامه ها، لغت نامه ها، کتاب های مرجع و غیره تهیه می شود.ساختار کلی لیست توضیحات به شرح زیر است:
مثال زیر یکی از کاربردهای ممکن برای لیست تعریف را نشان می دهد:
مثال: فهرست تعاریف
وب جهانی - از انگلیسی. شبکه جهانی وب (WWW) یک سیستم توزیع شده است که دسترسی به اسناد متصل به هم واقع در رایانه های مختلف متصل به اینترنت را فراهم می کند. اینترنت مجموعه ای از شبکه هاست که از یک پروتکل مبادله واحد برای انتقال اطلاعات استفاده می کنند. سایت مجموعه ای از صفحات وب منفرد است که توسط لینک ها و یک طرح واحد به هم مرتبط می شوند.
به طور پیش‌فرض، متن عبارت در لبه سمت چپ پنجره مرورگر فشار داده می‌شود و شرح عبارت در زیر قرار می‌گیرد و به سمت راست منتقل می‌شود.
روز خوب!
در این مقاله، در مورد تمام احتمالات لیست ها، نحوه ایجاد یک لیست شماره گذاری شده، تسلط بر برچسب هایی که کمک می کند تا یک لیست گلوله ای ساده با گلوله های دلخواه جالب تر و قابل توجه تر شود، آشنا خواهید شد. پس از اتمام درس، متوجه خواهید شد که لیست ها در کجا استفاده می شوند و تحت چه شرایطی می توان از آنها استفاده کرد.
این مقاله سومین مقاله در این آموزش کوتاه در زمینه HTML پایه است. قبل از خواندن این درس، توصیه می کنم دو درس قبلی را مرور کنید:
مقاله به تازگی شروع شده است، و ممکن است قبلاً متوجه استفاده از لیست گلوله‌ای استاندارد شده باشید. در وب سایت من، کاملاً ساده به نظر می رسد: در سمت چپ یک تورفتگی کوچک با یک خط و یک نشانگر مربع وجود دارد. در ادامه مقاله، ما نگاهی دقیق‌تر به این خواهیم داشت که نشانگرها چیست، چگونه اعداد بسازیم، و همچنین چگونه نشانگر خود را بسازیم.
در هر قسمت از مقاله، ایجاد لیست های خاص با توضیحات مفصل برای درج یک لیست خاص همراه خواهد بود.
1. لیست های گلوله شده در HTML
این نوع لیست ها برای برشمردن مجموعه ای از عناصر مشابه از نظر معنی در متن استفاده می شود. این می تواند فهرستی از پیوندهایی باشد که به یک موضوع مرتبط هستند، توضیح مفصلی برای بخش های جداگانه متن. اما بیایید ببینیم لیست های گلوله شده در کد چگونه به نظر می رسند:
و این شکلی است که در مرورگر به نظر می رسد:
برنج. 1.1. نمای استاندارد لیست نامرتب گلوله‌ای HTML در مرورگر1.1 گلوله های استاندارد برای لیست های گلوله دار
در تصویر بالا (شکل 1.1.) می توانید دایره های ابتدای هر آیتم منو را مشاهده کنید. این نشانگر است. به طور پیش فرض، یک دایره پر شده در مرورگر است. چندین نوع نشانگر در HTML وجود دارد: دایره پر شده، دایره خالی و مربع. آنها به CSS یا تصاویر شخص ثالث نیاز ندارند:
1.2 نشانگر را به عنوان یک دایره خالی فهرست کنید
شما مقادیر ویژگی ها را می دانید، اما اکنون بیایید ببینیم که چگونه یک لیست گلوله ای HTML در کد ایجاد کنیم. از جدول بالا، مقدار دوم "circle" را برای ویژگی type انتخاب کرده ایم و آن را به لیست گلوله ای خود اختصاص می دهیم:
<html> <سر> <عنوان>نمونه ای از لیست گلوله ای با نشانگر دایره خالی</ عنوان> </ سر> <بدن> <p>ستاره ها:</ p> <نوع ul = "دایره"> <li>سیریوس</ li> <li>آرکتوروس</ li> <li>پولوکس</ li> <li>بتلژوز</ li> <li>خورشید</ li> </ ul> </ بدن> </ html> بیایید ببینیم این کد در مرورگر چگونه به نظر می رسد:
برنج. 1.2. نمایش گلوله برای یک لیست به شکل یک دایره در مرورگر1.3 نشانگر را به شکل مربع فهرست کنید
بیایید آخرین مثال را با یک گلوله مربع برای لیست HTML نیز ببینیم:
به نشانگر توجه کنید، مربع شده است:
برنج. 1.3. نشانگر کادر فهرست به صورت مربع در مرورگریادداشت مهم:این دیگر برای استایل دادن به لیست های گلوله ای استفاده نمی شود. یک جدایی واضح بین CSS (بخوانید CSS چیست) و HTML وجود دارد. HTML برای نشانه گذاری و CSS برای ظاهر خوب است.
کدی که حاوی این ویژگی است، هنگام تعیین نوع سند فعلی به عنوان HTML5 ("")، در حین اعتبارسنجی خطا می دهد. اگر نشنیده اید اعتبار سنجی چیست، باید به اینجا بروید -.
خطا به صورت زیر خواهد بود:
برنج. 1.4. خطا در اعتبارسنجی هنگام استفاده از ویژگی "نوع" لیستما لیست های گلوله ای را کشف کردیم. حالا بیایید به لیست های شماره گذاری شده برویم و سپس به لیست های تو در تو و چند نمونه آماده که بیشتر در سایت های واقعی استفاده می شوند نگاهی می اندازیم.
2. لیست های شماره گذاری شده در HTML
بر خلاف نوع قبلی لیست ها، لیست های شماره دار یک ویژگی مهم دارند: آنها به طور خودکار شماره گذاری را اضافه می کنند. این زمانی مفید است که شما نیاز به شماره گذاری یک لیست بزرگ دارید. به صورت دستی زمان بسیار زیادی طول می کشد، اما همچنان می توانید گم شوید. یک لیست شماره گذاری شده با استفاده از یک برچسب مشخص می شود. در عمل چگونه به نظر می رسد:
نمونه ای از لیست شماره گذاری شده:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <سر> <عنوان>نمونه ای از یک لیست شماره گذاری استاندارد</ عنوان> </ سر> <بدن> <p>یک تا پنج:</ p> <ol> <li>اولین</ li> <li>دومین</ li> <li>سوم</ li> <li>چهارم</ li> <li>پنجم</ li> </ اول> </ بدن> </ html> به این صورت است که یک لیست شماره گذاری شده با تنظیمات پیش فرض در مرورگر به نظر می رسد:
برنج. 2.1. لیست شماره گذاری شده در یک مرورگر با تنظیمات استانداردمانند نسخه قبلی خود (فهرست گلوله شده)، سبک های خاص خود را برای نمایش اعداد دارد. شماره گذاری ساده تنها نوع گلوله برای لیست شماره گذاری شده در HTML نیست.
2.1 گلوله های استاندارد برای یک لیست شماره دار
در اینجا ما نه از سه نوع نشانگر، بلکه از پنج نوع انتخاب داریم:
نام نشانگر مقدار ویژگی "نوع". مثال فهرست کنید نشانگر اعداد عربی 1 نشانگرهایی به شکل حروف کوچک لاتین آ نشانگرهایی به شکل حروف بزرگ لاتین آ نشانگرهای اعداد رومی با حروف کوچک من اعداد رومی بزرگ من 2.2 شماره گذاری سفارشی در لیست HTML
علاوه بر خروجی معمول یک لیست شماره دار، می توانیم شماره گذاری خود را از هر رقمی نیز شروع کنیم. برای انجام این کار، باید ویژگی "شروع" اضافی را تنظیم کنید. این شماره گذاری برای همه انواع گلوله ها برای لیست های شماره گذاری شده کار می کند. در عمل چگونه به نظر می رسد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <سر> <عنوان>شماره گذاری تصادفی برای لیست شماره گذاری شده</ عنوان> </ سر> <بدن> <p>شماره گذاری را از دوازده شروع می کنیم:</ p> <ol type = "a" start = "12"> <li>دوازده</ li> <li>سیزده</ li> <li>چهارده</ li> <li>پانزده</ li> <li>شانزده</ li> </ اول> </ بدن> </ html> به این صورت در یک سایت زنده نمایش داده می شود:
برنج. 2.2. شماره گذاری از یک عدد دلخواه در لیست شماره گذاری شدهدر تصویر بالا، لیست را از دوازده شماره گذاری کردیم، در حالی که نشانگرهایی به شکل حروف لاتین کوچک ساختیم. اکنون، فکر می کنم، مشخص شد که چگونه از این ویژگی ها در پروژه های خود استفاده کنید.
در حال حاضر، اجازه دهید به لیست های HTML تو در تو برویم.
3. نحوه ایجاد یک لیست چند سطحی (تودرتو) در HTML
در ساخت منو از لیست های چند سطحی در سایت استفاده می شود. این منو اغلب مانند یک کشویی به نظر می رسد یا به پایین (درس در)، یا کشویی به سمت چپ یا راست. چنین منوهایی به شما این امکان را می دهند که سایر موارد منو را به شکل فشرده ذخیره کنید.
با استفاده از مدل های خودرو به عنوان مثال، یک لیست چند سطحی در HTML ایجاد می کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html> <سر> <عنوان>لیست گلوله ای تو در تو HTML</ عنوان> </ سر> <بدن> <ul> <li>سیتروئن<ul> <li>برلینگو</ li> <li> C1</ li> <li> C2</ li> <li> C3 پیکاسو</ li> <li> C4 گراند پیکاسو</ li> </ ul> </ li> <li> KIA</ li> <li>تویوتا</ li> <li>آئودی</ li> <li>لکسوس</ li> </ ul> </ بدن> </ html> توجه کنید که یک لیست چند سطحی در مرورگر چگونه به نظر می رسد:
برنج. 3.1. نمونه ای از لیست چند سطحی در HTMLما یک لیست چند سطحی با استفاده از یک گلوله (برچسب
- ). لیست طبقه بندی شده با مدل های سیتروئن با نشانگرهای دیگری همراه بود. لیست اصلی با گلوله های پر و لیست سطح 2 با دایره های خالی. اما، به یاد داشته باشید، با ویژگی "type" می توانیم نشانگرها را لغو کنیم (بهتر است آنها را تنظیم کنیم).
اما می‌توانیم لیست‌های چندسطحی شماره‌دار و گلوله‌ای را مانند این ترکیب کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <html> <سر> <عنوان>لیست های شماره گذاری شده، گلوله ای و شماره گذاری شده در HTML</ عنوان> </ سر> <بدن> <ul> <li>گروه اول لاله ها<ol> <li>کلاس اول<ul> <li>لاله های اولیه ساده</ li> </ ul> </ li> <li>درجه دوم<ul> <li>لاله های دوتایی</ li> </ ul> </ li> </ اول> </ li> </ ul> </ بدن> </ html> در مثال بالا، ما تودرتوی دوگانه (2 سطح) داریم. ابتدا لیستی از دو دسته گل لاله قرار می دهیم، آن را شماره گذاری می کنیم. سپس، یک لیست گلوله ای در هر یک از موارد موجود در لیست شماره گذاری شده قرار می گیرد.
ما به ظاهر آن در مرورگر نگاه می کنیم:
برنج. 3.2. نمونه‌ای از فهرست شماره‌دار چند سطحی در فهرست گلوله‌ای در مرورگر4. منابع مفید برای لیست های HTML
این شامل اطلاعاتی است که نیاز به درک ویژگی های CSS دارد. برای این کار توصیه می کنم درس های زیر را مطالعه کنید:. همه نمونه ها بلافاصله با کد منبع و به تب های HTML (ساختار)، CSS (سبک ها) و نتایج (نتیجه) تقسیم می شوند.
4.1 چگونه یک لیست HTML را به یک رشته تبدیل کنیم
ممکن است لازم باشد هنگام ایجاد یک منوی افقی، لیست HTML را به صورت رشته ای در آورید. درست کردن آن بسیار ساده است:
4.2 نحوه ایجاد یک لیست HTML بدون آیکون
ویژگی list-style-type در CSS مسئول این است (جزئیات بیشتر):
4.3 نحوه ایجاد یک لیست در HTML محور
یک مورد لیست یک آیتم بلوک است، بنابراین باید با استفاده از padding در مرکز قرار گیرد. اما یک نکته مهم وجود دارد - ما باید به صراحت عرض را برای کار تراز مشخص کنیم:
4.4 نحوه ایجاد یک لیست در HTML با تصاویر
فقط یک ویژگی CSS list-style-image کافی است. در داخل url، آدرس را قبل از نماد مشخص کنید. فقط می خواهم توجه داشته باشم که بهتر است بلافاصله یک تصویر کوچک انتخاب کنید، زیرا ارتفاع خط لیست به آن بستگی دارد:
4.5 HTML نشانگر خود را فهرست کنید
در این مورد، لازم است که آیکون های فونت (مثلا FontAwesome) را از قبل متصل کنید. سپس می توانید هر نمادی را به جای نشانگر استاندارد ایجاد کنید:
4.6 نحوه ایجاد یک لیست در HTML با چندین ستون
برای ایجاد یک لیست چند ستونی، از ویژگی CSS column-count استفاده می کنیم (این ویژگی فقط در مرورگرهای زیر پشتیبانی می شود: IE 10+، Chrome 1.0+، Opera 11.1+، Safari 3.0+، Firefox 1.5+). شما همچنین باید ارتفاع لیست را تنظیم کنید تا تقسیم به چندین ستون را ببینید:
5. تمرین کار با لیست ها
در ویدیوی زیر می توانید تمام کار با لیست های HTML را در عمل مشاهده کنید:
برای ادغام اطلاعات دریافتی، توصیه می کنم تمام مراحل را به صورت دستی انجام دهید. گلوله های مختلف را برای لیست ها امتحان کنید، لیست های شماره گذاری شده ایجاد کنید، و سپس به لیست های چند سطحی (تودرتو) بروید و با آنها آزمایش کنید.
اینجاست که لیست ها را تمام می کنیم و به درس بعدی در مورد تصاویر می رویم.
تمرین بیشتر!
درس 3. چگونه یک لیست در HTML ایجاد کنیم 4.91 /5 (98.26%) 23 رای
در اینجا: نوع کاراکترهای لیست است:
اگر می خواهید لیست با عددی غیر از 1 شروع شود، باید این را با استفاده از ویژگی مشخص کنید شروع کنیدبرچسب زدن
مثال زیر یک لیست شماره گذاری شده با اعداد رومی بزرگ و مقدار اولیه XLIX را نشان می دهد:می توانید شماره گذاری را با ویژگی شروع کنید مقدارکه به عنصر اضافه می شود
- که به موارد منفرد لیست اشاره می کند نشانگرهای استاندارد آیتم لیست را ارائه می دهد.
پارامتر COMPACT بدون مقادیر نوشته شده است و برای دستور دادن به مرورگر برای نمایش این لیست در قالب فشرده استفاده می شود. به عنوان مثال، فونت را می توان کاهش داد یا فاصله بین خطوط لیست و غیره.
توجه داشته باشید
در حال حاضر وجود پارامتر COMPACT در تگ
- به هیچ وجه نمایش لیست ها توسط مرورگرهای پیشرو را تحت تاثیر قرار نمی دهد. بنابراین، استفاده از این پارامتر بی معنی است، به خصوص که استفاده از آن توسط مشخصات HTML 4.0 توصیه نمی شود.
پارامتر TYPE می تواند مقادیر زیر را بگیرد: دیسک، دایره و مربع. این پارامتر برای اجبار کردن ظاهر نشانگرهای لیست استفاده می شود. نوع دقیق نشانگر به مرورگر مورد استفاده بستگی دارد. گزینه های نمایش معمولی به شرح زیر است:
TYPE = دیسک - نشانگرها با دایره های پر نمایش داده می شوند. TYPE = دایره - نشانگرها با دایره های باز نمایش داده می شوند. TYPE = مربع - نشانگرها با مربع های پر نمایش داده می شوند. مثال ضبط:
- .
پیش فرض TYPE = دیسک است. برای لیست های گلوله ای تو در تو، پیش فرض دیسک در سطح اول، دایره در سطح دوم و مربع در سطح سوم و بالاتر است. این دقیقاً همان کاری است که در آخرین نسخه مرورگرهای Netscape و Internet Explorer انجام می شود. توجه داشته باشید که سایر مرورگرها ممکن است نشانگرها را متفاوت نشان دهند. برای مثال، مشخصات HTML 4.0 یک طرح کلی مربعی برای ظاهر نشانگر مشخص می کند که وقتی TYPE = مربع نمایش داده می شود.
پارامتر TYPE با مقادیر یکسان می تواند برای تعیین نوع نشانگرها برای آیتم های لیست جداگانه استفاده شود. برای این، پارامتر TYPE با مقدار مربوطه مجاز است در تگ آیتم لیست مشخص شود.
- .
به عنوان یک موضوع عملی، اصول نمایش آیتم های لیست گلوله ای را می توان به روشی مشابه در لیست شماره گذاری شده اعمال کرد. اما با توجه به اینکه با یک شمارش سر و کار داریم، ویژگی هایی وجود دارد که در ادامه به آن ها می پردازیم.
شماره گذاری لیست
شروع لیست از هر شماره مجاز است. برای این منظور از ویژگی start عنصر استفاده می شود
- یا مقدار عنصر
مثال 11.1 HTML را برای افزودن لیست گلوله‌ای به یک صفحه وب ارائه می‌کند.
مثال 11.1. یک لیست گلوله ای ایجاد کنید
نتیجه این مثال در شکل نشان داده شده است. 11.1.
برنج. 11.1. نمای لیست گلوله ای
به بالشتک در بالا، پایین و سمت چپ لیست توجه کنید. چنین تورفتگی هایی به طور خودکار اضافه می شوند.
نشانگرها می توانند سه نوع باشند: دایره (پیش فرض)، دایره و مربع. از ویژگی type تگ برای انتخاب سبک نشانگر استفاده می شود.
- ... مقادیر مجاز در جدول آورده شده است. 11.1
| نوع فهرست | کد HTML | مثال |
|---|---|---|
| لیست با گلوله ها به شکل دایره | ||
| لیست با گلوله ها به شکل دایره | ||
| لیست با نشانگرهای مربعی |
ظاهر نشانگرها ممکن است در مرورگرهای مختلف و همچنین هنگام تغییر فونت و اندازه متن کمی متفاوت باشد.
ایجاد یک لیست با نشانگرهای مربع در مثال 11.2 نشان داده شده است.
مثال 11.2. نوع نشانگر
تغییر باورها
نتیجه این مثال در شکل نشان داده شده است. 11.2.
یکی از انواع لیست های پیاده سازی شده در HTML لیست گلوله ای است. در غیر این صورت لیست هایی از این نوع را نامرتب یا نامرتب می نامند. نام دوم اغلب به عنوان ترجمه رسمی نام تگ مربوطه استفاده می شود.
- ، با کمک آن لیست هایی از این نوع در اسناد HTML سازماندهی می شوند (UL - Unordered List, unordered list).
یک لیست گلوله ای از کاراکترهای خاصی به نام لیست گلوله ها (اغلب به آنها bullets که تلفظ رسمی اصطلاح انگلیسی bullet است) برای برجسته کردن موارد خود استفاده می کند. نوع نشانگرهای لیست توسط مرورگر تعیین می شود و هنگام ایجاد لیست های تودرتو، مرورگرها به طور خودکار ظاهر نشانگرها را در سطوح مختلف تودرتو متنوع می کنند.
برچسب ها و
برای ایجاد یک لیست گلوله ای، باید از یک تگ کانتینر استفاده کنید که تمام عناصر لیست در داخل آن قرار دارند. تگ‌های فهرست باز و بسته، فیدهای خط را قبل و بعد از فهرست ارائه می‌کنند، بنابراین فهرست را از محتوای اصلی سند جدا می‌کند، بنابراین نیازی به استفاده از تگ‌های پاراگراف در اینجا نیست.
.
هر مورد لیست باید با یک برچسب شروع شود
