Разное

Html head: Тег | htmlbook.ru

05.07.2021

Содержание

Что внутри «head»? Метаданные в HTML — Изучение веб-разработки

Элемент head HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:

  • заголовок (title) страницы
  • ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
  • ссылки на иконки
  • другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.

Предварительные требования: Базовое знакомство с HTML , описанное в Начало работы с HTML.
Задача: Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.

Давайте снова посмотрим на HTML-документ из прошлой статьи:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Моя тестовая страница</title>
  </head>
  <body>
    <p>Это — моя страница</p>
  </body>
</html>

Содержимое <head>, в отличие от содержимого элемента <body>, не отображается на странице. Задача <head> — хранить метаданные документа. В приведённом выше примере <head> совсем небольшой:

<head>
  <meta charset="utf-8">
  <title>Моя тестовая страница</title>
</head>

Однако на больших страницах блок <head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое <head> с помощью инструментов разработчика. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.

Мы уже видели, как работает элемент <title>: его используют для добавления заголовка (названия страницы) в документ. Элемент <h2> (en-US) тоже иногда называют заголовком страницы. Но это разные вещи!

  • Элемент <h2> (en-US) виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
  • Элемент <title> — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого. 

Активное изучение: разбор простого примера

  1. Чтобы приступить к активному изучению,  скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
    1. Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
    2. Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как…
      в меню браузера и выберите папку для сохранения.
  2. Откройте файл в браузере. Вы увидите что-то вроде этого:

    Теперь должно стать совершенно ясно, в чём разница между <h2> и <title>!

  3. Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!

Содержимое элемента <title> используется и в других местах. Например, при добавлении страницы в избранное (Bookmarks > Bookmark This Page в Firefox), текст из <title> предлагается в качестве названия закладки.

Текст из <title> также появляется в результатах поиска, как мы скоро увидим.

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент

<meta>. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:

<meta charset="utf-8">

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-странице, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

Примечание: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.

Активное изучение: экспериментируем с символьными кодировками

Чтобы проверить это, вернитесь к HTML из примера <title> (странице title-example.html), поменяйте meta charset на ISO-8859-1 и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано «рис горячий»):

<p>Пример на японском: ご飯が熱い。</p>

Указываем автора и описание

У элементов <meta> часто есть атрибуты name и content:

  • name — тип элемента, то есть какие именно метаданные он содержит.
  • content — сами метаданные.

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

<meta name="author" content="Крис Миллс">
<meta name="description" content="Задача MDN — в том, чтобы обучить
новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

Активное изучение: как поисковые системы используют описание

Описание из <meta name="description"> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.

  1. Перейдите на главную страницу Mozilla Developer Network.
  2. Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
  3. Найдите тег meta с описанием. Он выглядит так:
    <meta name="description" content="Веб-документация на MDN
    предоставляет собой информацию об открытых веб-технологиях,
    включая HTML, CSS и различные API для веб-сайтов и
    прогрессивных веб-приложений. Также на сайте содержатся материалы
    для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
  4. Теперь найдите «Mozilla Developer Network» в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <meta> и <title> используется в результатах поиска, — мы не зря указали их!

Примечание: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через Google Search Console, чтобы пользователи могли сразу перейти к ним со страницы поиска.

Примечание: Многие типы <meta> больше не используются. Так, поисковые системы больше не используют данные из элемента <meta type="keywords" content="ваши, ключевые, слова, введите, здесь">, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.

Другие виды метаданных

В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.

Например, Протокол Open Graph создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:

<meta property="og:image" content="https://wiki.developer.mozilla.org/static/img/opengraph-logo.72382e605ce3.png">
<meta property="og:description" content="Веб-документация на MDN предоставляет
собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
продуктах Mozilla, как Инструменты разработчика Firefox.">
<meta property="og:title" content="MDN Web Docs">

Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия (User eXperience, UX).

У Twitter также есть собственный формат метаданных, с помощью которого  создаётся аналогичный эффект, при отображении URL сайта на twitter.com:

<meta name="twitter:title" content="MDN Web Docs">

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.

Чтобы добавить на страницу favicon:

  1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
  2. Добавьте ссылку на иконку в <head> документа:
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:


<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon144.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png">

<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">

<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">

В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении. 

Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент <link>, а скрипты — через элемент <script> .

  • Элемент <link> помещают в заголовок документа. У него есть два атрибута: rel="stylesheet" показывает, что мы указываем стиль документа, а в href указан путь к файлу:

    <link rel="stylesheet" href="my-css-file.css">
  • Элемент <script> не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом </body>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.

    <script src="my-js-file.js"></script>

    Примечание: Элемент <script> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.

Активное изучение: добавляем на страницу CSS и JavaScript

  1. Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
  2. Откройте HTML в браузере и текстовом редакторе.
  3. Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов <link> и <script>.

Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:

  • JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
  • CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.

Примечание: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу css-and-js.html.

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

<html lang="en-US">
<html lang="ru">

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

Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:

<p>Пример на японском: <span lang="jp">ご飯が熱い。</span>.</p>

Коды языков определены в стандарте ISO 639-1. Подробнее о работе с языками можно узнать в Языковые тэги в HTML и XML.

На этом заканчивается наш беглый обзор по HTML-блоку head  —  с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.

: элемент метаданных документа — HTML

HTML-элемент <head> содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.

Примечание: <head> в основном содержит информацию для машинной обработки, а не для восприятия человеком. Информацию, видимую человеком, такую как заголовки верхнего уровня и перечисленные авторы, смотрите в элементе <header>.

Категории контента Отсутствуют.
Разрешённое содержимое

Если документ является документом <iframe> (en-US) с атрибутом srcdoc (en-US), или если информация о заголовке доступна из протокола более высокого уровня (например, строки темы в электронном письме HTML), то ноль или более элементов содержащих метаданные.

Иначе, один или более элементов содержащих метаданные, один из которых является элементом <title>.

Пропуск тега Открывающий тег может быть пропущен, если первым, что находится внутри элемента <head> является другой элемент.
Закрывающий тег может быть пропущен, если первое, что следует за элементом <head> не является пробелом или комментарием.
Разрешённые родительские элементы Элемент <html> (<head> является его первым дочерним элементом).
Разрешённые роли ARIA Отсутствуют.
DOM-интерфейс HTMLHeadElement

К этому элементу применимы глобальные атрибуты.

profile Этот API вышел из употребления и его работа больше не гарантируется.
URI (en-US) одного или более профилей метаданных, разделённых пробелами.
<!doctype html>
<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
</html>

BCD tables only load in the browser

Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, пожалуйста проверьте https://github.com/mdn/browser-compat-data и отправьте нам «pull request» (предложение изменения кода в чужом репозитории).

  • Элементы, которые могут использоваться внутри <head>:

Head HTML уроки для начинающих академия



Элемент HTML <head>

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

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

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

Следующие теги описывают метаданные: <title>, <style>, <meta>, <link>, <script> и <base>.


Элемент HTML <Title>

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

Элемент <title>:

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

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

Пример

<head>
  <title>Page Title</title>
</head>

<body>
The content of the document……
</body>

</html>


Элемент HTML <Style>

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

Пример

<style>
  body {background-color: powderblue;}
  h2 {color: red;}
  p {color: blue;}
