Создание списков в html: Списки в HTML. Все о HTML списках

Leave a Comment / Html / By /

Содержание

Создание списков в HTML | список тегов html

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы с вами разобрали выравнивание текста в html. В данной статье я хочу рассказать о создании списков в HTML. Создать списки достаточно просто. Сразу скажу, что списки бывают двух видов: нумерованные списки и ненумерованные списки.
Нумерованные списки создаются с помощью тега <ol>,а ненумерованные с помощью тега <ul>. Данные теги являются парными, т.е. у них есть закрывающиеся теги: </ol> и </ul>. Тегом <li> задается элемент списка.Перейдём к примеру, создадим нумерованный список:


<html>
<head>
<meta charset="utf-8"/>
<title>Создание нумерованного списки</title>
</head>
<body>
<ol>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
</body>
</html>

Для задания внешнего вида маркеров нумерованного списка используется атрибут type. Существует несколько видов маркеров:

  1. type=»1″ — нумерация, которая используется по умолчанию,
  2. type=»A» — нумерация обозначается большими латинскими буквами,
  3. type=»a» — нумерация обозначается строчными (маленькими) латинскими буквами,
  4. type=»I» — нумерация римскими цифрами в верхнем регистре,
  5. type=»i» — нумерация римскими цифрами в нижнем регистре.

Иногда возникает необходимость начать нумерацию не с единицы, а с другого числа. Для этого используется атрибут «start»


<ol start="3">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>

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


<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ul>

Теперь вместо цифр, напротив элементов списка, будут черные кружечки.

Для задания внешнего вида маркеров ненумерованного списка также используется атрибут type. Всего существует три вида маркеров:

  • type=»disk» — маркер в виде закрашенного круга (используется по умолчанию),
  • type=»circle» — маркер в виде незакрашенного круга,
  • type=»square» — маркер в виде закрашенного квадрата.

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

1) Создать нумерованный список, состоящий из трех элементов, элементами которого являются ссылки на сайты Яндекса, Гугла и Рамблера.
2) Создать ненумерованный список, состоящий из трех элементов, элементами которого являются картинки, например, 3 ваших любимых марки автомобилей.

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

Список определений состоит из термина и его определения. Список определений создается с помощью тега <dl>. Термин с помощью тега <dt>, определение с помощью тега <dd>. Все эти теги являются закрывающимся.
Чтобы вам было проще понять сразу приведу наглядный пример:


<dl>
  <dt>Термин 1</dt>
    <dd>Определение 1</dd>
  <dt>Термин 2</dt>
    <dd>Определение 2</dd>
</dl>

Обязательно наберите данный пример и посмотрите, как он выглядит в браузере.

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

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Следующая статья >

Создание списков в HTML | bookhtml.ru

В этом уроке html мы поговорим о создании списков на странице. Списки достаточно часто используются на web-страницах, поэтому вы должны знать как они создаются.

Допустим, нам необходимо создать список из пяти пунктов. Можно создать такой список примитивным методом, применив тег <br> — тег переноса строки. Название списка возьмем в абзац — тег <p>.

Пример:

<p>Название списка</p>

1. Первый пункт списка <br>

2. Второй пункт списка <br>

3. Третий пункт списка <br>

4. Четвертый пункт списка <br>

5. Пятый пункт списка <br>

Проверив нашу запись в браузере, мы увидим более менее упорядоченный список из пяти пунктов. Но это неправильный метод создания списка, а простой перенос строк. Список создается немного по другому и мы сейчас разберемся как это делается.

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

Пример:

<p>Название списка</p>

<ol>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

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

Пример:

<p>Название списка</p>

<ul>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

Вот таким способом создаются нумерованные и ненумерованные списки.

Теперь давайте поговорим о некоторых атрибутах, используемых при создании списков и которые будут необходимы и нам. Вначале рассмотрим атрибуты списка <ol>. При просмотре в браузере мы видим, что нумерация идет арабскими цифрами. Если мы хотим что-бы нумерация была римскими цифрами к тегу <ol> добавляем атрибут type со значением «I» (большая буква I).

