Перейти к содержимому

списки html




На странице ,, сайт  блокноте ,, вы кратко познакомились с тегами верхнего уровня, заголовком документа, блочными, строчными элементами также там описаны кратко теги которыми можно и нужно верстать сайт и теги, которые не читает браузер, далее опишу списки, их виды и свойства. Списки мы пишем для того чтобы как-то структурировать информацию. Списки бывают разные к примеру, списки книг или списки песен в альбоме какого-то исполнителя или как у нас, список групп условного разделения тегов. Список-это перечень пунктов. В кодах HTML существуют три вида списков, маркированный, нумерованный и список определений. Любой список определяется двумя видами тегов – это общий контейнер списка и контейнер разделения пунктов. Самый простой данной группы списков это маркированный список и вид у него такой :
  • Пункт 1
  • Пункт 2
  • Пункт 3
Мы видим, что маркером данного списка является закрашенный кружок. Контейнером списка является тег <ul></ul>,  списки обрамляются тегом <li></li>.  Сверху после <!doctupe html>, я дописал <html lang="ru"> - это говорит браузеру, что сайт на русском языке. И так,  далее к спискам, записываются они межу тегами <body></body>, и выглядит это так:
<body>
<ul>
 <li>Пункт 1</li>
 <li>Пункт 2</li>
 <li>Пункт 3</li>
 </ul>
</body>
Для задания внешнего вида списков существует атрибут type, который имеет следующее значение
type=”disk” – маркер в виде закрашенного  круга.
type=”circle” – маркер в виде не закрашенного круга.
type=”square” – маркер в виде закрашенного квадрата.  Запишем это -  <ul type="circle">
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>пункт 3</li>
    </ul
В браузере будет выглядеть так:

foto

И если мы будем менять значения type=”значение”, то маркеры будут выглядеть в виде закрашенного  круга или квадрата. Следующим видом списка идёт нумерованный список и при замене тегов <ul></ul> на <ol></ol> , мы получим нумерованный список , записываем это так:
<ol>
      <li>Пункт 1</li>
      <li>Пункт 2</li>
      <li>пункт 3</li>
    </ol>      и получаем картинку в браузере:

foto

в браузере добавляются цифры с точкой слева. Если требуются другие варианты нумерации , то   к type применяется атрибуты со следующими значениями: type=”1” вы увидите в браузере  такую же картинку как расположена выше. Меняем значение type=”A” , то вместо цифр мы увидим большие буквы A,B,C , если поменяем букву на маленькую “a” , то увидим то же самое, только прописными буквами.  Если запишем так,  type=”I” , то получим вместо букв римские цифры и далее тоже самое , только “I” строчное  type=”i”  и добавим ещё один пункт, чтобы лучше было видно, то в браузере будет выглядеть так:

foto

если нам нужен список не по порядку с первого номера, а с другого 2го, 3го номера, то применяется атрибут  start=”2”, если хотим задать значение по умолчанию и начать отсчёт с цифры 2 и запишем это :
<ol start="2" >
      <li>Пункт один</li>
      <li>Пункт два</li>
      <li>пункт три</li>
      <li>пункт четыре</li>
    </ol>    , то в браузере получим картинку вот такого вида:

foto

Последний вид списков сложнее, он состоит не просто из отдельных пунктов, к каждому пункту даётся следующее определение и называется он списком определений. И представляет собой структуру следующего вида:
Пункт один
         Описание пункта один
Пункт два
        Описание пункта два
Пункт три
          Описание пункта три
И состоит данная структура не из 2х видов тегов, а из 3х тег контейнер <dl></dl> , теги пунктов <dt></dt> и тег определения пунктов обозначается <dd></dd>  записываем это :   <dl >
      <dt>пункт один</dt>
                <dd>определение  один</dd>
      <dt>пункт два</dt>
              <dd>определение  два</dd>
      <dt>пункт три</dt>
               <dd>определение  три</dd>
           <dt>пункт четыре</dt>
                <dd>определение  четыре</dd>
    </dl>    ,      что получилось в браузере :

foto

применение таких списков например, в анекдотах с диалогами или пишите описание свойств элементов HTML. Продолжение следует…