Тег <samp>
Тег <samp> в HTML предназначен для отображения текста, представляющего вывод программы или системы. Это отличный способ выделить текст, демонстрирующий, что программа выдала в ответ на команду пользователя.
Как работает <samp>?
Этот тег обычно используется для оформления сообщений об ошибках, системных уведомлений и других текстов, которые нужны для показа результата программы. Например:
В браузере этот текст обычно будет выглядеть так, как будто он написан моноширинным шрифтом, что помогает визуально отличить его от основного содержимого страницы.
Когда использовать <samp>?
Отображение вывода кода или команд.
Системные сообщения и уведомления.
Демонстрация примеров ответов программ.
#html | #теория
Тег <samp> в HTML предназначен для отображения текста, представляющего вывод программы или системы. Это отличный способ выделить текст, демонстрирующий, что программа выдала в ответ на команду пользователя.
Как работает <samp>?
Этот тег обычно используется для оформления сообщений об ошибках, системных уведомлений и других текстов, которые нужны для показа результата программы. Например:
<p>Ошибка: <samp>Файл не найден</samp></p>
В браузере этот текст обычно будет выглядеть так, как будто он написан моноширинным шрифтом, что помогает визуально отличить его от основного содержимого страницы.
Когда использовать <samp>?
Отображение вывода кода или команд.
Системные сообщения и уведомления.
Демонстрация примеров ответов программ.
#html | #теория
Тег <dfn>
Тег <dfn> используется для выделения термина или определения в тексте. Он помогает семантически обозначить слово или фразу, которое затем будет объяснено.
Как работает <dfn>?
Обычно <dfn> применяется для выделения слова, которое будет определено рядом с ним. Браузеры не применяют к этому тегу специальных стилей, но его использование улучшает семантическую структуру документа:
В этом примере слово API отмечено как термин, который определяется далее.
Зачем использовать <dfn>?
Семантика: Помогает поисковым системам и программам для чтения с экрана лучше понимать структуру страницы.
Ясность: Читатель сразу видит, что слово или фраза будет объяснено в тексте.
Тег <dfn> особенно полезен при создании учебных материалов, словарей, документации и статей, где есть много определений и новых терминов.
#html | #теория
Тег <dfn> используется для выделения термина или определения в тексте. Он помогает семантически обозначить слово или фразу, которое затем будет объяснено.
Как работает <dfn>?
Обычно <dfn> применяется для выделения слова, которое будет определено рядом с ним. Браузеры не применяют к этому тегу специальных стилей, но его использование улучшает семантическую структуру документа:
<p>Понятие <dfn>API</dfn> означает интерфейс прикладного программирования.</p>
В этом примере слово API отмечено как термин, который определяется далее.
Зачем использовать <dfn>?
Семантика: Помогает поисковым системам и программам для чтения с экрана лучше понимать структуру страницы.
Ясность: Читатель сразу видит, что слово или фраза будет объяснено в тексте.
Тег <dfn> особенно полезен при создании учебных материалов, словарей, документации и статей, где есть много определений и новых терминов.
#html | #теория
Тег <map>
Тег <map> используется для создания областей с кликабельными ссылками на изображении. Он работает вместе с тегом <area>, который задает области на изображении, и делает их интерактивными.
Как работает <map>?
Задайте картинку с атрибутом usemap, указывающим на имя карты.
Создайте карту с определенными областями, которые станут ссылками:
shape: Определяет форму области (прямоугольник, круг или многоугольник).
coords: Координаты, задающие область клика.
href: Ссылка, которая откроется при клике.
Почему <map> полезен?
Создание интерактивных изображений: Используется для создания сложных карт и схем, где каждая область может вести на отдельную страницу.
Лучший UX: Добавляет удобство для пользователей, которым нужно взаимодействовать с конкретными частями изображения.
#html | #теория
Тег <map> используется для создания областей с кликабельными ссылками на изображении. Он работает вместе с тегом <area>, который задает области на изображении, и делает их интерактивными.
Как работает <map>?
Задайте картинку с атрибутом usemap, указывающим на имя карты.
Создайте карту с определенными областями, которые станут ссылками:
<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="34,44,270,350" href="page1.html" alt="Прямоугольник">
<area shape="circle" coords="337,300,44" href="page2.html" alt="Круг">
</map>
shape: Определяет форму области (прямоугольник, круг или многоугольник).
coords: Координаты, задающие область клика.
href: Ссылка, которая откроется при клике.
Почему <map> полезен?
Создание интерактивных изображений: Используется для создания сложных карт и схем, где каждая область может вести на отдельную страницу.
Лучший UX: Добавляет удобство для пользователей, которым нужно взаимодействовать с конкретными частями изображения.
#html | #теория
Атрибут disabled
С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.
Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
Атрибут срабатывает не только на самом элементе, но и на всех его потомках.
💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.
#html | #полезности
С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать.
Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить.
Может применяться к следующим элементам формы:
button, input, option, select, textarea, optgroup, filedset
Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы.Атрибут срабатывает не только на самом элементе, но и на всех его потомках.
💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными.
#html | #полезности
Мета теги Apple
Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.
Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.
3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">
4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">
5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">
Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.
Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.
#html | #полезности
Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.
Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.
3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">
4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">
5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">
Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.
Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.
#html | #полезности
Тег <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 | #теория
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 | #полезности