НТМL5-теги * Атрибуты
Примеры использования * Семантическая верстка
Наглядные иллюстрации
Rescuer
СЕРИЯ -
СПРАВОЧНИК - СЕРИЯ
"Наука и Техника"
г. Санкт-Петербург
s
..
КИРИЧЕНКО
А.В.'
ДУБОВИКЕ.В.
Справочник
КРАТКО # БЫСТРО # ПОП РУКОИ
"Наука и Техника"
г. Санкт-Петербург
УДК 004.42 ББК 32.973
ISBN 978-5-94387-275-4
Кириченко А.В., Дубовик Е.В.
СпРдвочник HTML. Кратко, быстро, под рукой
ника, 2021. - 288 с., ил.
- СПб.: Наука и Тех
Серии "Справочник"
Данный справочник содержит полную информацию об HTMLS
в удобной и наглядной форме. Структура справочника позво
ляет быстро и удобно находить нужную информацию, получать
примеры использования тех или иных тегов HTML.
Отдельное внимание уделено отраслевым рекомендациям по
хорошему стилю использования HTML для верстки неб-сайтов,
приведено описание приемов семантической верстки.
Справочник будет полезен всем, кто использует или изучает
HTML: от начинающих до профессионалов.
Все права защищены:. НикакаJ1 часrь данной кннm не мmк� быть воспроизведена в какой бы то ни было форме без письменноrо разрсwенИJ1
в ладель цев авторских прав.
Издательство не несет ответственн ости :Ja возмо жный ушерб, причиненный в ходе нспользо ванн• м;периалов данной к ниги, а таюке за
досrупность материалов, ссwлки на которые вы мож� наЙПI в этой книге. На момент подrотовкн книrn к изданию все ссылки на иктсрнет
ресурсы были действующими.
Содержание
ЧАСТЬ 1. ОБЩАЯ СТРУКТУРА НТМL-ДОКУМЕНТА ••••••• 15
1•1. ЧТО ТАКОЕ HTML? ••••••••••••••••••••••••••••••••••••••••••••.•..••.•..•.... 16
1.2. НТМL-ДОКУМЕНТ, ТЕГИ ••••••••••••••••••.•••.••••.•.•......•••••••••••••• 18
Введение в теги ........................................................................ 18
1.3. СТРУКТУРА НТМL-ДОКУМЕНТА •••..•..•••••••••••••••••••••••••••••••••• 23
Атрибуты id и class .................................................................... 25
1.4. ГЛОБАЛЬНЫЕ АТР ИБУТЫ HTML ••••••••••••••.••••••••••••••••••••••.••• 25
Другие глобальные атрибуты .................................................... 28
1.5. СОБЫТ ИЯ •.•••••..•......•..•......•.•..•.....••••••••••••••••••••••••••••••••• 32
ЧАСТЬ 2. СПРАВОЧНИК ТЕГОВ HTML5 ••.••.•.•••..•••••••• 34
ТЕГА
ЧАСТЬ 3. СЕМАНТИЧЕСКАЯ ВЕРСТКА НА HTML ......................... 213
3.1. БАЗОВЫЕ АБСТРАКЦИИ РАЗМЕТКИ. ВЕРСТКА
НА ОСНОВЕ БЛОКОВ DIV ........................................... 214
3.2. СЕМАНТИЧЕСКИЕ ТЕГИ HTML5. ВЕРСТКА НА ОСНОВЕ
СЕМАНТИЧЕСКОЙ РАЗМЕТКИ .................................... 216
3.3. ПРИМЕР СЕМАТИЧЕСКОЙ ВЕРСТКИ ................................. 222
3.3.1. Блок HEAD ..................................................................... 224
3.3.2. Блок HEADER ................................................................. 227
3.3.3. Блок SECTION - слайдер................................................ 231
3.3.4. Блок SECTION - Статьи и новости .................................. 233
3.3.5. Блок SECTION - видео ................................................... 235
3.3.6. Блок SECTION -Архив журнала ...................................... 237
3.3.7. Блок SECTION - подписка .............................................. 238
3.3.8. Блок FOOTER ................................................................. 239
ПРИЛОЖЕНИЕ 1. СТАНДАРТНЫЕ ЦВЕТА .................................. 244
ПРИЛОЖЕНИЕ 2. КОДЫ ЯЗЫКОВ ........................................... 267
ПРИЛОЖЕНИЕ 3. MIME-ТИПЫ ............................................... 273
5 HTML
Данная книга для удобства поделена на 4 части:
• В первой части рассмотрена общая структура НТМL
документа и даны основные понятия: НТМL-элементы, теги,
атрибуты, события;
• Во второй части в алфавитном порядке идет описание
справочник всех тегов HTML5;
• Третья часть расскажет о приемах семантической верстки базовые абстракции разметки, верстка на основе блоков div,
верстка на основе семантической разметки, приведен пример
семантической верстки главной страницы интернет-портала;
• Четвертая часть состоит из нескольких полезных
приложений: RGB и НТМL-значения для стандартного
цвета; коды языков, которые можно использовать в теге lang;
таблица соответствия расширений файлов МIМЕ-типов.
HTML
Часть 1.
Общая структура
НТМL-документа
�
- ШНТМL
Справочник НТМL
1" 1" Что такое HTML?
Сеть Интернет (World Wide Web) - сеть глобаль
ного пользования, и поэтому вся информация в
сети должна быть представлена на универсаль
ном языке, который понимали бы все пользо
ватели. Языком публикации, используемым в
World Wide Web, является HTML (Hyper Text
Markup Language - язык разметки гипертекста).
Техническую информацию об этом языке (его
спецификацию) на английском языке можно
найти на сайте World Wide Web Consorcium
wЗc.com.
Все интернет-сайты и интернет-страницы по сво
ей сути представляют собой НТМL-документы
или наборы html-документов. В простейшем
случае, htm!-документ хранится на сервере, и
при обращении к нему по адресу из браузера он
загружается и отображается в окне браузера. В
то же время существуют языки программирова
ния и скрипты, написанные на них, которые по
зволяют не хранить html-страницы на сервере, а
динамически формировать эти страницы исхо
дя из различных данных и действий пользова
теля. Такой возможностью обладает язык РНР,
рассмотрение которого выходит за рамки этой
книги. Кроме того, существуют языки програм
мирования, на которых пишутся скрипты, вы
полняющие различные функции, встраиваемые
Частъ 1 . Общая струоура НТМL-документа
tsfMTML -
в НТМL-документ. Таким языком является язык
JavaScript.
В итоге html-документ представляет собой не
кий каркас, который определяет, что есть в до
кументе и в виде каких структурных элементов
в него включено. При этом содержимое этих
структурных элементов может содержаться не
посредственно в самом html-документе (напри
мер, текст), а может подгружаться из какого либо
источника, например, из файла изображения,
если в html-документе указано, что здесь должна
быть картинка. Язык HTML позволяет задавать
только структуру и не позволяет программиро
вать алгоритмы, поэтому HTML является язы
ком разметки.
Итак, HTML - язык разметки, предоставляю
щий разработчикам следующие возможности:
• Представлять информацию в сети в виде
электронных документов, с информацион
ным содержимым в виде форматированно
го текста, таблиц, списков, фотографий;
• Включать в документы звуковые фрагмен
ты, видеоклипы, электронные таблицы и
другие приложения и элементы мультиме
диа;
• Осуществлять загрузку документов по
средством активизации гипертекстовой
ссылки;
-ls}HTML
Справочник HTML
• Разрабатывать формы для осуществления
взаимодействия с удаленными службами
(поисковыми роботами, on-line магазина
ми и т.п.)
До 1995 года не было каких-либо стандартов
html-документа. Отсутствие стандартизации по
рождало проблему совместимости, позволяя раз
работчикам браузеров использовать собствен
ные теги, о которых ничего не "знали" браузеры
конкурентов. Нумерация стандартов начинается
с 2.0 - видимо потому, что до этого стандарт от
сутствовал, а сам HTML существовал (начиная с
1991 года).
Современным считается стандарт HTML 5, при
нятый 28 октября 2014 года. После вышли стан
дарты 5.1, 5.2 и 5.3 - с 2016 по 2018 гг.
1.2. НТМL-документ, теги
Введение в теги
Разметка документов заключается в том, что до
кумент представляется в виде последователь
ности элементов. Например, чтобы отобразить в
окне браузера простейшую текстовую информа
цию
{EJHTML -
Часть 1 . Общая структура НТМL-документа
х +
,.,, "1""''""'"-""-••
+- е Q
А
i.)ie,,.,пJ,1.11cщ;r,,""'
,J,;:.
cr fJ " t �
'l'> >•>,-,.•�н о -ж•j-'R >),между которыми про
писывается имя тега и, возможно, его атрибуты.
Единственным исключением являются теги
комментария. Для них предусмотрено следую
щее написание:
Имена тегов и их атрибутов не чувствительны к
регистру, т.е. не имеет значения заглавными или
прописными буквами они написаны. Например,
записи и абсолютно идентич
ны с точки зрения HTML.
Атрибуты - это свойства тега (элемента), кото
рые имеют либо стандартное значение (исполь
зуемое по умолчанию), либо значение, задавае
мое разработчиком или сценарием (скриптом).
Набор атрибутов индивидуален для каждого
тега (элемента), хотя некоторые из них могут по
вторяться у разных тегов (элементов).
Пары "атрибут = значение" помещаются перед за
крывающей скобкой начального тега элемента, и
если их несколько разделяются пробелами. По
рядок их перечисления произволен. Например:
Некоторые атрибуты не имеют значения, тогда
достаточно просто указания имени атрибута.
По умолчанию в HTML необходимо, чтобы все
значения атрибутов были заключены в двойные
(код ASCII 34) или одинарные (код ASCII 39)
кавычки. В некоторых случаях допустимо этого
не делать, но рекомендуется кавычки применять
всегда.
Значение атрибута может включать только бук
вы (а - z, А - Z), цифры, знаки переноса (код
ASCII 45) и точки (код ASCII 46). Включение
одинарных кавычек в значение атрибута допу
стимо, если оно заключено в двойные кавычки,
и наоборот.
При интерпретации тегов все браузеры придер
живаются того правила, что при обработке не
правильно заданного НТМL-элемента или при
использовании в документе элемента разметки
не поддерживаемого данным браузером, он иг
норируется.
1.3. Структура НТМL
документа
Можно выделить общую структуру для файлов в
формате HTML. Документ в формате HTML со
стоит из трех основных частей:
• строки, объявляющей файл как документ
на языке HTMLS;
-EjHTML
Справочник HTML
• заголовка, заключенного в тег HEAD;
• тела документа, представляющего собой
тег BODY, если документ имеет классиче
ское, однооконное представление. В теле
документа, собственно, и содержится вся,
предлагаемая пользователю, информация.
Заголовок и тело документа заключены в тег
контейнер HTML. Все остальные теги разметки
располагаются либо в заголовке, либо теле доку
мента.
Простейший пример
ставлен ниже:
НТМL-документа пред
Название документа
Здесь располагается текст страницы
Тег позволяет браузеру, в ко
тором открывается данная страница, определить,
что для верстки был использован стандарт языка
HTML версии 5.
Часть 1. Общан структура НТМL-документа
'9HTML -
На данный момент у вас есть понимание, что та
кое НТМL-документ. Далее, в разделе Справоч
ник НТМL-документов, мы подробно рассмо
трим каждый тег НТМL-документа.
1.4. Г11оба11ьные атрибуты
HTML
При рассмотрении различных НТМL-тегов мы
изучаем атрибуты, свойственные тому или ино
му тегу. Однако есть набор атрибутов, называе
мых глобальными атрибутами, которые приме
нимы абсолютно ко всем тегам HTML. То есть
для любого тега могут быть заданы любые гло
бальные атрибуты.
Атрибуты id и class
Важным правилом верстки сайтов является раз
деление структурной разметки и стилей оформ
ления. То есть, в html есть возможность для
текста заголовка Н1 (тег Н1) задать его вырав
нивание непосредственно в теге Н 1, но правиль
но будет создать СSS-правило для тега Н1, ко
торое будет располагаться отдельно от тега Н1,
и применяться ко всем тегам Н1 в документе.
Благодаря такой организации вам, во-первых,
не надо будет искать, где именно в тексте html
документа надо подправить выравнивание в
случае необходимости (все стилевые настрой
ки располагаются обычно в отдельном файле
или в заголовке html-фaйлa), а во-вторых, вам
-m)MTML
Справочник НТМL
не надо будет каждый раз задавать для каждого
тега Н1 значение выравнивания текста - одно
СSS-правило для тега Н1 будет применено ко
всем тегам Н1 в html-документе. Соответствен
но, и в случае изменения выравнивания текста в
СSS-правиле для тега Н1 изменения будут при
менены ко всем тегам Н1. Такой стиль верстки
настолько считается правильным, что в версии
HTMLS у тега Н1 (и других) были исключены
атрибуты задания оформления: выравнивания и
т.п. Подразумевается, что все это будет делаться
с помощью таблиц стилей CSS. Однако такие
атрибуты все еще поддерживаются браузерами,
так как они активно применялись в предыду
щей версии HTML 4.01, и есть сайты, созданные
в рамках предыдущего стандарта. Но мы с вами
учимся создавать сайты согласно последним
стандартам, а значит, будем отделять определе
ние структурных элементов - тегов HTML, и их
оформление - СSS-стили.
Когда вы для каждого тега задаете его внешний
вид (то же выравнивание для заголовка Н1), то
вы можете для разных случаев применения од
ного и того же тега в НТМL-документе задавать
свои параметры (для одного заголовка Н1 задать
одно выравнивание, а для другого заголовка Н1
на этой же html-странице - другое выравнива
ние).
Когда же вы создали одно стилевое СSS-правило
для тега, то оно будет применяться ко всем вклю
чениям тега на html-странице. Как в таком слу-
Часть 1 . Общая структура НТМL-документа
ШИТМL -
чае для разных заголовков Н 1 задать разный вид
в разных частях html-страницы?
Чтобы у верстальщика была возможность обра
щаться (и писать СSS-правила) не ко всем эк
земплярам тега на html-странице, а какому либо
конкретному экземпляру, в HTML предусмотре
но для каждого тега задавать его уникальное имя
- атрибут id.
Также имеется возможность объединять не
сколько тегов под одним именем - задать для не
скольких экземпляров одного тега одинаковый
атрибут class (то есть объединить их в класс). И
тогда, при обращении указывается тег и id кон
кретного тега (или class - при классификации
экземпляров одного тега).
Итак, атрибуты id и class служат для идентифи
кации содержащих их тегов. Через атрибут id
тегу можно присвоить уникальное имя. Атрибут
class причисляет тег к классу тегов , созданному
разработчиком. Причем сам класс тегов образу
ется с первым, включенным в него тегом. Если
тег причисляется к нескольким классам сразу,
то тогда имена классов должны быть разделены
пробелами.
Атрибут id служит в HTML для выполнения сле
дующих функций:
• для осуществления выборочного обраще
ния таблицы стилей к определенным эле
ментам (задания их стиля);
-\i)HTML
Справочник HTML
• для указания цели (якоря) гипертексто
вых ссылок, что позволяет им ссылаться не
только на документ в целом, но и на его от
дельные части;
• для реализации ссылки на определенный
элемент сценария;
• для задания имени объекта, вставляемого в
документ тегом object.
Атрибут class служит в HTML для выполнения
следующих функций:
• для осуществления выборочного обраще
ния таблицы стилей к определенной груп
пе элементов (задания их стиля);
• для реализации особой обработки браузе
ром определенной (заданной разработчи
ком) группы элементов.
Атрибуты id и class могут быть установлены
почти для всех тегов языка HTML. Именование
НТМL-тегов и объединение их в определенные
группы позволяет осуществлять обращение к
ним, что особенно полезно при применении к
ним таблиц стилей.
Другие глобальные атрибуты
С двумя основными глобальными атрибутами
мы уже с вами знакомы - это атрибуты id и class.
Осталось познакомиться с остальными.
Часть 1. Общая струкrура НТМL-докумеiпа
i)HTML -
Глобальные атрибуты HTML применяются
практически ко всем тегам, поэтому о них мы
поговорим отдельно, чтобы не повторять их для
всех тегов:
• accesskey - позволяет получить доступ к
элементу с помощью заданного сочетания
клавиш. Допускается возможность указа
ния нескольких символов. Содержимое
данного атрибута - список разделенных
пробелами символов. Браузер будет ис
пользовать первый, имеющийся в расклад
ке клавиатуры, символ из списка.
• contenteditaЬle - сообщает, что элемент
доступен для редактирования пользовате
лем. Поддерживаются следующие значе
ния:
> true - редактирование разреше
но;
> false - редактирование не разре
шено.
• contextmenu - устанавливает контекстное
меню для элемента. Использование тега
MENU на данный момент не стандартизи
ровано разработчиками браузеров, а пото
му не рекомендуется
• dir - задает направление и отображение
текста - слева направо или справа налево.
Поле dir может принимать одно из следую
щих значений:
> ltr, что расшифровывается как left
to right - слева направо;
-ШнтмL
Справочник HTML
> rtl, что расшифровывается как right to
left - справа налево;
> auto - направление будет выбрано ав
томатически.
• draggaЬle - позволяет определить, можно ли
будет перетаскивать содержимое соответствую
щего тега или нет. Принимает следующие зна
чения:
> true - можно перетаскивать;
> false - нельзя перетаскивать.
• dropzone - данный атрибут позволяет задать
действия, которые выполняются после перета
скивания данных на содержимое соответству
ющего тега, а также задается допустимый тип
перетаскиваемых данных. Поддерживаемые
значения:
> сору - перетаскивание создаст копию
перетаскиваемого элемента;
> move - перетаскиваемый элемент бу
дет перемещен в новое расположение;
> link - перетаскивание создаст ссылку
на перетаскиваемые данные.
> file: тип файла - задается допусти
мый тип файла (например, file: image/
png).
• hidden - скрывает содержимое элемента от
просмотра.
• lang - браузер использует значение параметра
для правильного отображения некоторых наци
ональных символов.
Часть 1. Обща• структура НТМL-документа
8ИТМL -
• spellcheck - указывает браузеру проверять
или нет правописание и грамматику в тек
сте.
• style - применяется для определения стиля
элемента с помощью правил CSS.
• tablndex - устанавливает порядок получе
ния фокуса при переходе между элементами
с помощью клавиши ТаЬ. Атрибут прини
мает значения от О до 32767, определяющее
порядковое место соответствующего тега в
последовательности перехода между тегами
html-страницы при последовательном на
жатии клавиши "ТаЬ"
• title - описывает содержимое элемента в
виде всплывающей подсказки.
• translate - задает, можно ли переводить со
держимое тега при автоматическом перево
де всей страницы или нет. Может прини
мать значения:
> пустая строка или "yes" указыва
ет, что содержимое тега должно быть
переведено;
> "по" указывает, что содержимое
тега не должно быть переведено.
• xml:lang - этот атрибут по своему действию
похож на lang, но применяется только в
ХНТМL-документах и указывает язык все
го текста или его фрагмента.
-§HTML
Справочник HTML
1"5" События
Для большинства элементов HTML можно за
дать обработчики события. Например:
Пpoвepкa
При нажатии кнопки произойдет событие onclick.
В качестве обработчика этого события была на
значена функция Check(), которая и будет вы
звана.
Список событий и когда они происходят:
• опЫиr - потеря фокуса.
• onchange - изменение значения элемента
формы.
• onclick - щелчок левой кнопкой мыши на
элементе.
• ondЫclick - двойной щелчок левой кноп
кой мыши на элементе.
• onfocus - получение фокуса.
• onkeydown - клавиша нажата, но не отпущена.
• onkeypress - клавиша нажата и отпущена.
• onkeyup - клавиша отпущена.
• onload - документ загружен.
• onmousedown - нажата левая кнопка
мыши.
t§}NTML
Часть 1 . Общая структура НТМL-документа
• onmousemove
мыши.
11111
перемещение курсора
• onmouseout - курсор покидает элемент.
• onmouseover - курсор наводится на эле
мент.
• onmouseup - левая кнопка мыши отпуще
на.
• onreset - форма очищена.
• onselect - выделен текст в поле формы.
• onsubmit - форма отправлена.
• onunload - закрытие окна.
Еще пример:
При загрузке страницы пользователь увидит
уведомление "Привет!".
Рис. 2. Пример установки обработчика события onload
Часть 2.
�
Справочник тегов
HTML5
#
Часть 2. Справочник тегов HTML5
Данный раздел содержит информацию обо всех
НТМL-элементах с примерами и комментария
ми. Для каждого элемента приводится список до
ступных атрибутов и различные комментарии вро
де его совместимости с тем или иным стандартом
HTML.
ШнтмL
tD
u
С1
w
Тег А
1.1..
Синтаксис:
::z::
...
Данный тег чаще всего используется для созда
ния ссылок. Ссылки могут быть, как на другой
документ, так и на определенную часть текущего
документа, в этом случае говорят о якорях (an
chors). Изначально данный тег и был предус
мотрен для формирования якорей - ссылок на
части текущего документа - отсюда и название
этого тега (anchor). Если атрибут href дан
ного тега содержит адрес другого документа, то
в качестве якоря будет использоваться этот до
кумент.
Контентом тега (часть между открывающим и
закрывающим тегами) обычно выступает текст
или картинка. Но в HTML 5 допускается исполь
зование в теге а потокового контента (блочных
элементов). Однако, не допускается включение
в состав элемента а интерактивного контента, то
есть внутри этого тега нельзя использовать еле-
...J
z
с:,
а..
с,
а:
С1)
1-
>
N
Справочник HTML
n
t:I
m
-т,
С)
:::i::
r3:
z
о
"'tl
дующие теги: а, audio с элементами управления,
button, details, embed, iframe, img с usemap, input,
keygen, label, object с usemap, select, textarea и
video).
Атрибуты:
• download
"имя_файла" [ только в
HTMLS.1] - указывает на использование
ссылки для загружаемого ресурса. Позво
ляет указать имя файла, которое должно
быть присвоено в локальной файловой
системе сразу после загрузки файла. По
зволяет переименовать файл на локальном
компьютере пользователя, когда он загру
зит его.
• href = "URI" - позволяет указать место
положение целевого документа или веб
ресурса. Можно создать ссылку, например,
другой НТМL-документ, на картинку, зву
ковой файл, РDF-документ, архив и т.д.
• hreflang = "код языка" - указывает основ
ной язык целевого документа.
l
I
I
I
I
1
• media = "all aural braille handheld print
projection screen tty tv" [HTML5) -ука
зывает носитель целевого документа
I
с,)
с:
<
N
I
• rel = "ключевое слово типа ссылки" -опи
сывает связи между исходным и связан
ным документами. Для элемента а при
меняются следующие типы ссылочных
связей - alternate, author, bookmark, help,
Часть 2. Справочник теrов HTML5
license, next, nofollow, noreferrer, pref etch,
prev, search и tag.
• target = "текст" - содержит имя окна или
области iframe, где будет отображаться це
левой документ. Использование фреймов в
современных документах не рекомендует
ся.
ЕfитмL
са
u
С1
w
• type = "тип MIME" - указывает тип кон
тента (тип MIME), например, text/html.
с,
•
::i::
Глобальные атрибуты HTML.
L.L.
Примеры ссылок:
Ссылка на локальный файл:
Документ будет
загружен в окно браузера
предложит
Браузер
загрузить архив
Ссылка на удаленный ресурс:
...J
z
о
href="https://nit.center">Бyдeт
Ссылка на удаленный архив
а..
По этой ссылке будет загружен почтовый кли
ент для отправки сообщения на указанный адрес:
и,
href="mailto:den@example.com">den@
N
Справочник HTML
n
t:I
rт,
.,,
Ссылка на номер телефона - на мобшzъных
устройствах браузер предложит набрать дан
ный номер, на стационарном - будет загружена
программа, позволяющая произвести набор, если
такая установлена:
href="tel:+7lll2223344">Hoмep
N
Справочник HTML
Атрибуты:
g:,
n
CJ
m
.,,
• alt = "Текст" - задает описание изображе
ния - на случай, если файл изображение
недоступен или отображение картинок
выключено для экономии трафика.
• coords = "значения" - содержит список
значений координат, разделенных запяты
ми, которые описывают "горячую" область
карты изображений.
• download = "имя файла" [ только HTMLS]
- позволяет задать имя файла на компью
тере пользователя после его загрузки.
r-
• href = "URI" -адрес документа или ресур
са, который станет доступным после того,
как пользователь щелкнет по области, опи
санной в теге coords.
z
• hreflang = "код языка" -указывает основной язык целевого документа.
.,,
• media = "all aural braille handheld print
projection screen tty tv" [HTML5] -ука
зывает носитель целевого документа
::о
-t
<
N
I
I
I
I
I
I
I
1
• rel = "ключевое слово типа ссылки" - опи
сывает связи между исходным и связанным
документами. Для элемента а применяют
ся следующие типы ссылочных связей - al
ternate, author, bookmark, help, license, next,
nofollow, noreferrer, pref etch, prev, search и
tag.
ШИТМL
Часть 2. Справочник тегов НТМL5
I
I
I
• shape = "rect circle poly default" - определяет форму области.
• target = "текст" - содержит имя окна или
области iframe, где будет отображаться це
левой документ. Использование фреймов в
современных документах не рекомендует
ся.
са
u
w
LL
• type = "тип MIME" - указывает тип кон
тента (тип MIME), например, text/html.
с.::1
•
:с
Глобальные атрибуты HTML.
Пример:
Тег article
...J
z
С1
D..
Синтаксис:
а:
...
сп
Тег article своими открывающим и закрываю
щим тегами определяет самостоятельную часть
документа, страницы или сайта, предназначен
ную для независимого использования и обосо
бленного восприятия. Это может быть статья в
1-
>
N
ts,HTML
са
Справочник НТМL
блоге, статья в журнале или газете, какой-либо
другой самостоятельный фрагмент содержимо
го. Теги article могут быть вложенными.
С"')
С1
m
...,
:::i:::
"'
r-
z
С1
-а
:::D
сп
Атрибуты:
• Глобальные атрибуты HTML
Пример:
Изучаем ZFS
Каждые
несколько
лет,
кто
то делает прогноз о том, сколько
компьютерных
ресурсов,
скорее
всего,
понадобится
будущем.
в
Позже, все смеются над наивностью
этих прогнозов. В проектировании
ZFS, Sun попыталась избежать этой
ошибки.
Далее следует контент статьи
&сору; Виктор Черкасов
Тег aside
Синтаксис:
...
с:
<
N
Тег aside представляет собой часть документа,
чье содержимое только косвенно связанно с ос
новным содержимым документа. Чаще всего
Часть 2. Справочник тегов HTML5
представлен в виде боковой панели, сносок или
меток. Внешний вид содержимого тега aside (а
между его открывающим и закрывающим тегами
может быть все что угодно в плане HTML) ни
как не определяется самим тегом aside, данным
тегом просто придается определенный смысл
фрагменту html-документа, а выделяется этот
фрагмент. А вот как именно он будет отображен
- в виде боковой панели, сноски или еще как-то,
это вы уже сами зададите с помощью таблиц сти
лей.
ШИТМL
с
w
u..
Атрибуты:
• Глобальные атрибуты HTML
Пример:
Изучаем ZFS
Каждые
несколько
лет,
кто
то делает прогноз о том, сколько
компьютерных
ресурсов,
скорее
всего,
понадобится
будущем.
в
Позже, все смеются над наивностью
этих прогнозов. В проектировании
ZFS, Sun попыталась избежать этой
ошибки.
Другие статьи по этой теме:
Пoдpoбнo о
ZFS
Файловая система Linux
N
Справочник HTML
IZI
li>
(")
С)
rт,
.,,
:i:
г
з:
z
о
.,,
Тег audio
Синтаксис:
...
Позволяет вставить звуковой файл в НТМL
документ. Адрес звукового файла задается
атрибутом src. Поскольку разные браузеры под
держивают разные форматы звуковых файлов,
элемент audio включает наборы параметров для
форматов файлов. Также этот тег поддерживает
альтернативный контент, отображаемый браузе
ром, который не поддерживает данный тег.
Браузеры постоянно совершенствуются. В та
блице 1 приводится информация о поддержке
аудио-форматов различными браузерами на мо
мент написания этих строк. Но со временем мо
жет все поменяться.
.о
::D
сп
с:
N
Таблица 1 . Аудио-форматы и браузеры
р
Chrorne О era
Safari Firefox
ogg/vor- Ьis
+
+
-
+
-
+
+
+
+
Формат
wav
IE
Часть 2. Справочник тегов HTMLS
1: 1: 1: 1: 1: 1
E;fHTML
Атрибуты:
• autoplay (или autoplay="autoplay")
звук начинает играть сразу после загрузки
страницы.
• controls (или controls= "controls") - добав
ляет панель управления к аудиофайлу.
• loop (или loop= "loop") - повторяет вос
произведение звука с начала после его за
вершения.
• muted (или muted="muted") - отключает
(приглушает) звук.
• preload = "попе I metadata I auto" - ис
пользуется для загрузки файла вместе с
загрузкой неб-страницы. Значение попе
предотвращает предварительную загрузку,
metadata осуществляет выборку метадан
ных ресурса, но не загружает сам звуковой
файл, auto - обеспечивает автоматическую
загрузку файла.
• src = "путь к файлу" - указывает путь к
воспроизводимому файлу.
•
Глобальные атрибуты HTML.
С1
w
и..
с,
:::i:::
...J
z
С)
о...
CJ
а:
сп
1-
Пример:
>
N
-lsHTML
С")
,,,
Справочник HTML
Тег audio не поддерживается вашим
браузером.
Скачайте
музыку.
"Т1
С')
::::i:::
,...
z
с:,
-g
с
сп
--1
с::
N
Тег source позволяет указать несколько источни
ков звукового файла - в разных форматах (для
обеспечения совместимости с разными браузера
ми), что и продемонстрировано в этом примере.
Также мы задаем текст, который будет показан,
если браузер не поддерживает тег .
Terb
Синтаксис:
...
Используется для выделения полужирным
текст, заслуживающий внимания. Собственных
атрибутов не имеет, но можно использовать гло
бальные атрибуты HTML.
Пример:
Этот текст будет выделен жирным
Атрибуты:
•
Глобальные атрибуты HTML.
Часть 2. Справочник тегов HTML5
l!)HTML -
Тег base
Синтаксис:
u
Тег base используется для явного задания пол
ного URL-aдpeca документа. Это бывает полезно
ввиду того, что общепринятым стилем задания
гипертекстовых ссылок является относительная
их адресация. То есть при задании ссылки на до
кумент указывается не полный его URL-aдpec, а
задается его месторасположение относительно
текущего адреса. Так вот тег BASE как раз и зада
ет адрес, относительно которого и будут браться
относительные ссылки в НТМL-документе.
w
u..
:::i:::
...J
Пример относительной ссылки:
Такой стиль полезен тем, что при переносе всего
дерева НТМL-документов в другое место (сайт),
не требуется изменять ссылки в самих НТМL
документах.
Использование тега base позволяет реализовывать относительные ссылки в том случае, когда
НТМL-документ перемещен (или скопирован),
а все остальное дерево документов, на которые он
ссылается, нет. Адрес его поменялся (например, до
кумент лежал на www.anekdot.ru , а теперь у Вас
дома, на диске С), однако при активизации от
носительной ссылки, она будет взята браузером
z
о..
о
а:
v.i
1-
N
&)ИТМL
Справочник НТМL
относительно исходного адреса, прописанного в
теге base.
n
t:I
m
"Т(
С)
:i:
;к;
r-
z
С)
"'tl
Атрибуты:
• href = "URL" - задает URL документа, ис
пользуемый в качестве базового при раз
решении относительных идентификаторов
URL.
• target
"имя" - определяет заданное по
умолчанию целевое окно или фрейм для
всех ссылок, используемых в документе.
Использование фреймов не рекомендует
ся!
•
Глобальные атрибуты HTML.
Начальный тег base обязателен, конечный тег за
прещен.
Тег base можно использовать и в заголовке и в
теле документа, причем несколько раз. Область
действия тега base определяется от места его за
дания и до конца документа, или до следующего
объявления тега base, если таковой имеется.
Пример:
<
N
Документ с
использованием элемента BASE
...текст документа ...
...текст документа...Ccылкa на
изображение ret.gif
... текст документа ...
Пepexoд к
следующей главе
...текст документа.. .
...текст документа...
...текст документа...
В этом примере переход по относительным ссыл
кам задается относительно URL-aдpeca https://
www.nit.center. Таким образом, заданные в этом
документе ссылки в абсолютном варианте всегда
(независимо от месторасположения документа)
будут иметь следующий вид: https://www.nit.
center/images/ret.gif и https://www.nit.center/
chapter2.html. Если базовый адрес задан бы не
был, то эти ссылки интерпретировались бы отно
сительно каталога, в котором находится данный
документ. Соответственно при перемещении
документа изменялись бы цели относительных
ссылок.
Тег bdi
\sJHTML-
u
с
1.1.1
1.1..
:::i:::
::.::
...J
z
о
а..
с:,
се
и,
1-
Синтаксис:
...
N
-isJHTML
·-- - - -- - ---- - - -- '
n
CJ
rn
.,,
:::z::
Справочник НТМL
Применяется для выделения текста, который
может читаться в направлении, противополож
ном направлению окружающего текста.
Атрибуты:
I
I
• dir = "ltr rtl auto" - указывает направле
ние чтения текста: ltr ( слева направо), rtl
(справа налево), auto ( определяется брау
зером). Если атрибут не указан, использу
ется значение auto.
•
Глобальные атрибуты HTML.
Пример:
�
r-
з::
z
CJ
.,,
С)
:а
и
-1
с:
<
N
Ш3n - суббота
Тег bdo
Синтаксис:
...
Элемент применяется для выделения текста, ко
торый читается в обратном направлении.
Атрибуты:
I I
• dir = "ltr rtl auto" - указывает направле
ние чтения текста: ltr ( слева направо), rtl
( справа налево), auto ( определяется брау
зером). Если атрибут не указан, использу
ется значение auto.
•
Глобальные атрибуты HTML.
Часть 2. Справочник тегов HTMLS
ЁfHTML
Пример:
A роза упала на лапу
Азора
Тег Ыockquote
Синтаксис:
с.,
с
w
u..
...
Используется для отображения длинной цита
ты, которая была позаимствована из другого ис
точника. Текст, обозначенный этим тегом, тради
ционно отображается как выровненный блок с
отступами слева и справа (примерно по 40 пик
селов), а также с отступами сверху и снизу.
Атрибуты:
:::i:::
__,
z
• cite = "URL" - адрес, который указывает
на источник цитаты.
Пример:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit,
sed diem nonummy nibh euismod tincidunt
ut lacreet dolore magna aliguam
erat volutpat. Ut wisis enim ad minim
veniam, quis nostrud exerci tution
ullamcorper suscipit lobortis nisl ut
aliquip ех еа commodo consequat.
с:,
а:
U)
N
Справочник HTML
-(DHTML
Тег body
n
Синтаксис:
с
...
m
В теле документа располагается содержательная
его часть. В качестве тела документа определен
элемент-контейнер body. Начальный и конеч
ный теги являются необязательными ( необхо
димость их использования определяется контек
стом).
с:,
:z:
Атрибуты:
r-
з::
z
С1
..,,
CJ
::D
-t
с:
<
N
• Глобальные атрибуты HTML
• Обработчики событий HTML (onload,
onunload, ononline и т.д.)
Пример:
Пpимep
Контент документа
Terbr
Синтаксис
Часть 2. Справочник тегов HTML5
l§JИTML -
Формирует разрыв строки в контенте, например,
в почтовом адресе. Собственных атрибутов нет,
только глобальные атрибуты HTML.
с
Пример:
w
ул. Колмогорова, l
Москва, Россия
11999l
address html
С
О
х
с.:,
:с
+
0 Файл C:/temp/l1tml/address html
ул. КDл.могорова, 1
Москва, Россия
119991
.....1
:::Е
z
С)
CL.
с:,
а:
сп
1-
Рис. З. Демонстрация использования meza
>
N
-ШНТМL
Справочник HTML
Тег butto11
С"')
Синтаксис:
i:::,
...
,,,
.,,
Тег создает кнопку и по своему действию напо
минает тег . Кнопки ис
пользуются, как правило, в формах данных. Дей
ствие кнопки задается, как правило, с помощью
обработчика события onclick (будет далее пока
зано в примере).
Атрибуты:
• autofocus - отображает кнопку с выделен
ным фокусом (кнопка будет сразу выделе
на и доступа для нажатия).
z
о
:а
сп
с::
<
N
• disaЫed - кнопка будет выключена и недо
ступна для нажатия. Позже кнопку можно
будет активировать с помощью JavaScript,
но рассмотрение данного приема выходит
за рамки этой книги.
• form = "идентификатор формы" - явно
связывает кнопку с формой, идентифика
тор которой указывается с помощью дан
ного атрибута.
• formaction = "URL-ссылка" - указыва
ет приложение, обрабатывающее форму.
Выполняет те же функции, что и атрибут
action для тега form.
Часn. 2. Справочник теrо■ НТМL5
• fonnenctype = "тип контента" - задает спо
соб кодирования данных формы. При зна
чении application/x-www-forrn-urlencoded
вместо пробелов ставится +, символы
вроде русских букв кодируются их шест
надцатеричными значениями (например,
%D0%9F%D0%BS%D1%82%D1%8F вме
сто Петя). Значение rnultipart/forrn-data
означает, что данные не кодируется. Это
значение используется при отправке фай
лы. Значение text/plain означает, что про
белы заменяются знаком +, а остальные
символы не кодируются.
• fonnmethod = "метод отправки формы" указывает метод пересылки данных фор
мы. Допустимые значения GET и POST,
аналогично, как и для атрибута method тега
ifHTML -
w
LL.
С1
:с
...1
/от�.
• fonnnovalidate - отменяет проверку дан
ных, введенных пользователем в форме на
корректность.
• fonntarget = "имя" - указывает целевое
окно, в котором отображаются результаты
передачи данных формы. Выполняет ту
же функцию, что и атрибут target для тега
forrn.
• menu = "текст" - задает меню, которое бу
дет отображено при нажатии кнопки, если
для ее атрибута type используется значе
ние тепи.
z
о
а
а:
сп
1-
N
-ШИТМL
Справочник HTML
• name = "текст" - присваивает имя элемен
ту управления - кнопке.
С")
m
.,,
:i:
I
з:
z
.,,
С1
:;а
--1
с::
<
N
I
• value = "текст" - присваивает значение
кнопки. Поведение кнопки задается атри
бутом type.
•
.....
I
• type = "submit reset button menu" - опре
деляет поведение кнопки: submit ( отправка
формы, по умолчанию), button ( клиентская
кнопка, управляемая с помощью кода Ja
vaScript), reset ( сброс формы к значениям
по умолчанию), тепи ( отображает меню,
заданное атрибутом menu).
Глобальные атрибуты HTML.
Примеры:
Кнопка, при нажатии на которую происходит
переход по ссылке. Это достигается благодаря
вложению теrа button в теr а:
Пepeйти
на
сайт
Кнопка отправки формы:
Oтпpaвить
Кнопка, при нажатии на которую вызывается JS
функция ShowAlert():
Часть 2. Справочник тегов НТМLS
tsJHTML -
onclick="ShowAlert()">Пoкaэaть
N
-ШИТМL
Справочник НТМL
• btn-link - кнопка в виде ссылки. Цвет фона
- белый, цвет текста - синий.
Атрибуты:
• height = "число" - высота области холста,
выраженная в пикселях.
• width = "число" - ширина области холста,
выраженная в пикселях.
•
Глобальные атрибуты HTML.
Пример:
:::i:::
.....
3
z
С)
"'tl
с
:,а
сп
с:
<
N
function draw() {
document.
canvas
var
getElementByid("box");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(170, 110, 250)";
ctx.fillRect(60, 70, 85, 100);
width="350"
t!JHTML -
Часть 2. Справочник тегов HTMLS
Х
1,m1,,,1:l1lr•1I
С
- -- - -- -- -- --- - - -
О
0 Ф,1и11
{ /tPн1p/h101l/�1111,I
..,....
\
В течен11е 2002 11 2003 ro:toв R�d Hat серызно р,11:шпрпз ЛJIRt'ЙJ..)' проду1uов с оn;рьrтыю1 нсхо.:nш
Enterprise:-.1111иeJiюt. Продукты лнншI Red Hat Ei1t�rprise Liuux 1аннмаюг ,'Iцднрующее nш1оженне с
коммерчес.:оrо прлмененш1.
/1ftps:t!k.,,-..1:lmш:ce11t�r. rrй1rr1c/e/obzor_Jeme1sn·o_prot1ukto,,_1-ed_hat_enterpriJ.e_linu_3
Позволяет выделить фрагмент компьютерного
кода, который будет отображаться как встроен
ный элемент. Браузеры отображают содержимое
этого тега с помощью моноширинного шрифта.
'
''
-а :
Атрибуты:
'
'
..' - - -- - -------- - -- ..'
z:
.
_____
,.''
.
.. - - - - - - - - - - - - - - - - ◄
► - - - - - - - - - - - - - - - - ..
• Глобальные атрибуты HTML
Пример:
сп ':
► - - - - - - - - - - - - - - - - ·•
.....
:
с:: :
'
•---------------- ...
Создает столбец в таблице (или столбцы с по
мощью атрибута span). Свойства атрибута могут
применяться ко всем ячейкам в столбце. Данный
элемент не выполняет структурное группиро
вание столбцов, а является пустым элементом,
обеспечивающим совместное использование
атрибутов. Его нужно включать после элемента
заголовка и перед произвольными элементами
строки или группы строк вместе с элементом
tаЫе.
z
о
а..
с:,
а:
и
....
>
N
-iJMTML
Справочник НТМL
·----------------
.. - - - - - - - - - - - - - - - -
Атрибуты:
• span = "число" - указывает количество
столбцов, которые попадают в область дей
ствия элемента col.
rт,
...,
С')
:::i:::
r-
з::
z
о
"'tl
•
Глобальные атрибуты HTML.
Пример:
b order= "O"
width = "400"
Столбец 1
Cтoлбeц 2
Тег colgroup
Синтаксис:
...
:::D
с:
<
N
Позволяет группировать столбцы таблицы.
Таблица может отображаться вся сразу, а мо
жет последовательно . В первом случае браузер
ждет загрузки содержимого всех ячеек таблицы
и только после этого отображает таблицу. Для
убыстрения загрузки рекомендуется организо
вывать последовательное отображение таблицы.
Часть 2. Справочник тегов HTML5
В этом случае сначала загружаются и отобража
ются границы таблицы (если они есть), затем по
очереди загружается и отображается содержимое
ячеек. При этом загрузка всей таблицы по време
ни не меняется, но зато значительно уменьшает
ся время ожидания первого представления та
блицы (первой отображенной информации), что
делает ее загрузку гораздо привлекательней. Для
обеспечения последовательного отображения
таблицы браузеру необходимо указать ее пред
варительные размеры. Для этого и используются
теги colgroup. У данного тега есть атрибут span =
"число", который и задает количество столбцов,
попадающих в область действия тега colgroup.
Тег colgroup используется после тега caption
(при наличии) и перед тегами строки (tr) или
группы строк.
Атрибуты:
•
span
•
Глобальные атрибуты HTML.
"число" - количество колонок, к
которым следует применять атрибуты.
Е}ИТМL -
w
LL.
:i::
..J
:1::
о
CL.
с,
Пример:
продолжение разметки таблицы
а:
сп
1-
::>
N
-l!JHTML
Справочник HTML
Teгcommand
Синтаксис:
m
"Т1
С')
:::i::
Данный элемент используется вместе с элемен
том тепи и является интерактивным. Он пред
ставляет действие меню. В HTMLS.1 данный
элемент не рекомендуется к использованию,
а вместо него нужно использовать элемент
menuitem.
Атрибуты:
•
r-
•
z
о
"'tl
•
С1
:::а
--1
с::
<
N
checked - указывает на то, что данная ко
манда должна быть выбранной.
command
"идентификатор мастеркоманды" - если используется данный
атрибут, то состояние тега command уста
навливается на основании мастер-коман
ды.
disaЫed - указывает, что данная команда
меню временно недоступна.
•
icon = "URL картинки" - задает местона
хождение изображения, используемого в
качестве кнопки для команды.
•
label = "текст" - задает текст команды
меню.
•
radiogroup = "группа - задает название
группы команд, если выбран тип команды
radio.
Часть 2. Справочник тегов НТМL5
•
title = "текст" - создает подсказку для ко
манды.
•
type = "command/checkbox/radio"
задает тип команды. Ключевое слово
command создает обычную команду вместе
со связанным действием. Ключевое слово
checkbox создает команду в виде чек-бокса,
radio - в виде зависимого переключателя.
liJHTML -
- - - - - - - - - - - - - - - - ◄
•
w
L.I..
Глобальные атрибуты HTML.
Пример:
Тег data
:::i:::
...J
z
о
а..
Синтаксис:
...
Данный элемент поддерживается только в
HTMLS.1. Представляет распознаваемый ком
пьютером эквивалент для контента тега, исполь
зуемый при обработке данных. Может использо
ваться для всех видов данных, в том числе для
времени, даты, веса и т.д.
а
а:
и
1-
>
N
-lsHTML
Справочник HTML
Атрибуты:
.
,. - - - - - - - - - - - - - - - -
m
...,
С')
:i:
:;,,::
,-
z
С1
"'tJ
-1
с::
<
N
•
value
"значение" - поддерживает распознаваемый компьютером эквивалент
для контента элемента.
•
Глобальные атрибуты HTML.
Пример:
12 февраля 2021
года
Тег datalist
Синтаксис:
_.
Данный тег используется вместе с элемен
том управления input с целью создания нового
управления list. Данный тег создает раскрыва
ющееся меню, включающее набор предвари
тельно заданных вариантов. Используется для
реализации функции "автодополнения" ввода,
когда пользователь вводить данные в поле со
списком и получает список доступных вариан
тов. Разница между элементом datalist и select в
том, что в первом случае пользователю не нуж
но выбирать один из заранее заданных вариан
тов, а можно вводить в поле все что угодно.
Атрибуты:
•
Только глобальные атрибуты
Часn. 2. Справочник тегов НТМL5
lsfNTML -
-- - - -- - - - - - - - - - - ·
Пример:
а:\
•�J1,ll•'• h1rp!
f-
С
Х
O
0 Ф,,йл
u
w
u..
l /tPn1p/l1tml/riatalist ht111I
:с
ЯбЛОl(О
Апельсин
....1
z
Рис. 8. Тег datalist в действии
С)
1:\..
Terdd
с,
а:
Синтаксис:
...
Входит в тройку элементов , , ,
предназначенных для создания списка опреде
лений. Каждый такой список начинается с кон-
1-
>
N
-&,ИТМL
, - -- - ·· - ·- - - - - ·· - - -'
1:11
n
Справочник НТМL
тейнера , куда входит тег создающий
термин и тег задающий определение этого
термина. Закрывающий тег не обязате
лен.
Атрибуты:
m
.,,
:с
•
Глобальные атрибуты HTML.
Пример:
Термин l
Определение термина l
Термин 2
Определение термина 2
Тег del
z
-а
Синтакис:
...
Посредством данного тега отмечается удален
ный фрагмент документа. Используется для вы
деления правок в различных документах.
Атрибуты:
с::
<
N
•
cite = "URL-ссылки" - используется для
создания ссылки на исходный документ, в
котором указана причина изменения.
•
datetime = "ГГГГ-ММ-ДДТчч:мм:ссТZD"
- позволяет указать дату и время измене
ния.
Часть 2. Справочник тегов HTMLS
•
Глобальные атрибуты HTML.
Тег details
GfHTML с
--- - - -- ----- - - - - �
a::i
(.)
Синтаксис:
_
Представляет виджет замыкания. Тег details мо
жет включать тег summary, с помощью которого
формируется резюме или заголовок для деталей,
за которым следует дополнительный потоковый
контент.
u..
:с
Атрибуты:
•
•
open - указывает на то, что область, опи
сываемая тегом details, должна быть в от
крытом или явном состоянии, когда доку
мент загружается.
Глобальные атрибуты HTML.
Пример:
details
A это подробности!
-'
z
С)
Q..
о
а:
С1)
1-
>
N
-ШИТМL
Справочник НТМL
,..
•---------------'
'
Х
Ф"t,нl
N
-l§HTML
Справочник HTML
•
.,' _ _______________
'
Глобальные атрибуты HTML
Пример:
С")
..' - - - - - - - - - - -
CJ
'
Выберите
мoнcтpa
вашего любимого
Kraken
Sasquatch
,...
з::
z
о
""С11
Mothrnan
Пример показывает, как элемент груп
пирует части НТМL-формы, а вложенный эле
мент задает заголовок для .
11 1,.
Позволяет задать заголовок или легенду, относя
щуюся к тегу figure, который является родитель
ским по отношению к тегу figcaption.
Атрибуты:
•
::z:
Глобальные атрибуты HTML
Moя кoшкa
,,!l,t, !
1с-
С
Х
O
-
0 Ф,...� Г /t.-чщ1/h1щl/(,Jt 111ml
:::
.,�
t
1!
1
8
"
z
а..
а:
сп
1-
>
Рис. 14. Рисунок и подпись
N
. ..
- - .. - - -· - - '
·•·
Справочник HTML
Тег figure
с,
Синтаксис:
...
m
Используется для группирования любых эле
ментов, например, изображений и подписей к
ним.
Атрибуты:
•
Глобальные атрибуты HTML
::о::
Пример:
r-
См. figcaption
3:
z
Тег footer
С1
.,,
С1
::ж1
С1)
--f
с::
<
N
Синтаксис:
_.
Тег FOOTER представляет собой нижний колонтитул
(футер, подвал), содержащий информацию о документе,
его авторе, контакты и т.п. Такая область (набор тегов)
ограждается открывающим и закрывающим тегами
FOOTER и называется "подвалом" или "футером".
Подвал обычно располагается внизу интернет-страницы
(html-документа).
Атрибуты:
•
Глобальные атрибуты HTML
i)HTML -
Частъ 2. Справочник тегов НТМL5
<
Пример:
111
------------------
Название
документа
Шапка сайта
Навигация
Ссылка 1
Ссылка 2
Секция 1
Заголовок статьи
Контент
Подзаголовок статьи
Секция 2
Заголовок статьи 2
Контент
Подзаголовок статьи
Дата, адрес, авторство
с.,
С1
w
:ж:
...J
z
1:1.
с:,
а:
и
1::::,
>
N
.... .. - ·� - - - -
...
-{§jHTML
са
С")
Справочник HTML
Terform
Синтаксис:
...
m
С')
:ж:
Позволяет создать интерактивную форму, содер
жащей элементы управления, предназначенные
для сбора вводимых пользователем данных, а
также другого контента страницы. В документе
может быть несколько форм, но они не могут
вкладываться одна в другую и перекрываться.
Атрибуты:
accept-charset = "список кодировок" - позво
,-
z
ляет определить список кодировок симво
лов, которые должны приниматься серве
ров для обработки текущей формы. Чаще
всего используется кодировка utf-8. Но так
как в последнее время и серверы, и брау
зеры перешли на эту кодировку, то данный
атрибут можно вообще не указывать.
action = "адрес сценария обработки формы"
о
- указывает адрес приложения (сценария),
которое будет обрабатывать формы. Дан
ный атрибут является обязательным.
autocomplete = "on/off" - позволяет браузере
.....
с:
заполнить поля формы автоматически (оп)
или требует, чтобы пользователь каждый
раз сам вводить информацию (off).
enctype = "тип контента" - задает способ
кодирования данных формы. При значе-
N
Часть 2. Справочник тегов HTML5
нии
applicatioп/x-www-f orm-urleпcoded
вместо пробелов ставится +, символы
вроде русских букв кодируются их шест
надцатеричными значениями (например,
%D0%9F%D0%B5%D1%82%D1%8F вме
сто Петя). Значение multipart/form-data
означает, что данные не кодируется. Это
значение используется при отправке фай
лы. Значение text/plaiп означает, что про
белы заменяются знаком +, а остальные
символы не кодируются.
method = "GET/POSТ" - указывает НТТР
метод, используемый для передачи данных
формы. При использовании метода GET
информация, введенная пользователем,
будет добавлена к URL и отправлена вме
сте с URL-ссылкой.
ЕfитмL се
1:С
(.)
w
С1
:с
....1
nаmе = "имя" - присваивает имя форме.
novalidate - указывает на то, что форма не
была верифицирована при передаче дан
ных.
target = "имя" - указывает цель для резуль
татов передачи данных формы, которые
должны быть загружены. Атрибут позво
ляет указать окно, в которое будет загру
жен результат обработки формы. Можно
использовать специальные целевые значе
ния _top, _bottom, _parent, _self.
•
z
с
а..
CJ
а::
сп
Глобальные атрибуты HTML.
:>
N
-\sJHTML
С")
1'Т1
► - ·- - - - - - - - -- - - - - - -
С')
Cnp&IIOЧHИK Н'ЦIL
Пример:
type="password"
Boйти
Х
form.html
С
,...
lлоrин
з:
!Пароль
z
О
G) Файл
+.
( '/tPr11p/f1trпl/forrп 11
1 Войти 1
С)
..,,
Рис. 15. Созданная форма
С1
:J:I
сп
с:
<
N
Теги Н1 ,Н2,НЗ,Н4, Н5,
Нб
Синтаксис:
...
Часть 2. Справочник тегов HTML5
...
...
...
...
...
Язык HTML определяет шесть заголовков раз
ного уровня, демонстрирующие важность сек
ции, расположенной после заголовка. Тег h1
представляет самый важный заголовок первого
уровня, а тег h6 используется для обозначения
заголовка шестого уровня и является наименее
значимым.
Теги h1, ...,h6 относятся к блочным элементам,
они всегда начинаются с новой строки, а после
них другие элементы отображаются на следую
щей строке. Кроме того, перед заголовком и по
сле него добавляется пустое пространство.
При использовании тегов Н1, Н2, НЗ, Н4, HS,
Н6 задание начального тега является обязатель
ным. Конечный тег может не указываться, тогда
заголовком будет считаться все, что расположе
но после начального тега.
Атрибуты:
ШНТМL -
а::1
с..,
с
w
u...
с:,
--1
:z
D..
с:,
а:
•
Глобальные атрибуты HTML
сп
Пример:
1-
Глава l
Раздел l.l
Раздел 1.1.1
>
N
-l§HTML
Справочник HTML
,---------------'
... - .. -- - - .. -- .. - - - - - -
.' -------- --- ---- -
Х
!1t1l1tml
С О
0 Ф,1и11
+
С /tE:>tnp/t1tml/llr1 !1tml
�i
,,,.,,
i
я! 1 •IВ
Глава 1
Раздел 1.1
Рац,,1 1.1.1
m
..,,
с,
Рис. 16. Заголовки h1, h2, hЗ
3:
z
с:::1
Тег head
Синтаксис:
...
:х,
сп
Тег (элемент заголовка) предназначен
для содержания в нем информации о документе,
а именно:
•
название документа (тег TITLE)
с:
•
полный URLдокумента (тег BASE)
<
•
управляющую информацию (тег МЕТА)
N
Часть 2. Справочник тегов НТМL5
•
список ссылок (тег LINK)
•
описание стилей (тег SТYLE)
•
задание скриптов (тег SCRIPT)
!JИТМL ----------------·'
- - - - - - - - - - - - - - - - ..'
''
а::1
''
-------- - -- - - --- ◄
С,.)
:
С1
Тег HEAD имеет один необязательный атрибут
profile, указывающий не внешний файл мета-эле
ментов. В качестве значения атрибута задается
адрес URL. Задание тега HEAD в общем виде
выглядит так:
...список элементов заголовка ...
...список элементов заголовка...
...список элементов заголовка...
Атрибуты:
•
w
1.1..
- - - - - - - - - --- - - - - ..
.....1
::е
z
Глобальные атрибуты HTML
Пример:
Книги из магазина
hl {color: red; }
''
'
- - - ---- - - - - - - ---◄
а..
а
а:
С1)
1-
:::,
>
N
-ШНТМL
а1
Справочник HTML
Тег header
Синтаксис:
С"')
m
...,
...
Своими открывающим и закрывающим тега
ми определяет заголовочную часть НТМL
документа. Обычно в этой части (в качестве со
держимого тега HEADER) располагаются теги
навигации, изображение логотипа, заголовок
с названием сайта и т.п. Внутри содержимого
могут быть любые теги за исключением тегов
HEADER и FOOTER.
Атрибуты:
Используется для группирования заголовков
неб-страницы или раздела. Внутри располагают
ся теги заголовков от до . Данный тег
помечен, как подлежащий удалению из HTMLS,
поэтому его использование не рекомендуется.
(.)
- - - - - - - - - - - - - - - - ..
w
Атрибуты:
•
Глобальные атрибуты HTML
....1
Пример:
Заголовок 1
Заголовок 2
Terhr
Синтаксис:
::Е
z
о
1:1..
а:
Используется для отображения горизонтальной
линии, как правило, такая линия использует
ся для разделения различных блоков текста. В
последнее время данный тег используется все
1::::,
>
N
-Ё]ИТМL
Справочник HTML
реже, но, тем не менее, он поддерживается совре
менными браузерами.
С")
с
Атрибуты:
•
Глобальные атрибуты HTML
m
"Т1
С')
Пример:
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque et arcu metus.
Quisque semper dignissim felis. Nullam
sed commodo lorem, at bibendum arcu.
,-
z
о
"'tJ
::а
Nullam sed commodo lorem, at bibendum
arcu. Maecenas tincidunt vehicula velit
et
euismod.
Donec
iaculis
viverra
consectetur.
hrhtml
С
Х
О
0 Файл
;
С.: /temp/htnil/hr t1trnl
Loreш ipsнm dolor sit amet. consectetш adipisciug elit. Qнisq11e et ar
co1шnodo lorem, at bibendum a1·cu.
Nullaш sed со1ш1юdо lorem. at bibe11d11m arcu. Маесепаs tincid11nt v
consectetur.
.....
с:
<
N
Рис. 17. Теz hr
Часть 2. Справочник тегов НТМL5
Тег html
Синтаксис:
1sfNTML -
---- ---------------···""
''
(.)
...
Заголовок и тело документа заключены в тег
контейнер html. Все остальные теги разметки
располагаются либо в заголовке, либо теле до
кумента. Данный тег является корневым, то есть
все остальные теги документа вкладываются в
этот тег.
w
u..
с::,
Атрибуты:
•
Глобальные атрибуты HTML
-'
Пример:
z
Название документа
Здесь располагается текст страницы
о
С1..
а
а:
1-
>
N
-ШНТМL
..' - - - - - - - - - - - - - - - '
:
IZI
n
t:I
rт,
.,.,
С)
�-------- - -------
Справочник НТМL
Тег i
Синтаксис:
...
Устанавливает курсивное начертание шрифта.
Данный тег можно использовать совместно с
другими тегами, которые определяют начерта
ние текста.
Атрибуты:
•
r-
з:
z
С)
""С1
Глобальные атрибуты HTML.
Пример:
Этот текст будет курсивным
Тег iframe
С1
Синтаксис:
;:g
...
и
с:
<
N
Создает плавающий фрейм, позволяющий за
гружать в область заданных размеров другие
независимые документы. Данный тег являет
ся контейнером, содержание которого игнори
руется браузерами, которые не поддерживают
данный тег. Для таких браузеров можно указать
Часть 2. Справочник тегов HTML5
текст, который увидят пользователи. Текст дол
жен располагаться между тегами и .
Атрибуты:
•
•
allowfullscreen - объект, находящийся во
фрейме, может использовать запрос на
переход в полноэкранный режим.
height = "число" - указывает высоту
встроенного фрейма.
•
name = "имя" - задает имя фрейма, кото
рое можно использовать для ссылки на
него с помощью целевых ссылок.
•
sandbox = "allow-forms / allow-pointer
lock / allow-popups / allow-same-origin
/ allow-scripts / allow-top-navigation" используется для активизации скриптов,
всплывающих окон, подключаемых моду
лей во внедренных документах.
•
seamless - при использовании этого атри
бута браузер будет трактовать внедрен
ный документ так, как будто бы он явля
ется частью родительского документа для
целевых ссылок, структуры документа и
CSS. Наиболее частое применение этого
атрибута - применения стилей CSS к вне
дренному документу.
• src = "URL-ссылка" - задает адрес
документа, который будет внедрен во
фрейм iframe.
• width = "число" - задает ширину фрейма.
ЁfИТМL · ·· - -· - - - -· - - - -· - ,
с:,;
СС1
с
w
u.
:::i:::
...J
z
о
а..
а:
сп
.....
N
lsfHTML
Справочник HTMI
Пример:
n
с,
m
...,
Х
1lld!�1r htm!
С)
f.
С
O
0 ,1)J"'JI
+
{ /H1rЩJ/11!m!/1f1df!IO �\(П\!
;,
:i:::
r-
z
С)
"'tl
:а
Рис. 18. Видео встроено в страницу
сп
•
с:
<
N
Глобальные атрибуты HTML
"'-"'
�
Часть 2. Справочник тегов HTML5
EJHTML
Тег img
Синтаксис:
(.)
Внедрение иллюстративных изображений в
HTML осуществляется посредством тега IMG,
имеющего следующие атрибуты:
•
•
•
•
src = "адрес картинки" - обязательный
атрибут, задающий URL-aдpec (полный
или относительный) расположения изо
бражения
width = "число", height="чиcлo" - геоме
трические размеры изображения, задава
емые либо в пикселах, либо в процентах
видимого пространства окна браузера
alt = "альтернативный текст" - атрибут,
имеющий в качестве значения текстовую
строку, которая является альтернативной
текстовой информацией текущего изобра
жения.
usemap = "карта" - использовать изображение совместно с клиентской навигаци
онной картой, имя которой указывается в
качестве значения этого атрибута.
•
ismap - использовать изображение со
вместно с серверной навигационной кар
той, имя которой указывается в качестве
значения этого атрибута.
•
Глобальные атрибуты HTML.
w
L.L
:i:::
...J
z
С)
1:1..
о
а:
сп
1-
>
N
8111•
ШИТМL
ш
n
с:,
m
.,,
С')
Справочник HTML
Тег IMG используется только с открывающим
тегом.
Пример:
Одна из частых задач - не просто вставка изо
бражения, а вставка слайдера (карусели). Ис
пользуя Bootstrap, вы можете создать слайдер
вовсе без знания JavaScript и CSS. Все, что вам
нужно - это использовать стандартные стили
Bootstrap. Рассмотрим пример:
:,,;
,...
z
с,
""О
с
::ю
С1)
-1
с
<
N
Kapyceль иэображений
Часn. 2. Справочник Т8f08 НТМL5
Карусель изображений
l!fHTML
IZI
(.)
С1
w
u..
с.:,
::z::
...J
z
а
с:
<
N
Для создания кнопки используется тип button.
Создается кнопка, которую можно нажать. При
этом поведение кнопки не определяется тегом.
При использовании кнопки разработчик сам
должен запрограммировать ее действие с помо
щью обработчика события onclick.
\DHTML
Частъ 2. Справочник тегов НТМL5
Мill.
- - - - .. .. - - - - - .. - .. --•
name= "simpeBtn"
type= "button"
Тип submit создает кнопку отправки форму, а
тип reset - кнопку сброса формы к значениями
по умолчанию. Внешне все эти кнопки выглядят
одинаково:
type="button"
name= "simpeBtn"
\)t,
narne="phone"
Ввод URL: url
Такая ситуация и для поля типа url. Поле отобра
жается как обычное текстовое поле и его функ
ционал никак не препятствует вводу значений,
отличных от URL. Зато отправить форму на сер
вер у вас не получится, пока данное поле не бу
дет содержать URL-aдpec:
Последние комментарии
1 день 21 часов назад
2 дней 1 час назад
2 дней 3 часов назад
2 дней 4 часов назад
2 дней 5 часов назад
2 дней 7 часов назад