HTML списки Описание
Список описания, которое состоит из имени-значение групп, и был известен как список определений перед HTML5. Описание списки предназначены для групп «терминов и определений, тем метаданных и ценностей, вопросов и ответов, или любых других групп данных имени-значения».
DL существовали в HTML-теги, и был стандартизирован в HTML 2.0; прежнему актуальны.
Пример маркированного списка и упорядоченный список в HTML:
Неупорядоченный список:
- Пункт
- Пункт
- Пункт
- Пункт
Упорядоченный список:
- Первый пункт
- Второй пункт
- Третий пункт
- Четвертый пункт
Маркированный список HTML
Неупорядоченный список начинается с <ul> тега. Каждый элемент списка начинается с <li> тегом.
Элементы списка будут отмечены пули (small black circles) :
Неупорядоченные HTML Списки - The Style Атрибут
style атрибут может быть добавлен в виде неупорядоченного списка, чтобы определить стиль маркера:
| Стиль | Описание |
|---|---|
| list-style-type:disc | Элементы списка будут отмечены пули (default) по (default) |
| list-style-type:circle | Элементы списка будут отмечены кружками |
| list-style-type:square | Элементы списка будут отмечены квадратами |
| list-style-type:none | Элементы списка не будут помечены |
Disc :
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Попробуй сам " Circle :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Попробуй сам " Square :
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Попробуй сам " None :
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> Попробуй сам " Упорядоченные списки HTML
Упорядоченный список начинается с <ol> тег. Каждый элемент списка начинается с <li> тегом.
Элементы списка будут помечены цифрами:
Упорядоченные HTML списки - The Type Атрибут
type атрибута может быть добавлен в упорядоченный список, чтобы определить тип маркера:
| Тип | Описание |
|---|---|
| type="1" | Элементы списка будут пронумерованы цифрами (default) по (default) |
| type="A" | Элементы списка будут пронумерованы заглавными буквами |
| type="a" | Элементы списка будут пронумерованы строчными буквами |
| type="I" | Элементы списка будут пронумерованы заглавными римскими цифрами |
| type="i" | Элементы списка будут пронумерованы строчными римскими цифрами |
Прописные римские цифры:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Попробуй сам " Строчные римские цифры:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol> Попробуй сам " HTML Описание Списки
HTML также поддерживает описание списков.
Список описания список терминов, с описанием каждого термина.
<dl> Тег определяет список Описания, <dt> тэг определяет термин (name) , а <dd> тег описывает каждый термин:
пример
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl> Попробуй сам " Вложенные списки HTML
Список может быть вложенными (lists inside lists) :
пример
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul> Попробуй сам " Элементы списка могут содержать новый список, и другие HTML-элементы, как изображения и ссылки, и т.д.
Горизонтальные списки
списки HTML могут быть оформлены по-разному с помощью CSS.
Один популярный способ, это стиль списка, который будет отображаться в горизонтальном положении:
пример
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html> Попробуй сам " С небольшим дополнительным стилем, вы можете сделать его похожим на меню:
пример
ul#menu {
padding: 0;
}
ul#menu li {
display: inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
} Попробуй сам " Краткое содержание главы
- Используйте HTML <ul> элемент для определения маркированного списка
- Используйте HTML style атрибут для определения стиля пули
- Используйте HTML <ol> элемент для определения упорядоченного списка
- Используйте HTML type атрибут для определения типа нумерации
- Используйте HTML <li> элемент для определения элемента списка
- Используйте HTML <dl> элемент для определения списка описания
- Используйте HTML <dt> элемент для определения термина описания
- Используйте HTML <dd> элемент для определения описания данных
- Списки могут быть вложенными внутри списков
- Элементы списка могут содержать другие элементы HTML
- Используйте дисплей свойства CSS: инлайн для отображения списка по горизонтали
Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»
HTML теги
| Тег | Описание |
|---|---|
| <ul> | Определяет неупорядоченный список |
| <ol> | Определяет упорядоченный список |
| <li> | Определяет элемент списка |
| <dl> | Определяет список описания |
| <dt> | Определяет термин в списке описаний |
| <dd> | Определяет описание в списке описаний |