HTML-списки: неупорядоченные, упорядоченные и определения

HTML-cписки в ХТМЛ-документах служат для вывода содержимого(контента) в виде списка.

Неупорядоченные списки обозначаются тегом <UL> элементы списка </UL>, а сами элементы списка тегом <LI> содержание элемента </LI>, каждый список должен содержать не менее 1 элемента.

  <UL>
   <LI> HTML </LI>
    <LI> CSS </LI>
    <LI> PHP </LI>
  </UL>
  • HTML
  • CSS
  • PHP

Списки можно вкладывать 1 в 1: 
  <UL>
     <LI> HTML </LI>
     <LI> CSS 
      <UL>
         <LI> введение </LI>
         <LI> типы докуметов </LI>
         <LI> типы стилей </LI>
     </UL>
     </LI>
    <LI> PHP </LI>
  </UL>
результат этого кода:
  • HTML
  • CSS
    • введение
    • типы документом
    • типы стилей
  • PHP
Вкладные списки я вам показал не только для того что-бы смогли их использовать при необходимости, а так-же показать то что в наружном списке в начале каждого элемента большая точка, а уже внутреннем у нас круг, а если в внутренний мы вложим еще один то вначале этих элементов у нас появится квадрат. Так вот, этими кругами-квадратами можно управлять(изменять умолчания) при помощи атрибута тега Type для тега LI
  • <LI type="disc"> </LI>
  • <LI type="circle"> введение </LI>
  • <LI type="square"> введение </LI>
Закончить о неупорядоченных списках хотел бы тем что тег <LI> является контейнером, но вообще его использовать парой с закрывающим не обязательно, можно и так: 
  <UL>
       <LI> HTML
       <LI> CSS
       <LI> PHP
  </UL>
Тег Li в следующей строке говорит не только об начале нового элемента списка, но и об окончании предыдущего. Но лично я этого делать вам не советую.

Упорядоченные списки отличаются предыдущих только тем что в место кружочков или квадратиков идет нумерация в виде цифр или букв. Так-же эти списки обозначаются тегом <OL>, а элементы как и неупорядоченных списках тегом <LI>

  <OL>
       <LI> HTML
       <LI> CSS
       <LI> PHP
  </OL>
  1. HTML
  2. CSS
  3. PHP
Упорядоченные списки так-же имеют атрибут TYPE, но с другими занчениями. 
  <ol>
   <LI type="1"> Нумерация цифрами </LI>
    <LI type="A"> Нумерация большими буквами </LI>
    <LI type="a"> Нумерация маленькими буквами</LI>
    <LI type="I"> Нумерация  большими римскими</LI>
    <LI type="i"> Нумерация маленькими римскими</LI>
  </ol>
  1. Нумерация цифрами
  2. Нумерация большими буквами
  3. Нумерация маленькими буквами
  4. Нумерация большими римскими цифрами
  5. Нумерация маленькими римскими цифрами
Вкладывать упорядоченные списки один в один тем же способом что и неупорядоченные.

Списки определения обозначаются тегом <DL>, эти списки отличаются не только другим тегом элемента<DТ>, но но каждый елемент должен содержать свое определение<DD>. Например:

  <DL>
       <DT> Неупорядоченные списки
       <DD> Служат для вывода текста без нумерации
       <DT> Упорядоченные списки
       <DD> Служат для вывода текста с нумерацией
       <DT> Списки определений
       <DD> Служат для вывода текста каждого элемента парой.
       </DL>
Неупорядоченные списки
Служат для вывода текста без нумерации
Упорядоченные списки
Служат для вывода текста с нумерацией
Списки определений
Служат для вывода текста каждого элемента парой.

О списках у меня все!!! Использовать их или нет это ваше право. А мы перейдем к следующей странице моего HTML-самоучителя OnLine и познакомимся не менее интересной главой, в которой научимся увеличивать , задавать шрифты и изменять цвет текста отдельного участка текста.

Смотрите также: