Тег <time>
HTML тег <time> представляет временную метку в документе HTML. Он используется для указания даты, времени или их комбинации.
Пример использования тега <time>:
В данном примере мы указываем, что наша временная метка соответствует 1 января 2022 года. Атрибут datetime используется для указания конкретной даты и времени в формате ГГГГ-ММ-ДД.
Однако, тег <time> не ограничивается только датами. Он также может быть использован для указания времени:
В этом случае мы указываем, что временная метка соответствует 12:30 PM.
Тег <time> также поддерживает комбинированные значения, включающие и дату, и время:
Этот пример указывает, что временная метка соответствует 1 января 2022 года, 12:30 PM.
Тег <time> особенно полезен для поисковых систем и адаптивного дизайна. Поисковые системы могут использовать информацию из тега <time> для индексации дат и времени, а адаптивный дизайн может автоматически адаптировать формат и отображение временных меток в зависимости от устройства пользователя.
Тег <time> является одним из многих полезных инструментов, предоставляемых HTML для более точного и информативного описания контента.
#html | #теория
HTML тег <time> представляет временную метку в документе HTML. Он используется для указания даты, времени или их комбинации.
Пример использования тега <time>:
<time datetime="2022-01-01">1 января 2022</time>
В данном примере мы указываем, что наша временная метка соответствует 1 января 2022 года. Атрибут datetime используется для указания конкретной даты и времени в формате ГГГГ-ММ-ДД.
Однако, тег <time> не ограничивается только датами. Он также может быть использован для указания времени:
<time datetime="12:30">12:30 PM</time>
В этом случае мы указываем, что временная метка соответствует 12:30 PM.
Тег <time> также поддерживает комбинированные значения, включающие и дату, и время:
<time datetime="2022-01-01T12:30">1 января 2022 года, 12:30 PM</time>
Этот пример указывает, что временная метка соответствует 1 января 2022 года, 12:30 PM.
Тег <time> особенно полезен для поисковых систем и адаптивного дизайна. Поисковые системы могут использовать информацию из тега <time> для индексации дат и времени, а адаптивный дизайн может автоматически адаптировать формат и отображение временных меток в зависимости от устройства пользователя.
Тег <time> является одним из многих полезных инструментов, предоставляемых HTML для более точного и информативного описания контента.
#html | #теория
👍4❤1👨💻1
HTML5 Drag and Drop API — перетаскивание без библиотек
Если тебе нужно реализовать функциональность, похожую на Trello, канбан-доски, визуальные редакторы или просто перемещение блоков — тебе не нужен фреймворк. HTML5 Drag & Drop API позволяет всё это сделать на чистом JavaScript.
Базовый пример
HTML:
Атрибут draggable="true" говорит браузеру: этот элемент можно тащить.
JS:
Что ты можешь делать с Drag and Drop API:
- Перетаскивать элементы между разными контейнерами
- Сортировать блоки внутри одной области
- Строить визуальные drag’n’drop редакторы
- Загружать файлы через перетаскивание
- Работать с dataTransfer для передачи информации
Важно помнить:
- Drag & Drop работает только для элементов DOM, не для всего подряд.
- Некоторые события (dragover, drop) требуют e.preventDefault(), иначе браузер блокирует действие.
- Если хочешь поддерживать мобильные устройства — придётся использовать кастомные решения, т.к. HTML5 Drag&Drop плохо работает на touch-экранах.
Подробнее: https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API
#html | #полезности
Если тебе нужно реализовать функциональность, похожую на Trello, канбан-доски, визуальные редакторы или просто перемещение блоков — тебе не нужен фреймворк. HTML5 Drag & Drop API позволяет всё это сделать на чистом JavaScript.
Базовый пример
HTML:
<div id="box" draggable="true">Перетащи меня</div>
Атрибут draggable="true" говорит браузеру: этот элемент можно тащить.
JS:
const box = document.getElementById("box");
box.addEventListener("dragstart", () => {
box.style.opacity = "0.5";
});
box.addEventListener("dragend", () => {
box.style.opacity = "1";
});Что ты можешь делать с Drag and Drop API:
- Перетаскивать элементы между разными контейнерами
- Сортировать блоки внутри одной области
- Строить визуальные drag’n’drop редакторы
- Загружать файлы через перетаскивание
- Работать с dataTransfer для передачи информации
Важно помнить:
- Drag & Drop работает только для элементов DOM, не для всего подряд.
- Некоторые события (dragover, drop) требуют e.preventDefault(), иначе браузер блокирует действие.
- Если хочешь поддерживать мобильные устройства — придётся использовать кастомные решения, т.к. HTML5 Drag&Drop плохо работает на touch-экранах.
Подробнее: https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API
#html | #полезности
👍5