Пример:

<ol type=»I»>

Если хотим маленькие римские цифры — ставим значение «i» (маленькую букву i).

Для буквенного обозначения пунктов списка — ставим значение «A» или «a» (большую или маленькую букву А).

Пример:

<ol type=»A»>


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

Пример:

<p>Название списка</p>

<ol type=»I» start=»3″>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Проверив нашу запись в браузере, мы увидим, что наш список начинается с номера три.

У ненумерованного списка тоже есть атрибут type отвечающий за форму метки у каждого пункта списка. Без атрибута ненумерованный список имеет метки каждого элемента списка — черный кружок. Если мы хотим иметь метку — черный квадрат, к атрибуту type пишем значение «skuare». Метка — белый кружок — это значение «circle».

Пример:

<p>Название списка</p>

<ul type=»skuare»>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

Вот такие атрибуты, из основных, применяются при создании списков.

Еще рассмотрим такой момент, как вложенные списки. Это когда один список вложен в другой. Давайте в наш нумерованный список вложим наш ненумерованный, например, в третий пункт списка. Для этого нам, всего лишь, надо после закрывающего тега третьего пункта нумерованного списка вставить полностью наш ненумерованный список.

Пример:

<p>Название списка</p>

<ol type=»I»>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<ul type=»skuare»>

<li>Первый пункт списка</li>

<li>Второй пункт списка</li>

<li>Третий пункт списка</li>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ul>

<li>Четвертый пункт списка</li>

<li>Пятый пункт списка</li>

</ol>

Не забывайте проверять результаты работы в браузере.

Следующий урок — создание ссылок

Создание списков на HTML. Основы HTML для начинающих. Урок №8

Создание списков на HTML. Основы HTML для начинающих. Урок №8

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

.
Не стоит пропускать этот урок! Если будете уметь создавать списки, то сможете красиво оформлять веб-страницы, например, подходяще выстроить меню сайта.

Создание маркированного списка в HTML

Чтобы создать маркированный список на HTML странице, нужно применить такие теги:


<ul>
<li>текст №1</li>
<li>текст №2</li>
</ul>

Разъяснение:

<ul></ul> — определяет маркированный список
<li></li> — определяет пункты маркированного списка.

Теперь пример:


<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul>
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>

Результат будет вот таким:

  • текст №1
  • текст №2

Получились закрашенные кружочки перед каждым элементом.

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

Теперь, если к тегу <ul> добавить атрибут «type» со значением «circle», то вместо закрашенных кружочков мы увидим не закрашенные кружочки:

<ul type="circle">

Пример:


<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul type="circle">
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>

Результат будет вот таким:

  • текст №1
  • текст №2

Если к тегу <ul> добавить атрибут «type» со значением «square», то вместо кружочков мы увидим закрашенные квадратики:

<ul type="square">

Пример:


<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul type="square">
<li>текст №1</li>
<li>текст №2</li>
</ul>
</body>
</html>

Результат будет вот таким:

  • текст №1
  • текст №2

○ Создать маркированный список  с двойным уровнем

Можно усложнить обычный маркированный список и сделать его сложным, двойным (можно и тройным и т.д.).
Итак, для создания маркированного списка с двойным уровнем нужно добавить к любому из элементов маркированного списка (<li>) новый код списка.
Смотри пример для лучшего понимания:


<html>
<head>
<title>Создание маркированного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ul>
<li>текст №1</li>
<li>текст №2
<ul>
<li>текст №3</li>
<li>текст №4</li>
</ul>
</li>
<li>текст №5</li>
</ul>
</body>
</html>

Обратите внимание на строку №8 и №9. Я вставил новый код списка между тегами <li></li>.

Результат будет вот таким:

  • текст №1
  • текст №2
    • текст №3
    • текст №4
  • текст №5

Создание нумерованного списка в HTML

Чтобы создать нумерованный список на HTML странице, нужно применить такие теги:


<ol>
<li>текст №1</li>
<li>текст №2</li>
</ol>

Разъяснение:

<ol></ol> – определяет нумерованный список
<li></li> – определяет пункты нумерованного списка.

Теперь пример:


<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol>
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

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

Если к тегу <ol> добавить атрибут «start» с любым цифровым значением, например «5», то нумерация начнется с указанного числа (по моему примеру начнется с 5):


<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol start="5">
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

Если к тегу <ol> добавить атрибут «type» со значением «A», то вместо цифр будут Большие буквы:

<ol type="A">

Пример:


<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol type="A">
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

Если к тегу <ol> добавить атрибут «type» со значением «a», то вместо цифр  или большой буквы будут маленькие буквы:

<ol type="a">

Пример:


<html>
<head>
<title>Создание нумерованного списка в HTML - StepkinBlog.ru</title>
</head>
<body>
<ol type="a">
<li>текст №1</li>
<li>текст №2</li>
</ol>
</body>
</html>

Результат будет вот таким:

  1. текст №1
  2. текст №2

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

Чтобы создать список определений на HTML странице, нужно применить такие теги:


<dl>
<dt>1. HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>2. CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>

Разъяснение:

<dl></dl> – определяют HTML списки определений.
<dt></dt> – определяют определяемые термины.
<dd></dd> – определяют определения.

Теперь пример:


<html>
<head>
<title>Создание списка определений в HTML - StepkinBlog.ru</title>
</head>
<body>
<dl>
<dt>1. HTML</dt>
<dd>Гипертекстовый язык разметки</dd>
<dt>2. CSS</dt>
<dd>Каскадные таблицы стилей</dd>
</dl>
</body>
</html>

Результат будет вот таким:

1. HTML
Гипертекстовый язык разметки
2. CSS
Каскадные таблицы стилей

На сегодня это все! Подписывайтесь на обновление моего блога! Не пропустите новых уроков по основам HTML.
Удачи!

Предыдущая запись
Ссылка-якорь на HTML. Основы HTML для начинающих. Урок №7 Следующая запись
Бегущая строка на HTML. Основы HTML для начинающих. Урок №9

теги — полный список, таблица тегов по разделам

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

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

Таблица 1. HTML-элементы
ТегОписание
<!--...-->Используется для добавления комментариев.
<!DOCTYPE>Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a>Создаёт гипертекстовые ссылки.
<abbr>Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address>Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area>Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article>Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside>Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio>Загружает звуковой контент на веб-страницу.
<b>Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base>Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi>Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo>Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote>Выделяет текст как цитату, применяется для описания больших цитат.
<body>Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br>Перенос текста на новую строку.
<button>Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas>Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption>Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite>Используется для указания источника цитирования. Отображается курсивом.
<code>Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col>Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup>Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data>Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist>Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd>Используется для описания термина из тега <dt>.
<del>Помечает текст как удаленный, перечёркивая его.
<details>Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn>Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog>Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div>Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl>Тег-контейнер, внутри которого находятся термин и его описание.
<dt>Используется для задания термина.
<em>Выделяет важные фрагменты текста, отображая их курсивом.
<embed>Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset>Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption>Заголовок/подпись для элемента <figure>.
<figure>Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer>Определяет завершающую область (нижний колонтитул) документа или раздела.
<form>Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h2-h6>Создают заголовки шести уровней для связанных с ними разделов.
<head>Элемент-контейнер для метаданных HTML-документа, таких как<title>, <meta>, <script>, <link>, <style>.
<header>Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr>Горизонтальная линия для тематического разделения параграфов.
<html>Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i>Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe>Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img>Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input>Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins>Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd>Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<meta>Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter>Индикатор измерения в заданном диапазоне.
<nav>Раздел документа, содержащий навигационные ссылки по сайту.
<noscript>Определяет секцию, не поддерживающую сценарий (скрипт).
<object>Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol>Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup>Контейнер с заголовком для группы элементов <option>.
<option>Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output>Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p>Параграфы в тексте.
<param>Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture>Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre>Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress>Индикатор выполнения задачи любого рода.
<q>Определяет краткую цитату.
<ruby>Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb>Определяет вложенный в него текст как базовый компонент аннотации.
<rt>Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc>Отмечает вложенный в него текст как дополнительную аннотацию.
<rp>Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s>Отображает текст, не являющийся актуальным, перечеркнутым.
<samp>Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script>Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section>Определяет логическую область (раздел) страницы, обычно с заголовком.
<select>Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small>Отображает текст шрифтом меньшего размера.
<source>Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span>Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong>Расставляет акценты в тексте, выделяя полужирным.
<style>Подключает встраиваемые таблицы стилей.
<sub>Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary>Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup>Задает надстрочное написание символов.
<table>Тег для создания таблицы.
<tbody>Определяет тело таблицы.
<td>Создает ячейку таблицы.
<template>Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea>Создает большие поля для ввода текста.
<tfoot>Определяет нижний колонтитул таблицы.
<th>Создает заголовок ячейки таблицы.
<thead>Определяет заголовок таблицы.
<time>Определяет дату/время.
<title>Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr>Создает строку таблицы.
<track>Добавляет субтитры для элементов <audio> и <video>.
<u>Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul>Создает маркированный список.
<var>Выделяет переменные из программ, отображая их курсивом.
<video>Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr>Указывает браузеру возможное место разрыва длинной строки.

