Html маркированные списки: Создание списков | WebReference — Вебджем.рф

Содержание

Учебник HTML 5. Статья «Списки»

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

Стили

МЕНЮ

Списки представляют собой упорядоченный набор значений, который помогает нам систематизировать важную информацию, делая ее более доступной для понимания. Язык гипертекстовой разметки HTML позволяет составлять списки по следующим правилам:

Нумерованный (упорядоченный) список.
Маркированный (неупорядоченный) список.
Список описаний.
Список контекстных меню.

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

Нумерованный (упорядоченный) список предназначен для элементов, которые следуют в определённом порядке. Нумерованный список начинается с тега <ol> (сокращенное от английского ordered list — упорядоченный список). Каждый элемент списка начинается с тега <li> (элемент списка).

Давайте рассмотрим примеры использования:

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования тега <ol></title>
	</head>
	<body>
		<ol> 
			<li>Первый пункт</li&gt
			<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&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
		<ol type = "a"> <!--указываем, что список формируется в алфавитном порядке строчными буквами --> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
		<ol type = "I"> <!--указываем, что список формируется римскими цифрами в верхнем регистре --> 
			<li>Первый пункт</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
		<ol type = "i"> <!--указываем, что список формируется римскими цифрами в нижнем регистре --> 
			<li>Первый пункт</li&gt
			<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&gt
					<li>Второй пункт</li>
					<li>Третий пункт</li>
				</оl>
			</li&gt
			<li>Второй пункт</li>
			<li>Третий пункт</li>
		</оl>
	</body>
</html>

Выглядеть на странице это будет соответственно так:

Первый пункт.
1. Первый пункт.
2. Второй пункт.
3. Третий пункт.
Второй пункт.

Третий пункт.

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

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

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

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

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

Список контекстных меню

Тег <menu> используется для контекстных меню, панелей инструментов и для включения элементов управления формы.

Тег <menuitem> определяет элемент команды / меню, который пользователь может вызвать из контекстного меню.

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

Тег	Chrome	Firefox	Opera	Safari	IExplorer	Edge
<menu>	Нет	8.0	Нет	Нет	Нет	Нет

Рассмотрим пример для расширения кругозора:

<!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.

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

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

Стили

МЕНЮ

HTML списки

❮ Назад Вперед ❯

Язык гипертекстовой разметки поддерживает три типа списков, для каждого из которых используются свои теги.

Маркированный список содержит ненумерованные списки элементов без определенной последовательности. Для создания маркированного списка используется блочный элемент <ul>.

Каждый элемент списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Маркером для всех пунктов по умолчанию является маленький черный кружок.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h2>Маркированный список</h2>
    <ul>
      <li>Первый пункт списка</li>
      <li>Другой пункт списка</li>
      <li>Еще один пункт списка</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Результат

Элементы в маркированных списках по умолчанию отмечены марками (маленькие черные круги). Тем не менее, вы можете изменить стиль маркера по умолчанию для элементов списка, используя атрибут type attribute.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <ul type="circle">
      <li>Пункт списка</li>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
    </ul>
    <ul type="square">
      <li>Пункт списка</li>
      <li>Пункт списка</li>
      <li>Пункт списка</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Результат

Вы также можете использовать свойство CSS list-style-type или list-style-image для определения типа элемента в списке.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h3>Маркированный список:</h3>
    <ul>
      <li>Прохладительные напитки</li>
      <li>Горячие напитки</li>
      <li>Мороженое</li>
    </ul>
    <ul>
      <li>Кока-кола</li>
      <li>Fanta</li>
      <li>Чай со льдом</li>
    </ul>
    <ul>
      <li>Кока-кола</li>
      <li>Fanta</li>
      <li>Чай со льдом</li>
    </ul>
  </body>
</html>

Попробуйте сами!

Результат

Нумерованный список содержит элементы в определенной последовательности. Список помещается в блочный элемент <ol>.

Каждый элемент нумерованного списка начинается с тега открывающего тега <li> и заканчивается закрывающим тегом </li>. Пункты списка автоматически нумеруются.

Пример

<!DOCTYPE html>
<html>
<head>
      <title>Заголовок окна веб-страницы</title>
</head>
<body>
       <h2>Нумерованный список</h2>
      <ol>
	   <li>Первый пункт нумерованного списка</li>
              <li>Второй пункт нумерованного списка</li>
	   <li>Третий пункт нумерованного списка</li>
      </ol>					

