انواع لیست های گلوله ای در html. لیست گلوله شده در HTML. لیست شماره چند سطحی HTML

با استفاده از لیست های html می توانید یک منو با آیتم ها و موارد فرعی مختلف برای سایت خود ایجاد کنید. با کمک لیست ها محتوای (نقشه) سایت ایجاد می شود که برای موتورهای جستجو بسیار راحت است.

و بنابراین، برچسب های "" وجود دارد - آنها یک لیست گلوله ای را تعریف می کنند.
برچسب ها "" - موارد را تعریف می کند، یعنی عناصر یک لیست گلوله ای.

ابتدا بیایید یک لیست ساده از چندین مورد ایجاد کنیم:

<html > <سر > <عنوان >لیست گلوله ای ساده HTMLعنوان > سر > <بدن > <ul > <li >یکیli > <li >دوli > <li >سهli > <li >چهارli > ul > بدن > html >

سه

برای علامت گذاری html، می توانید انواعی را که در داخل نوشته شده اند تنظیم کنید
اولین برچسب "

نوع ""

بیایید لیستی ایجاد کنیم که در آن به جای نقاط دایره های کوچک (نقاط پانچ) وجود داشته باشد. این نوع نامیده می شود دایره"

html >

سر >

عنوان >

بدن >

ulttype= "دایره">

li >

چهار

اکنون به جای نوع "دایره" نوع "" را تنظیم می کنیم. مربع" (مربع)

html >

سر >

عنوان >

بدن >

ulttype= "مربع">

li >

در درس های CSS، کار با لیست ها به طور مفصل مورد بحث قرار می گیرد، که از آن می توانید نحوه تنظیم رنگ برای آیتم ها و متن در آنها و همچنین نحوه تنظیم خود نوع نشانگر را بیاموزید (این می تواند نه تنها یک مربع باشد.
یا نقطه - می تواند تقریباً هر شخصیتی باشد).

لیست های شماره گذاری شده html

لیست ها را نه تنها می توان علامت گذاری کرد، بلکه شماره گذاری کرد، زیرا گاهی اوقات لازم است. این می تواند اعداد (1، 2، 3 ...) و حروف الفبای انگلیسی در پایین و حروف بزرگ. همه موارد فوق را در نظر بگیرید.

برای تنظیم شماره گذاری، از تگ های "" استفاده می شود.
در داخل اولین تگ، نوع تنظیم شده است.

شماره گذاری بر اساس اعداد (از یک)

html >

سر >

عنوان >

بدن >

اول >

li >

چهار

اگر به شماره گذاری نیاز دارید که مثلاً از صفر (صفر) یا از سه شروع شود، باید در اولین تگ بنویسید. شروع ""و عدد صحیح

html >

سر >

عنوان >

بدن >

اول شروع = "0" >

li >

حال بیایید نحوه تنظیم "شماره نامه" را بررسی کنیم.

حروف کوچک:

html >

سر >

عنوان >

بدن >

اولتایپ= "آ">

li >

سیاره تیر
سیاره زهره
زمین

حروف بزرگ:

html >

سر >

عنوان >

بدن >

اولتایپ= "آ">

li >

ب>

سیاره مشتری
زحل
نپتون
پلوتون

علاوه بر لیست‌های معمول در html، می‌توانید فهرست‌های چند سطحی، یعنی زیربخش‌هایی برای موارد خاص ایجاد کنید. برای انجام این کار، پس از برچسب و نام "

عنوان "فهرست دیگری را وارد کنید و سپس آن را با تگ دوم ببندید"

html >

سر >

عنوان >

بدن >

ulttype= "مربع" >

li >

ul >

li >

ویولن
گیتار
- کلاسیک
- گیتار ریتم
- گیتار الکتریک
طبل ها
لوله

درس بعدی به ایجاد یک منوی ساده بر اساس دانش به دست آمده از این درس خواهد پرداخت.

یک لیست گلوله ای با اضافه کردن یک نشانگر کوچک، معمولاً یک دایره پر، قبل از هر آیتم لیست تعریف می شود. خود لیست با استفاده از یک ظرف تشکیل می شود

همانطور که در زیر نشان داده شده است.
- نکته اول
- نکته دوم
- بند سوم
لیست باید حاوی یک تگ پایانی باشد.

مثال 11-1 کد HTML برای افزودن لیست گلوله‌ای به یک صفحه وب است.

مثال 11.1. یک لیست گلوله ای ایجاد کنید

لیست گلوله ای

چبوراشکا
کروکودیل گنا
شاپوکلیاک
موش لاریسا

نتیجه این مثالدر شکل نشان داده شده است. 11.1.

برنج. 11.1. نمای لیست گلوله ای

به بالشتک در بالا، پایین و سمت چپ لیست توجه کنید. چنین تورفتگی هایی به طور خودکار اضافه می شوند.

نشانگرها می توانند یکی از سه شکل دایره (پیش فرض)، دایره و مربع را داشته باشند. ویژگی type تگ برای انتخاب سبک نشانگر استفاده می شود.

نوع لیست	کد HTML	مثال
لیست با گلوله ها به شکل دایره		اولین دومین سوم
لیست با گلوله ها به شکل دایره		اولین دومین سوم
لیست با گلوله های مربع		اولین دومین سوم

ظاهر نشانگرها ممکن است در مرورگرهای مختلف و همچنین هنگام تغییر فونت و اندازه متن کمی متفاوت باشد.

ایجاد یک لیست با نشانگرهای مربع در مثال 11.2 نشان داده شده است.

مثال 11.2. نوع نشانگرها

لیست گلوله ای

تغییر باورها

تغییر ایمان مذهبی (برای انتخاب: بودیسم، کنفوسیوس، هندوئیسم). پیشنهاد ویژه- یهودیت و اسلام با هم؛
تغییر ایمان به عصمت طرف محبوب؛
اعتقاد به وجود بیگانگان؛
ترجیح برای یک سیستم سیاسی، به عنوان بهترین در نوع خود (برای انتخاب از بین: فئودالیسم، سوسیالیسم، کمونیسم، سرمایه داری).

نتیجه این مثال در شکل نشان داده شده است. 11.2.

آخرین به روز رسانی: 1395/04/08

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

هر عنصر لیست شامل یک اصطلاح و یک تعریف است. این اصطلاح در برچسب ها قرار می گیرد

ساده ترین فهرست تعاریف را در نظر بگیرید:

لیست ها در HTML5

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

لیست های گلوله ای به شما این امکان را می دهند که متن بزرگ را به بلوک های جداگانه تقسیم کنید، که هر کدام با یک گلوله شروع می شوند - معمولاً یک نقطه کوچک. این امر توجه خواننده را به متن جلب می کند و خوانایی آن را افزایش می دهد.

با عنصر

در محل ملاقات
- لیست دارای تورفتگی در بالا و پایین است.
- نشانگرها به صورت پیش فرض به صورت یک دایره پر نمایش داده می شوند.
- هر عنصر از لیست در رابطه با متن بدنه به سمت راست منتقل می شود.
شکل 1 نتیجه مثال را نشان می دهد که ویژگی های فوق لیست گلوله ای را نشان می دهد.
برنج. 1. مشاهده لیست گلوله شده
نوع نشانگر
نشانگرها می توانند یکی از سه شکل را داشته باشند: دایره پر شده (پیش فرض)، دایره خالی و مربع. برای انتخاب نوع نشانگر، از ویژگی list-style-type یا سبک لیست عمومی (مثال 1) استفاده کنید. مقادیر زیر اعمال می شود:
- دیسک - نشانگرهایی به شکل یک دایره پر.
- دایره - نشانگرهایی به شکل یک دایره پر نشده؛
- نشانگر مربع - مربع.
مثال 1 - ظاهر نشانگر را تغییر دهید
لیست ها
- sepulki
- Sepulcarii
- سپولنیا
مثال نشان می دهد که چگونه می توان یک لیست گلوله ای ایجاد کرد که از یک مربع کوچک و تک رنگ به عنوان نماد گلوله استفاده می کند. اگرچه تعداد مقادیر به سه عدد محدود شده است، اما این بدان معنا نیست که ما فقط سه نوع نشانگر در اختیار داریم. کاراکترهای ویژه زیادی وجود دارند که می توانند با موفقیت به عنوان نماد نشانگر عمل کنند. آنها را مستقیماً به آنها "پیچ" کنید
کار نخواهد کرد، بنابراین شما باید در اطراف کار کنید. برای انجام این کار، نشانگرهای لیست را با استفاده از ویژگی list-style با مقدار هیچ و در متن قبل از محتوا پنهان کنید.
کاراکتر خود را با عنصر ::before اضافه کنید. در مثال 2، یک مثلث به عنوان یک نشانگر عمل می کند.
مثال 2: استفاده از::before
لیست ها
- sepulki
- Sepulcarii
- سپولنیا
نتیجه این مثال در شکل نشان داده شده است. 2. از آنجایی که استفاده از ویژگی list-style با مقدار none نشانگرها را به هیچ وجه حذف نمی کند، بلکه فقط آنها را از دید پنهان می کند، لیست به سمت راست منتقل می شود. برای خلاص شدن از شر این ویژگی، مثال ویژگی text-indent را با مقدار منفی اضافه می کند. وظیفه آن این است که متن را با یک کاراکتر به سمت چپ منتقل کنید.
برنج. 2. نشانگرهای دلخواه در لیست
لازم نیست کاراکتر در قالب هگزا دسیمال باشد، همچنین می تواند مستقیماً در متن درج شود. نکته اصلی این است که سند را در رمزگذاری UTF-8 ذخیره کنید و ویرایشگر آن را پشتیبانی کند. خود نمادها و کدهای آنها را می توان به عنوان مثال از LibreOffice Writer(شکل 3).
برنج. 3. انتخاب نماد در LibreOffice
لیست با گلوله های ترسیم شده
Styles به شما این امکان را می دهد که هر تصویر مناسب را از طریق ویژگی list-style-image به عنوان نشانگر تنظیم کنید. مقدار نسبی یا مسیر مطلقبه یک فایل گرافیکی، همانطور که در مثال 3 نشان داده شده است.
مثال 3: استفاده از تصویر به عنوان نشانگر
لیست ها
- sepulki
- Sepulcarii
- سپولنیا
بهتر است عکسی با اندازه کوچک انتخاب کنید تا موارد فهرست را به شرح شکل تبدیل نکنید. روی انجیر 4 نتیجه عمل مثال برای استفاده از تصاویر کوچک به عنوان نشانگر را نشان می دهد.
برنج. 4. طراحی به عنوان نشانگر
لیست-سبک-تصویر دارای اشکالاتی است:
- الگو را نمی توان به بالا یا پایین حرکت داد.
- در مرورگرهای مختلف، موقعیت تصویر نسبت به متن ممکن است متفاوت باشد.
با استفاده از ویژگی پس زمینه که تنظیم می شود، می توان از این کاستی ها جلوگیری کرد تصویر پس زمینه. برای هر آیتم فهرست
ما نشانگرهای اصلی را حذف می کنیم و تنظیم می کنیم تصویر پس زمینهبدون تکرار و برای اینکه متن در بالای تصویر نمایش داده نشود، آن را از طریق padding-left به سمت راست منتقل می کنیم (مثال 4).
مثال 4 با استفاده از پس زمینه
Ul (حاشیه-چپ: -1em؛) li (سبک لیست: هیچکدام؛ پس‌زمینه: url(images/bullet.png) بدون تکرار 0 2px؛ بالشتک چپ: 20px؛ )
موقعیت متن و گلوله
دو راه برای قرار دادن نشانگر نسبت به متن وجود دارد: نشانگر خارج از مرز عناصر لیست قرار می گیرد یا با متن پیچیده می شود (شکل 5).