Создание списков в html

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный) (Unordered Lists <UL>), нумерованный список (упорядоченный) (Ordered Lists <OL>) и список определений. Теги для ненумерованных и нумерованных списков — это основа HTML. HTML 3.2 добавляет несколько атрибутов к тегам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты и в сами теги элементов списка (List Item <LI>), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.

Неупорядоченные списки — тег <UL>

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

  • первый элемент списка;

  • второй элемент списка;

  • третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

<LI>первый элемент списка

<LI>второй элемент списка

<LI>третий элемент списка

</UL>

Теги <UL> и </UL> — это теги начала и конца ненумерованного списка, тег <LI> (List Item) задает тег элемента списка. Помимо этих тегов, существует тег, позволяющий именовать списки — <LН> (List Header).

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

Чтобы не применять одни и те же маркеры на разных уровнях вложенности, можно использовать атрибут ТYРЕ. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены теги с атрибутами стандартных маркеров:

<UL TYPE=DISC>Тег создает сплошные маркеры

такого типа, как в списках первого уровня по

умолчанию.

<UL TYPE=СIRCLE>Тег создает маркеры в виде

окружностей.

<UL TYPE=SQUARE>Тег создает сплошные квадратные

маркеры.

Упорядоченные списки — тег <OL>

Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

<ОL ТYРЕ=l> Тег создает список с нумерацией

в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией

в формате А., В., С., D. и т.д.

<OL ТYРЕ=а> Тег создает список с нумерацией

в формате а., b., с., d. и т.д.

<ОL ТYРЕ=I> Тег создает список с нумерацией

в формате I., II., III., IV. и т.д.

Список определений — тег <DL>

Теги списка (Definition List: <DL>, <DT>, <DD>) используют для создания списка терминов и их определений. Схема использования тега следующая.

<DL><DT>Термин</DT> <DD>Определение</DD></DL>

Определяемый термин записывается на одной строке, а его определение — на следующей, с небольшим отступом вправо. Тег <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если на странице несколько тегов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий тег </DL>. Помните, что тег <DL> сдвигает только левую границу абзаца.

Горизонтальные линейки — тег <НR>

Горизонтальное отчеркивание (Horizontal Rule) применяется для разделения документа на части. С помощью одного лишь тега <НR> можно придать странице оригинальный вид. Попробуйте поэкспериментировать с тегом <НR>, и вы получите линии, совсем не похожие на те, которыми обычно пользуетесь.

