: the unordered list element

Содержание:

Нумерованные списки
- Пример: Нумерованный список
- Пример: Применение атрибутов type и start.
- Пример: Применение атрибута value
Изображения
Еще примеры
- Пример
- Пример
- Пример
- Пример
Форматирование
Маркированный список.
HTML Reference
HTML Tags
HTML Справочник
HTML Теги
Маркированные списки на основе тэгов UL и LI
Таблицы
HTML Reference
HTML Tags
HTML Tags
More Examples
- Example
- Example
- Example
- Example
HTML Теги
HTML Справочник
HTML Теги
Маркированные списки
- Пример: Маркированный список
Список описаний
Оформление списков с помощью CSS-стилей
- 1. Тип маркера списка list-style-type
- 2. Изображения для элементов списка list-style-image
- 3. Местоположение маркера списка list-style-position
- 4. Краткая форма задания стилей списка
The декларация
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
Метаданные
Специальные и вложенные списки в Html коде
Списки
Формы

Нумерованные списки

В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента <ol> (от англ. Ordered List – нумерованный список). Далее в контейнер <ol> для каждого пункта списка помещается элемент <li> (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег <ol> имеет следующий синтаксис:

Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:

Пример: Нумерованный список

Результат
HTML-код
Попробуй сам »

Пошаговая инструкция

Достать ключ
Вставить ключ в замок
Повернуть ключ на два оборота
Достать ключ из замка
Открыть дверь

Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе <ol>, который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:

Здесь: type – символы списка:

A — прописные латинские буквы (A, B, C . . .);
a — строчные латинские буквы (a, b, c . . .);
I — большие римские цифры (I, II, III . . .);
i — маленькие римские цифры (i, ii, iii . . .);
1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).

Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега <ol>.
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:

Пример: Применение атрибутов type и start.

Результат
HTML-код
Попробуй сам »

Перепела
Фазаны
Куропатки
Павлины

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

В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.

Пример использования атрибута value тега <li>, который позволяет изменить номер данного элемента списка:

Пример: Применение атрибута value

Результат
HTML-код
Попробуй сам »

Первый пункт списка
Второй пункт списка
Третий пункт списка

В этом примере «Первый пункт списка» будет иметь номер 1, «Второй пункт списка» – номер 7, а «Третий пункт списка» – номер 8.

Изображения

List style ( type, image, position)

<td>Описание

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<img>	Определяет изображение на странице.	Да	Да	Да	Да	Да	Да
<map>	Используется для определения изображения-карты.	Да	Да	Да	Да	Да	Да
<area>	Тег, который определяет интерактивную область в изображении-карте (элемент <map>), т.е. при клике на определённую область изображения происходят определённые действия, например, открывается отдельная страница с описанием данного участка изображения.	Да	Да	Да	Да	Да	Да
<canvas>	Элемент, предназначенный для создания растрового двухмерного изображения при помощи скриптов (обычно с использованием языка JavaScript).	4.0	2.0	9.0	3.1	9.0	12.0
<figcaption>	Выводит пояснение к фотографии или иллюстрации, которая находится внутри тега <figure>.	6.0	4.0	11.1	5.0	9.0	12.0
<figure>	Применяется для обозначения контента, иллюстрирующего или поддерживающего определенную идею текста.	6.0	4.0	11.1	5.0	9.0	12.0

Еще примеры

Пример

Element.classlist

Установите различные типы списков (с помощью CSS):

<ol style=»list-style-type:upper-roman»><li>Кофе</li><li>Чай</li>
<li>Молоко</li></ol><ol style=»list-style-type:lower-alpha»>
<li>Кофе</li><li>Чай</li><li>Молоко</li></ol>

Пример

Отображение всех различных типов списков, доступных с помощью CSS:

Пример

Уменьшение и расширение высоты строки в списках (с помощью CSS):

<ol style=»line-height:80%»> <li>Кофе</li>
<li>Чай</li> <li>Молоко</li></ol><ol
style=»line-height:180%»> <li>Кофе</li> <li>Чай</li>
<li>Молоко</li></ol>

Пример

Вложите неупорядоченный список в упорядоченный список:

<ol> <li>Кофе</li> <li>Чай <ul>
<li>Black tea</li> <li>Зеленый чай</li>
</ul> </li> <li>Молоко</li></ol>

Форматирование

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<acronym>	Не поддерживается в HTML5. Определяет акроним. Используйте вместо данного элемента <abbr>.	Да	Да	Да	Да	Да	Да
<abbr>	Определяет аббревиатуру или акроним. Маркировка сокращений является полезной информацией для браузеров, систем перевода и поисковиков.	Да	Да	Да	Да	Да	Да
<address>	Определяет контактную информацию (автор / владелец) документа или статьи.	Да	Да	Да	Да	Да	Да
<b>	Определяет жирное начертание текста.	Да	Да	Да	Да	Да	Да
<bdi>	Изолирует фрагмент текста, который отформатирован в другом направлении, то есть позволяет браузерам корректно обрабатывать двунаправленный текст. Этот элемент полезно использовать при отображении текста с разной направленностью.	Да	Да	Да	Да	Нет	Нет
<bdo>	Используется для переопределения текущего направления текста (устанавливает направление вывода текста и преимущественно предназначен для использования с языками, где чтение происходит справа налево, например — арабский).	Да	Да	Да	Да	Да	Да
<big>	Не поддерживается в HTML5.Шрифт, который отображается большего размера. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<blockquote>	Определяет блочную цитату (длинная цитата внутри документа). Текст внутри этого тега отображается как выровненный блок с отступами слева и справа	Да	Да	Да	Да	Да	Да
<center>	Не поддерживается в HTML5.Определяет текст, который выровнен по центру. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<cite>	Предназначен для выделения названия произведений (по умолчанию — курсивом).	Да	Да	Да	Да	Да	Да
<code>	Предназначен для выделения части компьютерного кода (по умолчанию представлен моноширинным шрифтом).	Да	Да	Да	Да	Да	Да
<del>	Перечёркнутый (удалённый) текст	Да	Да	Да	Да	Да	Да
<dfn>	Используется, когда в документе упоминается новый термин или слово (первое и поясняемое употребление). По умолчанию, оно выделяется курсивом.	Да	Да	Да	Да	Да	Да
<em>	Экспрессивно-эмоциональное выделение текста	Да	Да	Да	Да	Да	Да
<font>	Не поддерживается в HTML5.Определяет цвет, размер и шрифт для текста. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<i>	Курсивное начертание текста	Да	Да	Да	Да	Да	Да
<ins>	Подчёркнутый текст, вставленный в документ.	Да	Да	Да	Да	Да	Да
<kbd>	Вводимые пользователем нажатия клавиш или текст, набираемый на клавиатуре.	Да	Да	Да	Да	Да	Да
<mark>	Выделенный/подсвеченный текст.	6.0	4.0	11.1	5.0	9.0	12.0
<meter>	Предназначен для отображения скалярной величины в заданном диапазоне, или же для графического представления дробного числа. Для использования данного тега должно быть известно максимальное значение.	8.0	6.0	11.0	6.0	Нет	13.0
<pre>	Определяет предварительно отформатированный текст, т.е. текст, который был помещён внутрь тега отобразится со шрифтом фиксированной ширины, и сохранит как пробелы, так и разрывы строк	Да	Да	Да	Да	Да	Да
<progress>	Предоставляет обратную связь, сообщая о состоянии текущего процесса, отображает какая часть задачи выполнена.	8.0	16.0	11.0	6.0	10.0	12.0
<q>	Используется для выделения коротких цитат (строчная цитата).	Да	Да	Да	Да	Да	Да
<rp>	Определяет, что отображать браузеру, который не поддерживает тег <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<rt>	Помещает полезный текст фуриганы в составе элемента <ruby>	5.0	38.0	15.0	5.0	5.5	12.0
<ruby>	Используются для добавления фуриган (фонетические подсказки в японском языке, их также называют — руби или ёмигана).	5.0	38.0	15.0	5.0	5.5	12.0
<s>	Определяет текст, который больше не является правильным или актуальным.	Да	Да	Да	Да	Да	Да
<samp>	Результат вывода компьютерной программы или скрипта.	Да	Да	Да	Да	Да	Да
<small>	Шрифт, который отображается меньшим размером(мелкий/юридический шрифт).	Да	Да	Да	Да	Да	Да
<strike>	Не поддерживается в HTML5. Отображает перечеркнутый текст. Используйте вместо данного элемента тег <del> или тег <s>	Да	Да	Да	Да	Да	Да
<strong>	Текст, которому придают особое значение (важный текст).	Да	Да	Да	Да	Да	Да
<sub>	Текст с нижним индексом.	Да	Да	Да	Да	Да	Да
<sup>	Текст с верхним индексом.	Да	Да	Да	Да	Да	Да
<time>	Тег временной разметки (семантическая разметка).	6.0	4.0	11.1	5.0	9.0	12.0
<tt>	Не поддерживается в HTML5. Отображает шрифт моноширинным текстом. Используйте CSS вместо данного элемента.	Да	Да	Да	Да	Да	Да
<u>	Содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке.	Да	Да	Да	Да	Да	Да
<var>	Математические/переменные величины.	Да	Да	Да	Да	Да	12.0
<wbr>	Предоставляет возможность указать браузеру, что при необходимости в этом месте можно сделать перенос строки (например, слишком длинное слово или URL).	1.0	3.0	11.7	4.0	Нет	Да

