Ячейка - заголовок в таблице .
|
|
Позволяет вставить воспроизводимое видео.
|
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него.
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
До создания HTML5 работать с атрибутами в HTML элементах, мягко говоря, не доставляло удовольствия. Приходилось использовать такие атрибуты, как rel или class . А некоторые разработчики даже создавали свои атрибуты.
Но дело координально изменилось когда HTML5 предоставил нам возможность использования своих data атрибутов. Теперь довольно легко можно сохранять дополнительные данные стандартными средствами.
Как же работают дата атрибуты?
Название говорит само за себя. Дата атрибуты хранят в себе какие-то данные, заданные вами. Они всегда начинаются с приставки data- и заканчиваются чем то более понятным для разработчика (по спецификации допускаются только символы нижнего регистра и дефисы). Элемент может содержать в себе любое количество дата атрибутов.
Пример использования атрибутов для хранения данных о пользоватле:
Calvin
Конечно, эти данные не слишком помогают конечному пользователю, так как он их попросту не видит, но дата атрибуты очень широко используются в современных веб технологиях.
Приведем пример кнопки для удаления чего-либо на вашей странице:
Delete
Все необходимые параметры у вас под рукой и готовы для отправки в скрипт бекэнда. Никаких больше rel атрибутов или обработки ID или необходимого действия из других атрибутов.
Что можно хранить?
Стоить помнить только одно правило, в дата атрибутах нельзя хранить объекты. То есть, можно, если их предварительно сериализовать. Сейчас просто запомните, что, впринципе, хранить можно только строковые данные.
Чтение/запись атрибутов средствами javascript
Вернемся к примеру с кнопкой и посмотрим как нам получить доступ к нужным атрибутам.
// Это кнопка
var button = document.getElementById("your-button-id");
// Получаем значение
var cmd = button.getAttribute("data-cmd");
var id = button.getAttribute("data-id");
// Изменяем значение
button.setAttribute("data-cmd", yourNewCmd);
button.setAttribute("data-id", yourNewId);
Довольно просто, не так ли? Теперь просто передавайте параметры cmd и id вашему приложению и выполняйте необходимый ajax запрос.
Чтение/запись дата атрибутов при помощи jQuery.
Приведем аналог на jQuery:
// Получаем значение
var cmd = $("#your-button-id").attr("data-cmd");
var id = $("#your-button-id").attr("data-id");
// Изменяем значение
$("#your-button-id")
.attr("data-cmd", yourNewCmd)
.attr("data-id", yourNewId);
Не путайте с методом data() . Хотя у них есть что-то общее, в целом это абсолютно разные вещи. Даже если вы не полностью знакомы с этими методами, просто используйте attr() .
Использование dataset API
HTML5 даже предлагает нам API для работы с data атрибутами, хотя IE10 и ниже не поддерживает его.
Опять таки пример с кнопкой, но на этот раз при помощи dataset API:
// Это кнопка
var button = document.getElementById("your-button-id");
// Получаем значение
var cmd = button.dataset.cmd;
var id = button.dataset.id;
// Изменяем значение
button.dataset.cmd = yourNewCmd;
button.dataset.id = yourNewId;
Обратите внимание на отсутсвие приставки data и дефисов. Так же как и при работе со свойтсвами CSS в JavaScript вам потребуется "горбатый" регистр. Dataset API переводит имена атрибутов таким образом что data-some-attribute-name в HTML превращается в dataset.someAttributeName в JavaScript.
Что можно делать с дата атрибутами
Приведенные примеры - это только фундамент. Вы можете выполнять гораздо более сложные операции с дата атрибутами. Давайте рассмотрим несколько примеров.
Фильтрация
Допустим вы работаете со списком элементов и вам необходимо отфильтровать их по ключевому слову. Разместите ключевые слова в data атрибутах и при помощи небольшого итерационного скрипта обработайте их.
Пример “на коленке”:
$("#filter").on("keyup", function() {
var keyword = $(this).val().toLowerCase();
$(".cars > li").each(function() {
$(this).toggle(keyword.length < 1 || $(this).attr("data-models").indexOf(keyword) > -1);
}
);
}
);
Стилизация
Конечно стили лучше применять посредством классов, но тоже самое можно сделать и при помощи data атрибутов. Вот так можно применить стиль к элементам, имеющим определенный data атрибут, независимо от его значниния. Сначал взглянем на HTML:
А теперь CSS:
{
background: red;
}
Но как же учитывать значение атрибута? Вот так можно применить стиль ко всем элементам с атрибутом data-warning чье значение содержит в себе слово error:
{
color: red;
}
Настройка
Известный фреймворк Bootstrap применяет data атрибуты для настройки своих JavaScript плагинов. Пример всплывающего окна:
Popover on top
Лучший способ хранить данные
Дата атрибуты очень распространены в веб технологиях. Но самое важное то, что они полностью поддерживаются старыми браузерами и все глубже и глубже проникают в веб стандарты. А так стандарт HTML уже утверждён, то работать с ними можно уже сегодня и не бояться, что вдруг они пропадут завтра.
a! HTML5
в настоящее время уже достаточно активно используется при разработке веб интерфейсов и приложений. Мы все знаем, что HTML5 привнес много новых тегов, атрибутов и элементов. Некоторые из них действительно полезны для наших сайтов. Таким образом, в этой статье, я кратко расскажу о нескольких полезных и важных HTML5 тегах и атрибутах
, которые вы должны знать и использовать на практике!
Структурная разметка HTML5
В HTML5 появилось несколько новых тегов, которые призваны заменить уже прижившиеся блоки div
(не все конечно 🙂). Внешне, так сказать, ничего не изменилось, но в сущности новые теги несут в себе смысловую (семантическую) нагрузку, и строго определяют для каждого блока его место и роль:
-
— Определяет область «шапки» сайта с логотипом, первичной навигацией и тд.;
-
— Определяет «подвал», колонтитул веб страницы сайта или раздела, в котом обычно размещается дополнительная информация;
-
— Определяет блок, который служит для группировки однотипных объектов, или для разделения текста на разделы;
-
— Определяет автономную часть страницы, это может быть сообщение форума, журнала или газетную статью, запись в блоге и тд.;
-
— Определяет область навигации, как правило список ссылок;
Форма
Новые типы input полей
HTML5 введены новые типы input полей
. Они позволяют писать более семантически правильный код, адаптированный для мобильных устройствах. Например при использовании типа email
происходит автоматическая валидация введенного текста, на предмет идентичности адресу электронной почты и тд.
Регулярные выражения для валидации
До появления HTML5, при использовании формы на вашем сайте, вы должны были пропускать введенный текст через JavaScript
для проверки. Теперь с HTML5 и атрибутом pattern
, вы можете определить шаблон регулярного выражения для проверки данных.
Автозаполнение с HTML5 datalist
Использование dataList
элемента HTML5, позволяет создавать список данных для автозаполнения полей ввода. Супер полезно!
Автофокус полей формы
Атрибут autofocus
позволит вам установить фокус на любой элемент формы (в том числе кнопку).
Скрытые элементы с помощью HTML5
В HTML5 введен атрибут hidden
, который позволяет скрыть определенный элемент, на подобии того как это применяется в CSS с использованием dispaly: none
Pellentesque habitant morbi tristique senectus et netus ....
Заголовок 2
Pellentesque habitant morbi tristique senectus et netus et malesuada ...
Создаем аккордеон для сайта —
Атрибут download
В HTML5 появился новый атрибут для ссылок. Теперь чтобы указать браузеру, что ссылку надо загружать, а не открывать достаточно использовать данный атрибут.
Чтобы оставаться в курсе свежих статей и уроков следите
Обновлено: 09.06.2024
103583
Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter
| 
