Упорядоченные и неупорядоченные списки
Существует три типа списков: упорядоченные, неупорядоченные и списки определений. Здесь мы рассмотрим первые два вида списков, а о списках определений вы узнаете позже.
Упорядоченные и неупорядоченные списки работают одинаково, за исключением того, что последние используются для представления непоследовательных списков, элементы которых обычно маркируются крупной черной точкой (буллитом), а первые используются для представления последовательных списков, которые обычно имеют вид элементов пронумерованных в возрастающем порядке.
Для определения неупорядоченных списков используется тег <ul>, а для определения упорядоченных списков – тег <ol>. Внутри списков для определения каждого отдельного элемента списка используется тег <li>.
Измените свою веб-страницу следующим образом:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Моя первая веб-страница</title> </head> <body> <h2>Моя первая веб-страница</h2> <h3>Что это такое</h3> <p>Простая страница, созданная при помощи HTML</p> <h3>Для чего это нужно</h3> <ul> <li>Чтобы изучить HTML</li> <li>Чтобы похвастать</li> <li>Потому что я обожаю свой компьютер и хочу привить ему любовь к HTML</li> </ul> </body> </html>
Если посмотреть эту веб-страницу в браузере, то увидите список, маркированный буллитами. Замените тег
Кроме всего прочего можно включать одни списки в другие, формируя тем самым структурированную иерархию элементов.
Замените код списка из предыдущего примера следующим:
<ul> <li>Чтобы изучить HTML</li> <li>Чтобы похвастать <ol> <li>перед начальником</li> <li>перед друзьями</li> <li>перед моей кошкой</li> <li>перед маленькой говорящей уткой в моей голове</li> </ol> </li> <li>Потому что я обожаю свой компьютер и хочу привить ему любовь к HTML</li> </ul>
И вот у нас список внутри списка. А ведь можно поместить еще один список внутри этого вложенного списка. И еще один. И так далее до бесконечности.
msiter.ru
Списки в HTML — Как создать сайт
В языке HTML, существует 3 типа списков:
- Упорядоченный список (тег
ol) - Неупорядоченный список (тег
ul) - Список определений
В этом уроке, мы рассмотрим с вами два вида списков: упорядоченный и неупорядоченный.
Упорядоченный список (ol)
ol, каждый элемент списка обрамляется тегами li. Рассмотрим пример упорядоченного списка:<ol> <li>Открыть программу</li> <li>Нажать кнопку</li> <li>Выбрать из списка</li> <li>Ввести данные</li> <li>Закрыть программу</li> </ol>
Результат:
- Открыть программу
- Нажать кнопку
- Выбрать из списка
- Ввести данные
Тегами упорядоченного списка удобно обрамлять различные пошаговые инструкции: рецепты изготовления, задания (квесты). Такие списки, где между первым элементом списка и последним имеется взаимосвязь (начинаем с первого и заканчиваем последним, постепенно проходя друг за другом все этапы).
Для форматирования упорядоченного списка имеется CSS-свойство list-type-style, данное свойство позволяет использовать вместо обычных (арабских) чисел, римские, а также буквы и др.
Неупорядоченный список (ul)
Неупорядоченный список в HTML — это список, где перед каждым элементом ставится маркер (черный кружок). Неупорядоченный список в HTML, начинается и заканчивается тегами li. Рассмотрим пример неупорядоченного списка:
<ul> <li>Лето</li> <li>Осень</li> <li>Зима</li> <li>Весна</li> </ul>
Результат:
- Лето
- Осень
- Зима
- Весна
Тегами неупорядоченного списка, удобно обрамлять различные списки наподобие: ингредиенты, список частей целого (времена года) и т.д. То есть те списки, где нет четкой взаимосвязи от начала и до конца. Например, если мы напишем зима, весна, лето, осень то целостность не нарушится, ибо это не инструкция. Однако если мы сначала введём данные не открыв программу, то произойдет ошибка, ибо прежде чем ввести данные нужно открыть программу.
Для форматирования неупорядоченного списка используется CSS-свойство list-type-style, данное свойство может изменять стандартный маркер (черный круг), на ромб, квадрат или обруч.
Дата публикации поста: 8 февраля 2016
Дата обновления поста: 8 февраля 2016
Навигация по записям
gabdrahimov.ru
Списки. Учебник html
Глава 9
В этой главе пойдёт речь о списках, которые могут быть:
- неупорядоченные(маркированные)
- упорядоченные (нумерованные)
- и являться списком определений
Такое вот нестандартное начало главы.. зато теперь Вам понятно, что есть список в html.
Ну что ж давайте пройдёмся по нашему списку.
Неупорядоченный список задаётся тегом <ul>. Любой список состоит из элементов, «пунктов», каждый элемент в свою очередь задаётся тегом <li> после которого собственно и идёт текст нужного нам «пункта». Для тега <li> закрывающий тег </li> необязателен.
Вместе данные теги приобретают следующий вид:
<ul><li> Пункт первый..
<li> Пункт второй..
<li> Пункт третий..
</ul>
Пример неупорядоченного списка:
<html><head>
<title>неупорядоченный список</title>
</head>
<body>
Купить и доставить домой:
<ul>
<li> 2 кг. клубней картофеля
<li> 1 булку ржаного чёрного хлеба
<li> пачку макарон «спагетти» (длинные не менее 200мм. тонкие)
<li> 1 кг. шлифованного риса (сложно объяснить.. спросишь..)
<li> 1 дес. куриных яиц.
<li> 1 пачку 500г. Натрия двууглекислого (Сода)
</ul>
Смотри ничего не перепутай.. целую..
</body>
</html>
Теги <li> и <ul> имеют атрибут type который присуждает элементу списка или же всему списку целиком определённый стиль.
Может иметь одно и трёх значений:
- disk — кружок, диск (по умолчанию)
- circle — полый круг
-
Пример:
<html><head>
<title>стили неупорядоченного списка</title>
</head>
<body>
В этом списке каждый элемент имеет свой стиль:
<ul>
<li type=»disk»> кружок, диск (по умолчанию)
<li type=»circle»> полый круг
<li type=»square»> квадрат
</ul>
А здесь стиль задан всему списку
<ul type=»circle»>
<li> Пункт 1
<li> Пункт 2
<li> Пункт 3
</ul>
</body>
</html>
Упорядоченный или нумерованный список задаётся тегом <ol>, так же как и в неупорядоченном списке элемент списка присуждается тегом <li>.
Построение кода полностью схоже с неупорядоченным списком поэтому сразу пример:
<html><head>
<title>упорядоченный список</title>
</head>
<body>
Купить товары в следующем порядке:
<ol>
<li>
<li> Пиво
<li> Сырок (необязательно)
</ol>
Жду!!!
</body>
</html>
А вот атрибут type в сочетании с упорядоченным списком может иметь следующие значения:
- А — Заглавные буквы
- а — Строчные буквы
- I — Заглавные римские цифры
- i — Строчные римские цифры
- 1 — Арабские цифры (по умолчанию)
Вот пример их применения:
<html><head>
<title>Стили упорядоченного список</title>
</head>
<body>
Арабские цифры
<ol type=»1″>
<li>Во-первых
<li>Во-вторых
</ol>
Строчные буквы
<ol type=»a»>
<li>Во-первых
<li>Во-вторых
</ol>
Заглавные буквы
<ol type=»A»>
<li>Во-первых
<li>Во-вторых
<li>В-третьих
</ol>
Строчные римские цифры
<ol type=»i»>
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
Заглавные римские цифры
<ol type=»I»>
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвёртых
</ol>
</body>
</html>
В упорядоченном списке есть ещё один атрибут start его числовое значение говорит о том с какого номера следует строить упорядоченный список.
Пример:
<html><head>
<title>Начало упорядоченного списка</title>
</head>
<body>
<ol type=»1″ start=»24″>
<li>Сразу переходим к двадцать четвёртому пункту!!
<li>Идём дальше
<li>И дальше
</ol>
Аналогично можно «стартовать» при любом стиле упорядоченного списка
<ol type=»I» start=»8″>
<li>Сразу переходим к восьмому пункту..
<li>Идём дальше
<li>И дальше
</ol>
</body>
</html>
Со списком определений дело обстоит немного иначе нежели чем с уже знакомыми списками. Задаётся данный вид списка тегом <dl>. Пункты списка определений размечаются тегом <dt>, а определения этих пунктов тегом <dd>.
Всё вместе пишется по следующей схеме:
<dl><dt>
<dd>
</dl>
Пример:
<html><head>
<title>Список определений</title>
</head>
<body>
<dl>
<dt> Слово коса может иметь следующие определения:
<dd> сельскохозяйственный инструмент
<dd> хитрая девичья причёска
<dd> отмель реки
<dt> Слово ключ тоже имеет несколько значений:
<dd> гаечный
<dd> источник, родник
</dl>
</body>
</html>
Собственно вот и вся премудрость..
Психология посетителя страницы.
Не могу, не согласится с тем утверждением, что посетители страницы чаще просматривают документы, нежели чем вдумчиво читают их.. По-крайней мере так происходит практически всегда при первом визите посетителя на страничку. Первое на что обращает внимание пользователь просматривая какой либо документ это: заголовки в тексте, выделенные фрагменты текста, и списки. Умелое и ненавязчивое размещение таковых элементов залог того что посетитель окунётся в чтение Вашего документа более глубоко.
Что касается списков.. следует понимать что: Маркированные перечни <ul> используются тогда, когда порядок следования пунктов не важен.. и делаются они для того чтобы изложенная информация воспринималась легче. А нумерованные списки <ol> наоборот, применяются тогда, когда важен именно порядок следования пунктов, например — когда список является изложением последовательности каких либо действий.
www.webremeslo.ru
Учебник HTML 5. Статья «Списки»
Списки представляют собой упорядоченный набор значений, который помогает нам систематизировать важную информацию, делая ее более доступной для понимания. Язык гипертекстовой разметки HTML позволяет составлять списки по следующим правилам:
- Нумерованный (упорядоченный) список.
- Маркированный (неупорядоченный) список.
- Список описаний.
- Список контекстных меню.
Нумерованный список
Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).
Давайте рассмотрим примеры использования:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <ol></title> </head> <body> <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Если вы хотите, чтобы список начинался с определённого номера (не с 1), то необходимо указать атрибут start для тега <ol>.
Например:<ol start = "101"> <!--список начнётся с номера 101-->
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Ещё один интересный атрибут — type, который позволит Вам задать буквенную нумерацию («A» – большие, «a» – строчные), либо нумерацию из римских цифр («I» – в верхнем регистре, «i» – в нижнем регистре).
Рассмотрим пример в котором представлены все возможные значения атрибута type (отличные от значения по умолчанию):
<!DOCTYPE html> <html> <head> <title>Пример использования атрибута type HTML тега <оl></title> </head> <body> <ol type = "A"> <!--указываем, что список формируется в алфавитном порядке заглавными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> <ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Результат нашего примера:
Рис. 14 Виды нумерованных списков.Еще один нюанс: при использовании атрибута start с буквами (type = «A» и type = «a»), число, указанное в значении атрибута является порядковым номером буквы в алфавите. Например, start = «4», будет соответствовать букве «D» и список начнётся именно с неё. При использовании значения start = «27» счетчик обнуляется, при этом список становится двухзначным («27» = «AA», «28» = «AB», «29» = «AC»…). Значения должны быть целочисленными, допускается использование отрицательных значений.
Обращаю Ваше внимание, что допускается формировать нумерованные (упорядоченные) списки, вложенные в другие нумерованные списки (внутри элемента списка <li>):
<!DOCTYPE html> <html> <head> <title>Пример нумерованного списка, вложенного в другой нумерованный список</title> </head> <body> <ol> <li>Первый пункт <ol> <!--открываем новый нумерованный список внутри элемента списка--> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </li> <li>Второй пункт</li> <li>Третий пункт</li> </оl> </body> </html>
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Первый пункт.
- Второй пункт.
- Третий пункт.
- Второй пункт.
- Третий пункт.
Но и это еще не все, атрибут reversed элемента позволяет задать, что порядок в нумерованном (упорядоченном) списке должен идти по убыванию. Атрибут не поддерживается браузерами Internet Explorer и Edge.
Выглядеть на странице это будет соответственно так:
- Первый пункт.
- Второй пункт.
- Третий пункт.
Маркированный список.
Маркированный (неупорядоченный) список в HTML определяется тегом <ul> (Unordered List Element). Каждый элемент списка должен начинаться с тега <li> (сокращенное от английского list item — элемент списка).
По умолчанию, маркированные списки отображаются на веб-странице в виде списка, начинающегося с маленького чёрного круга.
Давайте рассмотрим примеры использования:
<!DOCTYPE html> <html> <head> <title>Пример использования элемента <ul></title> </head> <body> <ul> <li>Светлое</li> <li>Тёмное</li> <li>Пятница</li> </ul> </body> </html>
Выглядеть на странице это будет соответственно так:
- Светлое
- Тёмное
- Пятница
Забегая вперед, скажу, что каждый элемент HTML имеет стиль по умолчанию. Изменение стиля по умолчанию в HTML элементе может быть сделано с использованием глобального атрибута style. Более подробно этот атрибут будет рассмотрен в следующей статье «HTML стили».
Для изменения типа маркера (стиля) вы можете воспользоваться свойством CSS list-style-type, чтобы определить стиль маркера. Возможные значения свойства:
| Атрибут | Значение |
|---|---|
| list-style-type:none | Убирает маркер. |
| list-style-type:disc | Маленький черный круг. Это значение по умолчанию. |
| list-style-type:circle | Круг пустой внутри. |
| list-style-type:square | Маркер в виде квадрата. |
Ниже приведен пример использования стилей CSS внутри маркированного списка:
<!DOCTYPE html> <html> <head> <title>Пример изменения типа маркера маркированного списка</title> </head> <body> <ul style = "list-style-type:none"> <!-- маркер отсутствует --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:disc"> <!-- маленький черный круг --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:circle"> <!-- круг пустой внутри --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> <ul style = "list-style-type:square"> <!-- маркер в форме квадрата --> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> </body> </html>
Результат нашего примера:
Рис. 15 Маркированные списки.Обращаю Ваше внимание, что допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка <li>) при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:
- Первый пункт
- Первый пункт
- Первый пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
- Первый пункт
- Второй пункт
- Третий пункт
Список описаний
Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.
Тэг <dl> (HTML Description List Element) определяет список, тэг <dt> (HTML Definition Term Element) определяет его имя, а тег <dd> (HTML Description Element) описывает его значение.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример использования списка описаний</title> </head> <body> <dl> <dt>Жамевю</dt> <dd>состояние, противоположное дежавю, внезапно наступающее ощущение того, что хорошо знакомое место или человек кажутся совершенно неизвестными или необычным.</dd> <dt>Фасцинация</dt> <dd>повышение эффективности воспринимаемого материала через использование сопутствующих (фоновых) воздействий.</dd> </dl> </body> </html>
Как вы можете заметить значение списка описаний (элемент <dd>) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:
Рис. 16 Список описаний.Обращаю Ваше внимание, что допускается формировать списки описаний, вложенные в другие списки описаний (внутри элемента значения списка <dd>).
Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.
Список контекстных меню
Тег <menu> используется для контекстных меню, панелей инструментов и для включения элементов управления формы.
Тег <menuitem> определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.
В настоящее время теги <menu> и <menuitem> имеют очень ограниченную поддержку браузерами и практически не используется по этой причине:
Рассмотрим пример для расширения кругозора:
<!DOCTYPE html> <html> <head> <title>Пример использования тега <menu></title> </head> <body> <div contextmenu = "testmenu"> <!-- определяем, для блока контекстное меню --> Кликни по мне правой кнопкой мыши. <menu type = "context" id = "testmenu"> <!-- создаем контекстное меню --> <menuitem label = "like"></menuitem> <!-- определяем первый элемент меню --> <menuitem label = "dislike"></menuitem> <!-- определяем второй элемент меню --> </menu> </div> </body> </html>
Кликни по мне правой кнопкой мыши.
Для тех у кого браузер не отображает результат:
Использование глобального атрибута contextmenu, тегов <menu> и <menuitem>.
Элемент <div>, который был использован в этом примере будет подробно рассмотрен в статье учебника «Теги разметки страницы».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы выполните практические задания.
- Используя полученные знания составьте следующие HTML списки:
Практическое задание № 6.
Практическое задание № 7.
Практическое задание № 8.
Практическое задание № 9.
Если у Вас есть затруднения в составлении какого-то списка, то внимательно перечитайте статью еще раз, если вы не найдете ответа на ваш вопрос, то проинспектируйте код страницы, открыв пример в отдельном окне кликнув по изображению.
basicweb.ru
Создание списков в html и виды списков
Цель урока: знакомство с тегами создания списков в HTML
Создание списков в HTML
В HTML поддерживается работа со всеми вилами списков, рассмотрим их
Неупорядоченный список HTML
Неупорядоченный или ненумерованный список HTML содержит следующие теги:
Синтаксис:
<ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ul>
Т.е. каждый пункт списка должен начинаться тегом li и завершаться его закрывающей парой, вместо которого будет отображаться маркер (диск, окружность или квадрат — зависит от предустановок браузера)
Чтобы задать вид маркера, необходимо использовать атрибут type:
<ul type="disk"> заполненный диск <ul type="circle"> окружность <ul type="square"> квадрат |
<ul type=»disk»> заполненный диск <ul type=»circle»> окружность <ul type=»square»> квадрат
Упорядоченный список HTML
Упорядоченный список в HTML или нумерованный список практически такой же, как и ненумерованный, за исключением первого главного тега:
Синтаксис:
<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> … <li>элемент n</li> </ol>
Для нумерованного списка тоже есть различные варианты нумерации:
<ol type = "a"> <ol type = "A"> <ol type = "I"> <ol type = "1"> |
<ol type = «a»> <ol type = «A»> <ol type = «I»> <ol type = «1»>
Можно также применять к отдельному пункту:
Для того, чтобы продолжить список с определенного номера:
Многоуровневый список HTML
Списки с определениями или многоуровневые списки в HTML создаются следующим образом:
<dl> <dt>Пункт 1 <dd>Элемент пункта 1 <dd>Элемент пункта 1 <dt>Пункт 2 <dd>Элемент пункта 2 <dt>Пункт 3 <dd>Элемент пункта 3 </dl>
Результат:
Красивый список html или смешанный список
Чтобы сделать список максимально красивым, можно использовать в одном списке разные виды списков. Рассмотрим пример:
1 2 3 4 5 6 7 8 9 10 | <dl><strong>Смешанный список</strong> <dt><i>Новость дня</i> <dd> <li>Сегодня идет дождь</li> <li>Дождь будет идти весь день</li> <dt><i>Новость ночи</i> <dd> <li>Ночью будет идти дождь</li> <li>Завтра начнется новый день</li> </dl> |
<dl><strong>Смешанный список</strong> <dt><i>Новость дня</i> <dd> <li>Сегодня идет дождь</li> <li>Дождь будет идти весь день</li> <dt><i>Новость ночи</i> <dd> <li>Ночью будет идти дождь</li> <li>Завтра начнется новый день</li> </dl>
Результат:
- Откройте файл
- Создайте смешанный список
- Используйте нумерованный и маркированный список html и список определений так, чтобы:
- вместо знака
-отображался маркер - вместо порядковых чисел и букв (
1,2,3,a,b,c) отображались соответствующие им числа и буквы автоматически - знак
-, порядковые числа и буквы из текста удалить
labs-org.ru
HTML теги. HTML списки. Маркированный список или неупорядоченный список.
Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена маркированным спискам HTML. Маркированный или как еще говорят, неупорядоченный список HTML формируется тегами <ul>, <li>.
Маркированный список. Формирование маркированного HTML списка. Теги <ul>, <li>.
Содержание статьи:
Как говорилось ранее, маркированный список формируются двумя тегами <ul>, <li>. Маркированные списки — это одна из разновидностей HTML списков.
Тег <li> предназначен для формирования элементов упорядоченного списка, то есть, тег <li> формирует пункты HTML списка. Элемент <li> является блочным HTML элементом, внутри него могут располагаться любые HTML элементы, а его ширина зависит от области, в которой он находится.
Тег <ul> предназначен для формирования маркированных списков. По умолчанию, маркер стоящий слева от элементов списка имеет вид закрашенного круга, но это легко исправить атрибутами тегов <ul> и <li>, приоритет имею атрибуты тега <li>, это справедливо и для нумерованных списков.
Если к неупорядоченному списку не применяются дополнительные стили и правила CSS, то браузер отобразит их шрифтом, заданным по умолчанию.
Синтаксис маркированного списка
Теги <ul>, <li> являются парными HTML тегами, то есть для их корректной работы необходим закрывающий тег, но, у тега <li> можно закрывающий тег не ставить, хотя, это считается дурным тоном.
<ul> <li>Первый</li> <li>Второй</li> </ul>
<ul>
<li>Первый</li>
<li>Второй</li>
</ul> |
Атрибуты тегов маркированного списка
Тег <ul>, так же, как и любой другой тег из группы HTML списков, имеет атрибуты событий и универсальные HTML атрибуты. Для тега <ul> доступен только один уникальный HTML атрибут:
Type – Атрибут type позволяет изменить вид маркера неупорядоченного списка.
Обратите внимание, если значения атрибута type у тега <ul> и расположенного внутри него тега <li> будут разными, то к конкретному элементу списка будет применено значения, которое присвоено тегу <li>, эта особенность справедлива и для нумерованных списков <ol>.
Тег <li> имеет все универсальные HTML атрибуты, атрибуты событий и два уникальных атрибута:
Value – атрибут value изменяет значение нумерации для упорядоченных списков
Type – атрибут type изменяет вид маркера, как в списке директорий, так и в маркированном списке и списке меню.
Другие HTML списки
Помимо списка определений. Есть еще четыре HTML списка:
Тег <ol> формирует нумерованный список. Тег <dir> формирует список директорий. Тег <dl> формирует список определений. Контейнер <dt> служит для хранения и отображения термина списка определений. В контейнер <dd> помещается определение термина списка определений. Тег <menu> создает список меню.
Пример формирования списка определений
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега OL</title> </head> <body> <ul> <li>Первый <ul type=»square»> <li>1.1</li> <li type=»circle»>1.2</li> <li>1.3</li> <li>1.4</li> </ul> </li> <li>Второй <ul type=»circle»> <li>2.1</li> <li type=»disc»>2.2</li> <li>2.3</li> </ul> </li> <li>Третий <ul> <li>3.1</li> <li>3.2</li> <li>3.3</li> </ul> </li> </ul> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Пример использования тега OL</title> </head> <body> <ul> <li>Первый <ul type=»square»> <li>1.1</li> <li type=»circle»>1.2</li> <li>1.3</li> <li>1.4</li> </ul> </li> <li>Второй <ul type=»circle»> <li>2.1</li> <li type=»disc»>2.2</li> <li>2.3</li> </ul> </li> <li>Третий <ul> <li>3.1</li> <li>3.2</li> <li>3.3</li> </ul> </li>
</ul> </body> </html> |
Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:
На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru
zametkinapolyah.ru
HTML Списки
Пример список HTML
Неупорядоченный Список:
- Страница
- Страница
- Страница
- Страница
Упорядоченный Список:
- Первая страница
- Вторая страница
- Третья страница
- Четвертая страница
Неупорядоченный список HTML
Ненумерованный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.
Элементы списка по умолчанию, будут помечены диском (маленькие черные кружками):
Неупорядоченный список HTML — выбрать элемент списка маркер
Свойство CSS list-style-type используется для определения стиля элемента списка маркер:
| Значение | Описание |
|---|---|
| disc | Задает элемент списка маркер как диск (по умолчанию) |
| circle | Задает элемент списка маркер как круг |
| square | Задает элемент списка маркер как квадрат |
| none | Элементы списка не будут отмечены |
Пример — Диск
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Пример — Круг
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Пример — Квадрат
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Пример — Ничего
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ul>
Упорядоченный список HTML
Упорядоченный список начинается с тега <ol>. Каждый элемент списка начинается с тега <li>.
Элементы списка будут обозначены номера по умолчанию:
Упорядоченный список HTML — Атрибут type
Атрибут type в теге <ol>, определяет тип элемента списка маркер:
| Тип | Описание |
|---|---|
| type=»1″ | Элементы списка будут пронумерованы цифрами (по умолчанию) |
| type=»A» | Элементы списка будут пронумерованы заглавными буквами |
| type=»a» | Элементы списка будут пронумерованы строчными буквами |
| type=»I» | Элементы списка будут пронумерованы прописными римскими цифрами |
| type=»i» | Элементы списка будут пронумерованы строчными римскими цифрами |
Прописные Римские Цифры:
<ol type=»I»>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
Строчные Римские Цифры:
<ol type=»i»>
<li>Кофе</li>
<li>Чай</li>
<li>Молоко</li>
</ol>
Описание списка HTML
HTML также поддерживает описание списка.
Описание списка представляет собой список терминов с описанием каждого термина.
Тег <dl> определяет описание списка, тег <dt> определяет термин (имя) и тег <dd> описывает каждый термин:
Пример
<dl>
<dt>Кофе</dt>
<dd>- черный горячий напиток</dd>
<dt>Молоко</dt>
<dd>- белый холодный напиток</dd>
</dl>
Вложенные списки HTML
Списки могут быть вложенными (списки внутри списков):
Пример
<ul>
<li>Кофе</li>
<li>Чай
<ul>
<li>Черный чай</li>
<li>Зеленый чай</li>
</ul>
</li>
<li>Молоко</li>
</ul>
Примечание: Элементы списка могут содержать новый список, и другие HTML-элементы, такие как изображения, ссылки и т. д.
Горизонтальные Списки
Списки HTML могут быть стилизованы различными способами с помощью CSS.
Один популярный способ заключается в стиле список по горизонтали, чтобы создать меню:
Пример
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href=»#home»>Дома</a></li>
<li><a href=»#news»>Новости</a></li>
<li><a href=»#contact»>Контакты</a></li>
<li><a href=»#about»>О</a></li>
</ul>
</body>
</html>
Краткое содержание
- Используйте HTML элемент <ul> для определения неупорядоченного списка
- Используйте CSS свойство list-style-type для определения элемента списка маркер
- Используйте HTML элемент <ol> чтобы определить упорядоченный список
- Используйте HTML атрибут type чтобы определить тип нумерации
- Используйте HTML элемент <li> для определения элемента списка
- Используйте HTML элемент <dl> для определения описания списка
- Используйте HTML элемент <dt> для определения термина описания списка
- Используйте HTML элемент <dd> для описания термина в списке описания
- Списки могут быть вложенными в списки
- Элементы списка могут содержать другие элементы HTML
- Используйте свойство CSS float:left или display:inline для отображения горизонтального списка
Проверьте себя с помощью упражнений!
Теги HTML списка
| Теги | Описание |
|---|---|
| <ul> | Определяет неупорядоченный список |
| <ol> | Определяет упорядоченный список |
| <li> | Определяет элемент списка |
| <dl> | Определяет описание списка |
| <dt> | Определяет термин в описание списка |
| <dd> | Описывает термин в описание списка |
schoolsw3.com