Атрибуты value Устанавливает значение атрибута в машиночитаемой форме.
33) Создаёт список вариантов, которые можно выбирать при наборе в текстовом поле. Изначально этот список скрыт и становится доступным при получении полем фокуса или при наборе текста.
<input list="<идентификатор>">
<datalist id="<идентификатор>">
<option value="Текст1">
<option value="Текст2">
</datalist>
Атрибуты Список, создаваемый элементом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list элемента <input>.
Рис. 1. Использование <datalist>
34) Элемент <dd> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.
<dl>
<dt>Термин 1</dt>
<dd>Описание термина 1</dd>
<dt>Термин 2</dt>
<dd>Описание термина 2</dd>
</dl>
Закрывающий тег Не обязателен.
35) Элемент <del> используется для выделения текста, который был удалён в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечёркнутый.
<del>Текст</del>
Атрибуты:
cite
Указывает ссылку на документ, где приведена причина редактирования текста и другие подробности.
datetime
Дата и время редактирования текста.
36) Элемент <details> используется для хранения информации, которую можно скрыть или показать по требованию пользователя. По умолчанию содержимое элемента не отображается, для изменения статуса применяется атрибут open.
Исходно содержимое <details> скрыто, вместо него выводится текст «Подробнее», щелчок по которому прячет или показывает содержимое элемента.
<details>Текст</details>
Атрибуты: open Показывает информацию внутри элемента.
37) Как правило, в документе, когда упоминается новый термин, он выделяется курсивом и даётся его определение. При использовании этого термина в дальнейшем, он считается уже известным читателю. Элемент <dfn> применяется для выделения таких терминов при их первом появлении в тексте.
Браузеры, как правило, отображают содержимое контейнера <dfn> с помощью курсивного начертания.
Определение термина задаётся с помощью атрибута title у элемента <dfn>, либо с помощью атрибута title у вложенного элемента <abbr>, либо текстом внутри <dfn>.
<dfn>Текст</dfn>
38) Представляет собой диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт.
Диалоговое окно отображается со следующим предустановленным стилем.
position: absolute;
left: 0;
right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;
Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.
Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и hide(), как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal(). В этом случае остальные элементы на странице блокируются — текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc.
<dialog open>
...
</dialog>
Атрибуты: open - Отображает диалоговое окно. Без этого атрибута в стилях к нему добавляется display: none и окно не выводится в браузере.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dialog</title>
<style>
body {
background: url(/example/image/shark.jpg) no-repeat;
background-size: cover;
}
dialog {
background: rgba(255, 255, 255, 0.7);
width: 300px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
border-radius: 5px;
}
</style>
</head>
<body>
<button id="openDialog">Открыть окно</button>
<dialog>
<p>Полинезийцы называют Млечный путь Манго-Роа-И-Ата,
что в переводе с маори означает «Длинная акула на рассвете».</p>
<p><button id="closeDialog">Закрыть окно</button></p>
</dialog>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#openDialog').onclick = function() {
dialog.show(); // Показываем диалоговое окно
}
document.querySelector('#closeDialog').onclick = function() {
dialog.close(); // Прячем диалоговое окно
}
</script>
</body>
</html>
Результат данного примера показан на рис. 1. При нажатии на кнопку «Открыть окно» отображается содержимое элемента <dialog>, до этого невидимое. При нажатии на кнопку «Закрыть окно» диалоговое окно скрывается.
Рис. Вид диалогового окна
39) Элемент <dir> создаёт список, содержащий названия директорий (системные папки). Аналогично элемента <ol> и <ul> внутри контейнера <dir> список формируется с помощью <li>.
Данный элемент устарел, вместо него используйте <ul>.
<dir>
<li>имя директории</li>
<li>имя директории</li>
</dir>
40) Элемент <div> является универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили. Для этого добавляется атрибут class или id с именем класса или идентификатора.
Как и при использовании других блочных элементов, содержимое <div> всегда начинается с новой строки, после него также добавляется перенос строки.
<div>...</div>
41) Элемент <dl> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.
<dl>
<dt>Термин 1</dt>
<dd>Описание термина 1</dd>
<dt>Термин 2</dt>
<dd>Описание термина 2</dd>
</dl>
42) Элемент <dt> входит в тройку элементов <dl>, <dt>, <dd>, предназначенных для создания списка описаний. Каждый такой список начинается с контейнера <dl>, куда входит элемент <dt> создающий термин и элемент <dd> задающий описание этого термина.
<dl>
<dt>Термин 1</dt>
<dd>Описание термина 1</dd>
<dt>Термин 2</dt>
<dd>Описание термина 2</dd>
</dl>