Здравствуйте, уважаемые читатели блога сайт. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI - нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.
Хочу напомнить вам, что мы уже успели , успели поговорить про основы современной , а так же верстки табличной (). Кроме этого мы затронули основы , ну и узнали через .
Маркированные списки на основе тэгов UL и LI
Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.
Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.
Давайте посмотрим, например, маркированный вариант, который может выглядеть так:
- Первая строка
- Вторая
- Последний элемент
Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).
Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.
Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):
- — закрашенный кружок (по умолчанию);
- — не закрашенный кружок;
- – квадрат
В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.
Пример маркированного списка с различными типами маркера для каждого пункта:
- Маркер в виде закрашенного диска
- Маркер в виде не закрашенного диска
- Квадрат
Нумерованные списки в Html на основе тэга OL
Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.
Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:
- Первая строка
- Второй пункт
- Третья строка
Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:
- — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
- — заглавные буквы в качестве нумерации;
- — строчные буквы;
- — заглавные римские цифры;
- — строчные римские цифры;
Пример нумерованного списка с различными типами нумерации для каждого пункта:
- с нумерацией большими римскими цифрами
- Нумерация маленькими латинскими буквами
- Нумерация малыми римскими цифрами
При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:
- Первый элемент, номер которого задан в теге OL атрибутом start="23"
- Следующий пункт, с номером на единицу большим
- Еще на единицу больше
Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:
- Первый пункт с номером один
- Этот элемент получит номер, указанный в атрибуте value="32"
- Пункт с большим номером
Оформление внешнего вида списков в CSS (таблицах стилей)
Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а , для которых прописываются соответствующие свойства.
Здесь я просто приведу пример различных маркеров для ненумерованных списков, внешний вид которых задается через отдельный файл с таблицами каскадных стилей.
- Первый пункт
- Второй
- Последний
Но а о мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .
Специальные и вложенные списки в Html коде
Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.
Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).
- Первый термин
- Описание
- Второй термин
- Его описание
Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).
Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.
Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.
Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:
- Первый пункт основного нумерованного
- Второй пункт
- Первый элемент вложенного маркированного
- Второй
- Третий и последний пункт маркированного
- Третий элемент нумерованного
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Html формы для сайта - теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Iframe и Frame - что это такое и как лучше использовать фреймы в Html
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
С помощью списков html можно создать меню для вашего сайта с разными пунктами и подпунктами. При помощи списков создаётся содержание (карта) сайта, что очень удобно для поисковых систем.
И так, существуют теги "" - они определяют маркированный список.
Теги "" – определяют пункты, то есть элементы маркированного списка.
Для начала создадим простой список из нескольких пунктов:
<html > <head > <title > Простой маркированный список HTMLtitle > head > <body > <ul > <li > Oneli > <li > Twoli > <li > Threeli > <li > Fourli > ul > body > html >- Three
Для маркировок html можно задать некоторые типы, которые прописываются внутри
первого тега "
- " в type=" "
- Четыре
- Четыре
- Меркурий
- Венера
- Земля
- Юпитер
- Сатурн
- Нептун
- Плутон
- название " вставить ещё один список и после этого закрыть его вторым тегом " "
- Скрипка
- Гитара
- классическая
- ритмгитара
- электрогитара
- Барабаны
- Дудочка
-
, как показано ниже.
- Первый пункт
- Второй пункт
- Третий пункт
В списке непременно должен присутствовать закрывающий тег
- Чебурашка
- Крокодил Гена
- Шапокляк
- Крыса Лариса
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- Первый
- Второй
- Третий
- изменение религиозной веры (на выбор: буддизм, конфуцианство, индуизм). Специальное предложение - иудаизм и мусульманство вместе;
- изменение веры в непогрешимость любимой партии;
- убеждение в том, что инопланетяне существуют;
- предпочтение политического строя, как самого лучшего в своем роде (на выбор: феодализм, социализм, коммунизм, капитализм).
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
- Первый элемент списка
- Второй элемент списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
- Первый элемент списка
- Второй элемент списка
- Первый подпункт списка
- Второй подпункт списка
- Третий элемент списка
- Четвертый элемент списка
- Пятый элемент списка
- , далее пример как создать нумерованный список
:
Пример создания нумерованного списка
- Пункт первый
- Пункт второй
Нумерованные списки можно вкладывать друг в друга. Глубина может быть любой. Такой способ часто применяется для создания меню на сайте. Далее пример вложенного, нумерованного списка :
Пример вложенного, нумерованного списка
- Пункт первый
- Пункт первый в первом
- Пункт второй в первом
- Пункт второй
Чтобы поменять тип списка, нужно использовать атрибут type . Значение атрибута должно быть первым символом данной последовательности, например, для арабских чисел type = "1" , для римских прописных type = "I" и т.д.
- Арабские числа – 1, 2 и т.д.
- Прописные латинские буквы - A, B и т.д.
- Строчные латинские буквы - a, b и т.д.
- Прописные римские числа - I, II и т.д.
- Строчные римские числа - i, ii и т.д.
Возмем наш предыдущий пример и укажем типы списка:
- Пункт первый
- Пункт первый в первом
- Пункт второй в первом
- Пункт первый в первом, во втором
- Пункт второй в первом, во втором
- Пункт второй
Используем атрибут start
- Пункт первый
- Пункт второй
Оформление при помощи CSS нумерованного списка
Об этом будет еще много уроков, поэтому мы кратко рассмотрим стилизацию списка. Для начала давайте отодвинем наш нумерованный список от левого края на 20 пикселей. Для этого используем свойство margin .
ol {
margin: 0 0 0 20px;
}В интернете задают часто вопрос: «Как изменить цвет маркеров (у маркированного списка) или цвет нумерации (у нумерованного списка)?». Сделать это очень просто, например, вот так:
Добавляем тег span
- Пункт первый
- Пункт второй
Меняем цвет
Li {
color: red;
}
li span {
color: #000000;
}Нумерованный список и SEO
Нумерованные списки тоже играют важную роль в SEO продвижении, так как они делают информацию на сайте более структурированной. А это значит, если вы будете использовать списки в нужных местах, то информация будет более понятной для читателя, а так же для поисковых роботов.
Создадим список, в котором вместо точек будут маленькие окружности (выколотые точки). Это тип называется "circle "
<html > <head > <title > Маркированный список HTML title > head > <body > <ul type="circle" > <li > Одинli > <li > Дваli > <li > Триli > <li > Четыреli > ul > body > html >Теперь вместо типа "circle" зададим тип "square " (квадратики)
<html > <head > <title > Маркированный список HTML title > head > <body > <ul type="square" > <li > einli > <li > zweili > <li > dreili > <li > vierli > ul > body > html >В уроках CSS подробно рассмотрена работа со списками, из которых вы можете узнать, как задавать цвета пунктами и тексту в них, а так же как задавать сам тип маркера (это может быть не только квадрат
или точка – это может быть почти любой символ).
| Нумерованные списки html |
Списки можно не только маркировать, но и нумеровать, так как иногда это бывает необходимо. Это могут быть цифры (1, 2, 3 …) И буквы английского алфавита в нижнем и верхнем регистре. Рассмотри всё выше описанное.
Для того что бы задать нумерацию применяются теги "" .
Внутри первого тега задаётся тип.
Нумерация числами (от одного)
<html > <head > <title > Нумерованный список htmltitle > head > <body > <ol > <li > Разli > <li > Дваli > <li > Триli > <li > Четыреli > ol > body > html >Если вам нужно чтобы нумерация начиналась с нуля (ноля) или с тройки, например, то нужно в первом теги написать start=" " и нужное число.
<html > <head > <title > Нумерованный список htmltitle > head > <body > <ol start="0" > <li > нольli > <li > одинli > <li > дваli > <li > триli > ol > body > html >Теперь рассмотрим, как задать "буквенную нумерацию".
В нижнем регистре:
<html > <head > <title > Нумерованные списки htmltitle > head > <body > <ol type="a" > <li > Меркурийli > <li > Венераli > <li > Земляli > <li > Марсli > ol > body > html >В верхнем регистре:
<html > <head > <title > Нумерованные HTML спискиtitle > head > <body > <ol type="A" > <li > Юпитерli > <li > Сатурнli > <li > Уранli > <li > Нептунli > <li > <b > Плутонb > li > ol > body > html >По мимо обычных списков в html можно создавать многоуровневые списки, то есть подразделы для определённых пунктов. Для этого нужно после
тега и названия "
В следующем уроке будет рассмотрено создание простого меню на базе знаний полученных из этого урока.
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера
-
, а каждый пункт списка начинается с тега
В примере 11.1 приведен код HTML для добавления маркированного списка на веб-странице.
Пример 11.1. Создание маркированного списка
Результат данного примера показан на рис. 11.1.
Рис. 11.1. Вид маркированного списка
Обратите внимание на отступы сверху, снизу и слева от списка. Такие отступы добавляются автоматически.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега
-
. Допустимые значения приведены в табл. 11.1
| Тип списка | Код HTML | Пример |
|---|---|---|
| Список с маркерами в виде круга | ||
| Список с маркерами в виде окружности | ||
| Список с квадратными маркерами |
Вид маркеров может незначительно различаться в разных браузерах, а также при смене шрифта и размера текста.
Создание списка с квадратными маркерами показано в примере 11.2.
Пример 11.2. Вид маркеров
Изменение убеждений
Результат данного примера показан на рис. 11.2.
Списки часто используются на веб-страницах, поэтому данный вопрос весьма актуален. В HTML предусмотрено два типа списков: нумерованный и ненумерованный (маркированный). Для построения списков используются специальные теги. С основными тегами мы познакомимся в данном уроке. Давайте рассмотрим типы списков в HTML по порядку и на реальных примерах разберемся чем они отличаются, и как выводятся.
Нумерованные списки в HTML
Нумерованные списки в HTML — упорядоченная последовательность элементов. В нумерованном списке перед каждым его элементом автоматически проставляется порядковый номер. Нумерованный список имеет следующий вид:
В данном примере список будет выводиться арабскими цифрами. У нумерованных списков существуют атрибуты, с помощью которых можно задать формат отображения нумерации списка:
1. Атрибуты «I» или «i» — список нумеруется римскими буквами (заглавными или прописными);
2. Атрибуты «A» или «a» — нумерация латинскими буквами (заглавными или прописными);
3. Атрибут «start» — используется для того, чтобы нумерация начиналась не с первого пункта, в качестве параметра указывается порядковый номер, с которого требуется формировать список.
Пример. Нумерованный список, который формируется из римских букв и начинается со второго элемента:
Маркированные списки в HTML
Ненумерованные списки также называют неупорядоченными или маркированными. Для выделения элементов такого списка используются специальные символы (маркеры). Вид маркеров списка задается в HTML коде с помощью специальных атрибутов. Пример маркированного списка в HTML:
В данном случае список будет формироваться из маркеров в виде жирной точки. Атрибутами ненумерованного списка являются:
1. «disc» — маркеры в виде закрашенного кружка
2. «circle» — маркеры в виде пустого кружка
3. «square» — маркеры в виде закрашенного квадрата
Пример задания определенного маркера в списке:
В качестве маркеров списка можно использовать также графические изображения, что позволяет красиво оформить HTML-документ. На практике это очень часто применяется. Для реализации этой задачи необходимо в коде прописать путь до картинки, которая будет служить маркером:
Первый элемент списка
Также списки бывают вложенными, они состоят из нескольких списков:
Вот, пожалуй и все, что хотелось рассказать о списках в HTML. Списки очень часто встречаются на веб-страницах. Для их формирования нужно знать определенные правила вывода.
Что такое нумерованный список в HTML? Нумерованный список – это набор элементов с порядковыми номерами. Его преимущество в том, что процесс нумерации элементов автоматизирован и поэтому вы не запутаетесь. Так же можно начать отсчет не с первого, а со сто первого элемента. Можно менять тип списка: арабские числа, прописные буквы латинского алфавита, строчные буквы латинского алфавита, римские числа в верхнем регистре, римские числа в нижнем регистре. Вокруг нумерованного списка добавляются отступы: сверху, снизу и слева. Для создания нумерованного списка используется тег
- Каждый пункт нумерованного списка выделяется парным тегом