</style>



Элемент HTML <Link>

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

Пример

<link rel=»stylesheet» href=»mystyle.css»>

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


Элемент HTML <meta>

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

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

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

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

<meta name=»description» content=»Free Web tutorials»>

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

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

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

<meta name=»author» content=»html5css.ru»>

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

<meta http-equiv=»refresh» content=»30″>

Пример <meta> тегов:

Пример

<meta charset=»UTF-8″>
<meta name=»description» content=»Free Web tutorials»>
<meta name=»keywords» content=»HTML,CSS,XML,JavaScript»>
<meta name=»author» content=»John Doe»>


Настройка видового экрана

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

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

На всех веб-страницах следует включить следующий элемент <meta> видового экрана:

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

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

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

Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с тегом видового экрана <meta>:

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



Элемент HTML <script>

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

Этот JavaScript пишет «Hello JavaScript!» в HTML-элемент с ID = «Demo»:

Пример

<script>
function myFunction {
    document.getElementById(«demo»).innerHTML = «Hello JavaScript!»;
}
</script>


Элемент HTML <base>

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

Пример

<base href=»https://html5css.ru/images/» target=»_blank»>


Пропуск <HTML>, <head> и <BODY>?

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

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

Примере


Page Title

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

Примечание:

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

Однако Пропуск тега <head> был распространенной практикой уже довольно давно.


Элементы HTML-головки

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

HTML тег head

Элемент <head> является контейнером для всех головных элементов документа. В головной части HTML документа содержится информация об этом документе — заголовок документа, скрипты, стили, мета информация и т.д. Внутри элемента <head> могут использоваться элементы <title>, <meta>, <style>, <script>, <noscript>, <base> и <link>.

Элемент <head> может использоваться только один раз на странице. Появляться он должен сразу же после открывающего тега <html> и заканчивается непосредственно перед открывающим тегом <body>.

Разница между HTML 4.01 и HTML5

В HTML 4.01 тег <head> является обязательным.

В HTML5 элемент <head> может быть опущен. Следующий код успешно пройдет валидацию:


<!DOCTYPE html>
<html>
<title>Заголовок документа</title>

<body>
   <h2>Это текстовое заглавие</h2>
   <p>Это текстовый параграф.</p>
</body>

</html>

Атрибуты тега <head>

АтрибутОписание
profileОпределяет адрес профиля метаданных

Общие атрибуты

Тег <head> поддерживает общие атрибуты.

CSS стили по умолчанию

Большинство браузеров будут отображать тег <head> со следующими стилями


head { 
    display: none;
}

HTML пример использования

HTML документ с тегом <title> внутри секции заголовка:


<!DOCTYPE html>
<html>
<head>
   <title>Заголовок документа</title>
</head>

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

</html>

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



Элемент <head> (от англ. «head» ‒ «голова, заголовок») является контейнером для всех головных элементов документа. В головной части HTML документа располагаются элементы технической информации (ссылки, стили, сценарии), а так же метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Содержимое <head> не отображается напрямую на веб-странице, за исключением элемента <title>, он задаёт заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>, <basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Примечание: Элемент <head> может использоваться только один раз на странице. Появляться он должен сразу же после открывающего тега <html> и заканчивается непосредственно перед открывающим тегом <body>.

Синтаксис

<head>...</head>

Закрывающий тег

Не обязателен.

Атрибуты

profileУстарел в HTML5
Указывает адрес профиля метаданных.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <head> со следующими значениями CSS по умолчанию:

head { 
    display: none;
}

Различия между HTML 4.01 и HTML5

В HTML 4.01 элемент является обязательным, а в HTML5 может быть опущен.

Пример использования:

Элемент <body>

Пример HTML: Попробуй сам
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <title>wm-school.ru - онлайн учебники по HTML, CSS, JavaScript.</title> </head>
<body> Основной контент... </body>
</html>

Спецификации

Поддержка браузерами

Элемент
<head> 1+ 1+ 1+ 1+ 1+ 1+
Элемент
<head> 1+ 1+ 6+ 1+

Попробуйте сами — Примеры

Как использовать тег <base>, чтобы указать URL по умолчанию и целевое окно по умолчанию для всех ссылок на странице:
Использование тега <base> в <head>

Как добавить информацию о стиле в разделе <head>:
Использование тега <style> в <head>

Как использовать тег <link> для ссылки на внешнюю таблицу стилей:
Использование тега <link> в <head>


Учебник HTML

HTML уроки: HTML Раздел Head



HTML тег

Тег <head> содержит головные элементы HTML документа, цель которых сообщать браузерам и поисковым системам техническую информацию о веб-странице (метаданные, стили, ссылки и т.д.). Пользователям эта информация не показывается.

Синтаксис¶

Содержимое тега пишется между открывающим (<head>) и закрывающим (</head>) тегами.

Тег <head> включает в себя следующие элементы:

  • Тег <title> задает заголовок окна веб-страницы (обязательный элемент).
  • Тег <style> сообщает о том, что в HTML документе используется код CSS.
  • Тег <base> задает базовый абсолютный URL для всех относительных URL-адресов.
  • Тег <link> определяет отношение между текущим HTML-документом и ресурсом, на который он ссылается, либо содержит ссылку на внешнюю таблицу стилей.
  • Тег <meta> предоставляет дополнительную информацию (метаданные) об HTML-документе.
  • Тег <script> содержит скрипт (как правило на языке JavaScript), либо указывает на внешний файл со скриптом.
  • Тег <noscript> устанавливает альтернативный текст, который показывается, если браузер не поддерживает скрипты либо пользователь сам их отключил.

Пример¶

<!DOCTYPE html>
<html>
  <head>
      <title>Заголовок документа</title>
  <style type="text/css">
      body {
        background-color: #d3d3d3;
      }
      p {
        color:  #1c87c9;
      }
      a {
        color: red;
      }
    </style>
  </head>
  <body>
     <p>Абзац</p>
     <a>Ссылка</a>
  </body>
</html>
Попробуйте сами!

Результат¶

В нашем примере в теге <head> мы использовали два тега — <title> и <style>. В теге <title> мы установили заголовок документа, который отображается в окне браузера. В теге <style> мы задали стили документа: фон документа будет оранжевым, текст в абзацах, обозначенных тегом <p>, будет синего цвета, а ссылки, обозначенные тегом <a> — розового.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
<p> Содержимое страницы</p>
  </body>
</html>
Попробуйте сами!

Результат¶

В нашем примере мы указали ссылку на содержащийся в CSS папке документ style.css, в котором содержатся стили документа.

Пример¶

<!DOCTYPE html>
<html>  
   <head>
       <meta name="title" content="Учебник HTML и CSS">
       <meta name="description" content="Основы HTML и CSS для начинающих"> 
       <meta http-equiv="refresh" content="30">
   </head>
   <body>
        <p> Содержимое страницы</p>
    </body>
</html>
Попробуйте сами!

Результат¶

В теге <meta> мы записали предназначенные для поисковиков метаданные — заголовок и описание (meta title, meta description).

Атрибуты¶

Тег <head> также поддерживает глобальные атрибуты и атрибуты событий.

Мета теги HTML — Веб учебники



HTML элемент <head> контейнер для всех головных элементов: <title>, <style>, <meta>, <link>, <script>, и <base>.

HTML <head>

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

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

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


HTML <title>

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

Элемент <title>:

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

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

Пример

<head>
  <title>Заголовок страницы</title>
</head>

<body>
Содержание документа……
</body>

</html>

Попробуйте сами »

HTML <style>

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



HTML <link>

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


HTML <meta>

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

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

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

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

<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=»Щипунов Андрей»>

Попробуйте сами »

Настройка области просмотра

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

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

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

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

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

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

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

Вот пример веб страницы без мета-тега viewport и той же веб страницы с тегом viewport <meta>:

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



HTML <script>

Элемент <script> используется для определения клиентского Javascript.

This JavaScript пишет «Привет JavaScript!» в HTML элемент с помощью:

Пример

<script>
function myFunction() {
  document.getElementById(«demo»).innerHTML = «Привет JavaScript!»;
}
</script>

Попробуйте сами »

HTML <base>

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


HTML head элементы

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

HTML-тег заголовка


Пример

Простой HTML-документ с тегом внутри раздела заголовка: </p> <br/> <br/> <br/> Название документа <br/> <p> <h2><span class="ez-toc-section" id="i-39"> Это заголовок </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <p> Это абзац. </p> </p> <p> </body> <br/> </html> </p> Попробуй сам » <p> Дополнительные примеры «Попробуйте сами» ниже. </p> <hr/> <h3><span class="ez-toc-section" id="i-40"> Определение и использование </span></h3> <p> Элемент <code> <head> </code> — это контейнер для метаданные (данные о данных) и помещаются между тегом <html> и <body> тег.</p> <p> Метаданные — это данные об HTML-документе. Метаданные не отображаются. </p> <p> Метаданные обычно определяют заголовок документа, набор символов, стили, сценарии, и другая метаинформация. </p> <p> В элемент <code> <head> </code> могут входить следующие элементы: </p> <hr/> <h3><span class="ez-toc-section" id="i-41"> Поддержка браузера </span></h3> <table class="table table-hover"> <tr> <th> Элемент </th> <th title="Chrome"/> <th title="Internet Explorer / Edge"/> <th title="Firefox"/> <th title="Safari"/> <th title="Opera"/> </tr> <tr> <td> <head> </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> <td> Есть </td> </tr> </table> <hr/> <hr/> <h3><span class="ez-toc-section" id="i-42"> Глобальные атрибуты </span></h3> <p> Тег <code> <head> </code> также поддерживает глобальные атрибуты в HTML.</p> <hr/> <h3><span class="ez-toc-section" id="i-43"> Другие примеры </span></h3> <h4><span class="ez-toc-section" id="i-44"> Пример </span></h4> <p> Тег <base> (задает значение по умолчанию URL и цель для всех ссылок на странице) находятся внутри <head>: </p> <br/> <br/> <br/> <p> <img src = "images / stickman.gif" alt = "Stickman"> <br/> <a href="tags/tag_base.asp"> базовый тег HTML </a> </p> <p> </body> <br/> </html> </p> Попробуй сам » <h4><span class="ez-toc-section" id="i-45"> Пример </span></h4> <p> Тег <style> (добавляет информацию о стиле в страница) идет внутрь <head>: </p> <br/> <br/> <br/> h2 {цвет: красный;} <br/> p {цвет: синий;} <br/> <br/> <p> <h2><span class="ez-toc-section" id="i-46"> Заголовок </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <p> А пункт.</p> </p> <p> </body> <br/> </html> </p> Попробуй сам " <h4><span class="ez-toc-section" id="i-47"> Пример </span></h4> <p> Тег <link> (ссылки на внешний стиль лист) идет внутрь <head>: </p> <br/> <br/> <br/> <p> <h2><span class="ez-toc-section" id="i-48"> Я отформатирован со связанной таблицей стилей </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <br/> <p> Я тоже! </p> </p> <p> </body> <br/> </html> </p> Попробуй сам " <hr/> <h3><span class="ez-toc-section" id="i-49"> Связанные страницы </span></h3> <p> Учебное пособие по HTML: заголовок HTML </p> <p> Ссылка на HTML DOM: объект Head </p> <hr/> <h3><span class="ez-toc-section" id="_CSS"> Настройки CSS по умолчанию </span></h3> <p> Большинство браузеров будут отображать элемент <code> <head> </code> со следующим значением по умолчанию значения: </p> <p> дисплей головы {<br/>: нет; <br/>} </p> <br/> <h2><span class="ez-toc-section" id="_HTML-13"> Что в голове? Метаданные в HTML - Изучите веб-разработку </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Заголовок HTML-документа - это часть, которая не отображается в веб-браузере при загрузке страницы.Он содержит такую ​​информацию, как страница <code> <title> </code>, ссылки на CSS (если вы решите стилизовать свой HTML-контент с помощью CSS), ссылки на настраиваемые значки и другие метаданные (данные об HTML, такие как автор, и важные ключевые слова, описывающие документ.) В этой статье мы рассмотрим все вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой. </p> <table class="table table-hover"> <tbody> <tr> <th scope="row"> Предварительные требования: </th> <td> Базовое знакомство с HTML, как описано в Приступая к работе с HTML.</td> </tr> <tr> <th scope="row"> Цель: </th> <td> Чтобы узнать о заголовке HTML, его назначении, наиболее важных элементах, которые он может содержать, и о том, какое влияние оно может иметь на документ HTML. </td> </tr> </tbody> </table> <p> Давайте вернемся к простому HTML-документу, который мы рассмотрели в предыдущей статье: </p> <pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница

Это моя страница

Заголовок HTML - это содержимое элемента - в отличие от содержимого элемента (которое отображается на странице при загрузке в браузере), содержимое заголовка не отображается на странице .Вместо этого задача руководителя - содержать метаданные о документе. В приведенном выше примере голова довольно маленькая:

  
  
   Моя тестовая страница 
  

Однако на больших страницах голова может быть довольно заполнена. Попробуйте посетить некоторые из ваших любимых веб-сайтов и использовать инструменты разработчика, чтобы проверить их содержимое. Наша цель здесь не в том, чтобы показать вам, как использовать все, что может быть помещено в голову, а в том, чтобы научить вас, как использовать основные элементы, которые вы хотите включить в голову, и дать вам некоторое представление.Давайте начнем.