</body>
</html>

Попробуйте сами!

Результат

Если вы хотите создать нумерованный список с римскими цифрами или же список, где последовательность указана буквами, то просто добавьте к элементу <ol> type=»a» или type=»I» соответственно.

Пример

<!DOCTYPE html>
<html>
<head>
      <title>Заголовок окна веб-страницы</title>
</head>
<body>
       <h4>Нумерованный список:</h4>
       <ol>
             <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
       </ol>  
       <h4>Список с буквенной нумерацией</h4>
       <ol type="A">
             <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
       </ol>  
       <h4>Список со строчными буквами</h4>
       <ol type="a">
               <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
       </ol>  
       <h4>Нумерованный римскими цифрами список:</h4>
       <ol type="I">
             <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
      </ol>  
      <h4>Нумерованный строчными римскими цифрами список</h4>
      <ol type="i">
              <li>Персик</li>
             <li>Абрикос</li>
             <li>Банан</li>
             <li>Клубника</li>
      </ol>  				
</body>
</html>

Попробуйте сами!

Результат

В списке определений указываются термины/названия и их определения. Такого рода списки используются для создания словарей, справочников и т.д.

Для создания списка определений используется парный элемент <dl>, в котором термины/названия мы записываем в теге <dt>, а их определения в теге <dd>.

Пример

<!DOCTYPE html>
<html>
<head>
      <title>Заголовок окна веб-страницы</title>
</head>
<body>
     <h2>Список определений:</h2>
      <dl>
	   <dt>Чай</dt>
	   <dd>- горячий напиток</dd>
	   <dt>Сок</dt>
	   <dd>- прохладительный напиток</dd>
      </dl>							
</body>
</html>

Попробуйте сами!

Результат

Ненумерованный список HTML | Маркированный список HTML

следующий → ← предыдущая

Неупорядоченный список HTML или маркированный список отображает элементы в маркированном формате. Мы можем использовать неупорядоченный список, где нам не нужно отображать элементы в каком-либо определенном порядке. HTML-тег ul используется для неупорядоченного списка. Может быть 4 типа маркированного списка:

диск
круг
квадрат
нет

Для представления различных упорядоченных списков в теге

Тип	Описание
Тип «диск»	Это стиль по умолчанию. В этом стиле элементы списка отмечены маркерами.
Введите «circle»	В этом стиле элементы списка отмечены кружками.
Введите «квадрат»	В этом стиле элементы списка отмечены квадратами.
Введите «нет»	В этом стиле элементы списка не отмечены.

Пример неупорядоченного списка HTML

<ул>

HTML
Ява
JavaScript
SQL

Протестируйте сейчас

Вывод:

HTML
Ява
JavaScript
SQL

ul type=»круг»

HTML
Ява
JavaScript
SQL

Протестируйте сейчас

Вывод:

HTML
Ява
JavaScript
SQL

ul type=»квадрат»

HTML
Ява
JavaScript
SQL

Протестируйте сейчас

Вывод:

HTML
Ява
JavaScript
SQL

ul type=»нет»

HTML
Ява
JavaScript
SQL

Протестируйте сейчас

Вывод:

HTML
Ява
JavaScript
SQL

Примечание.

Атрибут type не поддерживается в HTML5, вместо type можно использовать CSS-свойство list-style-type. Ниже приведен пример, показывающий свойство CSS для тега ul.

<ул>

HTML

Ява

JavaScript

SQL

Код:

<голова> <тело>

Атрибут type со свойством CSS

<ул>

HTML

Ява

JavaScript

SQL

Протестируйте сейчас

Вывод:

Поддержка браузеров

Элемент	Chrome	IE	Firefox	Opera	Safari
	Yes	Yes	Yes	Yes	Yes

Next TopicHTML var Tag

← предыдущая следующий →

Неупорядоченные списки

Неупорядоченные списки Разрешенный контекст: %Body.

Content, %flow, %block
Модель содержимого: Дополнительный заголовок списка (LH), за которым следует один или несколько элементов списка (LI)

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

Тег открывающего списка должен быть

caption

). Например:

 <УЛ>
      Столовые фрукты
      яблоки
      
апельсины
      
бананы

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

Столовые фрукты

яблоки
апельсины
бананы

Примечание: Некоторые устаревшие документы могут содержать заголовки или обычный текст. перед первым элементом LI. Разработчики пользовательских агентов HTML 3.0: рекомендуется учесть эту возможность, чтобы справиться с плохо сформированными наследственные документы.

Элементы MENU и DIR

Эти элементы заменены расширениями элемента UL. Пользователь агентам рекомендуется продолжать поддерживать их ради наследия документы. И MENU, и DIR состоят из одного или нескольких элементов LI, подобных к УЛ. Списки МЕНЮ обычно отображаются без маркеров в более компактный стиль, чем UL. Вы можете получить тот же эффект с

Разрешенные атрибуты для элемента UL

ID

Идентификатор SGML, используемый в качестве цели для гипертекста ссылки или для именования определенных элементов в связанных таблицах стилей. Идентификаторы представляют собой токены NAME и должны быть уникальными в рамках текущий документ.

LANG

Это одна из сокращений стандартного языка ISO, например «en.uk» для варианта английского языка, на котором говорят в Соединенном Королевстве.

Он может использоваться синтаксическими анализаторами для выбора конкретных вариантов языка для кавычки, лигатуры и правила расстановки переносов и т. д. Язык Атрибут состоит из двухбуквенного кода языка из ISO 639., необязательно, за которым следует точка и двухбуквенный код страны из ISO 3166.

CLASS

Это разделенный пробелами список токенов SGML NAME, который используется для подкласса имен тегов. По соглашению имена классов интерпретируется иерархически, с самым общим классом слева и наиболее конкретный справа, где классы разделены период. Атрибут CLASS чаще всего используется для присоединения другой стиль для какого-либо элемента, но рекомендуется, чтобы там, где практические имена классов должны быть выбраны на основе элемента семантика, так как это позволит использовать другие функции, например, ограничение поиска через документы путем сопоставления имен классов элементов. Соглашения для выбора имен классов выходят за рамки этой спецификации.

CLEAR

Этот атрибут является общим для всех блочных элементов.

Когда текст обтекает рисунок или таблицу на полях, иногда требуется чтобы начать элемент, такой как заголовок, абзац или список, под рисунком а не рядом с ним. Атрибут CLEAR позволяет вам двигаться вниз безусловно:

clear=left: двигаться вниз до тех пор, пока левое поле не станет чистым
clear=right: двигаться вниз до тех пор, пока правое поле не станет чистым
очистить=все: двигаться вниз, пока оба поля не станут чистыми

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

clear=»40 en»: двигаться вниз до тех пор, пока не останется не менее 40 единиц en
clear=»100 пикселей»: двигаться вниз, пока не будет не менее 100 пикселей бесплатно

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

PLAIN

Наличие этого атрибута подавляет отображение пули, напр. <ОБЫЧНЫЙ>.

SRC

Задает изображение для использования в качестве маркера. Изображение указывается как URI. Этот атрибут может появиться вместе с MD атрибут.

MD

Задает дайджест сообщения или криптографическую контрольную сумму для связанная графика, указанная атрибутом SRC. Он используется, когда вы хотите быть уверены, что связанный объект действительно тот же, что и задуман автором и никак не изменен. Например, MD=»md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ», который указывает контрольную сумму MD5. кодируется как строка символов base64. Атрибут MD обычно разрешено для всех элементов, которые поддерживают ссылки на основе URI.

DINGBAT

Определяет пиктограмму для использования в качестве маркера. Значок указывается как имя объекта. Список стандартных иконок имена объектов для HTML 3.0 приведены в приложении к настоящему документу. спецификация, например папка — это имя объекта для значка обозначающий каталог или папку.

Html маркированные списки: Создание списков | WebReference

Учебник HTML 5. Статья «Списки»

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

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

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

Список контекстных меню

Вопросы и задачи по теме

HTML списки

Пример

Результат

Пример

Результат

Пример

Результат

Пример

Результат

Пример

Результат

Пример

Результат

Ненумерованный список HTML | Маркированный список HTML

Пример неупорядоченного списка HTML

ul type=»круг»

ul type=»квадрат»

ul type=»нет»

Примечание.

Атрибут type со свойством CSS

Поддержка браузеров

Неупорядоченные списки

Столовые фрукты

Элементы MENU и DIR

Разрешенные атрибуты для элемента UL

Добавить комментарий Отменить ответ

Рубрики