|
|
Ячейка - заголовок в таблице .
|
|
Позволяет вставить воспроизводимое видео.
|
|
|
Место, где допускается перенос строки.
|
Устаревшие теги HTML
Чем заменить устаревший тег HTML? В большинстве случаев подойдут каскадные таблицы стилей CSS. Также, существуют альтернативы не используемым в новой спецификации тегам и в пределах HTML. Ниже в таблице представлены устаревшие теги HTML с вариантами их замены.
Тег
Краткое описание
|
|
Акроним. Используйте тег вместо него.
|
|
|
Встроенный апплет. Используйте или вместо него.
|
|
|
Задает цвет, размер, и семейство шрифта всего текста в документе. Используйте вместо него
|
|
|
Текст большего размера. Используйте вместо него
|
|
|
Отцентрованный текст. Используйте вместо него
|
|
|
Список директорий. Используйте |
|
|
Определяет цвет, размер и семейство шрифта. Используйте вместо него
|
|
|
Фрейм внутри . Используйте вместо него
|
|
|
Определяет набор фреймов. Для добавления нескольких встроенных фреймов используйте несколько элементов
|
|
|
Альтернативный текст, если фреймы не поддерживаются
|
|
|
Перечеркнутый текст. Используйте или вместо него
|
|
|
Моноширный текст. Используйте вместо него
|
|
|
Подчеркнутый текст. Используйте вместо него
|
От автора:
приветствую вас, дорогие читатели блога webformyself. В этой статье мы продолжим говорить о технологии html5. В этот раз я хотел бы затронуть другие нововведения этой спецификации. Таковыми являются в html5 data-атрибуты, которые можно прописывать любым тегам.
Что такое data-атрибуты и для чего они нужны? Итак, начнем с того, что же это такое вообще. Как вы возможно знаете, в html любому тегу можно указать какой-то атрибут, будь то универсальный (class, id) или уникальный для этого элемента. Их первая особенность в том, что атрибут может называться как угодно. Единственное правило – он должен начинаться с префикса data- и в нем, естественно, не должно быть русских букв. Одному тегу можно записать сколько угодно таких параметров. В качестве значений также можно указывать произвольные слова. Кстати, значение можно указывать и на русском. Пример: |
| <
p
data
-
attribute
=
"value"
data
-
name
=
"Абзац"
>
<
/
div
>
|
Как видите, можно указывать любые имена и любые значения. Но ведь эти параметры ничего не делают с элементом, зачем тогда они вообще нужны? Есть как минимум несколько способов применения data-атрибутов в сайтостроении, и давайте рассмотрим их. Способ применения 1 – обращение к элементам в css Если вы знаете, что такое селекторы атрибутов, то наверняка уже догадываетесь, как могут быть использованы новые возможности. Указывая для тега уникальный data-атрибут, вы сможете соответствующим образом обратиться к нему в стилях. Давайте рассмотрим пример:
div{} |
| <
div
data
-
css
=
"css"
>
<
/
div
>
div
[
data
-
css
=
"css"
]
{
}
|
Это позволило нам обратиться к элементу без использования стилевых классов. Однако, если так подумать, то никакого особого преимущества это не дает, для обращения по классу нужно проделать примерно такие же действия. Таким образом, у вас просто расширяются возможности по селекторам и ничего более. Способ применения 2 – хранение значений и их использование С первого взгляда, значения data-атрибутов ничего не меняют и вообще никак не влияют на веб-страницу. Так зачем они вообще нужны? На самом деле применение им найти можно, если вспомнить про функцию attr() в css. 
|
| <
img
src
=
"foto.jpg"
data
-
img
=
"Фотография"
>
|
Давайте поставим задачу: нужно вывести на страницу поясняющий текст к фотографиям, который появлялся бы либо сразу с загрузкой картинки, либо при наведении на нее, не важно как. Стандартная подсказка реализуется с помощью атрибута title. Но такая подсказка может не удовлетворять вас по очень многим параметрам. Во-первых, она появляется плавно (что не всегда нужно). Во-вторых, она исчезает через какое-то время. В-третьих, она появляется в разных местах, в зависимости от того, куда наведен курсор. Ну а самая большая проблема – мы никак не можем стилизовать нашу подсказку – это всегда будет черный текст на белом фоне, что не очень интересно. Итак, выше в коде мы вставили картинку, указали путь к ней и дополнительно записали произвольный data-параметр. Реализовать вывод пояснения к фото теперь можно таким образом: img{
display: inline-block;
}
img:after{
content: attr(data-img);
} |
| img
{
display
:
inline
-
block
;
img
:
after
{
content
:
attr
(data
-
img
)
;
|
Что мы сделали? Теперь у всех изображений будет псевдоэлемент, в котором будет находиться значение атрибута data-img, если оно есть у тега img. Таким нехитрым способом вы смогли вывести поясняющий текст к фотографии. Я не буду в этой статье приводить инструкцию, как оформить подсказку. Скажу только, что по умолчанию она будет отображаться после загрузки страницы. Зачастую ее нужно изначально скрыть, а выводить при наведении на картинку. Чтобы это реализовать, вам нужно воспользоваться селектором img:hover:after. Ну а какие есть еще html5 атрибуты, появившиеся только в этой спецификации? К таковым можно отнести, например, controls – атрибут для новых элементов audio и video, который позволяет вывести элементы управления видеороликом или аудиозаписью. У видео с помощью параметра poster можно указать путь к изображению, которое будет фоном до начала просмотра видео. В общем, вот таких вот мелких атрибутов появилось не так уж и мало. Также у одиночного элемента input появилось очень много новых параметров. Теперь можно создавать поля для ввода электронной почты, телефона, выбора календарной даты или времени, поле для выбора цвета и т.д. Пустой атрибут required делает любое поле обязательным для заполнения, если этого не сделать, то браузер просто не пропустит отправку формы. Конечно, единственный минус всех этих нововведений в том, что они не везде должным образом поддерживаются. Так что если в одном браузере новые возможности прекрасно работают и пользователи могут использовать новые поля, то в другом веб-обозревателе все может быть по-другому. Конечно, отчасти виноваты сами пользователи, которые не обновляют ПО, но нужно также следить за тем, что и как поддерживается. В
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 появился новый атрибут для ссылок. Теперь чтобы указать браузеру, что ссылку надо загружать, а не открывать достаточно использовать данный атрибут.
Чтобы оставаться в курсе свежих статей и уроков следите
На HTML5, хотя все современные браузеры уже поддерживают данный стандарт. По состоянию на декабрь 2011 года стандарт все еще находится в состоянии разработки.
В HTML5 добавляет много новых синтаксических особенностей – , , и
. Эти элементы разработаны для того, чтобы сделать проще внедрение и управление графическими и мультимедийными объектами в вебе без необходимости обращаться к собственным плагинам и API. Другие новые элементы, такие как , , и
разработаны для того, чтобы обогащать семантическое содержимое документа (страницы).
Новые теги HTML5
- 1. Теги разделов (article, aside, footer, header, hgroup, nav, section)
- 2. Теги группировки контента (figure, figcaption)
- 3. Теги для семантического выделения текста (bdo, mark, time, ruby, rt, rp, wbr)
- 4. Теги для вставки контента (audio, video, canvas, embed, source)
- 5. Теги для элементов форм (datalist, keygen, output, progress, meter)
- 6. Интерактивные элементы (details, summary, command, menu)
Тег
Краткое описание
|
|
Определяет статью
|
|
|
Определяет контент в стороне от основного контента страницы
|
|
|
Определяет аудио контент
|
|
|
Определяет графику
|
|
|
Определяет командную кнопку
|
|
|
Определяет данные в упорядоченный список
|
|
|
Определяет выпадающий список
|
|
|
Определяет шаблон данных
|
|
|
Определяет детали элемента
|
|
|
Определяет диалог (разговор)
|
|
|
Определяет цель события, отправляемого по серверу
|
|
|
Определяет группу медиа-контента, и их подписи
|
|
|
Определяет нижний колонтитул для раздела или страницы
|
|
|
Определяет область заголовка раздела или страницы
|
|
|
Определяет выделенный текст
|
|
|
Определяет измерения в течение заранее определенного диапазона
|
|
|
Определяет навигационные ссылки
|
|
|
Определяет вложенную точку в шаблоне данных
|
|
|
Определяет некоторые виды результата
|
|
|
Определяет ход выполнения задачи любого рода
|
|
|
Определяет правила для обновления шаблонов
|
|
|
Определяет раздел (секцию)
|
|
|
Определяет медиа-ресурсы
|
|
|
Определяет дату/время
|
|
|
Определяет видео
|
Неподдерживаемые теги:
Тег
Краткое описание
|
|
Не поддерживается.
Определяет акроним
|
|
|
Не поддерживается.
Определяет апплет
|
|
|
Не поддерживается.
Используетя вместо CSS для задания шрифта
|
|
|
Не поддерживается.
Определяет большой текст
|
|
|
Не поддерживается.
Определяет текст по центру
|
|
|
Не поддерживается.
Определяет список директорий
|
|
|
Не поддерживается.
Определяет фрейм
|
|
|
Не поддерживается.
Определяет набор фреймов
|
|
|
Не поддерживается.
Определяет поисковый индекс в документе
|
|
|
Не поддерживается.
Определяет секцию, не поддерживающую фрейм
|
|
|
Не поддерживается.
|
|
|
Не поддерживается.
Определяет зачеркнутый текст
|
|
|
Не поддерживается.
Определяет телетайп текст
|
|
|
Не поддерживается.
Определяет подчеркнутый текст
|
|
|
Не поддерживается.
Определяет выровненный текст
|
Список атрибутов HTML5
Атрибут
Значение
Краткое описание
| contenteditable
|
true
false
|
Определяет, может ли пользователь редактировать содержимое (контент)
|
| contextmenu
|
menu_id
|
Определяет контекстное меню элемента
|
| draggable
|
true
false
auto
|
Определяет, может ли пользователь перетащить элемент
|
| irrelevant
|
true
false
|
Определяет, что элемент не имеет значения. Элемент, имеющий значение не отображается
|
| ref
|
URL / id
|
Определяет ссылку на другой документ / часть документа (используется только тогда, когда значение атрибута установлено)
|
| registrationmark
|
reg_mark
|
Определяет зарегистрированный знак элемента
|
| template
|
URL / id
|
Определяет ссылку на другой документ / часть документа, которые должны быть применены к элементу
|
Структура разметки страницы в HTML5
При использовании обычной структуры страницы
сайта можно выделить несколько типичных блоков, описываемых тегом div с соответствущим классом (, , , , и пр.).
При использовании с применением HTML5
, эти блоки описываются структурными тегами , , , , и пр., что очень упрощает жизнь разработчикам. Данные теги являются структурными эквивалентами и они делают разметку более наглядной и простой в понимании. Также, по умолчанию, они являются инлайновыми, поэтому их надо cделать блочными с помощью display:block.
Данные теги важно применять правильно. Чтобы не запутаться когда и какой применять, в сети существует замечательный ресурс , а также можно воспользоваться следующим алгоритом:
Все современные браузеры (Опера, Сафари, Хром, Мозила, ИЕ9+) уже имеют поддержку HTML5
. Для браузеров IE8 и меньше следует подключать javascript , который "научит" их понимать новые теги. Код для его подключения ниже:
В верстке макетов при мы перешли на использование нового стандарта HTML5. Если вы хотите заказать сайт или отдельно
, можете оставить заявку, написав по любому из адресов, указанных на странице или через форму обратной связи. Будем рады сотрудничеству!
|