Мы уже видели элемент </code> в действии - его можно использовать для добавления заголовка к документу. Однако это можно спутать с элементом <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code>, который используется для добавления заголовка верхнего уровня к содержимому вашего тела - это также иногда называют заголовком страницы. Но это разные вещи! </p> <ul> <li> Элемент <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code> появляется на странице при загрузке в браузер - как правило, его следует использовать один раз на страницу, чтобы разметить заголовок содержимого вашей страницы (заголовок истории, заголовок новости или что-то подходящее). к вашему использованию.) </li> <li> Элемент <code> <title> </code> - это метаданные, которые представляют заголовок всего HTML-документа (а не его содержимое). </li> </ul> <h4><span class="ez-toc-section" id="i-50"> Активное обучение: изучение простого примера </span></h4> <ol> <li> Чтобы начать это активное обучение, мы хотели бы, чтобы вы зашли в наш репозиторий GitHub и загрузили копию нашей страницы title-example.html. Для этого либо <ol> <li> Скопируйте и вставьте код со страницы в новый текстовый файл в редакторе кода, а затем сохраните его в удобном месте.</li> <li> Нажмите кнопку «Raw» на странице GitHub, что приведет к появлению необработанного кода (возможно, в новой вкладке браузера). Затем выберите в браузере меню <em> Файл> Сохранить страницу как ... </em> и выберите подходящее место для сохранения файла. </li> </ol> </li> <li> Теперь откройте файл в браузере. Вы должны увидеть что-то вроде этого: <p> Теперь должно быть совершенно очевидно, где находится содержимое <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code>, а где - содержимое <code> <title> </code>! </p> </li> <li> Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере.Повеселись с этим. </li> </ol> <p> Содержимое элемента <code> <title> </code> также используется другими способами. Например, если вы попытаетесь добавить страницу в закладки (<em> Закладки> Закладка для этой страницы </em> или значок звездочки в строке URL в Firefox), вы увидите содержимое <code> <title> </code>, заполненное как предлагаемое имя закладки. </p> <p> </p> <p> Содержимое <code> <title> </code> также используется в результатах поиска, как вы увидите ниже. </p> <p> Метаданные - это данные, которые описывают данные, а в HTML есть «официальный» способ добавления метаданных в документ - элемент <code> <meta> </code>.Конечно, другие вещи, о которых мы говорим в этой статье, также можно рассматривать как метаданные. Есть много разных типов элементов <code> <meta> </code>, которые можно включить в <head> вашей страницы, но мы не будем пытаться объяснять их все на данном этапе, так как это будет слишком запутанно. Вместо этого мы объясним несколько вещей, которые вы обычно видите, просто чтобы дать вам представление. </p> <h4><span class="ez-toc-section" id="i-51"> Указание кодировки символов вашего документа </span></h4> <p> В примере, который мы видели выше, эта строка была включена: </p> <pre> <code> <meta charset = "utf-8"> </code> </pre> <p> Этот элемент определяет кодировку символов документа - набор символов, который разрешено использовать в документе.<code> utf-8 </code> - это универсальный набор символов, который включает практически любые символы любого человеческого языка. Это означает, что ваша веб-страница сможет поддерживать отображение на любом языке; поэтому рекомендуется устанавливать это на каждой создаваемой вами веб-странице! Например, ваша страница может нормально обрабатывать английский и японский языки: </p> <p> Если вы установите кодировку символов на <code> ISO-8859-1 </code>, например (набор символов для латинского алфавита), рендеринг вашей страницы может выглядеть неправильно: </p> <p> </p> <p> <strong> Примечание </strong>: Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не увидеть эту проблему.Вы все равно должны установить кодировку <code> utf-8 </code> на своей странице, чтобы избежать каких-либо потенциальных проблем в других браузерах. </p> <h4><span class="ez-toc-section" id="i-52"> Активное обучение: поэкспериментируйте с кодировкой символов </span></h4> <p> Чтобы попробовать это, вернитесь к простому шаблону HTML, полученному в предыдущем разделе на <code> <title> </code> (страница title-example.html), попробуйте изменить значение мета-кодировки на <code> ISO-8859-1 </code>, и добавьте японский язык на свою страницу. Это код, который мы использовали: </p> <pre> <code> <p> Японский пример: ご 飯 が 熱 い。 </p> </code> </pre> <h4><span class="ez-toc-section" id="i-53"> Добавление автора и описания </span></h4> <p> Многие элементы <code> <meta> </code> включают <code> имя </code> и содержимое <code> </code> атрибуты: </p> <ul> <li> <code> имя </code> определяет тип метаэлемента, которым он является; какой тип информации он содержит.</li> <li> <code> контент </code> указывает фактическое мета-контент. </li> </ul> <p> Два таких метаэлемента, которые полезно включить на вашу страницу, определяют автора страницы и предоставляют краткое описание страницы. Давайте посмотрим на пример: </p> <pre> <code> <meta name = "author" content = "Chris Mills"> <meta name = "description" content = "Область обучения веб-документации MDN предоставляет полные новички в Интернете со всем, что им нужно знать, чтобы получить начал с разработки веб-сайтов и приложений."> </code> </pre> <p> Указание автора полезно во многих отношениях: полезно иметь возможность понять, кто написал страницу, если у вас есть какие-либо вопросы по содержанию, и вы хотели бы с ними связаться. Некоторые системы управления контентом имеют средства для автоматического извлечения информации об авторе страницы и предоставления ее для этих целей. </p> <p> Указание описания, включающего ключевые слова, относящиеся к содержанию вашей страницы, полезно, поскольку оно может повысить позицию вашей страницы при релевантном поиске, выполняемом в поисковых системах (такие действия называются поисковой оптимизацией или SEO.) </p> <h4><span class="ez-toc-section" id="i-54"> Активное обучение: использование описания в поисковых системах </span></h4> <p> Описание также используется на страницах результатов поисковых систем. Давайте рассмотрим упражнение, чтобы изучить этот </p>. <ol> <li> Перейдите на главную страницу сети разработчиков Mozilla. </li> <li> Просмотр исходного кода страницы (Правый / <kbd> Ctrl </kbd> + щелкните страницу, выберите <em> Просмотреть исходный код страницы </em> из контекстного меню.) </li> <li> Найдите метатег описания. Это будет выглядеть примерно так (хотя со временем может измениться): <pre> <code> <meta name = "description" content = "Сайт веб-документов MDN предоставляет информацию об открытых веб-технологиях включая HTML, CSS и API для веб-сайтов и прогрессивные веб-приложения."> </code> </pre> </li> <li> Теперь поищите «MDN Web Docs» в своей любимой поисковой системе (мы использовали Google). Вы заметите содержание элемента description <code> <meta> </code> и <code> <title> </code>, используемое в результатах поиска - определенно стоит иметь! <p> </p> </li> </ol> <p> <strong> Примечание </strong>: В Google вы увидите некоторые релевантные подстраницы веб-документов MDN, перечисленные под основной ссылкой на главную страницу - они называются дополнительными ссылками и настраиваются в инструментах Google для веб-мастеров - способ улучшить результаты поиска вашего сайта в Google. поисковый движок.</p> <p> <strong> Примечание </strong>: Многие функции <code> <meta> </code> просто больше не используются. Например, элемент ключевого слова <code> <meta> </code> (<code> <meta name = "keywords" content = "fill, in, your, keywords, here"> </code>), который должен предоставлять ключевые слова для поисковых систем для определения релевантности эта страница для различных поисковых запросов - игнорируется поисковыми системами, потому что спамеры просто заполняли список ключевых слов сотнями ключевых слов, искажая результаты.</p> <h4><span class="ez-toc-section" id="i-55"> Другие типы метаданных </span></h4> <p> Путешествуя по сети, вы найдете и другие типы метаданных. Многие функции, которые вы увидите на веб-сайтах, являются проприетарными творениями, разработанными для предоставления определенным сайтам (например, сайтам социальных сетей) определенной информации, которую они могут использовать. </p> <p> Например, Open Graph Data - это протокол метаданных, который Facebook изобрел для предоставления более подробных метаданных для веб-сайтов. В исходном коде MDN Web Docs вы найдете это: </p> <pre> <code> <meta property = "og: image" content = "https: // разработчик.mozilla.org/static/img/opengraph-logo.png "> <meta property = "og: description" content = "Сеть разработчиков Mozilla (MDN) предоставляет информация об открытых веб-технологиях, включая HTML, CSS и API для обоих веб-сайтов и приложения HTML5. Он также документирует продукты Mozilla, такие как Firefox OS. "> <meta property = "og: title" content = "Mozilla Developer Network"> </code> </pre> <p> Одним из следствий этого является то, что когда вы ссылаетесь на MDN Web Docs на facebook, ссылка появляется вместе с изображением и описанием: более удобные возможности для пользователей.</p> <p> </p> <p> Twitter также имеет свои собственные аналогичные проприетарные метаданные, называемые Twitter Cards, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например: </p> <pre> <code> <meta name = "twitter: title" content = "Mozilla Developer Network"> </code> </pre> <p> Чтобы еще больше обогатить дизайн своего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах. Наиболее часто используемым из них является значок <strong> favicon </strong> (сокращение от «значок избранного», относящееся к его использованию в списках «избранного» или «закладок» в браузерах).</p> <p> Этот скромный значок существует уже много лет. Это первый значок такого типа: квадратный значок размером 16 пикселей, используемый в нескольких местах. Вы можете видеть (в зависимости от браузера) значки, отображаемые на вкладке браузера, содержащей каждую открытую страницу, и рядом со страницами, отмеченными закладками на панели закладок. </p> <p> Значок может быть добавлен на вашу страницу с помощью: </p> <ol> <li> Сохранение его в том же каталоге, что и индексная страница сайта, в формате <code> .ico </code> (большинство браузеров будут поддерживать значки в более распространенных форматах, таких как <code>.gif </code> или <code> .png </code>, но использование формата ICO гарантирует, что он будет работать еще в Internet Explorer 6.) </li> <li> Добавьте следующую строку в блок HTML <code> <head> </code> для ссылки на нее: <pre> <code> <link rel = "shortcut icon" href = "favicon.ico" type = "image / x-icon"> </code> </pre> </li> </ol> <p> Вот пример значка на панели закладок: </p> <p> </p> <p> В наши дни есть много других типов значков, которые нужно учитывать.Например, вы найдете это в исходном коде домашней страницы MDN Web Docs: </p> <pre> <code> <link rel = "apple-touch-icon-precomposed" href = "https://developer.mozilla.org/static/img/favicon144.png"> <link rel = "apple-touch-icon-precomposed" href = "https://developer.mozilla.org/static/img/favicon114.png"> <link rel = "apple-touch-icon-precomposed" href = "https://developer.mozilla.org/static/img/favicon72.png"> <link rel = "apple-touch-icon-precomposed" href = "https: // разработчик.mozilla.org/static/img/favicon57.png "> <link rel = "shortcut icon" href = "https://developer.mozilla.org/static/img/favicon32.png"> </code> </pre> <p> Комментарии объясняют, для чего используется каждый значок - эти элементы охватывают такие вещи, как предоставление красивого значка с высоким разрешением для использования при сохранении веб-сайта на главном экране iPad. </p> <p> Не слишком беспокойтесь о реализации всех этих типов значков прямо сейчас - это довольно продвинутая функция, и от вас не ожидается, что вы будете знать ее, чтобы продвигаться по курсу.Основная цель здесь - сообщить вам, что это такое, на случай, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов. </p> <p> <strong> Примечание: </strong> Если ваш сайт использует политику безопасности контента (CSP) для повышения своей безопасности, политика применяется к значку. Если вы столкнулись с проблемами, когда значок не загружается, убедитесь, что директива <code> img-src </code> заголовка <code> Content-Security-Policy </code> не препятствует доступу к нему. </p> <p> Практически все веб-сайты, которые вы будете использовать в наши дни, будут использовать CSS, чтобы они выглядели круто, и JavaScript для поддержки интерактивных функций, таких как видеоплееры, карты, игры и многое другое.Чаще всего они применяются к веб-странице с использованием элемента <code> <link> </code> и элемента <code> <script> </code> соответственно. </p> <ul> <li> <p> Элемент <code> <link> </code> всегда должен находиться внутри заголовка вашего документа. Это принимает два атрибута: <code> rel = "stylesheet" </code>, который указывает, что это таблица стилей документа, и <code> href </code>, который содержит путь к файлу таблицы стилей: </p> <pre> <code> <link rel = "stylesheet" href = "my-css-file.css "> </code> </pre> </li> <li> <p> Элемент <code> <script> </code> также должен идти в заголовок и должен включать в себя атрибут <code> src </code>, содержащий путь к JavaScript, который вы хотите загрузить, и <code> defer </code>, который в основном инструктирует браузер загружать JavaScript после страница завершила синтаксический анализ HTML. Это полезно, поскольку гарантирует, что весь HTML-код загружен до запуска JavaScript, так что вы не получите ошибок в результате попытки JavaScript получить доступ к элементу HTML, которого еще нет на странице.На самом деле существует несколько способов обработать загрузку JavaScript на вашей странице, но это наиболее надежный способ использовать для современных браузеров (для других см. Стратегии загрузки сценариев). </p> <pre> <code> <script src = "my-js-file.js" defer> </script> </code> </pre> <p> <strong> Примечание </strong>: элемент <code> <script> </code> может выглядеть как пустой элемент, но это не так, поэтому ему нужен закрывающий тег. Вместо того, чтобы указывать на внешний файл сценария, вы также можете поместить свой сценарий внутри элемента <code> <script> </code>.</p> </li> </ul> <h4><span class="ez-toc-section" id="_CSS_JavaScript-2"> Активное обучение: применение CSS и JavaScript к странице </span></h4> <ol> <li> Чтобы начать это активное обучение, возьмите копию наших файлов meta-example.html, script.js и style.css и сохраните их на локальном компьютере в папке тот же каталог. Убедитесь, что они сохранены с правильными именами и расширениями файлов. </li> <li> Откройте HTML-файл как в браузере, так и в текстовом редакторе. </li> <li> Следуя приведенной выше информации, добавьте элементы <code> <link> </code> и <code> <script> </code> в ваш HTML, чтобы ваши CSS и JavaScript были применены к вашему HTML.</li> </ol> <p> Если все сделано правильно, при сохранении HTML и обновлении браузера вы увидите, что все изменилось: </p> <p> </p> <ul> <li> JavaScript добавил на страницу пустой список. Теперь, когда вы щелкните в любом месте списка, появится диалоговое окно с просьбой ввести текст для нового элемента списка. Когда вы нажимаете кнопку ОК, новый элемент списка будет добавлен к списку, содержащему текст. Когда вы щелкаете по существующему элементу списка, появляется диалоговое окно, позволяющее изменить текст элемента.</li> <li> Из-за CSS фон стал зеленым, а текст стал больше. Он также стилизовал часть содержимого, которое JavaScript добавил на страницу (красная полоса с черной рамкой - это стиль, который CSS добавил в список, созданный с помощью JS). </li> </ul> <p> <strong> Примечание </strong>: Если вы застряли в этом упражнении и не можете применить CSS / JS, попробуйте просмотреть нашу страницу с примерами css-and-js.html. </p> <p> Наконец, стоит упомянуть, что вы можете (и действительно должны) установить язык своей страницы.Это можно сделать, добавив атрибут lang к открывающему тегу HTML (как показано в meta-example.html и показано ниже). </p> <pre> <code> <html lang = "en-US"> </code> </pre> <p> Это полезно во многих отношениях. Ваш HTML-документ будет более эффективно проиндексирован поисковыми системами, если установлен его язык (например, позволяющий ему правильно отображаться в результатах для конкретного языка), и он полезен для людей с нарушениями зрения, использующих программы чтения с экрана (например, слово «шесть» существует как во французском, так и в английском языках, но произносится по-разному.) </p> <p> Вы также можете настроить распознавание подразделов документа на разных языках. Например, мы можем настроить раздел японского языка так, чтобы он распознавался как японский, например: </p> <pre> <code> <p> Пример на японском языке: <span lang = "ja"> ご 飯 が 熱 い。 </span>. </p> </code> </pre> <p> Эти коды определены стандартом ISO 639-1. Вы можете найти больше о них в разделе «Языковые теги в HTML и XML». </p> <p> Это знаменует конец нашего быстрого обзора HTML-головы - здесь вы можете сделать гораздо больше, но исчерпывающий тур на данном этапе был бы скучным и запутанным, и мы просто хотели дать вам представление о самом главном. обычные вещи, которые вы сейчас там найдете! В следующей статье мы рассмотрим основы текста HTML.</p> <h2><span class="ez-toc-section" id="i-56"> Бесплатное руководство по элементам </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <blockquote> <p> Список всего, что * может * помещаться в <code> <head> </code> вашего документа </p> </blockquote> <p> </p> <h3><span class="ez-toc-section" id="i-57"> Содержание </span></h3> <h3><span class="ez-toc-section" id="i-58"> Рекомендуемый минимум </span></h3> <p> Ниже приведены основные элементы любого веб-документа (веб-сайтов / приложений): </p> <pre> <code> <meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <! - Приведенные выше 2 метатега * должны * быть первыми в <head> для постоянного обеспечения надлежащего рендеринга документа.Любой другой элемент заголовка должен стоять * после * этих тегов. -> <title> Заголовок страницы

