HTML теги. HTML списки. Маркированный список или неупорядоченный список. | IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.

Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена маркированным спискам HTML. Маркированный или как еще говорят, неупорядоченный список HTML формируется тегами <ul>, <li>.

Маркированный список. Формирование маркированного HTML списка. Теги <ul>, <li>.

Содержание статьи:

Маркированный список. Формирование маркированного HTML списка. Теги <ul>, <li>.
Синтаксис маркированного списка
Атрибуты тегов маркированного списка
Другие HTML списки
Пример формирования списка определений

Как говорилось ранее, маркированный список формируются двумя тегами <ul>, <li>. Маркированные списки - это одна из разновидностей HTML списков.

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

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

Если к неупорядоченному списку не применяются дополнительные стили и правила CSS, то браузер отобразит их шрифтом, заданным по умолчанию.

Синтаксис маркированного списка

Теги <ul>, <li> являются парными HTML тегами, то есть для их корректной работы необходим закрывающий тег, но, у тега <li> можно закрывающий тег не ставить, хотя, это считается дурным тоном.

<ul>

<li>Первый</li>

<li>Второй</li>

</ul>

<ul>

<li>Первый</li>

<li>Второй</li>

</ul>

Атрибуты тегов маркированного списка

Тег <ul>, так же, как и любой другой тег из группы HTML списков, имеет атрибуты событий и универсальные HTML атрибуты. Для тега <ul> доступен только один уникальный HTML атрибут:

Type – Атрибут type позволяет изменить вид маркера неупорядоченного списка.

Обратите внимание, если значения атрибута type у тега <ul> и расположенного внутри него тега <li> будут разными, то к конкретному элементу списка будет применено значения, которое присвоено тегу <li>, эта особенность справедлива и для нумерованных списков <ol>.

Тег <li> имеет все универсальные HTML атрибуты, атрибуты событий и два уникальных атрибута:

Value – атрибут value изменяет значение нумерации для упорядоченных списков

Type – атрибут type изменяет вид маркера, как в списке директорий, так и в маркированном списке и списке меню.

Другие HTML списки

Помимо списка определений. Есть еще четыре HTML списка:

Список директорий – данный вид HTML списка формируется при помощи тегов <dir>, <li>
Нумерованный список – другое название упорядоченный список, этот HTML список формируется тегами <ol>, <li>
Список определений – данный вид HTML списка формируется при помощи тегов <dl> , <dd>, <dt>
Список меню – этот список HTML формируется тегами <menu>, <li>

Тег <ol> формирует нумерованный список. Тег <dir> формирует список директорий. Тег <dl> формирует список определений. Контейнер <dt> служит для хранения и отображения термина списка определений. В контейнер <dd> помещается определение термина списка определений. Тег <menu> создает список меню.

Пример формирования списка определений

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример использования тега OL</title>
</head>
<body>
<ul>
<li>Первый
<ul type="square">
<li>1.1</li>
<li type="circle">1.2</li>
<li>1.3</li>
<li>1.4</li>
</ul>
</li>
<li>Второй
<ul type="circle">
<li>2.1</li>
<li type="disc">2.2</li>
<li>2.3</li>
</ul>
</li>
<li>Третий
<ul>
<li>3.1</li>
<li>3.2</li>
<li>3.3</li>
</ul>
</li>

</ul>
</body>
</html>

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

<html>

<head>

<title>Пример использования тега OL</title>

</head>

<body>

<ul>

<li>Первый

</ul>

</li>

<li>Второй

</ul>

</li>

<li>Третий

<ul>

</ul>

</li>

</ul>

</body>

</html>

Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

HTML теги. HTML списки. Пример использования тега <ul>. Маркированный список

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru