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

HTML5 Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторыHTML ОсновыHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML ЦветаHTML c CSSHTML СсылкиHTML ИзображенияHTML ТаблицыHTML СпискиHTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML JavaScriptHTML Путь к Файлу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 CanvasHTML SVGHTML 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> Определяет информацию о стиле документа