List.indexof method

Маркированный список.

Маркированный (неупорядоченный) список в 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 Маркированные списки.

Обращаю Ваше внимание, что допускается формировать маркированные (неупорядоченные) списки, вложенные в другие маркированные списки (внутри элемента списка ) при этом элементы вложенного списка по умолчанию будут с пустым кругом внутри, a последующие будут с квадратом:

Первый пункт
- Первый пункт
  - Первый пункт
    - Первый пункт
    - Второй пункт
    - Третий пункт
  - Второй пункт
  - Третий пункт
- Второй пункт
- Третий пункт
Второй пункт
Третий пункт

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

HTML Справочник

HTML Теги по алфавитуHTML Теги по категорииHTML ПоддержкаHTML АтрибутыHTML ГлобальныеHTML СобытияHTML Названия цветаHTML ХолстHTML Аудио/ВидеоHTML ДекларацииHTML Набор кодировокHTML URL кодHTML Коды языкаHTML Коды странHTTP СообщенияHTTP методыКовертер PX в EMКлавишные комбинации

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>
<wbr>

Маркированные списки на основе тэгов UL и LI

Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.

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

Давайте посмотрим, например, маркированный вариант, который может выглядеть так:

Первая строка
Вторая
Последний элемент

Внутри открывающего и закрывающего тегов UL могут стоять только элементы LI, а уже внутри самих этих элементов (пунктов) можно вставлять любой контент (текст, картинки, заголовки, абзацы, ссылки и даже другие списки).

Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.

Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

<ul type=»disc»> — закрашенный кружок (по умолчанию);
<ul type=»circle»> — не закрашенный кружок;
<ul type=»square»> – квадрат

В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

Пример маркированного списка с различными типами маркера для каждого пункта:

Маркер в виде закрашенного диска
Маркер в виде не закрашенного диска
Квадрат

Таблицы

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<table>	Определяет содержимое таблицы.	Да	Да	Да	Да	Да	Да
<caption>	Определяет наименование таблицы.	Да	Да	Да	Да	Да	Да
<th>	Определяет заголовочную ячейку таблицы.	Да	Да	Да	Да	Да	Да
<tr>	Определяет строку таблицы.	Да	Да	Да	Да	Да	Да
<td>	Определяет ячейку данных таблицы.	Да	Да	Да	Да	Да	Да
<thead>	Используется для содержания заголовка группы в таблице (шапка таблицы).	Да	Да	Да	Да	Да	Да
<tbody>	Используется для содержания «тела» таблицы.	Да	Да	Да	Да	Да	Да
<tfoot>	Используется для содержания «подвала» таблицы (футер).	Да	Да	Да	Да	Да	Да
<col>	Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.	Да	Да	Да	Да	Да	Да
<colgroup>	Определяет группу столбцов в таблице.	Да	Да	Да	Да	Да	Да

HTML Reference

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>

More Examples

Example

Use of the value attribute in an ordered list:

<ol>

<li value=»100″>Coffee</li>

<li>Tea</li>

<li>Milk</li>

<li>Water</li>

<li>Juice</li>

<li>Beer</li>
</ol>

Example

Set different list style types (with CSS):

<ol> <li>Coffee</li> <li
style=»list-style-type:lower-alpha»>Tea</li> <li>Milk</li>
</ol><ul> <li>Coffee</li> <li
style=»list-style-type:square»>Tea</li> <li>Milk</li></ul>

Example

Create a list inside a list (a nested list):

<ul> <li>Coffee</li> <li>Tea <ul>
<li>Black tea</li> <li>Green tea</li>
</ul> </li> <li>Milk</li></ul>

Example

Create a more complex nested list:

