Добавлен: 13.05.2023
Просмотров: 546
Скачиваний: 5
<!DOCTYPE html> <!-- Объявление формата документа -->
<html>
<head> <!-- Техническая информация о документе -->
<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->
<title>...</title> <!-- Задаем заголовок документа -->
<link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->
<script src="script.js"></script> <!-- Подключаем сценарии -->
</head>
<body> <!-- Основная часть документа -->
</body>
</html>
Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом (см. рисунок 2).
Рис 2. Простейшая структура веб-страницы
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок - элемент, который заключает в себе другие элементы. На рисунке 2 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.
Потомок - элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.
Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 2 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.
Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 2 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.
Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 2 <head> и <body> — элементы одного уровня, так же, как и элементы <h1>, <h2> и <p>являются между собой сестринскими.
Элемент <html>
Является корневым элементом документа (см. таблица 1). Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также глобальные атрибуты.
Таблица 1. Атрибуты тега <HTML>
|
Атрибут |
Описание, принимаемое значение |
|
manifest |
С помощью значения атрибута указывается путь к документу кэша манифеста, например: |
Элемент <head>
Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.
Элемент <title>
Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.
Элемент <meta>
Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных. Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.
<meta name="description" content="Описание содержимого страницы">
<meta name="keywords" content="Ключевые слова через запятую">
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
<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> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:
Индексация и переход по ссылкам разрешены:
<meta name="robots" content="index, follow">
Индексация разрешена, переход по ссылкам запрещен:
<meta name="robots" content="index, nofollow">
Индексация и переход по ссылкам запрещены:
<meta name="robots" content="noindex, nofollow">
Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:
<meta http-equiv="refresh" content="30">
Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://yandex.ru/">
Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также глобальные атрибуты (см. таблица 2).
Таблица 2. Атрибуты тега <META>
|
Атрибут |
Описание, принимаемое значение |
|
charset |
Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8"> |
|
content |
Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения. |
|
http-equiv |
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: |
|
name |
Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop. |
Окончание Таблица 2.
Элемент <style>
Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько (см. таблица 3).
Для элемента доступны атрибуты media, scoped, type, а также глобальные атрибуты.
Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:
<div class="paper">
...
</div>
CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:
<p style="color: #666666; background-color: #ef4444; padding: 20px;">
Таблица 3. Атрибуты тега <STYLE>
|
Атрибут |
Описание, принимаемое значение |
|
media |
Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query. |
|
nonce |
Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
|
type |
Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">. |
Элемент <link>
Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css (см. таблица 4).
Подключить файл со стилями к веб-странице можно двумя способами:
- через директиву @import url
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title> </title>
</head>
- с использованием элемента <link>.
Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами.
. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:
<link rel="stylesheet" href="style.css" type="text/css">
Для элемента доступны атрибуты href, hreflang, media, rel, type, а также глобальные атрибуты.
Таблица 4. Атрибуты тега <LINK>
|
Атрибут |
Описание, принимаемое значение |
|
crossorigin |
Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта. |
|
href |
Основной атрибут тега, в качестве значения выступает путь к файлу со стилями. |
|
hreflang |
Определяет язык текста в документе, на который идет ссылка. |
|
media |
Определяет тип устройства, к которым должен быть применен ресурс ссылки. |
|
nonce |
Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста. |
Продолжение Таблица 4.
|
rel |
Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора. |
|
sizes |
Указывает размер иконок для визуального отображения. Атрибут sizesиспользуется только совместно с rel="icon", и может принимать следующий значения: |