HTML Теги
<!—Комментарий—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
HTML Tags
<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>
Параметр TYPE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Аргументы
Для маркированного списка (тег <UL>) маркеры
могут принимать один из трех видов: круг, окружность и квадрат. Значения параметра
type и получаемый вид показан в табл. 1.
| Код | Пример |
|---|---|
| <li type=»disc»> |
|
| <li type=»circle»> |
|
| <li type=»square»> |
|
Нумерованные списки представляют собой набор элементов с их порядковыми номерами.
Вид и тип нумерации зависит от параметров тега <OL>,
который и используется для создания списка. В качестве маркеров могут быть следующие
значения:
- заглавные латинские буквы;
- строчные латинские буквы;
- заглавные римские цифры;
- строчные римские цифры;
- арабские цифры.
В табл. 2 приведены различные значения параметра type
тега <LI> и результат их применения.
| Код | Пример |
|---|---|
| <ol> <li type=»A»> </ol> |
|
| <ol>
<li type=»a»> |
|
| <ol> <li type=»I»> </ol> |
|
| <ol> <li type=»i»> </ol> |
|
| <ol> <li type=»1″> </ol> |
|
Аналог CSS
list-style-type
Пример 2. Тип маркера
<!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>Тег LI, параметр type</title>
</head>
<body>
<ul>
<li type=»square»>Чебурашка</li>
<li>Крокодил Гена</li>
<li type=»circle»>Шапокляк</li>
</ul>
</body>
</html>
Списки
Списки в HTML используются для представления информации в упорядоченном или неупорядоченном виде.Обычно это нумерованный или ненумерованный список. Также под список может подходить любой контент, элементы которого схожи и идут друг за другом
Маркированные (ненумерованные) списки
Маркированные списки создаются с помощью тега . Каждый элемент списка обозначается тегом .
Теги всегда должны быть прямыми потомками .
Запись в коде:
Нумерованные списки
Нумерованные списки создаются с помощью тега . Каждый элемент списка также обозначается тегом . Основное отличие нумерованного списка от маркированного заключается в наличие указателя(маркера) перед каждым элементом.
Запись в коде:
Список на странице
Параметр VALUE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Описание
Параметр value устанавливает номер, с которого
будет начинаться список. Атрибут value применяется
только для нумерованных списков, когда тег <LI>
находится внутри контейнера <OL>. При этом не
имеет значения, какой тип списка установлен с помощью параметра type,
аргумент value одинаково работает и с римскими
и с арабскими числами.
Значение по умолчанию
1
Пример 3. Начало нумерации списка
<!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>Тег LI, параметр value</title>
</head>
<body>
<ol>
<li type=»I» value=»48″>Чебурашка</li>
<li type=»I»>Крокодил Гена</li>
<li type=»I»>Шапокляк</li>
</ol>
</body>
</html>
Специальные и вложенные списки в 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)
Разница лишь в том, что этот тег строго сделан для нумерации списков. Название тега пришло от английского сокращения «Ordered List» — нумерованный список.
Синтаксис тега
Где атрибут type=»value»
может принимать следующие значения
- A
— задает маркеры в виде прописных латинских букв (A, B, C..); - a
— задает маркеры в виде строчных латинских букв (a, b, c..); - I
— задает маркеры в виде больших римских цифр (I, II, III, IV..); - i
— задает маркеры в виде маленьких римских цифр (i, ii, iii, iv..); - 1
(по умолчанию) — задает маркеры в виде арабских цифр (1, 2, 3..);
Атрибут start=»value»
задает начальное значение (стартовое значение) отчета.
Атрибут reversed
задает обратный счет (в случае необходимости).
Тег
- требует обязательного использования закрывающего тега
Для формирования элементов списка используется парный тег
. Между открывающим и закрывающим тегами располагаются отдельные слова, фразы, абзацы, изображения, куски кода и многое другое, являющееся содержимым маркированного списка.
Примечание
Внутри списка есть возможность изменять счет на свой. Для этого есть специальный атрибут value=»»
у тега
, которому присваивается какое-то числовое значение. Например
Пример 1. Нумерованный список html в виде латинских букв
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 2. Нумерованный список html в виде римских букв
Пример с заглавными буквами
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример со строчными буквами
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 3. Нумерованный список html разная позиция старта
Пример, который показывает возможности атрибута start
, который позволяет задавать стартовое значение счетчика.
Вот как это выглядит на странице:
- Элемент #1
- Элемент #2
- Элемент #3
Пример 4. Изменение счета в нумерованных списках html
Ниже представлен пример с возможностью менять значения счетчика с помощью атрибута value
при выводе новых элементов в тегах
