Введение в HTML
HTML-теги
Тег: <имя_тега>
Примеры тегов: <html> <body> <section> <article> <div> <h1> <nav> <ul> <ol> <li> <p> <a> <strong> <em> <time> <mark> <img> <video> <audio> <form> <input> <button> <label>
<!— А я комментарий! —>
<h1>Три главных слова</h1>
<p> Инкапсуляция, наследование, полиморфизм! </p>
Одиночные теги
<hr> <!— разделитель —> <br> <!— перенос строки —> <input type=»text»> <!— поле ввода —> <img src=»logo.png»> <!— изображение —>
<p> Текст абзаца с <em>выделением</em> </p>
<ul> <li>элемент списка</li> <li>элемент списка</li> </ul>
Ошибки вложенности
<!— Неверный порядок закрытия —> <strong><em>жирный</strong> курсив</em> <!— Правила для отдельных тегов —>
<ul> <p>название списка</p> <li>элемент списка</li> </ul>
Атрибутов может быть несколько.
Некоторые теги не могут использоваться без атрибутов.
Простейшая страница
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок окна</title> </head> <body> <!-- Содержимое --> </body> </html>
Страница сложнее
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок окна</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Заголовок 1</h1> <p>Абзац - это лучшее, что у нас есть!</p> <script src="scripts.js"></script> </body> </html>
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>
10.3 Списки определений: элементы DL, DT и DD
<!-- списки определений - DT - термин, DD - его определение -->
<!ELEMENT - - (DT|DD)+ -- список определений -->
<!ATTLIST DL
-- , , --
>
Начальный тег: обязателен, Конечный тег: обязателен
<!ELEMENT - O ()* -- термин -->
<!ELEMENT - O ()* -- определение -->
<!ATTLIST (DT|DD)
-- , , --
>
Начальные тег: обязателен, Конечный тег: не обязателен
Атрибуты, определяемые в любом другом месте
- , ()
- (), ()
- ()
- ()
- , , , , , , , , , ()
Списки определений незначительно отличаются от других типов списков — тем, что элементы состоят из двух частей: термина и определения. Термин обозначается с помощью элемента и может иметь только встроенное содержимое. Описание указывается с помощью элемента , имеющим содержимое уровня блока.
Пример:
<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets
his wife's birthday
</DL>
Вот пример с несколькими терминами и определениями:
<DL>
<DT>Center
<DT>Centre
<DD> A point equidistant from all points
on the surface of a sphere.
<DD> In some field sports, the player who
holds the middle position on the field, court,
or forward line.
</DL>
Другим применением элемента , например, может быть разметка диалогов, где каждый элемент означает говорящего, а в каждом элементе содержатся его слова.
10.3.1 Визуальное отображение списков
Примечание.Ниже приводится информативное описание поведения некоторых имеющихся на настоящий момент визуальных агентов пользователей при форматировании списков. Таблицы стилей предоставляют большие возможности управления форматированием списков (например, в отношении нумерации, соглашений, используемых в разных языках, отступов и т.д.).
Визуальные агенты пользователей обычно сдвигают вложенные списки соответственно уровню вложенности.
Для элементов и атрибут определяет параметры генерации для визуальных агентов пользователей.
Для элемента возможными значениями атрибута являются disc, square и circle. Значение, используемое по умолчанию, зависит от уровня вложенности текущего списка. Эти значения не учитывают регистр.
Представление каждого значения зависит от агента пользователя. Агенты пользователей должны пытаться представлять «disc» в виде небольшого заполненного кружка, «circle» — в виде окружности, а «square» в виде небольшого квадрата.
Графические агенты пользователь могут генерировать их как:
для значения «disc» для значения «circle» для значения «square»
Для элемента возможные значения атрибута приведены в следующей таблице (они учитывают регистр):
| Type | Стиль нумерации | |
|---|---|---|
| 1 | арабские цифры | 1, 2, 3, … |
| a | буквы нижнего регистра | a, b, c, … |
| A | буквы верхнего регистра | A, B, C, … |
| i | римские цифры в нижнем регистре | i, ii, iii, … |
| I | римские цифры в верхнем регистре | I, II, III, … |
Помните, что использование атрибута , и стили списков должны определяться с помощью таблиц стилей.
Например, с помощью CSS можно указать, что стиль нумерации для элементов списка в нумерованном списке — римские цифры нижнего регистра. В приведенном ниже примере каждый элемент , принадлежащий классу «withroman», обозначается римской цифрой.
<STYLE type="text/css">
OL.withroman { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL class="withroman">
<LI> Шаг один ...
<LI> Шаг два ...
</OL>
</BODY>
Генерация списка определений также зависит от агента пользователя. Например, список:
<DL>
<DT>Dweeb
<DD>young excitable person who may mature
into a <EM>Nerd</EM> or <EM>Geek</EM>
<DT>Cracker
<DD>hacker on the Internet
<DT>Nerd
<DD>male so into the Net that he forgets
his wife's birthday
</DL>
может генерироваться следующим образом:
Dweeb
young excitable person who may mature into a Nerd or Geek
Cracker
hacker on the Internet
Nerd
male so into the Net that he forgets his wife's birthday
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>
10.2 Неупорядоченные списки (UL), упорядоченные списки (OL) и элементы списков (LI)
<!ELEMENT - - (LI)+ -- неупорядоченный список -->
<!ATTLIST UL
-- , , --
>
<!ELEMENT - - (LI)+ -- упорядоченный список -->
<!ATTLIST OL
-- , , --
>
Начальный тег: обязателен, Конечный тег: обязателен
<!ELEMENT - O ()* -- элемент списка -->
<!ATTLIST LI
-- , , --
>
Начальный тег: обязателен, Конечный тег: не обязателен
Определения атрибутов
- type = информация о стиле
-
Этот атрибут устанавливает стиль элемента списка. Доступные в настоящее время значения предназначены для визуальных агентов пользователей. описаны ниже (включая информацию о регистре).
-
start
= -
Только для . Этот атрибут задает начальный номер первого элемента в упорядоченном списке. По умолчанию начальный номер — «1». Помните, что, хотя значением этого атрибута является целое число, соответствующая метка может быть нецифровая. Если в качестве стиля выбраны латинские буквы верхнего регистра (A, B, C, …), start=3 означает «C». Если в качестве стиля выбраны римские цифры нижнего регистра,
start=3 означает «iii» и т.д. - value =
-
Только для . Этот атрибут устанавливает номер текущего элемента списка. Помните, что, хотя значением атрибута является целое число, соответствующая метка может быть нечисловая (см. атрибут ).
- compact
- Если этот логический атрибут установлен, он сообщает визуальным агентам пользователей о том, что генерировать список нужно более компактно. Интерпретация этого атрибута зависит от агента пользователя.
Атрибуты, определяемые в любом другом месте
- , ()
- (), ()
- ()
- ()
- , , , , , , , , , ()
Упорядоченные и неупорядоченные списки генерируются одинаково за исключением того, что визуальные агенты пользователей нумеруют упорядоченные списки. Агенты пользователей могут представлять эти номера несколькими способами. Элементы неупорядоченного списка не нумеруются.
Оба эти типа списков состоят из последовательностей элементов списков, определяемых элементом LI (конечный тег которого можно опустить).
В этом примере показана общая структура списка.
<UL> <LI> ... первый элемент списка... <LI> ... второй элемент списка... ... </UL>
ПРИМЕР НЕЖЕЛАТЕЛЬНОГО ИСПОЛЬЗОВАНИЯ:
<UL>
<LI> ... Уровень один, номер один...
<OL>
<LI> ... Уровень два, номер один...
<LI> ... Уровень два, номер два...
<OL start="10">
<LI> ... Уровень три, номер один...
</OL>
<LI> ... Уровень два, номер три...
</OL>
<LI> ... Уровень один, номер два...
</UL>
Информация о порядке номеров. В упорядоченных списках невозможно продолжать нумерацию автоматически из предыдущего списка или убрать нумерацию для некоторых элементов. Однако авторы могут пропустить несколько элементов списка, установив для них атрибут value. Нумерация для последующих элементов списка продолжается с нового значения. Например:
<ol> <li value="30"> элемент списка номер 30. <li value="40"> элемент списка номер 40. <li> элемент списка номер 41. </ol>
Какие бывают списки в HTML?
Как Вы наверное все знаете, списки бываю разные и их огромное количество. Мы с Вами сегодня разберем самые часто встречающиеся и наиболее востребованные среди вебмастеров. Эти виды списков чаще всего нужны для создания сайтов и построения веб-страниц.
Вы начинающий вебмастер? Тогда Вам просто необходимо знать сервис, который поможет создать и продвинуть сайт с нуля – http://profi-site.info/sozdanie-sajtov-v-adlere.html
Разделяются все списки по классам или видам на:
1. Маркированные списки в html2. Нумерованные списки в html3. Выпадающие списки в html4. Списки определений в html
Теперь давайте разберем каждый в отдельности и научимся создавать их самостоятельно без применения разного рода редакторов, такого как например есть WordPress.
Как делают маркированные списки в html?
Данного вида списки в html создаются при помощи тега ul, который и будет отвечать за маркировку создаваемого списка.
Для того, чтобы создать такой список необходимо заключить его в открывающийся тег <ul> и соответственно, закрывающийся тег </ul>. Например создадим вот такого вида маркированный список:
<ul> <li>Строка маркированного списка в html первая</li> <li>Строка маркированного списка в html вторая</li> <li>Строка маркированного списка в html третья</li> <li>Строка маркированного списка в html четвертая</li> </ul>
Теперь давайте посмотрим пример того, что из этого у нас с вами выйдет, когда мы его поместим на сайт:
- Строка маркированного списка в html первая
- Строка маркированного списка в html вторая
- Строка маркированного списка в html третья
- Строка маркированного списка в html четвертая
Получилось совсем неплохо на мой взгляд. А как Вам кажется?
Как делают нумерованные списки в html?
Для этих списков используется другой тег. За вывод списка отвечает тег ol. Соответственно открывающийся <ol> и закрывающийся </ol>. За каждый отдельный пункт в нумерованном списке в ответе тег li. Как Вы уже наверное сами догадались, также этот тег должен иметь свою пару. Отрывающийся <li> и закрывающийся </li> теги.
Вот пример создания нумерованного списка в html:
<ol> <li>Строка нумерованного списка в html первая</li> <li>Строка нумерованного списка в html вторая</li> <li>Строка нумерованного списка в html третья</li> <li>Строка нумерованного списка в html четвертая</li> </ol>
А вот, что из этого получается, когда мы вставляем данный список в html на свой сайт:
- Строка нумерованного списка в html первая
- Строка нумерованного списка в html вторая
- Строка нумерованного списка в html третья
- Строка нумерованного списка в html четвертая
Получилась замечательная нумерация!
Теперь узнаем как сделать выпадающий список в html
Как и для остальных списков, чтобы создать выпадающий список нужны специальные теги: select и option. Они нам с вами помогут сделать просто чудо!
Вот пример создания выпадающего списка в html:
Строка выпадающего списка в html перваяСтрока выпадающего списка в html втораяСтрока выпадающего списка в html третьяСтрока выпадающего списка в html четвертая
Правда замечательный выпадающий список получился?! Оказывается все не так уж и сложно!
И теперь последний на сегодня вид из все рассматриваемых списков в html …
Узнаем как сделать список определений в html?
Списки такого типа нужны для того, например, чтобы выделить какой либо термин или класс. В данном случае я выделил автора блога и его посетителей. Какие теги для этого используются, Вы сами видите:
<dl> <dt>Автор блога:</dt> <dd>Валерий Бородин</dd> <dt>Посетители:</dt> <dd>Друзья</dd> <dd>Гости</dd> </dl>
А вот так получилось после вставки на сайт в текстовом режиме:
- Автор блога:
- Валерий Бородин
- Посетители:
- Друзья
- Гости
Если Вам вдруг потребуется редактор кода html, то посмотрите вот этот материал. Думаю, что он Вам точно пригодится?!
На этом все на сегодня. Всем удачи и благополучия! До новых встреч!
Многоуровневый маркированный список HTML
С помощью установленных в браузерах патчей поддержки (и иногда с помощью отмены CSS для некоторых сайтов) можно создать маркированный многоуровневый список HTML. Это достигается за счет встраивания одного списка в другой:
<ul> <li>Элемент верхнего уровня</li> <ul> <li>Подчиненный элемент 1</li> <li>Подчиненный элемент 2</li> </ul> <li> Элемент верхнего уровня</li> </ul>
Что дает нам:
• Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 • Элемент верхнего уровня
Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.
1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня
Используйте нумерованные списки HTML на своих страницах.
Вложенные списки и неограниченные возможности стилизации номеров строк.
Вот более интересный пример, сделанный по тому же принципу. Мы не будем приводить в статье html и сss, просто загляните в исходный код.
стилизованный список ol рецепт
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега <ol>, который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом <li>, как показано ниже.
Если не указывать никаких дополнительных атрибутов и просто написать тег <ol>, то по умолчанию применяется список с арабскими числами (1, 2, 3,…), как показано в примере 11.3.
Пример 11.3. Создание нумерованного списка
Результат данного примера показан на рис. 11.3.
Рис. 11.3. Вид нумерованного списка
Заметьте, что в нумерованном списке также добавляются автоматические отступы сверху, снизу и слева от текста.
В качестве нумерующих элементов могут выступать следующие значения:
- арабские числа (1, 2, 3, …);
- прописные латинские буквы (A, B, C, …);
- строчные латинские буквы (a, b, c, …);
- прописные римские числа (I, II, III, …);
- строчные римские числа (i, ii, iii, …).
Для указания типа нумерованного списка применяется атрибут type тега <ol>. Его возможные значения приведены в табл. 11.2.
| Тип списка | Код HTML | Пример |
|---|---|---|
| Арабские числа | <ol type=»1″> <li>…</li> </ol> | 1. Чебурашка 2. Крокодил Гена 3. Шапокляк |
| Прописные буквы латинского алфавита | <ol type=»A»> <li>…</li> </ol> | A. Чебурашка B. Крокодил Гена C. Шапокляк |
| Строчные буквы латинского алфавита | <ol type=»a»> <li>…</li> </ol> | a. Чебурашка b. Крокодил Гена c. Шапокляк |
| Римские числа в верхнем регистре | <ol type=»I»> <li>…</li> </ol> | I. Чебурашка II. Крокодил Гена III. Шапокляк |
| Римские числа в нижнем регистре | <ol type=»i»> <li>…</li> </ol> | i. Чебурашка ii. Крокодил Гена iii. Шапокляк |
Чтобы начать список с определенного значения, используется атрибут start тега <ol>. При этом не имеет значения, какой тип списка установлен с помощью type, атрибут start одинаково работает и с римскими и с арабскими числами. В примере 11.4 показано создание списка с использованием римских цифр в верхнем регистре, начинающихся с восьми.
Пример 11.4. Нумерация списка
Результат данного примера показан на рис. 11.4.
Рис. 11.4. Нумерованный список с римскими числами
Как оформить нумерованный список?
Нумерованный список с использованием фона
Цифры на фоне цветных квадратов в стиле сайта прекрасно оживят дизайн.
Найдите в файле style.css стили для тега ol. Обновите его свойства.
ol {
padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #2E2E2E;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}
ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #2E2E2E;
position: relative;
}
ol li:before {
margin-bottom: 4px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #BDC3C7;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}
Синтаксис кода предельно прост.
list-style-type: none; — вывод стандартных цифр
counter-reset: point; — переменная для счетчика нумерации
position: relative; — размещение нумерации возле самих пунктов списка
before — псевдоэлемент для тегов ul, ol
content: counter(point); — вывод значения переменной
counter-increment: point 1; — увеличение счетчика на 1
position: absolute;
background: #BDC3C7; — фон для цифр (конкретный цвет или красивая иконка)
margin — внешние отступы
padding — внутренние отступы
color — цвет текста элемента
background — фон
text-align — выравнивание текста
font-weight — толщина (насыщенность) шрифта
В стилях можно задать любые цвета, выравнивания, размеры шрифта и отступы.
Нумерованный список с уникальным изображением для каждого пункта
Сайты о моде и красоте требуют ярких красок.
Код не сложный.
/*первый номер*/
ol li:first-child {
list-style-image: url(путь к изображению с цифрой 1);
}
/*второй номер*/
ol li:nth-child(2n) {
list-style-image: url(путь к изображению с цифрой 2);
}
/*третий номер*/
ol li:nth-child(3n) {
list-style-image: url(путь к изображению с цифрой 3);
}
/*четвертый номер*/
ol li:nth-child(4n) {
list-style-image: url(путь к изображению с цифрой 4);
}
/*Далее прописываем точно также только для следующих номеров пунктов*/
Идея проста: перечислить все номера пунктов и назначить для каждого уникальную иконку.
Если в списках предусмотрено использование до 20 нумерованных пунктов, то прописывают псевдокласс nth-child(An) 20 раз. Последним указывают псевдокласс nth-child(20n).
В строках, описывающих оформление нумерованного списка дописывают псевдокласс first-child. Необходимо скопировать и вставьте его один раз, затем изменить данное свойство на nth-child(An) и скопировать столько, сколько номеров пунктов должно иметь свою иконку, а потом проставить номера пунктов.
Для каждого номера указывают свойство list-style-image с собственной уникальной иконкой.
Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.
Маркированный список
Самый простой — перед каждым его элементом стоит маркер — кружок, квадрат или окружность. Последовательность элементов в маркированном списке не важна.
Чтобы его создать, нужно использовать всего два тега: <ul> и <li>. <ul> — это контейнер, содержащий список, элементы которого задаются тегом <li>.
<!DOCTYPE html>
<html>
<head>
<title>Маркированный список</title>
</head>
<body>
<ul>
<li>Камень</li>
<li>Ножницы</li>
<li>Бумага</li>
</ul>
</body>
</html>
По умолчанию в качестве маркера списка используется чёрный кружок (disk). Добавив в тег <ul> атрибут type и присвоив ему соответствующее значение, маркер можно сменить на окружность (circle) или чёрный квадрат (square).
Description Lists
Another type of list seen online (but not as often as unordered or ordered lists) is the description list. Description lists are used to outline multiple terms and their descriptions, as in a glossary, for example.
Creating a description list in HTML is accomplished using the description list block-level element, . Instead of using a element to mark up list items, the description list requires two block-level elements: the description term element, , and the description element, .
A description list may contain numerous terms and descriptions, one after the other. Additionally, a description list may have multiple terms per description, as well as multiple descriptions per term. A single term may have multiple meanings and warrant multiple descriptions. Conversely, a single description may be suitable for multiple terms.
When adding a description list, the element must come before the element. The definition term and the description that directly follows it correspond to one another; thus, the order of these elements is important.
By default, the element will include vertical margins, just like the and elements. Additionally, the element includes a left by default.
Что такое и что означает A и IMG
От простого — к сложному. В техническом задании на статью не редко можно встретить требования по оформлению ссылок и картинок специальными тегами. Именно теги A и IMG служат для этого.
- Тег <a> — это тег указывающий что в нем находится ссылка;
- Тег <img> — указывает на картинку.
Как использовать тег A
Если предыдущие, рассмотренные нами, теги просто обрамляли какой-либо текст. То тег A не просто указывает на то, что текст — это ссылка, но и несет в себе определённые параметры;
- href — адрес ссылки;
- title — всплывающая подсказка ссылки.
Каждый параметр, после его написания внутри тега, должен иметь свое значение. Указываются значения в двойных кавычках и со знаком равенства.
Пример:
Оформление ссылки тегом A
Из примера видно, что в параметре href — указан адрес ссылки, а в параметре title — описание. Сам же тег обрамляет текст, который будет подсвечен как ссылка на странице.
Тег A, может встречаться в любом месте документа. В том числе и внутри тега абзаца, в самом тексте.
Стоит отметить что параметр title — не обязателен, но желателен. И описание ссылки должно соответствовать тематике сайта (на который ведет данная ссылка).
Как использовать тег IMG
Тег IMG также имеет свои параметры. Но в отличии от остальных, не имеет закрывающего тега, так как не обрамляет текст. Он является самостоятельной конструкцией для вставки изображений в документ.
Тег IMG имеет следующие параметры:
- src — ссылка на изображение;
- alt — альтернативное отображение изображения;
- title — всплывающая подсказка изображения.
Параметры src и alt — обязательны для использования, параметр title — желателен.
Стоит обратить внимание на параметр alt. Он предназначен для того, чтобы в него можно было внести текстовое описание изображения
Служит он для устройств, помогающим людям с ограниченными возможностями, понять, что изображено на картинке.
Пример:
Вставка изображения в статью
10.1 Introduction to lists
- Unordered information.
- Ordered information.
- Definitions.
The previous list, for example, is an unordered list, created with the
element:
<UL> <LI>Unordered information. <LI>Ordered information. <LI>Definitions. </UL>
An ordered list, created using the element, should contain information
where order should be emphasized, as in a recipe:
- Mix dry ingredients thoroughly.
- Pour in wet ingredients.
- Mix for 10 minutes.
- Bake for one hour at 300 degrees.
Definition lists, created using the element, generally consist of a
series of term/definition pairs (although definition lists may have other
applications). Thus, when advertising a product, one might use a definition
list:
- Lower cost
- The new version of this product costs significantly less than the previous
one! - Easier to use
- We’ve changed the product so that it’s much easier to use!
- Safe for kids
- You can leave your kids alone in a room with this product and they won’t
get hurt (not a guarantee).
defined in HTML as:
<DL> <DT><STRONG>Lower cost</STRONG> <DD>The new version of this product costs significantly less than the previous one! <DT><STRONG>Easier to use</STRONG> <DD>We've changed the product so that it's much easier to use! <DT><STRONG>Safe for kids</STRONG> <DD>You can leave your kids alone in a room with this product and they won't get hurt (not a guarantee). </DL>
Lists may also be nested and different list types may be used together, as
in the following example, which is a definition list that contains an unordered
list (the ingredients) and an ordered list (the procedure):
- The ingredients:
-
- 100 g. flour
- 10 g. sugar
- 1 cup water
- 2 eggs
- salt, pepper
- The procedure:
-
- Mix dry ingredients thoroughly.
- Pour in wet ingredients.
- Mix for 10 minutes.
- Bake for one hour at 300 degrees.
- Notes:
- The recipe may be improved by adding raisins.
The exact presentation of the three list types depends on the user agent. We
discourage authors from using lists purely as a means of indenting text. This
is a stylistic issue and is properly handled by style sheets.
Еще примеры
Пример
Установите различные типы списков (с помощью 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>
Основные теги
-
Структура и инструкции для построения HTML-документа:
- <!DOCTYPE>. Указывается в первой строке документа и означает: «Этот документ написан на HTML5». Не представлен в дереве документа DOM. Обязателен для корректного применения CSS.
- html. Главный тег, сообщает браузеру, что это HTML-документ. Находится в основании дерева DOM и он – корневой элемент, или элемент верхнего уровня.
- head. Не всю информацию надо показывать на странице. Служебная информация – в «голове» документа.
-
title,
link. Служебная информация: краткий заголовок и ссылки на внешние файлы (иконка, стилевой файл). Определяются в head. - meta. Любая информация о мета-данных, которая не может быть представлена другими, ориентированными на мета-данные, HTML элементами. Например, кодировка страницы.
- body. Все видимое в окне, вкладке браузера содержимое – в «теле» страницы.
- комментарии: <!— игнорируются при построении страницы —>.
-
Основная разметка
- Заголовки h1-h6. Заголовки и подзаголовки улучшают читаемость текста.
-
p и
br. Параграф и принудительный перенос на новую строку. Заголовки нельзя вкладывать в параграфы! - hr. Разделитель содержимого, горизонтальная линия (display: block).
-
img. Картинка, изображение (display: inline-block). В обязательном атрибуте src указывается путь к файлу или его URL. Распространенные форматы изображений: jpeg, png, svg, webp
(пример webp): -
ul и
ol,
li: ненумерованный и нумерованный списки, элемент списка (display: list-item). - a. Ссылка. Атрибуты download, href, target и т.д.Якорь — это название после символа #, который указывает на элемент (идентификатор, ID) на текущей странице.
- Стилистически выделенные строчные элементы:b (полужирный, font-weight: bold),
i (курсив, font-style: italic),u (подчеркнутый, text-decoration: underline),
s (перечеркнутый, text-decoration: line-through). - sub (vertical-align: sub; font-size: smaller;), sup (vertical-align: super; font-size: smaller).
-
Семантическая разметка
- header. «Шапка» страницы. Не путать с head!
- footer «Подвал» страницы.
- main. Основное содержимое страницы.
- section. Раздел, секция.
- article. Статья.
Семантические теги по свойствам повторяют тег div.
Как создать нумерованный список — тег ol
Если вы хотите упорядочить элементы списка, тогда тег <ol> поможет в этом. По умолчанию он задает нумерованный список HTML:
<ol type="A">
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
</ol>
что на выходе дает нам:
A. Элемент 1 B. Элемент 2 C. Элемент 3
Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.
Как сделать нумерованный список в HTML с определенного номера
Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.
Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А). Это бы внесло неразбериху в ваше руководство!
К счастью, в HTML есть свойство start, которое позволяет начать нумерацию с указанного номера:
<ol start="4"> <li>Шаг четыре</li> <li>Шаг пять</li> <li>Шаг шесть</li> </ol>
Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть
Нумерованный список HTML — обратный порядок
Если вы хотите вывести номера (или буквы) в обратном порядке, то это можно сделать, добавив в тег, создающий нумерованный список HTML ключевое слово reversed:
<ol reversed> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> <li>Четвертый пункт</li> <li>Пятый пункт</li> </ol>
В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт.
Маркированные списки (или ненумерованные списки)
Первый вид списка, который мы рассмотрим, это маркированный.
Ненумерованные списки — тег <ul>
Маркированный список также известен как ненумерованный, потому в нем нет нумерации элементов. Для маркированного списка используется пара тегов <ul> </ul>. Ниже приводится простой его пример:
Сначала весь список берется в теги <ul> </ul>. При открытии тега списка, убедитесь, что вы закрыли его, а затем переходите к заполнению пунктов списка.
Атрибут type
Атрибут type определяет, какой тип маркера вы увидите на странице. Хотя с помощью CSS можно задать широкий диапазон стилей маркеров, и даже использовать собственное изображение, но лучше придерживаться основных типов (в том числе и в нумерованном списке HTML):
Элементы списка — тег <li>
Каждый элемент в списке обворачивают в отдельную пару тегов <li> </ li>. Часто можно обойтись и без <li>, но я бы рекомендовал придерживаться этого правила.
Приведенный выше список помещен в отдельный тег <ul>, но каждый <li> также поддерживает собственный атрибут type, и таким образом можно создать следующий список:
Отступ маркированного списка
Перед тем, как к списку будет применен любой стиль CSS, HTML (а точнее браузер) применяет к нему отступы, поэтому он отличается от обычного абзаца с тегом <p>.
Упорядоченный / нумерованный список — тег <ol>
Если вы хотите упорядочить элементы списка, тогда тег <ol> поможет в этом. По умолчанию он задает нумерованный список HTML:
что на выходе дает нам:
A. Элемент 1 B. Элемент 2 C. Элемент 3
Атрибут type дает возможность использовать еще несколько дополнительных вариантов оформления нумерованных списков по сравнению с маркированными.
Начало нумерованного списка с определенного номера
Предположим, вы сводите воедино инструкции для создания таблиц. Вы можете использовать для этого нумерованный список. После каждого пункта вы хотите размещать изображения и дополнительный текст, и вам в этом случае потребуется несколько списков.
Проблема заключается в том, что по умолчанию каждый список начинается с номера 1 (или буквы А). Это бы внесло неразбериху в ваше руководство!
К счастью, в HTML есть свойство start, которое позволяет начать нумерацию с указанного номера:
Что дает нам следующее: 4. Шаг четыре 5. Шаг пять 6. Шаг шесть
Обратный порядок
Если вы хотите вывести номера (или буквы) в обратном порядке, то это можно сделать, добавив в тег нумерованного списка в HTML ключевое слово reversed:
В результате список будет выглядеть следующим образом: 5. Пятый пункт. 4. Четвертый пункт. 3. Третий пункт. 2. Второй пункт. 1. Первый пункт.
Многоуровневый маркированный список в HTML
С помощью установленных в браузерах патчей поддержки (и иногда с помощью отмены CSS для некоторых сайтов) можно создать HTML многоуровневый нумерованный список. Это достигается за счет встраивания одного списка в другой:
Что дает нам:
• Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 • Элемент верхнего уровня
Вы можете использовать комбинацию тегов <ul> и <ol>. Это может пригодиться, если нужно обозначить маркерами подпункты нумерованного списка.
1. Элемент верхнего уровня o Подчиненный элемент 1 o Подчиненный элемент 2 2. Элемент верхнего уровня
Используйте нумерованные списки HTML на своих страницах.
Заключение
Перевод статьи «Numbered and Bullet Point Lists in HTML» был подготовлен дружной командой проекта Сайтостроение от А до Я.
Итог
Итак, в данной статье вы узнали, что списком можно назвать взаимосвязанные однородные контейнеры (состоящие из предложений или отдельных фраз), располагающиеся друг за другом и начинающиеся с цифр, маркеров или не имеющие обозначений.
Также вы узнали, что есть список определений, для представления в удобном виде пар типа «термин-определение» или «термин-перевод».
В этой статье я привел достаточное количество примеров кода, а также скриншотов, чтобы вы доскональном могли ориентироваться в теме создания различных списков: нумерованных и ненумерованных, упорядоченных и неупорядоченных, маркированных и немаркированных (без маркеров), одно- и многоуровневых (вложенных и древовидных), а также списков определений.
Такие списки, при правильном их использовании, позволят систематизировать и разместить информацию на странице удобным для пользователя образом. В конце концов, списки появились еще тогда, когда интернета в помине не было.
Поэтому не пренебрегайте HTML-списками, учитесь их использовать правильно и умело размещайте на страницах ваших сайтов.