мета-кодировка - определяет кодировку веб-сайта, utf-8 - стандарт

meta name = ”viewport” - настройки области просмотра, связанные с мобильностью

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

initial-scale = 1 - начальное масштабирование, 1 означает отсутствие масштабирования

⬆ наверх

Элементы

Допустимые элементы включают мета , ссылку , заголовок , стиль , сценарий , noscript и base .

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

  



 Заголовок страницы 








<стиль>
  / * ... * /




<сценарий>
  // функция (ы) идут сюда


  

⬆ наверх

  
  для постоянного обеспечения надлежащего рендеринга документа.Любой другой элемент заголовка должен стоять * после * этих тегов.
->



, как тег
  применяется только к ресурсам, объявленным после него.
->













 
 








 
 
 
 
 
 

























 
 



  

⬆ наверх

Ссылка

  


































































  

⬆ наверх

Иконки

  










  

⬆ наверх

Социальные сети

Facebook Открыть график

Большая часть контента передается в Facebook в виде URL-адреса, поэтому важно, чтобы вы разметили свой веб-сайт с помощью тегов Open Graph, чтобы контролировать то, как ваш контент отображается на Facebook.Подробнее о Facebook Open Graph Markup

  









  

Карта Twitter

С помощью Twitter Cards вы можете прикреплять к твитам насыщенные фотографии, видео и мультимедийные материалы, помогая привлечь трафик на свой веб-сайт.Подробнее о Twitter Cards

  







  

