: the unordered list element

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

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

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

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

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

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

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

Иногда при просмотре существующих кодов 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-код
  • Попробуй сам »
  1. Перепела
  2. Фазаны
  3. Куропатки
  4. Павлины

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

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

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

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

  • Результат
  • HTML-код
  • Попробуй сам »
  1. Первый пункт списка
  2. Второй пункт списка
  3. Третий пункт списка

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

Изображения

<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

Еще примеры

Пример

Установите различные типы списков (с помощью 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:

<style>ol.a {list-style-type: armenian;}ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}ol.d {list-style-type:
decimal-leading-zero;}ol.e {list-style-type: georgian;}ol.f
{list-style-type: hebrew;}ol.g {list-style-type: hiragana;}ol.h
{list-style-type: hiragana-iroha;}ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}ol.k {list-style-type:
lower-alpha;}ol.l {list-style-type: lower-greek;}ol.m
{list-style-type: lower-latin;}ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}</style>

Пример

Уменьшение и расширение высоты строки в списках (с помощью 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 Нет Да

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

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

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 — закрашенный в цвет текста кружок):

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

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

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

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

Таблицы

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

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

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 Теги по алфавиту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> (от англ. 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 странице). Вложенный список может выглядеть примерно, так:

  1. Первый пункт основного нумерованного
  2. Второй пункт
    • Первый элемент вложенного маркированного
    • Второй
    • Третий и последний пункт маркированного
  3. Третий элемент нумерованного

Удачи вам! До скорых встреч на страницах блога 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 Нет Нет
Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector