САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

HTML5 Учебник

HTML Главная HTML Введение HTML Редакторы HTML Основные HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитирование HTML Комментарии HTML Цвета HTML c CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Путь к Файлу HTML Глава HTML Макет HTML Адаптивный HTML Компьютерный код HTML Объекты HTML Символы HTML Кодировка HTML URL Кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Тип ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые Элементы HTML5 Семантика HTML5 Миграция HTML5 Синтасис

HTML Графика

HTML Canvas HTML SVG HTML Google Карта

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Объекты HTML YouTube

HTML API

HTML Геолокация HTML Перетаскивание HTML Веб Хранилище HTML Веб Работник HTML СОС

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Возможности

HTML Справочники

HTML Список Тегов HTML Атрибуты HTML Глобальные HTML События HTML Цвета HTML Холст HTML Аудио/Видео HTML Декларации HTML Набор Кодировок HTML URL Код HTML Коды языка HTML Коды стран HTTP Сообщения HTTP Методы Ковертер PX в EM Клавишные комбинации

HTML Глава



Элемент <head> HTML

Элемент <head> контейнер для метаданных (данные о данных), размещается между <html> и тегом <body>.

HTML метаданные - это данные о документе HTML. Метаданные не отображаются.

Метаданные, как правило, определяют документ название, набор символов, стилей, ссылок, скриптов и другую мета-информацию.

Теги описания метаданных: <title>, <style>, <meta>, <link>, <script>, и <base>.


Элемент <title> HTML

Элемент <title> определяет название документа и является обязательным во всех документах HTML/XHTML.

Элемент <title>:

  • определяет заголовок на вкладке браузера
  • содержит заголовок для страницы, когда он добавляется в избранное
  • отображает название страницы в результатах поиска

Простой документ HTML:

Пример

<!DOCTYPE html>
<html>

<head>
 <title>Название Страницы</title>
</head>

<body>
Содержание элемента......
</body>

</html>
Редактор кода »

Элемент <style> HTML

Элемент <style> используется для определения информации о стиле для одной страницы HTML:

Пример

<style>
 body {background-color: powderblue;}
  h1 {color: red;}
 p {color: blue;}
</style>
Редактор кода »

Элемент <link> HTML

Элемент <link> используется для ссылки на внешние таблицы стилей:

Пример

<link rel="stylesheet" href="mystyle.css">
Редактор кода »

Совет: Чтобы узнать все о CSS, посетите наш Учебник CSS.


Элемент <meta> HTML

Элемент <meta> используется для указания, набора символов, описание страницы, ключевые слова, автор и другие метаданные.

Метаданные используются браузерами (для отображения контент), поисковых систем (ключевые слова), и других веб-сервисов.

Определить набор используемых символов:

<meta charset="UTF-8">

Определить описание вашей веб-страницы:

<meta name="description" content="Бесплатные веб-учебники">

Определить ключевые слова для поисковых систем:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Определить автора страницы:

<meta name="author" content="Щипунов Андрей">

Документ обновляется каждые 30 секунд:

<meta http-equiv="refresh" content="30">

Пример тега <meta>:

Пример

<meta charset="UTF-8">
<meta name="description" content="Бесплатные веб-учебники">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Щипунов Андрей">
Редактор кода »

Настройка Просмотра

В HTML5 введен метод, который позволить веб-дизайнеру, вести контроль над просмотром, через тег <meta>.

В области просмотра отображается зона пользователя веб-страницы. Это зависит от устройства и будет на мобильном телефоне меньше, чем на экране компьютера.

Вы должны подключить во всех ваших веб-страницах, элемент <meta>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Элемент <meta> viewport содержит инструкции для браузера о том, как контролировать размеры страницы и масштабирование.

Часть width=device-width задает ширину страницы, чтобы следить за экраном-ширины устройства (которые будут варьироваться в зависимости от устройства).

Часть initial-scale=1.0 наборов начального уровня масштабирования, для загрузки страницы сначала в браузере.

Вот пример веб-страницы without мета тега viewport, и той же веб-страницы with мета тега viewport:

Совет: Если Вы просматриваете эту страницу с телефона или планшета, Вы можете нажать на две ссылки ниже, чтобы увидеть разницу.



Элемент <script> HTML

Элемент <script> используется для определения клиентских сценариев JavaScript.

Этот JavaScript пишет "Привет JavaScript!" в элементе HTML с id="demo":

Пример

<script>
function myFunction {
   document.getElementById("demo").innerHTML = "Привет JavaScript!";
}
</script>
Редактор кода »

Совет: Чтобы узнать все о JavaScript, посетите наш Учебник JavaScript.


Элемент <base> HTML

Элемент <base> задает базовый URL-адрес и целевой базы для всех относительных URL на странице:

Пример

<base href="https://schoolsw3.com/images/" target="_blank">
Редактор кода »

Исключение <html>, <head> и <body>?

Согласно стандарта HTML5; теги <html>, <body> и <head> могут быть исключены.

Следующий код будет проверять как HTML5:

Пример

<!DOCTYPE html>
<title>Название Страницы</title>

<h1>Это заголовок</h1>
<p>Это параграф.</p>
Редактор кода »

Примечание:

SchoolsW3 не рекомендует исключать теги <html> и <body>. Исключение этих тегов может привести к сбою программного обеспечения DOM или XML и вызывать ошибки в старых браузерах (IE9).

Однако раньше в течение достаточно долгого времени, была обычная практика исключать тег <head>.


Элементы Главы HTML

Тег Описание
<head> Определяет информацию о документе
<title> Определяет название документа
<base> Определяет адрес по умолчанию или по умолчанию для всех ссылок на странице
<link> Определяет отношение между документом и внешним ресурсом
<meta> Определяет метаданные о документе HTML
<script> Определяет клиентский сценарий
<style> Определяет информацию о стиле документа