Конфиденциальность в Twitter

Если вы встраиваете твиты на свой веб-сайт, Twitter может использовать информацию с вашего сайта, чтобы адаптировать контент и предложения для пользователей Twitter. Подробнее о параметрах конфиденциальности Twitter.

  

  

Схема.org

  
    
      
      
      
      
      
  

Примечание: Эти метатеги требуют добавления атрибутов itemscope и itemtype к тегу .

Pinterest

Pinterest позволяет запретить людям сохранять данные с вашего веб-сайта, согласно их справочному центру. Описание является необязательным.

  
  

Мгновенные статьи Facebook

  







  

OEmbed

  

  

QQ / Wechat

Пользователи делятся веб-страницами с qq WeChat будет иметь форматированное сообщение

  


  

⬆ наверх

Браузеры / платформы

Apple iOS

  























  

Google Android

  








  

Google Chrome

  



  

Microsoft Internet Explorer

  







  

Минимальная необходимая разметка xml для browserconfig.xml :

  

   
     
        
        
        
        
     
   

  

⬆ наверх

Браузеры (китайские)

Браузер 360

  

  

Мобильный браузер QQ

  







  

Мобильный браузер UC

  



















  

⬆ наверх

Ссылки на приложения

  











  

⬆ наверх

Прочие ресурсы

⬆ наверх

⬆ наверх

Другие форматы

⬆ наверх

🌐 Переводы

⬆ наверх

🤝 Содействовали

Откройте задачу или запрос на вытягивание, чтобы предложить изменения или дополнения.

Направляющая

Репозиторий HEAD состоит из двух веток:

1.
главный

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

Выполните следующие действия для запросов на вытягивание:

  • Изменять только один тег или один связанный набор тегов за раз
  • Используйте двойные кавычки для атрибутов
  • Не включайте завершающую косую черту в самозакрывающиеся элементы - в спецификации HTML5 указано, что они необязательны.
  • Рассмотрите возможность включения ссылки на документацию, которая поддерживает ваше изменение
2.
гх-страниц

Эта ветвь отвечает за сайт htmlhead.dev. Мы используем Jekyll для развертывания файла README.md Markdown через GitHub Pages. Все изменения, связанные с веб-сайтом, должны направляться сюда.

Вы можете просмотреть документацию Jekyll и понять, как работает Jekyll, прежде чем работать над этой веткой.

Авторы

Ознакомьтесь со всеми потрясающими участниками.

👤 Автор

Джош Бучи

Покажите свою поддержку

Пожалуйста, этот репозиторий, если этот проект вам помог!

📝 Лицензия

⬆ наверх

Работа с элементами заголовка HTML

Из этого урока вы узнаете о важности элементов головы.

Элемент заголовка HTML

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

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

HTML-элементы, которые можно использовать внутри элемента : </code>, <code> <base> </code>, <code> <link> </code>, <code> <style> </code>, <code> <meta> </code>, <code> < script> </code> и элемент <code> <noscript> </code>. </p> <h3><span class="ez-toc-section" id="_HTML-16"> Элемент заголовка HTML </span></h3> <p> Элемент <code> <title> </code> определяет заголовок документа. </p> <p> Элемент заголовка требуется во всех документах HTML / XHTML для создания действительного документа.В документе разрешен только один элемент заголовка, и он должен быть помещен в элемент <code> <head> </code>. Элемент заголовка содержит простой текст и сущности; он не может содержать других тегов разметки. </p> <p> Название документа может использоваться для разных целей. Например: </p> <ul> <li> Для отображения заголовка в строке заголовка браузера и на панели задач. </li> <li> Чтобы указать заголовок для страницы, когда она добавляется в избранное или добавляется в закладки.</li> <li> Кому отображает заголовок страницы в результатах поисковой системы. </li> </ul> <p> В следующем примере показано, как разместить заголовок в документе HTML. </p> <pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> <title> Простой HTML-документ

Привет, мир!

Совет: Хороший заголовок должен быть коротким и соответствовать содержанию документа, потому что поисковые роботы обращают особое внимание на слова, используемые в заголовке.В идеале заголовок должен содержать не более 65 символов. См. Рекомендации по названиям.


Базовый элемент HTML

Элемент HTML используется для определения базового URL для всех относительных ссылок, содержащихся в документе, например вы можете установить базовый URL-адрес один раз в верхней части страницы, а затем все последующие относительные ссылки будут использовать этот URL-адрес в качестве отправной точки.Вот пример:

  


     Определение базового URL 
    


    

Заголовок HTML .

Гиперссылка в приведенном выше примере фактически преобразуется в https: // www.tutorialrepublic.com/html-tutorial/html-head.php независимо от URL-адреса текущей страницы. Это связано с тем, что относительный URL-адрес, указанный в ссылке: html-tutorial / html-head.php , добавлен в конец базового URL-адреса: https://www.tutorialrepublic.com/ .

Предупреждение: Элемент HTML должен появляться перед любым элементом, который ссылается на внешний ресурс.HTML допускает только один базовый элемент для каждого документа.


Элемент ссылки HTML

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

  
     Связывание таблиц стилей 
    
  

Пожалуйста, ознакомьтесь с разделом руководства по CSS, чтобы подробно узнать о таблицах стилей.

Примечание: Элемент HTML-документа может содержать любое количество элементов . Элемент имеет атрибуты, но не содержит содержимого.


Элемент стиля HTML

Элемент

Примечание: Встроенная таблица стилей должна использоваться, когда отдельный документ имеет уникальный стиль.Если одна и та же таблица стилей используется в нескольких документах, то более подходящей будет внешняя таблица стилей. См. Руководство по стилям HTML, чтобы узнать об этом больше.


Мета-элемент HTML

Элемент предоставляет метаданные о документе HTML. Метаданные - это набор данных, который описывает и предоставляет информацию о других данных. Вот пример:

  
     Указание метаданных 
    
    
  

Более подробно метаэлемент будет объяснен в следующей главе.


Элемент сценария HTML

Элемент

")

Элементы script и noscript будут подробно объяснены в следующей главе.

HTML-тег - использование, атрибуты, примеры

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