Преформатированный вывод — тег <РRЕ>

Применение этого тега позволяет отобразить текст «как есть» (без форматирования), теми же символами и с тем же разбиением на строки.

Применение тега <BLINK>

Текст, помещенный между тегами <BLINK> и </BLINK>, мерцает. Данный тег поддерживается только браузером Netscape Navigator. Пользоваться им следует с большой осторожностью.

списков HTML

Списки HTML позволяют веб-разработчикам группировать набор связанных элементов в списках.

Пример

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

  1. Первый предмет
  2. Второй предмет
  3. Третий пункт
  4. Четвертый пункт
Попробуй сам »

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

Неупорядоченный список начинается с тега

    . Каждый элемент списка начинается с тега.

    По умолчанию элементы списка будут помечены маркерами (маленькие черные кружки):

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

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

      . Каждый элемент списка начинается с тега
    1. .

      По умолчанию элементы списка будут помечены цифрами:

      HTML Описание Списки

      HTML также поддерживает списки описаний.

      Список описания - это список терминов с описанием каждого термина.

      Тег

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

      Пример


      Кофе
      - черный горячий напиток
      Молоко
      - белый холодный напиток

      Попробуй сам "

      Теги списка HTML

      Tag Описание
        		 Определяет неупорядоченный список
          		 Определяет упорядоченный список
        		1.  Определяет элемент списка
          <дл> Определяет список описания
          		 Определяет термин в списке описания
          <дд> Описывает термин в списке описания

          ,

          Создание списков - Учимся кодировать HTML & CSS

          Урок 8

          В этом уроке 8
          HTML
          CSS
          Поделиться

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

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

          В дополнение к трем различным типам списков, доступных в HTML, существует несколько способов стилизовать эти списки с помощью CSS. Например, мы можем выбрать, какой тип маркера использовать в списке. Маркер может быть квадратным, круглым, числовым, алфавитным или, возможно, не существующим. Кроме того, мы можем решить, должен ли список отображаться вертикально или горизонтально.Все эти варианты играют важную роль в оформлении наших веб-страниц.

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

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

            . Каждый элемент в неупорядоченном списке размечается индивидуально с использованием элемента элемента списка,
          • .

            По умолчанию большинство браузеров добавляют вертикальное поле и оставляют отступы к элементу

              и ставят перед каждым элементом <900> сплошную точку.Эта сплошная точка называется маркером элемента списка, и ее можно изменить с помощью CSS.

                
                
                
               1
2
3
4
5
6 
               
                
  
              •  Orange 
  
              •  Green 
  
              •  синий

              заказанных списков

              Упорядоченный элемент списка,

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

                Поскольку порядок имеет значение, вместо использования точки в качестве маркера элемента списка по умолчанию в упорядоченном списке используются числа.

                  
                  
                  
                 1
2
3
4
5
6 
                 
                  
  
                1.  Отправляйся на север по улице Холстед 
  
                2.  Поверните направо на W Diversey Pkwy 
  
                3.  Поверните налево на N Orchard St

                Упорядоченные списки также имеют уникальные атрибуты, доступные для них, включая начало и обратный .

                Начальный атрибут

                Атрибут start определяет номер, с которого должен начинаться упорядоченный список. По умолчанию упорядоченные списки начинаются с 1 . Однако могут быть случаи, когда список должен начинаться с , 30, или другого номера. Когда мы используем атрибут start для элемента

                  , мы можем точно определить, с какого числа должен начаться отсчет упорядоченного списка.

                  Атрибут start принимает только целочисленные значения, даже если упорядоченные списки могут использовать разные системы нумерации, такие как римские цифры.

                    
                    
                    
                   1
