|   
 
 
 
 
 
 
   
  Поиск по сайту:
логин : пароль :  
    Напомнить пароль?    
Реклама
Популярные статьи
    Реклама
     

    Списки в HTML

    Уроки веб-дизайна » HTML » Списки
     
     
     

    Для представления текста в структурированном виде, когда каждый абзац выделен с помощью отметки или номера, предназначены списки.

    В HTML документах используются три вида списков:

    • неупорядоченный (маркированный);
    • упорядоченный (нумерованный);
    • список определений.

    В неупорядоченном списке для выделения элементов используются определенные метки (точки, квадраты и т. д.). Начинается такой список с тега <ul>, а заканчивается его закрывающим тегом </ul>. Каждый элемент списка начинается с тега <li> и заканчивается - </li>. Тег <ul> может иметь атрибут TYPE, который определяет форму отметки. Этот атрибут приобретает следующие значения:

    • disk - закрашенный круг;
    • circle - круг;
    • square - маленький чёрный квадрат.

    В упорядоченном списке все элементы пронумерованы. Начинается список с тега <ol>, а заканчивается - </ol>. Каждый элемент такого списка также начинается с тега <li> и заканчивается - </li>. Тег <ol> может иметь атрибут TYPE, который определяет тип нумерации. Этот атрибут принимает следующие значения:

    • A - большая буква;
    • a - строчная буква;
    • I - большая римская цифра;
    • i - малая римская цифра;
    • 1 - арабская цифра.

    При необходимости с помощью атрибута START можно задать отличный от единицы начальный номер элемента, например <ol type = "I" start = "5">

    Нумерованный список с начальным элементом буквой "E", которая является пятой в алфавите, описывают так:

    <ol type="A" start="5">

    <li>Первый элемент списка</li>

    <li>Второй элемент списка</li>

    <li>Третий элемент списка</li>

    <li>Четвертый элемент списка</li>

    </ol>

     

    Результат:

    1. Первый элемент списка
    2. Второй элемент списка
    3. Третий элемент списка
    4. Четвертый элемент списка

     

    Список определений (definition list) по сравнению с маркированным или нумерованным имеет несколько более сложное строение. Каждый элемент такого список состоит из двух частей: термина и его определения. Таким образом могут быть оформлены словари и терминологические справочники. Данный список открывает тег <dl>, термин выделяется тегом <dt>, а его определение — с помощью тега <dd>. Не забывайте, что каждый из этих тегов должен быть закрыт: </dl>, </dt>, </dd>.

    Пример списка определений:

    <dl>

    <dt>Первый термин</dt>

    <dd>Определение первого термина</dd>

    <dt>Первый термин</dt>

    <dd>Определение второго термина</dd>

    </dl>

     

    Результат:

    Первый термин
    Определение первого термина
    Второй термин
    Определение второго термина

     

    Рассмотрим примеры использования различных типов списков.

    Маркированный список, в котором для обозначения элементов используют круглый маркер:

    <ul type="circle">

    <li><font color="red">Красный</font></li>

    <li><font color="orange">Оранжевый</font></li>

    <li><font color="yellow">Жёлтый</font></li>

    <li><font color="green">Зелёный</font></li>

    <li><font color="lightblue">Голубой</font></li>

    <li><font color="blue">"Морская гладь"</font></li>

    <li><font color="darkmagenta">Фиoлeтoвый</font></li>

    </ul>

     

    Результат:

    • Красный
    • Оранжевый
    • Жёлтый
    • Зелёный
    • Голубой
    • "Морская гладь"
    • Фиoлeтoвый

     

    Нумерованный список, в котором для обозначения элементов используют малые римские цифры:

    <ol type="i">

    <li><font size="1">1</font></li>

    <li><font size="2">2</font></li>

    <li><font size="3">3</font></li>

    <li><font size="4">4</font></li>

    <li><font size="5">5</font></li>

    <li><font size="6">6</font></li>  

    <li><font size="7">7</font></li>

    </ol>

     

    Результат:

    1. 1
    2. 2
    3. 3
    4. 4
    5. 5
    6. 6
    7. 7

     

    Обратите внимание, что в обоих примерах использован тег форматирования текста <font>, с атрибутами COLOR и SIZE.


     
       
     
     
      Материал по теме:
     
     
     
     
     
    Сайт о животных | Отдых в Феодосии
    Копирование и распостранение материалов на другие сайты строго запрещено!
      Яндекс.Метрика