включает в себя следующие элементы:

  • Тег определяет заголовок веб-страницы (обязательно). Его можно спутать с тегом <h2><span class="ez-toc-section" id="i-75">, но они разные. Тег </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div><h2><span class="ez-toc-section" id="_HTML_CSS_HTML_URL-_URL-_HTML-_rel_stylesheet_href_HTML_name_content_JavaScript_HTML-_d3d3d3_1c87c9_a_HTML-_stylecss_CSS_HTML-_-_-_-_HTML-_-_javatpoint"> определяет заголовок содержимого страницы, тогда как тег <title> представляет собой метаданные, представляющие заголовок всего содержимого HTML, а не его содержимое. </li> <li> Тег <style> содержит код CSS, который определяет, как элементы HTML должны отображаться в браузере.</li> <li> Тег <base> определяет абсолютный (базовый) URL-адрес для всех относительных URL-адресов. </li> <li> Тег <link> определяет отношения между текущим HTML-документом и ресурсом, на который он ссылается, или содержит ссылку на внешнюю таблицу стилей. Он может иметь два атрибута: rel = "stylesheet" и href. </li> <li> Тег <meta> предоставляет дополнительную информацию (метаданные) о документе HTML. <head> страницы может включать в себя различные типы элементов <meta>, которые могут содержать атрибуты name и content.</li> <li> Тег <script> содержит сценарий (обычно JavaScript) или ссылку на внешний файл со сценариями. Этот элемент не может быть включен в <head>. Иногда лучше поместить его внизу <body>. Элемент <script> может показаться пустым, но это не так. </li> <li> Тег <noscript> определяет альтернативный текст, который отображается, если браузер не поддерживает сценарии или сценарии отключены пользователем. </li> </ul> <h3> Синтаксис¶ </h3> <p> Тег <head> состоит из пар.Контент записывается между открывающим (<head>) и закрывающим (</head>) тегами. </p> <h4> Пример HTML-тега </h4><head>, используемого с тегами <title> и <style>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <title> Название документа <стиль> тело{ цвет фона: # d3d3d3; } п{ цвет: # 1c87c9; } a { красный цвет; }

    Абзац

    Ссылка Попробуйте сами »

    В данном примере тег используется с тегами и <style>.Тег <title> определяет заголовок документа, который отображается в окне браузера. В теге <style> определяется стиль документа: фон документа оранжевый, текст в абзацах, отмеченных тегом <p>, синий, а ссылки в теге <a> розовые. </p> <h4> Пример HTML-тега </h4><head>, используемого с тегом <link>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <link rel = "stylesheet" type = "text / css" href = "css / style.css "> </head> <body> <p> Содержание страницы </p> </body> </html> </code> </pre> Попробуйте сами »<h4> Результат¶ </h4> <p> В этом примере мы предоставили ссылку на документ style.css в папке CSS. </p> <h4> Пример HTML-тега </h4><head>, используемого с тегом <meta>: ¶ </h4> <pre content="code snippet"> <code> <! DOCTYPE html> <html> <head> <meta name = "title" content = "Книги HTML и CSS"> <meta name = "description" content = "Основы HTML и CSS для начинающих"> <meta http-Equiv = "refresh" content = "30"> </head> <body> <p> Содержание страницы </p> </body> </html> </code> </pre> Попробуйте сами »<p> Тег <meta> содержит метаданные для поисковых систем - мета-заголовок, мета-описание.</p> <h3> Атрибуты¶ </h3> <p> Тег <head> поддерживает глобальные атрибуты и атрибуты событий. </p> <h2><span class="ez-toc-section" id="_HTML_CSS_HTML_URL-_URL-_HTML-_rel_stylesheet_href_HTML_name_content_JavaScript_HTML-_d3d3d3_1c87c9_a_HTML-_stylecss_CSS_HTML-_-_-_-_HTML-_-_javatpoint"> HTML-заголовок - javatpoint </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Элемент HTML <head> используется как контейнер для метаданных (данных о данных). Он используется между тегами <html> и <body>. </p> <p> Заголовок HTML-документа - это часть, содержимое которой не отображается в браузере при загрузке страницы. Он просто содержит метаданные о HTML-документе, которые определяют данные о HTML-документе.</p> <p> Заголовок HTML может содержать много информации о метаданных или может содержать очень мало информации или вообще не содержать ее, это зависит от наших требований. Но головная часть играет решающую роль в HTML-документе при создании веб-сайта. </p> <p> Метаданные определяют заголовок документа, набор символов, стили, ссылки, сценарии и другую метаинформацию. </p> <p> Ниже приводится список тегов, используемых в метаданных: </p> <ul> <li> <название> </li> <li> <стиль> </li> <li> <meta> </li> <li> <ссылка> </li> <li> <сценарий> </li> <li> <база> </li> </ul> <h3><span class="ez-toc-section" id="HTML-12"> HTML-элемент </span></h3><title> </h3> <p> Элемент HTML <title> используется для определения заголовка документа.Он используется во всех документах HTML / XHTML. Элемент <title> должен быть помещен между элементом <head>, и в одном документе может быть только один элемент заголовка. </p> <p> <strong> Что делает элемент <title>? </strong> </p> <ol> <li> Определяет заголовок во вкладке браузера. </li> <li> Предоставляет заголовок для страницы, когда она добавляется в избранное. </li> <li> Отображает заголовок страницы в результатах поиска. </li> </ol> <h5><span class="ez-toc-section" id="_65_70"> Примечание. Элемент заголовка должен соответствовать документу, а его рекомендуемая длина составляет от 65 до 70 символов, включая пробелы.</span></h5> <p> <strong> Пример: </strong> </p> <p> <! DOCTYPE html> <html> <head> <title> Заголовок этой страницы

    Содержимое тела отображается в окне браузера.

    Содержание элемента заголовка отображается во вкладке браузера, в избранном и в результатах поисковой системы.

    Проверить это сейчас

    HTML-элемент

    Это заголовок

    Это абзац.

    Проверить это сейчас

    HTML

    <ссылка> Элемент

    Элемент HTML используется для связывания внешней таблицы стилей с вашей веб-страницей. Элемент содержит два основных атрибута: rel и href. Атрибут rel указывает, что это таблица стилей, а href указывает путь к этому внешнему файлу.

    Пример:

    Это заголовок

    Веб-страница с внешним CSS

    Выглядит классная страница

    Проверить это сейчас

    HTML-элемент

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

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

    Давайте посмотрим, как использовать метаданные:

    Для определения набора символов:

    Атрибут charset определяет кодировку символов. В этом примере мы установили для него значение «UTF-8», что означает, что он может отображать любой язык.

    Пример:

    Это написано на английском языке Имя моего друга.......

    Это китайский язык Wǒ de péngyǒu jiào

    Проверить это сейчас

    Выход:

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

    Если вы дадите мета-описание, это будет полезно для релевантного поиска, выполняемого поисковыми системами.

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

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

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

    Значение author указывает имя человека, написавшего содержимое страницы, и полезно автоматически извлекать информацию об авторе некоторыми системами управления содержимым.

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

    Метаобновление используется для предоставления браузеру инструкций по автоматическому обновлению страницы по истечении заданного интервала времени.Как в приведенном выше примере, он автоматически обновится через 30 секунд

    Пример метаэлемента

    Пожалуйста, подождите 5 секунд, и через 5 секунд он будет автоматически перенаправлен на URL, указанный в метатеге

    Проверить это сейчас

    Ниже приведен пример, показывающий, как использовать все элементы Meta в заголовке HTML

    Пример:

    Вся метаинформация установлена.

    Проверить это сейчас

    Используйте тег

    для установки области просмотра

    Этот метод введен в HTML5 для управления окном просмотра с помощью тега .

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

    Синтаксис для элемента области просмотра :

    Здесь элемент viewport указывает, как управлять размерами и масштабированием страницы.

    Ширина = ширина устройства используется для установки ширины страницы в соответствии с шириной экрана устройства (которая будет варьироваться в зависимости от устройства).

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

    Пример веб-страницы без тега окна просмотра:

    Чтобы понять этот пример, откройте эту страницу на телефоне или планшете.

    image

    Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнения ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possible assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat Facer Possim Assum.

    Проверить это сейчас

    Пример веб-страницы с тегом окна просмотра:

    <стиль> img { максимальная ширина: 100%; высота: авто; }

    Чтобы понять этот пример, откройте эту страницу на телефоне или планшете.

    image

    Lorem ipsum dolor sit amet, conctetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud упражнения ullamcorper Suscipit lobortis nisl ut aliquip ex ea Commodo Concequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possible assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat Facer Possim Assum.

    Проверить это сейчас
    Примечание. Чтобы четко увидеть разницу, откройте эту страницу на смартфоне или планшете.

    HTML элемент

    Элемент HTML используется для указания базового URL-адреса и базовой цели для всех относительных URL-адресов на странице.

    Пример:

    Заголовок страницы

    Мы указали базовый URL, браузер будет искать изображение "html5.png" на "https://static.javatpoint.com/htmlpages/images/html5.png"

    JavatPoint

    Ссылка выше откроется в новом окне, поскольку для базовой цели задано значение «_blank».

    Проверить это сейчас

    HTML-элемент

    Скрипт в элементе Head

    Это изменит цвет

    Проверить это сейчас

    Если мы хотим использовать какой-то внешний файл JavaScript, его можно применить:

    <скрипт src = ".js file_path ">

    Без элементов

    , и

    HTML 5 позволяет нам опустить теги , и .

    Пример:

    Заголовок страницы

    Это заголовок

    Это абзац.

    Проверить это сейчас
    Примечание. Не рекомендуется опускать теги
    и . Отсутствие этих тегов может привести к сбою DOM или XML. программное обеспечение и вызывают ошибки в старых браузерах (IE9).

    Однако вы можете опустить тег .


    HTML | Тег - GeeksforGeeks

    Тег в HTML используется для определения заголовка документа, который содержит информацию, относящуюся к документу.
    Тег содержит другие элементы заголовка, такие как , <meta>, <link>, <style> <link> и т. Д. <br/> В HTML 4.01 элемент <head> был обязательным, но в HTML5 <head > элемент можно опустить.</p> <p> <strong> Атрибуты тега </strong>: </p> <p> Указанные ниже атрибуты макета тега <hr> были удалены из HTML5. <br/> <strong> Атрибут: </strong> </p> <ul> <li> <strong> профиль: </strong> Он используется для указания URL-адреса документа, который содержит один или несколько профилей метаданных, чтобы браузеры могли четко понимать информацию. </li> </ul> <p> <strong> Синтаксис: </strong> </p> <pre> <head> <title> Название документа

    Программа ниже иллюстрирует элемент :


    Ввод:

    < html lang = "en >

    < голова >

    < заголовок > Тег заголовка HTML заголовок >

    заголовок >

    < кузов >

    < p > GeeksforGeeks - портал для компьютерных фанатов. p >

    < hr >

    корпус >

    html >

    Вывод:

    2. Использование тега стиля внутри тега заголовка.
    Ввод:

    < html >

    900

    < style >

    body {

    фон: голубой;

    }

    h2 {

    цвет: красный;

    }

    p {

    цвет: синий;

    }

    стиль >

    головка >

    < корпус


    3>

    < h2 > GeeksforGeeks h2 >

    < p > Это портал для компьютерных фанатов. p >

    корпус >

    html >


    3. Использование тега ссылки внутри тега заголовка.
    Ввод:

    < html >

    900

    < ссылка rel = "таблица стилей" тип = "текст / css" href = "mystyle.css " >

    голова >

    < корпус >

    < h2 GeksForG h2 >

    < p > Это портал для вундеркиндов.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *