Структура HTML-документ. Часть 2
Сегодня мы продолжим изучать тему Структур HTML-документов. Это очень важная тема, которая является одной из базовых тем при изучении HTML.
Если пропустили прошлую статью, вот ссылка на нее:
Структура HTML-документа. Часть 1
Структура веб-страницы
Содержание:
Часть 1
1. Структура HTML-документа
1.1. Элемент <html>
Часть 2
1.2. Элемент <head>
1.2.1. Элемент <title>
1.2.2. Элемент <meta>
1.2.3. Элемент <style>
1.2.4. Элемент <link>
1.2.5. Элемент <script>
1.3. Элемент <body>
1.2. Элемент <head>
Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
Для элемента доступны глобальные атрибуты.
1.2.1. Элемент <title>
Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
Для элемента доступны глобальные атрибуты.
1.2.2. Элемент <meta>
Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.
HTML
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
HTML
<meta name="description" lang="ru" content="Описание содержимого страницы"> <meta name="description" lang="en" content="Description"> <meta name="keywords" lang="ru" content="Ключевые слова через запятую"> <meta name="keywords" lang="en" content="Keywords">
С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
HTML
<meta name="robots" content="index, follow">
Индексация разрешена, переход по ссылкам запрещен:
HTML
<meta name="robots" content="index, nofollow">
Индексация и переход по ссылкам запрещены:
HTML
<meta name="robots" content="noindex, nofollow">
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
HTML
<meta http-equiv="refresh" content="30">
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
HTML
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также глобальные атрибуты.
ТАБЛИЦА 2. АТРИБУТЫ ТЕГА <META>
Структура таблицы следующая: Атрибут - Описание, принимаемое значение
- charse - Указывает кодировку символов для текущего HTML-документа:
<meta charset="UTF-8">
- content - Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
- http-equiv - Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы". Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
<meta http-equiv="refresh" content="30">
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре
url:<meta http-equiv="refresh" content="0; url=http://mail.ru/">
- name - Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop. application-name - указывает название веб-приложения, используемого на странице. author - указывает имя автора документа в свободном формате. description - определяет краткое описание к содержимому страницы, например:
<meta name="description" content="Описание содержимого страницы">
generator - указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="WordPress 4.0">
keywords - содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую">
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято.
1.2.3. Элемент <style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.
Для элемента доступны атрибуты media, scoped, type, а также глобальные атрибуты.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
HTML
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
HTML
<div class="paper"> ... </div>
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:
HTML
<p style="color: #666666; background-color: #ef4444; padding: 20px;">
ТАБЛИЦА 3. АТРИБУТЫ ТЕГА <STYLE>
Структура таблицы следующая: Атрибут - Описание, принимаемое значение
- media - Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
- nonce - Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
- type Определяет MIME-тип подключаемого файла со стилями, в данном случае
<style type="text/css">
1.2.4. Элемент <link>
Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.
Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url
HTML
<!DOCTYPE html> <html> <head> <style> @import url(style.css); </style> <meta> <title> </title> </head>
с использованием элемента <link>. Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
HTML
<link rel="stylesheet" href="style.css" type="text/css">
Для элемента доступны атрибуты href, hreflang, media, rel, type, а также глобальные атрибуты.
ТАБЛИЦА 4. АТРИБУТЫ ТЕГА <LINK>
Структура таблицы следующая: Атрибут - Описание, принимаемое значение
- crossorigin - Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована. - href - Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
- hreflang - Определяет язык текста в документе, на который идет ссылка.
- media - Определяет тип устройства, к которым должен быть применен ресурс ссылки.
- nonce - Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
- rel - Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
<link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">. <link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml"> <link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news">
archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author - ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark - ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external - используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first - указывает ссылку, ведущую на первый документ из последовательности документов.
help - ссылка на документ со справкой.
icon - определяет путь к иконке, которая будет использована для текущего документа.
last - указывает ссылку, ведущую на последний документ в последовательности документов.
license - ссылка на сведения об авторских правах для документа.
next - указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html" title="Следующая страница">
nofollow - указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer - указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback - указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch - указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev - указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">
search - указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar - указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet - ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag - указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up - указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
- sizes - Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения:
ширина x высота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширина х высота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера.
- title - Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
- type - Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".
1.2.5. Элемент <script>
Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также глобальные атрибуты.
ТАБЛИЦА 5. АТРИБУТЫ ТЕГА <SCRIPT>
Структура таблицы следующая: Атрибут - Описание, принимаемое значение
- async - Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
- charset - Определяет кодировку символов
- crossorigin - Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен. - defer - Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
- nonce - Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
- src - Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
- type - Используются для объявления языка сценария, использованного при составлении содержимого тега.
1.3. Элемент <body>
В этом разделе располагается все содержимое документа. Для элемента доступны глобальные атрибуты.
ТАБЛИЦА 5. АТРИБУТЫ ТЕГА <BODY>
Структура таблицы следующая: Атрибут - Описание, принимаемое значение
- onafterprint - Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
- onbeforeprint - Событие, срабатывающее перед отправкой страницы на печать.
- onbeforeunload - Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
- onhashchange - Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onmessage Событие происходит, когда сообщение получено через источник события. - onoffline - Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
- ononline - Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
- onpagehide - Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
- onpageshow - Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
- onunload - Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.
Источник ↗