Показать Меню
falbar Основы HTML

Урок 10. Создание списков в HTML

Основы HTML

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

В HTML существует 3 вида списков:

  1. Маркированный список;
  2. Нумерованный список;
  3. Список определений.

Маркированный список или неупорядоченный(ul)

Маркированный список образуется при помощи элементов li вложенных внутрь элемента ul. Всё, что находиться внутри элемента li снабжается маркером. Маркеры могут быть трех видов. По умолчанию установлен закрашенный диск(disc). Остальные два вида: квадрат(square) и окружность.(circle). Вид списка можно изменять при помощи атрибута type как к элементу ul так и к li.

<ul>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ul>

<ul type="square">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ul>

<ul type="circle">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ul>

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

Нумерованный или упорядоченный список(ol)

Нумерованный список по структуре и назначению не чем не отличается от маркированных списков. Он так же блочный, а сделан в основном для удобства. Пункты списка создаются тоже при помощи элементов li только уже находящихся в контейнере ol. Теперь место маркеров можно увидеть цифры.

В упорядоченном списке мы можем управлять нумерацией с помощью атрибута type прописанного к элементу ol. По умолчанию стоит 1. Нумерацию списка можно вести при помощи прописных букв малых(type="a"), больших(type="A"), римских цифр(type="I" или type="i">).

<ol type="1">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ol>
<ol type="A">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ol>
<ol type="a">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ol>
<ol type="I">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ol>
<ol type="i">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ol>

Упорядоченный список

Так же можно управлять нумерацией, указывая с какой позиции начинать отсчет пунктов при помощи атрибута start.

<ol start="6">
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
	<li>Тестовая запись</li>
</ol>

Упорядоченный список, управление нумерацией

Список определений(dl)

Если два предыдущих списка были почти одинаковы, то список определений заметно отличается по конструкции. Он был придуман для создания словарных статей, где есть термин и определение. То есть для структурных единиц, например: название новости и описания.

Контейнером для списка определений служит элемент dl, элемент dt (definition termin) термином, а dd( definition description) описанием. Все эти элементы блочные отличается только элемент dt в его нужно вставлять строчный контент, а вот в dd любой. Элемент dd отображается с 40px отступом. Все внутренние элементы могут идти в любом количестве и порядке, то есть можно написать 10 dt и 2 dd и это будет семантически правильно.

<dl>
	<dt>Термин</dt>
		<dd>краткое определение</dd>
	<dt>Термин</dt>
		<dd>краткое определение</dd>
</dl>

Список определений

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

<ol>
	<li>Номер 1
		<ul>
			<li>Тестовая запись</li>
			<li>Тестовая запись</li>
			<li>Тестовая запись</li>
		</ul>
	</li>
	<li>Номер 2
		<ul>
			<li>Тестовая запись</li>
			<li>Тестовая запись</li>
			<li>Тестовая запись</li>
		</ul>
	</li>
	<li>Номер 3
		<ul>
			<li>Тестовая запись</li>
			<li>Тестовая запись</li>
			<li>Тестовая запись</li>
		</ul>
	</li>
</ol>

Многоуровневое меню

Подписаться на обновления

Комментариев еще не оставлено