<ul> <li>Coffee</li> <li>Tea    <ul>
<li>Black tea</li>      <li>Green tea
<ul>
<li>China</li>
<li>Africa</li>        </ul>
</li>    </ul> </li> <li>Milk</li>
</ul>

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 Справочник

HTML Теги

Маркированные списки

Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов.
Маркированные списки создаются с помощью блочного элемента <ul> (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега <li>. Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег <ul> имеет следующий синтаксис:

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

Пример: Маркированный список

Результат
HTML-код
Попробуй сам »

Windows Movie Maker
Pinnacle VideoSpin
AviSynth
Avidemux

Внутри тега <li> не обязательно размещать только текст, допустимо
поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)

Список описаний

Списки описаний используются для формирования пар типа «имя/значение» / «вопрос/ответ» и т.п.

Тэг <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&gt
			<dd>состояние, противоположное дежавю, внезапно наступающее ощущение того, что хорошо знакомое место
			или человек кажутся совершенно неизвестными или необычным.</dd>
			<dt>Фасцинация</dt>
			<dd>повышение эффективности воспринимаемого материала через использование сопутствующих (фоновых) воздействий.</dd>
		</dl>
	</body>
</html>

Как вы можете заметить значение списка описаний (элемент <dd>) имеет по умолчанию внешний отступ с левой стороны равный 40 пикселям:

Рис. 16 Список описаний.

Обращаю Ваше внимание, что допускается формировать списки описаний, вложенные в другие списки описаний (внутри элемента значения списка ). Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д

Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее

Маркированные (неупорядоченные), нумерованные (упорядоченные) и списки описаний внутри себя могут содержать элементы нового списка (внутри элементов списка / значений списка), другие элементы HTML, такие как, изображения, ссылки и т.д. Списки можно размещать горизонтально, формировать из них меню навигации и так далее. Более подробно о возможностях CSS (каскадных таблицах стилей) и некоторых особенностях HTML 5 вы узнаете позднее.

Оформление списков с помощью CSS-стилей

1. Тип маркера списка list-style-type

Свойство изменяет типа маркера или удаляет маркер для маркированного и нумерованного списков. Наследуется.

list-style-type
Значения:
`disc`	Значение по умолчанию. В качестве маркера элементов списка выступает закрашенный кружок.
`armenian`	Традиционная армянская нумерация.
`circle`	В качестве маркера выступает незакрашенный кружок.
`cjk-ideographic`	Идеографическая нумерация.
`decimal`	1, 2, 3, 4, 5, …
`decimal-leading-zero`	01, 02, 03, 04, 05, …
`georgian`	Традиционная грузинская нумерация.
`hebrew`	Традиционная еврейская нумерация.
`hiragana`	Японская нумерация: a, i, u, e, o, …
`hiragana-iroha`	Японская нумерация: i, ro, ha, ni, ho, …
`katakana`	Японская нумерация: A, I, U, E, O, …
`katakana-iroha`	Японская нумерация: I, RO, HA, NI, HO, …
`lower-alpha`	a, b, c, d, e, …
`lower-greek`	Строчные символы греческого алфавита.
`lower-latin`	a, b, c, d, e, …
`lower-roman`	i, ii, iii, iv, v, …
`none`	Маркер отсутствует.
`square`	В качестве маркера выступает закрашенный или незакрашенный квадрат.
`upper-alpha`	A, B, C, D, E, …
`upper-latin`	A, B, C, D, E, …
`upper-roman`	I, II, III, IV, V, …
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

Рис. 1. Пример оформления маркированного и нумерованного списков

2. Изображения для элементов списка list-style-image

В качестве маркера элементов списка можно использовать изображения и градиентые заливки. Наследуется.

list-style-image
Значения:
`url(url)`	Путь к изображению.
`none`	значение по умолчанию, означает отсутствие изображения. Также убирает изображение для элемента из группы элементов с установленным изображением-маркером.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

Рис. 2. Оформление маркированного списка с помощью изображенияРис. 3. Оформление маркированного списка с помощью градиента

3. Местоположение маркера списка list-style-position

Данное свойство предоставляет возможность располагать маркер вне или внутри содержимого элемента списка. Наследуется.

list-style-position
Значения:
`outside`	Значение по умолчанию. Маркер располагается вне блока с текстом.
`inside`	Маркер списка изображается в одном блоке с текстом. Последующие строки текста будут располагаться под значком маркера, т.е. маркер будет обтекаться текстом.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

Рис. 4. Пример расположения маркера внутри и снаружи блока списка

4. Краткая форма задания стилей списка

Можно объединить все три свойства форматирования списка в одно с помощью list-style. Значения свойств могут быть расположены в произвольном порядке, а часть значений может быть опущена. Если присутствует одно значение, то другие свойства примут значения браузера по умолчанию.

Синтаксис

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

Метаданные

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<head>	Содержит информацию о документе (сведения о документе, которые не отображаются пользователю).	Да	Да	Да	Да	Да	Да
<meta>	Обеспечивает метаданные о HTML документе. Метаданные не отображаются на странице, но интерпретируются браузерами и поисковыми системами.	Да	Да	Да	Да	Да	Да
<base>	Определяет базовый абсолютный URL для всех относительных URL-адресов, содержащихся в документе (помещается внутри контейнера <head>).	Да	Да	Да	Да	Да	Да
<basefont>	Не поддерживается в HTML5. Определяет (по умолчанию) цвет, размер, шрифт для всего текста в документе. Используйте CSS вместо данного элемента.	Нет	Нет	Нет	Нет	Нет	Нет

Специальные и вложенные списки в Html коде

Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.

Обычно такой вид используется (ну, или предполагалось, что он будет использоваться) для написания словарных статей, состоящих из терминов (заключенных в теги DT) и их описаний (заключенных в теги DD).

<dl>
<dt>Первый термин</dt>
      <dd>Описание</dd>
<dt>Второй термин</dt>
		<dd>Его описание</dd>
</dl>

Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).

Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.

Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.

Обратите внимание, что закрывающий LI того пункта, в котором будет создан вложенный пункт, ставится лишь после всего кода вложенного списка (это очень важно для его правильного отображения на web странице). Вложенный список может выглядеть примерно, так:

Первый пункт основного нумерованного
Второй пункт
- Первый элемент вложенного маркированного
- Второй
- Третий и последний пункт маркированного
Третий элемент нумерованного

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Списки

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<ul>	Определяет маркированный (неупорядоченный) список.	Да	Да	Да	Да	Да	Да
<ol>	Определяет нумерованный список.	Да	Да	Да	Да	Да	Да
<li>	Элемент списка.	Да	Да	Да	Да	Да	Да
<dir>	Не поддерживается в HTML5.Cоздает список, содержащий названия директорий (системные папки). Используйте вместо данного элемент <ul>.	Да	Да	Да	Да	Да	Да
<dl>	Определяет список описаний.	Да	Да	Да	Да	Да	Да
<dt>	Определяет имя/теримн в списке определений.	Да	Да	Да	Да	Да	Да
<dd>	Определяет значение в списке описаний.	Да	Да	Да	Да	Да	Да
<menu>	Определяет список / меню команд (контекстные меню).	Нет	8.0	Нет	Нет	Нет	Нет
<menuitem>	Элемент определяет команду/меню, которую пользователь может вызвать из контекстного меню.	Нет	8.0	Нет	Нет	Нет	Нет

Формы

Тег	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<form>	Определяет HTML форму для пользовательского ввода.	Да	Да	Да	Да	Да	Да
<input>	Определяет элементы управления для пользовательского ввода различных данных в составе формы.	Да	Да	Да	Да	Да	Да
<textarea>	Представляет собой поле формы для создания области многострочного ввода (текстовая область).	Да	Да	Да	Да	Да	Да
<button>	Используется для размещения кнопки.	Да	Да	Да	Да	Да	Да
<select>	Позволяет создать раскрывающийся список.	Да	Да	Да	Да	Да	Да
<optgroup>	Используется для группировки связанных данных в раскрывающемся списке.	Да	Да	Да	Да	Да	Да
<option>	Определяет пункты раскрывающегося списка (параметры для выбора).	Да	Да	Да	Да	Да	Да
<label>	Служит текстовой меткой для элемента <input>.	Да	Да	Да	Да	Да	Да
<fieldset>	Служит для визуальной группировки элементов, размещенных внутри формы.	Да	Да	Да	Да	Да	Да
<legend>	Определяет заголовок для элемента <fieldset>.	Да	Да	Да	Да	Да	Да
<datalist>	Определяет список предопределенных вариантов для ввода.	20.0	4.0	9.0	Нет	10.0	12.0
<keygen>	Используется для генерации пары ключей — закрытого и открытого (для форм).	1.0	1.0	3.0	1.2	Нет	Нет
<output>	Определяет область, в которую выводится результат вычислений (обычно рассчитывается с помощью скриптов).	10.0	4.0	11.0	5.1	Нет	Нет