Содержание
ul
Автор: Евгений Рыжков Дата публикации: 17.01.2009
Тег
- (англ. unordered — неупорядоченный) — тег-контейнер, создает маркированный список.Блочный элемент.HTML: 3.2 | 4 / XHTML: 1.0 | 1.1
- …
- ltr — слева направо
- rtl — справа налево
- disc — маркер-диск (по умолчанию)
- circle — маркер-круг
- square — маркер-квадрат
- закрывающий тег обязателен (
- может содержать только теги
- обязательных атрибутов нет
- для задания вида списка рекомендуется использовать не атрибуты тега
- , а таблицы стилей
- по умолчанию браузерами список выводится с отступами
- списки можно вкладывать друг в друга, вложенные списки отображаются с увеличенным левым отступом
- тег
- наиболее подходит для создания меню (меню можно трактовать как список ссылок)
- элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
Синтаксис
class
определяет имя используемого класса
compact
флаг. Выводит список с уменьшенными отступами.Отсутствует в спецификации HTML 4.01!
dir
определяет направление символов:
id
уникальный идентификатор
lang
определяет используемый язык
onclick
щелчок на элементе
ondblclick
двойной щелчок на элементе
onkeydown
нажатие клавиши, когда элемент имеет фокус
onkeypress
нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup
освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown
нажатие кнопки мыши, когда элемент имеет фокус
onmousemove
движение указателя мыши, когда элемент имеет фокус
onmouseout
смещение указателя мыши с элемента
onmouseover
помещение указателя мыши на элемент
onmouseup
освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
style
задает встроенную таблицу стилей
title
добавляет всплывающую подсказку
type
определяет вид маркера
Типы маркеров:
- disc — маркер-диск (по умолчанию)
circle — маркер-круг
square — маркер-квадрат
Рекомендации по использованию
)
Твой код:
Результат:
большой полигон
По теме
Как в HTML сделать меню? Тег li, ul и ol — списки в HTML
Доброго времени суток. Меня зовут Михаил.
Специализируюсь на создании сайтов и их настройке. Разрабатываю современные сайты, учитывая каждое пожелание заказчика уже более 7 лет. Завершены сотни проектов.
Если Вам необходимо создать сайт, настроить его, или получить другую помощь в этой области, то смело выбирайте услугу или свяжитесь со мной. Всегда рад Вам помочь и готов ответить на Ваши вопросы.
#Видео уроки #ВидеоКурс HTML
14 апреля 2014
Обратите внимание
В прошлый раз мы закончили изучать еще один раздел ВидеоКурса по HTML, который был посвящен гиперссылкам. В прошлом дополнительном видео уроке мы познакомились с очень интересной возможностью mailto, а также с другими дополнительными возможностями ссылок. Теперь раздел пройден, и можно переходить к следующему.
Следующий раздел довольно небольшой и состоит буквально из пары видео уроков. Но раздел важен и посвящен спискам в HTML. Что такое списки? Как ими пользоваться и т.д.
Как сделать HTML-меню для сайта?
Что касается этого видео, то сегодня мы познакомимся с тремя HTML-тегами. Это тег ul, тег ol и тег li. Мало того, что мы изучим еще три тега и пополним копилку наших знаний в области HTML, еще сегодня мы узнаем, как в HTML сделать меню? Вопрос довольно популярный и актуальный. В этом видео Вы сможете увидеть, насколько все просто.
Видео урок хоть и непродолжительный, но довольно подробный. Кроме создания HTML-меню для сайта, мы узнаем, как сделать подразделы в меню. Как известно меню это некий список, состоящий из определенных разделов сайта. Но кроме разделов мы можем указывать и подразделы это не что иное, как вложенное меню или более правильно вложенные списки.
HTML-тег li
Тег
Также эти элементы могут быть активными. Я имею в виду, что любой такой элемент можно сделать ссылкой ведущей куда-либо. Неважно на страницу раздела или еще куда-то.
Тем более что как сделать ссылку в HTML мы уже заем.
HTML-тег ul
Тег
- не предназначен для вывода какой-либо информации на странице, для этого существует тег
- . Однако этот элемент не менее важен в создании меню или попросту списка. Элемент
- создает некий контейнер, который определяет, с чем веб-браузер имеет дело. Кроме этого
- определяет, с каким списком мы столкнулись. Так как списки можно разделить на два вида: нумерованный список и маркированный.Так вот. Тег
- создает маркированный список в HTML. Именно такие списки удобнее всего использовать для создания меню. Также такие списки могут называться неупорядоченными. Я думаю понятно, почему им даны такие определения. Неупорядоченный, потому что не имеет отметок порядка, например, цифровых значений. Но маркированный список более популярное название для этого элемента, так при создании такого списка слева от него появляются некие маркеры, которые визуально выделяют каждый пункт списка.
HTML-тег ol
Тег
также не предназначен для вывода какой-либо информации на странице. Этот элемент создает блочный элемент, как и
- . То есть некий контейнер, в который будут помещены отдельные пункты списка. Но отвечает он не только за это.Указав тег
, мы сообщаем веб-браузеру о том, что он имеет дело с нумерованным списком или по-другому упорядоченным. Эти списки полная противоположность неупорядоченных списков. Так как подобные списки имеют отметки порядка. Проще говоря, порядковые номера возле каждого отдельного элемента списка. Отсюда и такие определения.
Видео урок: Как в HTML сделать меню? Тег li, ul и ol — списки в HTML
HTML-справочник и другие материалы можно и нужно скачать здесь!В следующем видео мы продолжим изучение радела и поговорим о списках определений.
Списки в HTML (XHTML)
. Таким образом, элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.________________________________________Урок 1: Структура web-документа. Вставка комментария.Здесь мы рассмотрим основы html, а также научимся вставлять комментарии в тело документа.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML , которая обычно выглядит примерно так: В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное — вы должны знать, что она необходима.
Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) . Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги головы () и тела документа() .
Обычно основой головы документа является элемент TITLE — заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, — находится в теле документа.
На этой смешной картинке я попытался схематически изобразить структуру: Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот) . Сначала закрываем голову документа , и лишь затем открываем тело . И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
Вставка комментария: Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия — тогда разобраться будет значительно легче! Т.к.
это учебник html с примерами, давайте к ним и обратимся:)Пример:
. . .Вы уже наверное догадались, что закомментированный текст нужен только для Вас, т.е. при просмотре документа через браузер его видно не будет.В начале комментарий нужно открыть тегом . Примечание: тег внутри элемента TITLE не действует.
________________________________________Урок 2: Создаем свою первую страничку.В этом уроке Вы создатите свою первую страничку по всем правилам. Давайте сразу учиться все делать правильно. Хоть это и самая примитивная страничка создадим ее по всем правилам(они пригодятся при работе с Adobe Dreamweaver).
ШАГ 1:Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку obuchenie_html . Внутри папки создайте еще одну папку с названием www, а внутри нее еще одну для изображений с названием img (позже вставим туда картинки). Для наглядности я нарисовал вам приблизительную структуру, получившуюся в результате: Пока поверьте мне на слово, дальше когда начнете изучать Dreamweaver все поймете.ШАГ 2:
Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ. Для этого зайдите в нее, кликните правой кнопкой мыши в выпадающем меню выберите Создать — Текстовый документ. Перед собой вы должны видеть примерно следующее:
ШАГ 3:Теперь, следуя предыдущему уроку напишите в Блокноте текст простейшей странички:Приведу пример:
Ура!!!! Я создал свою первую страницу на html!!!
Важно
Готово ! Вы создали свою первую настоящую веб-страницу!ШАГ 4:Теперь сохраните ваш документ как «index.htm» (расширение «.htm» указывает, что это HTML-документ. «.html» даст тот же результат. Это не имеет значения).
Для этого в меню Файл выберите Сохранить Как: В пункте Тип файла выберите «Все файлы».После сохранения можете удалить текстовый документ.ШАГ 5:Теперь если вы запустите получившийся файл index.
htm увидите примерно следующее:
Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот. Либо же, можно менять прямо в браузере, но только в браузере Opera.
Поэтому, если у Вас установлен именно он, то Вы можете просто запустить свою страничку, кликнуть правой кнопкой мыши, в выпадающем меню выбрать «Исходный Код» . Там можете менять все, что угодно. А затем, просто нажать на кнопку «Применить изменения» .
Как видите действительно в заголовке документа написано «Это моя первая страничка!» а комментарии действительно не отобразились в браузере!Дело осталось за малым! Научиться форматировать текст, таблицы и.т.п.________________________________________Урок 3: Работаем с текстом.В этом уроке изложены базовые средства форматирования текста.
В предыдущем уроке мы создали свою первую простейшую страничку.В этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и т.д.
Если вы возьмете и скопируете текст данного урока от начала и до первой картинки, и вставите его в свою первую страничку, то вы увидите примерно следующее: Как вы заметили текст идет слитно, без разделений на абзацы, также ничего не выделено заголовком, короче форматирование отсутствует! Т.е. чтобы Браузер правильно отображал текст, необходимо задать его форматирование.
Основными элементами форматирования текста в html являются:- PИспользуется для разбивания текста на параграфы-H1,H2,…H6Применяются для создания заголовков 1,2…6 уровней- BRИспользуетcя для переноса строки- DIV ,SPANИспользуются для выделения части документа определенным способом.
Совет
________________________________________ P — используется для разметки параграфов в html документах.Атрибуты:ALIGN — определяет способ горизонтального выравнивания параграфа .Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значениеleft.Приведу пример: Если внутри тела документа написать следующее:
Этот параграф по центру
Этот по левому краю
Этот тоже по левому (т.к. по умолчанию)
Этот по правому краю
В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю
То при просмотре в браузере получим следующее: Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е.
а не
иначе не будет работать! ↑ Наверх ↑________________________________________ H1,H2,…H6 — Применяются для разбивания текста на смысловые уровни — разделы и подразделы.
Существует шесть уровней заголовков, различающихся по величине шрифта.Атрибуты:ALIGN — определяет способ горизонтального выравнивания заголовков.Возможные значения: left, center, right .По умолчанию — left.
Приведу пример: Если внутри тела документа написать следующее:
Большой заголовок
Заголовок поменьше
Еще меньше
Совсем маленький
Малюсенький заголовочек
Ну просто лилипутский заголовочек
То при просмотре в браузере увидим: Примечание: закрывающий тег обязателен!↑ Наверх ↑________________________________________ BR — данный элемент осуществляет перенос строки. Не имеет закрывающего тега.
Приведу пример: Если внутри тела документа написать следующее:Начинается первая строка
теперь идет вторая
а вот уже и третья
А это параграф и внутри него тоже можно использовать тег
переноса строки.
Его надо использовать всегда, когда надо перенести строку:) Увидим следующее: Как вы наверное заметили, при переносе строки не начинается новый параграф! Перенос- он и есть перенос!↑ Наверх ↑________________________________________ DIV — В современном сайтостроении используется как удобный контейнер для блоков html кода страницы, которым легко динамически манипулировать – перемещать, регулировать отступы, скрывать и т.п. Обязателен закрывающий тег!Атрибуты:ALIGN — определяет способ горизонтального выравнивания контейнера.Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значение left. Допустим нам нужно выровнять первые две строчки текста из предыдущего примера по правому краю, не выделяя при этом их в абзац. Как это сделать? Начинается первая строка
теперь идет вторая
а вот уже и третья
А это параграф и внутри него тоже можно использовать тег
переноса строки.Его надо использовать всегда, когда надо перенести строку:) Что мы увидим: Т.е. мы взяли две строчки кода, заключили их в контейнер DIV и выравняли его по правому краю! Так же само, можно заключить в контейнер и 20 и 50 и более строчек и манипулировать ими.Примечание: Находящиеся между начальным и конечным тегами текст или HTML-элементы выделяются как бы в отдельный параграф(но отступы гораздо меньше).Например: Пока что вы читаете текст на первой строке Но теперь уже на второй А теперь уже на третейРезультат: Как видите текст содержащийся в элементе DIV выделился в отдельную строку! ↑ Наверх ↑________________________________________ SPAN — Используется для выделения части информации и придания ей различных стилей. Закрывающий тег обязателен!Сам по себе, без использования стилей, элемент SPAN никакого смысла не имеет!Например:Хотите пользоваться Adobe Dreamweaver — тогда изучите хотя бы основы html и
тогда Вы без проблем разберетесь с этой замечательной программой!Что мы увидим: Как видите, как будто мы ничего и не выделяли! Но если прописать какой нибудь стиль этому тегу, то он начнет работать!Хотите пользоваться Adobe Dreamweaver — тогда изучите хотя бы основы html и
тогда Вы без проблем разберетесь с этой замечательной программой!В данном случае я прописал стиль красного цвета, подробнее о стилях в курсе CSS. Таким образом с помощью элемента SPAN можно хоть каждой букве в тексте присвоить разный стиль(цвет, размер, и.т.д.)________________________________________Урок 4: Продолжаем работать с текстомЗдесь мы научимся делать текст жирным, курсивом, подчеркнутым, перечеркнутым, маленьким , большим и.т.д. Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы:- STRONGИспользуется для выделения текста жирным- EMИспользуется для выделения текста курсивом- UВыделение текста подчеркиванием- SПеречеркивание текста- SUPСоздание верхнего индекса- SUBСоздание нижнего индекса- FONTИзменение цвета, типа, размера шрифта- HRВставляет в текст горизонтальную разделительную линию STRONG — Выделяет текст, заключенный между открывающим и закрывающим тегами, жирным шрифтом. Раньше везде использовался тег (или ), в принципе его можно использовать и сейчас, но это не приветствуется поисковыми системами.Если в теле документа написать: Этот текст будет выделен жирным
И этот тоже, но этим тегом лучше не пользоваться! В браузере увидим: Как видите, оба этих тега действуют одинаково. В программе Adobe Dreamweaver на панели форматирования текста написано «B» (просто это название более старое и большинство веб-мастеров привыкли к нему), хотя при нажатии на эту кнопочку в коде пишется тег . ↑ Наверх ↑________________________________________ EM ( Emphasis ) — Выделяет текст, заключенный между открывающим и закрывающим тегами, курсивом. Также аналогичен по действию тег , однако его лучше не использовать т.к. это не приветствуется поисковыми системами. В программе Adobe Dreamweaver на панели форматирования текста написано «I» хотя в коде пишется EM.Приведу пример: Этот текст будет выделен курсивом
И этот тоже, но лучше пользоваться тегом EM В браузере увидим: ↑ Наверх ↑________________________________________ U(Underline) — Отображает помещенный между открывающим и закрывающим тегами текст как подчеркнутый:Если в теле документа написать: Этот текст будет подчеркнутым!!! Увидим в браузере:
↑ Наверх ↑
________________________________________ S(Strike) — Текст, помещенный между открывающим и закрывающим тегами, будет перечеркиваться!Например: Вниманиe акция! новая цена 50 000 20 000 рублей! Результат: ↑ Наверх ↑________________________________________ SUP ( Superscript) — Отображает текст, заключенный между открывающим и закрывающим тегами, как верхний индекс от основного текста.Например: 2 2 = 4 ;
2 3 = 8 ;
2 4 = 16 ; И что получим: ↑ Наверх ↑________________________________________ SUB(Subscript) — Отображает текст, заключенный между открывающим и закрывающим тегами, как нижний индекс от основного текста.Приведу пример: Формула спирта в химии — С 2 Н 5 ОН И что мы получим: ↑ Наверх ↑________________________________________ FONT — Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим и закрывающим тегами.Атрибуты:SIZE — Определяет размер шрифта. Возможные значение — 1 , 2 , 3 , 4 , 5 , 6 , 7.COLOR — Определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.FACE — определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!Если в теле документа написать: Это обычный текст
Увеличенный красный шрифт
Моноширинный фиолетовый текст 3 размера При просмотре в браузере увидим: Если написано SIZE=»+2″ то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3 .Примечание: В дальнейшем(после изучения css) лучше вообще все что связано с типом, размером и цветом шрифта делать через таблицы стилей. Это гораздо удобнее, тем более многие элементы форматирования текста расположенные внутри элемента FONT, работают некорректно. ↑ Наверх ↑________________________________________ HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет!Атрибуты:WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера.SIZE – толщина линии в пикселах.ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа.right – выравнивание по правому краю документа.center – выравнивание по центру документа (используется по умолчанию).NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной.COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.Например: Текст до линии После линии
А вот пример линии толщиной 2px и без флага noshade Что мы увидим: ________________________________________Урок 5: Заканчиваем с текстом.В этом уроке мы подробно разберем создание списков в языке html. В этом уроке мы разберем такую немаловажную часть языка html как списки. Различают списки двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Единственным отличием является то, что перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.Элементы:- ULСоздает неупорядоченный список- OLСоздает упорядоченный список- LIСоздает пункты списка внутри элементов OLили UL ________________________________________ UL (Unsorted List) — Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.Например:
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
- Четвертый пункт списка
Что мы увидим в браузере: ↑ Наверх ↑________________________________________ OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.Атрибуты:START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа) . Если не указывать, начинается с начала.TYPE – определяет стиль нумерации пунктов списка.Возможные значения:»A» – заглавные буквы A, B, C …»a» – строчные буквы a, b, c …»I» – большие римские числа I, II, III …»i» – маленькие римские числа i, ii, iii …»1″ – арабские числа 1, 2, 3 …Значение по умолчанию
.Приведу пример: Чтобы создать сайт на домашнем компьютере необходимо:
Чтобы создавать сайты быстро желательно:
Чтобы зарабатывать на сайте желательно:
Чтобы стать успешным в интернете:
В результате получим: ↑ Наверх ↑________________________________________ LI (List Item) — Создает пункт в списке. Располагается внутри элементов OL или UL. Закрывающий тег писать желательно, но не обязательно, это уже решать Вам.Атрибуты:VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.Приведу пример: Чтобы создать сайт на домашнем компьютере необходимо:
HTML первые шаги — урок 3 — теги списков ul, ol. Атрибуты HTML тегов
Мой первый HTML-документ
В документе будет отображать только заголовок, потому что наш список пустой, давайте добавим в него пункты. Для пунктов мы будем использовать теги (list item — пункт списка).
Мой первый HTML-документ
- Первый пункт
- Второй пункт
- Третий пункт
Теперь у нас будет отображаться маркированный список. Вид маркера можно изменить через атрибуты тега
- .
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- type=»A» — заглавные латинские буквы (большая английская A «эй»);
- type=»a» — строчные латинские буквы (маленькая английская a «эй»);
- type=»I» — заглавные римские цифры (большая английская I «ай»);
- type=»i» — строчные римские цифры (маленькая английская i «ай»);
- type=»1″ — арабские цифры, используются по умолчанию.
- Первый пункт
- Второй пункт
- Третий пункт
- Четвертый пункт
- можно задать параметр value, который позволяет изменить номер данного элемента списка. При этом изменяется нумерация и всех последующих элементов.
Пример кода:
Результат:
- красный
- оранжевый
- желтый
- фиолетовый
- , которые содержат каждый конкретный пункт списка.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Тег
- закрывающийся тег, но может и не закрываться.
Пример можете посмотреть в файле lesson4.html, находящийся в архиве: Архив 4 урока
Виды спорта
Параметры тега
- :Параметр type можно также указывать для тега , но действия только для конкретного пункта меню.Допускается использование тега вместо тега . Смотрите результат в примере lesson4.html.Настоятельно рекомендую Вам самим попрактиковаться.
- . Обязательных параметров у этих тегов нет.Параметры тега
:Параметр тега в нумерованном списке:Пример:Виды спортаВиды спорта
dl — HTML-тег списка определений
Список определений создается при помощи тега …. Внутри тега располагаются пары тегов (терин) и (определение), которые содержат конкретный термин и его определение соответственно. Параметров у тегов нет.Пример:На сегодня, выпуск посвящённый HTML-тегам списков и определений, я заканчиваю.Прошу Вас самостоятельно потренироваться, опираясь на файл lesson4.html.Ссылка на скачивание файла : Архив 4 урокаПрактический курс по верстке адаптивного сайта с нуля!Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3Узнать подробнее
Виды спортаХоккей
ol — HTML-тег нумерованного списка
Нумерованный список создается при помощи тега
…
.Практический курс по верстке адаптивного сайта с нуля!Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3Узнать подробнееВнутри него располагаются теги
Списки html: теги ul, ol, li, dl, dd, dt
Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений).
В рамках данной рубрики вы уже получили информацию о том, что такое язык гипертекстовой разметки html и его основные теги, как создаются гиперссылки в html при участии тега A, как использовать тег img для вставки картинок на сайт, как создавать формы для сайта посредством тегов form и input, выпадающих списков (select и option), текстового поля (textarea), а также мы поговорили о создании кнопок на сайте с привлечением тега button.
Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена.
Маркированные HTML списки — теги ul и li
Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li.
Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li.
Соответственно тег li является парным и строчным.
<ul> <li>1 элемент маркированного списка</li> <li>2 элемент маркированного списка</li> <li>3 элемент маркированного списка</li> </ul>
- 1 элемент маркированного списка
- 2 элемент маркированного списка
- 3 элемент маркированного списка
По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square.
Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок.
Если дополнить данными атрибутами тег ul, то получим следующие варианты:
<ul> <li type="disc">1 элемент маркированного списка</li> <li type="disc">2 элемент маркированного списка</li> <li type="disc">3 элемент маркированного списка</li> </ul>
- 1 элемент маркированного списка
- 2 элемент маркированного списка
- 3 элемент маркированного списка
<ul> <li type="circle">1 элемент маркированного списка</li> <li type="circle">2 элемент маркированного списка</li> <li type="circle">3 элемент маркированного списка</li> </ul>
- 1 элемент маркированного списка
- 2 элемент маркированного списка
- 3 элемент маркированного списка
<ul> <li type="square">1 элемент маркированного списка</li> <li type="square">2 элемент маркированного списка</li> <li type="square">3 элемент маркированного списка</li> </ul>
- 1 элемент маркированного списка
- 2 элемент маркированного списка
- 3 элемент маркированного списка
Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type.
<ul> <li type="disc">1 элемент маркированного списка</li> <li type="circle">2 элемент маркированного списка</li> <li type="square">3 элемент маркированного списка</li> </ul>
- 1 элемент маркированного списка
- 2 элемент маркированного списка
- 3 элемент маркированного списка
Нумерованные HTML списки — теги ol и li
Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:
- A — заглавные латинские буквы;
- a — строчные латинские буквы;
- I — заглавные римские цифры;
- i — строчные римские цифры;
- 1 — арабские цифры
<ol> <li type="A">1 элемент нумерованного списка</li> <li type="A">2 элемент нумерованного списка</li> <li type="A">3 элемент нумерованного списка</li> </ol>
- . Обязательных параметров у этих тегов нет.Параметры тега
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- 1 элемент нумерованного списка
- 2 элемент нумерованного списка
- 3 элемент нумерованного списка
- , который, помимо текста, может включать в себя другие HTML-элементы (списки, изображения, заголовки, абзацы и др.). По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга. Браузеры при отображении элементов списка добавляют небольшой отступ от левого края.
Примечание: Если к
- применяется CSS свойство, то элементы
- наследуют эти свойства.
Совет: Для изменения типа маркера используйте CSS свойство list-style-type или свойство list-style-image, позволяющее заменять маркеры на изображения. Для создания нумерованных списков используйте тег
.
Синтаксис
- …
- …
…
Закрывающий тег
Обязателен.
Атрибуты
compactУстарел в HTML5Сокращает отступы и расстояния между строками.typeHTML5Устанавливает вид маркера списка.
Для этого элемента доступны глобальные атрибуты и события.
Стилизация по умолчанию
Большинство браузеров отобразит элемент
- со следующими значениями CSS по умолчанию:
- Кофе
- Чай
- Какао
ul { display: block; list-style-type: disc; margin-top: 1em; margin-bottom: 1 em; margin-left: 0; margin-right: 0; padding-left: 40px; }
Различия между HTML 4.01 и HTML5
Атрибуты compact и type не поддерживаются в HTML5.
Пример использования:
Неупорядоченный HTML список:
Попробуй сам
Спецификации
Элемент
- 1+
1+
1+
1+
1+
1+Попробуйте сами — Примеры
Как сделать, чтобы список начинался с номера, отличного от 1:
Применение атрибутов type и startКак изменить номер данного элемента списка:
Применение атрибута valueКак использовать стили для получения списка, пункты которого пронумерованы римскими цифрами:
Применение свойства CSS list-style-typeКак создать вложенные списки:
Вложенные спискиУчебник HTML
HTML уроки: HTML Списки
HTML Элементы
- наследуют эти свойства.
Атрибуты HTML тегов
У тега UL, как я писал выше, есть атрибуты. Атрибуты есть у всех HTML тегов, позже мы рассмотрим все атрибуты, а пока давайте определимся что такое атрибут. Атрибут позволяет управлять отображением HTML тега: цветов, размером, формой и т.д. Для тега UL мы можем задать вид маркера: круг, окружность, квадрат.Атрибуты имеют следующий вид:Таким образом мы прямо в теге пишем как отображать этот тег. Для тега UL атрибут будет называться type:
Мой первый HTML-документ
Если вы обновите страницу в браузере, то увидите, что список маркерован квадратами (square — квадрат). Также мы можем маркировать окружностями:
Мой первый HTML-документ
Вы можете использовать различные маркеры в списке, но тогда нужно еще прописать атрибут type и для тега li:
Мой первый HTML-документ
По умолчанию в тегах UL, LI используется type круга disc:
Мой первый HTML-документ
А теперь уберем атрибут type у тега UL и посмотрим что случится.
Мой первый HTML-документ
Теперь давайте сделаем все три пункта разными маркерами:
Мой первый HTML-документ
Думаю теперь вы знаете куда писать атрибуты тегов, дальше мы будем разбирать еще много различных атрибутов.
Списки OL
Тег OL (ordered list — нумерованный список) не такой распространенный как UL, но используется тоже очень часто, когда нужно вывести последовательность действий, хронологию событий, нумерацию объектов и т.д. Везде где нужно нумеровать строки, можно использовать тег OL.
Мой первый HTML-документ
Как и у тега UL у OL есть атрибут type, только значения у этого атрибута для ul другие:
Можете попробовать различные варианты атрибута type для тега UL. Приведу лишь один пример:
Мой первый HTML-документ
HTML список
Теги HTML → Уроки html → Как сделать список htmlТакой список представляет собой перечень «пронумерованный» каким-либо образом. Это могут быть арабские цифры, цифры римского алфавита или буквы.
Чтобы указать браузеру, что список будет нумерованным, используются теги
. Весь список располагается между этими тегами и каждый его пункт задается тегами .
Пример кода для нумерованного списка:
Результат: Как видите, по умолчанию нумерация ведется арабскими цифрами. Это можно изменить с помощью параметра type:
— type=»A» — нумерация заглавными латинскими буквами (A, B, C).
— type=»a» — нумерация прописными латинскими буквами (a, b, c).
— type=»I» — нумерация большими римскими цифрами (I, II, III) .
— type=»i» — нумерация маленькими римскими цифрами (i, ii, iii).
Пример кода с римскими цифрами:
Результат: Если нам нужно начать нумерацию не с единицы, то следует использовать параметр start, в качестве значения которого указывается число, с которого будет начинаться список (если нумерация задается с помощью букв, то это число будет указывать на позицию в алфавите).
Пример кода:
Результат: У тега
……………
В маркированном списке вместо букв и цифр используются маркеры. Чтобы указать браузеру, что список будет маркированным, используются теги . Весь список располагается между этими тегами и каждый его пункт задается тегами .
Пример кода для маркированного списка:
Результат: По умолчанию маркер отображается в виде черного кружочка. Это можно изменить с помощью параметра type:
— type=»disc» — закрашенный кружочек.
— type=»circle» — пустой кружочек.
— type=»square» — закрашенный квадратик.
Пример кода для маркированных списков:
Результат:
Таки списки используются в словарях. Каждый пункт состоит из двух частей: термин и его определение. Чтобы указать браузеру, что будет список определений, используются теги . Каждый термин заключается в теги , а их определения — в теги .
Пример кода списка определений:
Результат:Бывают ситуации, когда в элемент списка необходимо включить свой список. Такие списки называются многоуровневыми или вложенными. Для этого используется комбинация уже известных нам тегов списков.
Пример кода многоуровневого списка:
Результат:Уровень вложенности может быть любым, главное не запутайтесь. На этом седьмой урок закончен. В следующем уроке мы рассмотрим работу с изображениями.Если этот сайт оказался вам полезен, вы можете помочь в его развитии, поставив одну из этих ссылок на свой сайт.Код кнопки:
Скачайте одним архивом видеоуроки HTML!
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Выпуск №4. Списки в HTML: ul, ol, dl
Доброго времени суток, подписчики.
Сразу хотелось бы сказать, что сегодня будет не большой урок, но, впрочем, весьма полезный.
А поговорим мы сегодня про теги списков в HTML: ul, ol, dl.
В html поддерживается 3 вида списков: маркированные, нумерованные, список определений.
Начнем с маркированного списка.
ul — HTML-тег маркированного списка
Маркированный список создается с помощью закрывающегося тега
- …
.
Внутри этого тега располагаются теги
<ol> <li type="a">1 элемент нумерованного списка</li> <li type="a">2 элемент нумерованного списка</li> <li type="a">3 элемент нумерованного списка</li> </ol>
<ol> <li type="I">1 элемент нумерованного списка</li> <li type="I">2 элемент нумерованного списка</li> <li type="I">3 элемент нумерованного списка</li> </ol>
<ol> <li type="i">1 элемент нумерованного списка</li> <li type="i">2 элемент нумерованного списка</li> <li type="i">3 элемент нумерованного списка</li> </ol>
<ol> <li type="1">1 элемент нумерованного списка</li> <li type="1">2 элемент нумерованного списка</li> <li type="1">3 элемент нумерованного списка</li> </ol>
Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.
<ol reversed> <li type="1">1 элемент нумерованного списка</li> <li type="1">2 элемент нумерованного списка</li> <li type="1">3 элемент нумерованного списка</li> </ol>
Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):
<ol start="5"> <li type="1">1 элемент нумерованного списка</li> <li type="1">2 элемент нумерованного списка</li> <li type="1">3 элемент нумерованного списка</li> </ol>
<ol start="4"> <li type="I">1 элемент нумерованного списка</li> <li type="I">2 элемент нумерованного списка</li> <li type="I">3 элемент нумерованного списка</li> </ol>
HTML списки определений — теги dl, dd, dt
Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина.
<dl> <dt>CMS</dt> <dd>Система управления контентом, которая применяется для создания сайтов.</dd> <dt>HTML</dt> <dd>Язык гипертекстовой разметки, являющийся основой создания вебресурсов.</dd> </dl>
CMSСистема управления контентом,которая применяется для создания сайтов.HTMLЯзык гипертекстовой разметки,являющийся основой создания вебресурсов.
Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях.
Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.
Тег
Элемент
- (от англ. «unordered list» ‒ «неупорядоченный список») создаёт маркированный (неупорядоченный) список. Как правило, элемент
- применяется для создания таких списков, где изменение порядка следования пунктов этого списка существенно не меняет смысл списка.
Тег
- относится к блочным элементам, поэтому он будет занимать всю доступную ему ширину, а размер высоты будет зависеть от количества содержимого.
Пункты для нумерованных списков определяются с помощью тега