2
3
4
5
6 
                   
                    
  
                  1.  Отправляйся на север по улице Холстед 
  
                  2.  Поверните направо на W Diversey Pkwy 
  
                  3.  Поверните налево на N Orchard St

                  Обратный Атрибут

                  Атрибут обратный , когда он используется в элементе

                    , позволяет отображать список в обратном порядке.Упорядоченный список из пяти позиций, пронумерованных от 1 до 5 , может быть перевернут и заказан с 5 до 1 .

                    Атрибут обратный является логическим атрибутом, и поэтому он не принимает никаких значений. Это либо правда, либо ложь. False - значение по умолчанию; значение становится истинным, когда имя атрибута с обратным появляется в элементе

                      .

                        
                        
                        
                       1
2
3
4
5
6 
                        
                    1.  Отправляйся на север по улице Холстед 
  
                    2.  Поверните направо на W Diversey Pkwy 
  
                    3.  Поверните налево на N Orchard St 

 
                      4.
                      Атрибут значения

                      Атрибут значения может использоваться на отдельном элементе <900> в упорядоченном списке для изменения его значения в списке.Номер любого элемента списка, отображаемого под элементом списка с атрибутом значения , будет соответственно пересчитан.

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

                        
                        
                        
                       1
2
3
4
5
6 
                       
                        
  
                      1.  Отправляйся на север по улице Холстед 
  
                      2.  Поверните направо на W Diversey Pkwy 
  
                      3.  Поверните налево на N Orchard St

                      Описание Списки

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

                      Создание списка описания в HTML выполняется с использованием элемента уровня блока списка описания,

                      . Вместо использования элемента
                    4. для разметки элементов списка список описания требует двух элементов уровня блока: элемент термина описания
                      и элемент описания <дд> .

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

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

                      должен предшествовать элементу
                      . Термин определения и описание, которое непосредственно следует за ним, соответствуют друг другу; таким образом, порядок этих элементов важен.

                      По умолчанию элемент

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

                            
                            
                            
                           1