داخل خارج از
برنج. 5. قرار دادن نشانگرها نسبت به متن
ویژگی list-style-position برای کنترل موقعیت نشانگرها استفاده می شود. این دو معنی دارد: خارج - گلوله ها خارج از بلوک متن قرار می گیرند (این حالت پیش فرض است) و در داخل - گلوله ها بخشی از بلوک متن هستند و در آیتم لیست نمایش داده می شوند (مثال 5).
مثال 5. موقعیت نشانگرها را تغییر دهید
لیست ها
- قبل از شروع کار، در دسترس بودن تجهیزات موجود در کیت 3BM را بررسی کنید.
- در صورت عدم وجود یک یا چند مورد لوازم جانبیشما باید بلافاصله با کادر فنی VC تماس بگیرید.
- پس از بازرسی بصری محل کار خود، می توانید 3BM را با دقت روشن کنید.
نتیجه این مثال در شکل نشان داده شده است. 6.

کاربردهای اصلی لیست ها:

شماره گذاری شده - برای شمارش عناصر زیر به ترتیب کاملاً مشخص.

Bulleted - برای شمارش عناصر زیر به هر ترتیب.

چند سطحی - برای مشخص کردن اطلاعات عناصر خاص.

لیست تعریف - برای قالب بندی دیکشنری ها استفاده می شود.

صفحه html لیست شماره گذاری شده

از برچسب ها برای ایجاد لیست های شماره دار استفاده می شود.
1. برچسب بزنید
  1. به طور پیش فرض، آیتم های لیست به ترتیب 1، 2، 3 شماره گذاری می شوند... با استفاده از ویژگی TYPE، می توانید سبک شماره گذاری را تغییر دهید.
    شماره گذاری مقدار TYPE A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..
    اگر مقادیر جدیدی را به لیست موجود اضافه کنید، مرورگر به طور خودکار آن را دوباره محاسبه می کند.
    
    با استفاده از ویژگی های START VALUE، می توانید ترتیب شماره گذاری لیست را تغییر دهید.
    
    START - برای تنظیم شماره شروع لیست به غیر از 1 استفاده می شود.
    
    VALUE - تخصیص شماره دلخواه به هر عنصر از لیست را امکان پذیر می کند.
    
    مثال:
    
    صفحه html لیست گلوله شده
    
    از برچسب ها برای ایجاد لیست های گلوله ای استفاده می شود.