2
3
4
5
6
7
8
9
10
11 
                           <дл>
  <Дт> изучение 
  
                           Посвящение времени и внимания приобретению знаний по академическому предмету, особенно с помощью книг 
  <Дт> дизайн 
  
                           План или чертеж, выполненный для демонстрации внешнего вида и функций или работы здания, одежды или другого объекта до его постройки или изготовления 
  
                           Цель, планирование или намерение, которое существует или считается существующим за действием, фактом или материальным объектом 
  <Дт> бизнес 
  <Дт> работа 
  
                           Обычная профессия, профессия или профессия человека

                          Вложенных списков

                          Одна особенность, которая делает списки чрезвычайно мощными, - это их способность быть вложенными.Каждый список может быть помещен в другой список; они могут быть вложены постоянно. Но потенциал для вложения списков на неопределенный срок не дает свободного повода для этого. Списки все еще должны быть зарезервированы специально для того места, где они содержат наибольшее семантическое значение.

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

                            и
                              , является элемент
                            1. .Повторим, что единственный элемент, который мы можем поместить как прямой дочерний элемент для элементов <900> и
                                - это

                                .

                                упорядоченных списков HTML

                                Тег HTML

                                  определяет упорядоченный список. упорядоченный список может быть числовым или алфавитным.

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

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

                                    . Каждый элемент списка начинается с тега
                                  1. .

                                    Элементы списка будут помечены номерами по умолчанию:

                                    Упорядоченный список HTML - Атрибут типа

                                    Атрибут типа тега

                                      , определяет тип маркер элемента списка:

                                      Тип Описание
                                      тип = "1" Элементы списка будут пронумерованы номерами (по умолчанию)
                                      тип = "А" Элементы списка будут пронумерованы заглавными буквами
                                      type = "a" Элементы списка будут пронумерованы строчными буквами
                                      type = "I" Элементы списка будут пронумерованы прописными римскими цифрами
                                      type = "i" Элементы списка будут пронумерованы строчными римскими цифрами

                                      номеров:


                                      1. Кофе
                                      2. Чай
                                      3. Молоко

                                        Попробуй сам "

                                        Прописные буквы:


                                        1. Кофе
                                        2. Чай
                                        3. Молоко

                                          Попробуй сам "

                                          Строчные буквы:


                                          1. Кофе
                                          2. Чай
                                          3. Молоко

                                            Попробуй сам "

                                            Прописные римские цифры:


                                            1. Кофе
                                            2. Чай
                                            3. Молоко

                                              Попробуй сам "

                                              строчные римские цифры:


                                              1. Кофе
                                              2. Чай
                                              3. Молоко

                                                Попробуй сам "
                                                Подсчет контрольного списка

                                                По умолчанию упорядоченный список начнет отсчитываться от 1.Если вы хотите начать отсчет с указанного числа, вы можете использовать атрибут start :

                                                Пример


                                                1. Кофе
                                                2. Чай
                                                3. Молоко

                                                  Попробуй сам "

                                                  Вложенные HTML-списки

                                                  Списки могут быть вложенными (список внутри списка):

                                                  Пример


                                                  1. Кофе
                                                  2. Чай

                                                    1. Черный чай
                                                    2. Зеленый чай


                                                    3. Молоко

                                                      Попробуй сам "

                                                      Примечание: Элемент списка (

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

                                                      Краткое содержание главы

                                                      • Используйте элемент HTML
                                                          для определения упорядоченного списка
                                                        1. Используйте атрибут HTML type для определения типа нумерации
                                                        2. Используйте элемент HTML
                                                        3. для определения элемента списка
                                                        4. Списки могут быть вложенными
                                                        5. Элементы списка могут содержать другие элементы HTML

                                                      HTML Список Теги

                                                      тег Описание
                                                        		 Определяет неупорядоченный список
                                                          		 Определяет упорядоченный список
                                                        		1.  Определяет элемент списка
                                                          <900> Определяет список описания
                                                          		 Определяет термин в списке описания
                                                          <дд> Описывает термин в списке описания

                                                          ,

                                                          Как создавать списки в HTML5

                                                          2. Веб-дизайн и разработка
                                                          3. Разработка сайтов
                                                          4. Как создавать списки в HTML5

                                                          Автор Andy Harris

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

                                                          На этом рисунке показан неупорядоченный или маркированный список; упорядоченный или нумерованный список; и комбинированный список вложенности:

                                                          Вот код, используемый для создания списков:

                                                           

<Голова>
  <Название> listDemo.html 
  

<Тело>
  
                                                           Языки 
  
                                                            
    
                                                          •  английский 
    
                                                          •  Испанский 
    
                                                          •  японский 
  
  
                                                             Подсчет на английском языке 
  <Ол>
    
                                                          •  один 
    
                                                          •  два 
    
                                                          •  три 
  
  
                                                             Подсчет на других языках 
  
                                                              
    
                                                            •  Испанский
      <Ол>
        
                                                            •  уно 
        
                                                            •  дос 
        
                                                            •  Трес 
      
    
    
                                                            •  Японский
      <Ол>
        
                                                            •  ити 
        
                                                            •  п 
        
                                                            •  Сан -

                                                          Списки, как и большинство элементов HTML5, довольно легко построить:

                                                          1. Укажите начало списка с помощью

                                                              или
                                                                .

                                                                Тег

                                                                  указывает неупорядоченный (маркированный) список, а тег
                                                                    описывает упорядоченный (нумерованный) список.

                                                                  1. S urround каждого элемента в списке с парой

                                                                  2. .

                                                                  3. (необязательно) Списки гнезд внутри друг друга.

                                                                  4. одного списка может содержать целый новый список. Просто обязательно закройте один список, прежде чем начинать новый.Последовательный отступ помогает вам отслеживать, насколько глубоко вы вложены.

                                                                  Об авторе книги

                                                                  Энди Харрис учил себя программированию, потому что это было весело. Сегодня он преподает информатику, разработку игр и веб-программирование на университетском уровне и является технологическим консультантом в штате Индиана.

                                                                  ,

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

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