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

Содержание

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

  • Назад
  • Обзор: Introduction to 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="/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:

<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon144.png">
<!-- Для iPhone с Retina-экраном высокого разрешения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png">
<!-- Для iPad первого и второго поколения: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png">
<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2. 1+: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
<!-- Для других случаев - обычный favicon -->
<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="ja">ご飯が熱い。</span>. </p>

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

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

  • Назад
  • Обзор: Introduction to HTML
  • Далее
  • Начало работы с HTML
  • Что такое заголовок? Метаданные в HTML
  • Основы редактирования текста в HTML
  • Создание гиперссылок
  • Углублённое форматирование текста
  • Структура документа и веб-сайта
  • Отладка HTML
  • Разметка письма
  • Структурируем страницу

Last modified: , by MDN contributors

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

❮ Назад Дальше ❯


Элемент HTML <head>

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

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

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

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


Элемент HTML <Title>

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

Элемент <title>:

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

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

Пример

<!DOCTYPE html>
<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 charset=»UTF-8″>

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

<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>

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


Элемент HTML <base>

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

Пример

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


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

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

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

Примере

<!DOCTYPE html>
<title>Page Title</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> Определяет сведения о стиле для документа

❮ Назад Дальше ❯

🤯 HEAD — A simple guide to HTML elements

A simple guide to HTML <head> elements

Table of Contents

  • Recommended Minimum
  • Elements
  • Meta
  • Link
  • Icons
  • Social
    • Facebook Open Graph
    • Twitter Card
    • Twitter Privacy
    • Schema. org
    • Pinterest
    • Facebook Instant Articles
    • OEmbed
    • QQ/Wechat
  • Browsers / Platforms
    • Apple iOS
    • Google Android
    • Google Chrome
    • Microsoft Internet Explorer
  • Browsers (Chinese)
    • 360 Browser
    • QQ Mobile Browser
    • UC Mobile Browser
  • App Links
  • Other Resources
  • Related Projects
  • Other Formats
  • Translations
  • Contributing
    • Contributors
  • Author
  • License

Below are the essential elements for any web document (websites/apps):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  The above 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags. 
 -->
<title>Page Title</title>

meta charset — defines the encoding of the website, utf-8 is the standard

meta name="viewport" — viewport settings related to mobile responsiveness

width=device-width — use the physical width of the device (great for mobile!)

initial-scale=1 — the initial zoom, 1 means no zoom

⬆ back to top

Elements

Valid <head> elements include meta, link, title, style, script, noscript, and base.

These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.

<!--
  Set the character encoding for this document, so that
  all characters within the UTF-8 space (such as emoji)
  are rendered correctly.
-->
<meta charset="utf-8">
<!-- Set the document's title -->
<title>Page Title</title>
<!-- Set the base URL for all relative URLs within the document -->
<base href="https://example. com/page.html">
<!-- Link to an external CSS file -->
<link rel="stylesheet" href="styles.css">
<!-- Used for adding in-document CSS -->
<style>
  /* ... */
</style>
<!-- JavaScript & No-JavaScript tags -->
<script src="script.js"></script>
<script>
  // function(s) go here
</script>
<noscript>
  <!-- No JS alternative -->
</noscript>

⬆ back to top

Meta

<!--
  The following 2 meta tags *must* come first in the <head>
  to consistently ensure proper document rendering.
  Any other head element should come *after* these tags.
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
  Allows control over where resources are loaded from.
  Place as early in the <head> as possible, as the tag  
  only applies to resources that are declared after it.
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Name of web application (only should be used if the website is used as an app) -->
<meta name="application-name" content="Application Name">
<!-- Theme Color for Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Short description of the document (limit to 150 characters) -->
<!-- This content *may* be used as a part of search engine results.  -->
<meta name="description" content="A description of the page">
<!-- Control the behavior of search engine crawling and indexing -->
<meta name="robots" content="index,follow"><!-- All Search Engines -->
<meta name="googlebot" content="index,follow"><!-- Google Specific -->
<!-- Tells Google not to show the sitelinks search box -->
<meta name="google" content="nositelinkssearchbox">
<!-- Tells Google not to provide a translation for this document -->
<meta name="google" content="notranslate">
<!-- Verify website ownership -->
<meta name="google-site-verification" content="verification_token"><!-- Google Search Console -->
<meta name="yandex-verification" content="verification_token"><!-- Yandex Webmasters -->
<meta name="msvalidate.01" content="verification_token"><!-- Bing Webmaster Center -->
<meta name="alexaVerifyID" content="verification_token"><!-- Alexa Console -->
<meta name="p:domain_verify" content="code_from_pinterest"><!-- Pinterest Console-->
<meta name="norton-safeweb-site-verification" content="norton_code"><!-- Norton Safe Web -->
<!-- Identify the software used to build the document (i. e. - WordPress, Dreamweaver) -->
<meta name="generator" content="program">
<!-- Short description of your document's subject -->
<meta name="subject" content="your document's subject">
<!-- Gives a general age rating based on the document's content -->
<meta name="rating" content="General">
<!-- Allows control over how referrer information is passed -->
<meta name="referrer" content="no-referrer">
<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Completely opt out of DNS prefetching by setting to "off" -->
<meta http-equiv="x-dns-prefetch-control" content="off">
<!-- Specifies the document to appear in a specific frame -->
<meta http-equiv="Window-Target" content="_value">
<!-- Geo tags -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<meta name="geo. region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->
<!-- Web Monetization https://webmonetization.org/docs/getting-started -->
<meta name="monetization" content="$paymentpointer.example">
  • 📖 Meta tags that Google understands
  • 📖 WHATWG Wiki: MetaExtensions
  • 📖 ICBM on Wikipedia
  • 📖 Geotagging on Wikipedia

⬆ back to top

<!-- Points to an external stylesheet -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="https://example.com/article/?page=2">
<!-- Links to an AMP HTML version of the current document -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- Links to a JSON file that specifies "installation" credentials for the web applications -->
<link rel="manifest" href="manifest. json">
<!-- Links to information about the author(s) of the document -->
<link rel="author" href="humans.txt">
<!-- Refers to a copyright statement that applies to the link's context -->
<link rel="license" href="copyright.html">
<!-- Gives a reference to a location in your document that may be in another language -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- Provides information about an author or another person -->
<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">
<link rel="me" href="mailto:[email protected]">
<link rel="me" href="sms:+15035550125">
<!-- Links to a document that describes a collection of records, documents, or other materials of historical interest -->
<link rel="archives" href="https://example.com/archives/">
<!-- Links to top level resource in an hierarchical structure -->
<link rel="index" href="https://example.com/article/">
<!-- Provides a self reference - useful when the document has multiple possible references -->
<link rel="self" type="application/atom+xml" href="https://example. com/atom.xml">
<!-- The first, last, previous, and next documents in a series of documents, respectively -->
<link rel="first" href="https://example.com/article/">
<link rel="last" href="https://example.com/article/?page=42">
<link rel="prev" href="https://example.com/article/?page=1">
<link rel="next" href="https://example.com/article/?page=3">
<!-- Used when a 3rd party service is utilized to maintain a blog -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- Forms an automated comment when another WordPress blog links to your WordPress blog or post -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- Notifies a URL when you link to it on your document -->
<link rel="webmention" href="https://example.com/webmention">
<!-- Enables posting to your own domain using a Micropub client -->
<link rel="micropub" href="https://example.com/micropub">
<!-- Open Search -->
<link rel="search" href="/open-search. xml" type="application/opensearchdescription+xml" title="Search Title">
<!-- Feeds -->
<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">
<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">
<!-- Prefetching, preloading, prebrowsing -->
<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
<link rel="dns-prefetch" href="//example.com/">
<link rel="preconnect" href="https://www.example.com/">
<link rel="prefetch" href="https://www.example.com/">
<link rel="prerender" href="https://example.com/">
<link rel="preload" href="image.png" as="image">
  • 📖 Link Relations

⬆ back to top

Icons

<!-- For IE 10 and below -->
<!-- Place favicon.ico in the root directory - no tag necessary -->
<!-- Icon in the highest resolution we need it for -->
<link rel="icon" href="/path/to/icon. png">
<!-- Apple Touch Icon (reuse 192px icon.png) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<!-- Safari Pinned Tab Icon -->
<link rel="mask-icon" href="/path/to/icon.svg" color="blue">
  • 📖 All About Favicons (And Touch Icons)
  • 📖 Creating Pinned Tab Icons
  • 📖 Favicon Cheat Sheet
  • 📖 Icons & Browser Colors

⬆ back to top

Facebook Open Graph

Most content is shared to Facebook as a URL, so it’s important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. More about Facebook Open Graph Markup

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example. com/image.jpg">
<meta property="og:image:alt" content="A description of what is in the image (not a caption)">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
  • 📖 Open Graph protocol
  • 🛠 Test your page with the Facebook Sharing Debugger

Twitter Card

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. More about Twitter Cards

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example. com/image.jpg">
<meta name="twitter:image:alt" content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.">
  • 📖 Getting started with cards — Twitter Developers
  • 🛠 Test your page with the Twitter Card Validator

Twitter Privacy

If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users. More about Twitter privacy options.

<!-- disallow Twitter from using your site's info for personalization purposes -->
<meta name="twitter:dnt" content="on">

Schema.org

<html lang="" itemscope itemtype="https://schema.org/Article">
    <head>
      <link rel="author" href="">
      <link rel="publisher" href="">
      <meta itemprop="name" content="Content Title">
      <meta itemprop="description" content="Content description less than 200 characters">
      <meta itemprop="image" content="https://example. com/image.jpg">

Note: These meta tags require the itemscope and itemtype attributes to be added to the <html> tag.

  • 📖 Getting Started — schema.org
  • 🛠 Test your page with the Rich Results Test

Pinterest

Pinterest lets you prevent people from saving things from your website, according to their help center. The description is optional.

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

Facebook Instant Articles

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">
<!-- The URL of the web version of your article -->
<link rel="canonical" href="https://example.com/article.html">
<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">
  • 📖 Creating Articles — Instant Articles
  • 📖 Code Samples — Instant Articles

OEmbed

<link rel="alternate" type="application/json+oembed"
  href="https://example. com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"
  title="oEmbed Profile: JSON">
<link rel="alternate" type="text/xml+oembed"
  href="https://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"
  title="oEmbed Profile: XML">
  • 📖 oEmbed format

QQ/Wechat

Users share web pages to qq wechat will have a formatted message

<meta itemprop="name" content="share title">
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/logo.png">
<meta name="description" itemprop="description" content="share content">
  • 📖 Code Format Docs

⬆ back to top

Browsers / Platforms

Apple iOS

<!-- Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">
<!-- Disable automatic detection and formatting of possible phone numbers -->
<meta name="format-detection" content="telephone=no">
<!-- Launch Icon (180x180px or larger) -->
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon. png">
<!-- Launch Screen Image -->
<link rel="apple-touch-startup-image" href="/path/to/launch.png">
<!-- Launch Icon Title -->
<meta name="apple-mobile-web-app-title" content="App Title">
<!-- Enable standalone (full-screen) mode -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status bar appearance (has no effect unless standalone mode is enabled) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- iOS app deep linking -->
<meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com">
<link rel="alternate" href="ios-app://APP-ID/http/url-sample.com">
  • 📖 Configuring Web Applications

Google Android

<meta name="theme-color" content="#E64545">
<!-- Add to home screen -->
<meta name="mobile-web-app-capable" content="yes">
<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->
<!-- Android app deep linking -->
<meta name="google-play-app" content="app-id=package-name">
<link rel="alternate" href="android-app://package-name/http/url-sample. com">

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">
<!-- Disable translation prompt -->
<meta name="google" content="notranslate">

Microsoft Internet Explorer

<!-- Force IE 8/9/10 to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Disable automatic detection and formatting of possible phone numbers by Skype Toolbar browser extension -->
<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">
<!-- Windows Tiles -->
<meta name="msapplication-config" content="/browserconfig.xml">

Minimum required xml markup for browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide. png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
  • 📖 Browser configuration schema reference

⬆ back to top

Browsers (Chinese)

360 Browser

<!-- Select rendering engine order -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Locks the screen into the specified orientation -->
<meta name="x5-orientation" content="landscape/portrait">
<!-- Display this document in fullscreen -->
<meta name="x5-fullscreen" content="true">
<!-- Document will be displayed in "application mode" (fullscreen, etc.) -->
<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Locks the screen into the specified orientation -->
<meta name="screen-orientation" content="landscape/portrait">
<!-- Display this document in fullscreen -->
<meta name="full-screen" content="yes">
<!-- UC browser will display images even if in "text mode" -->
<meta name="imagemode" content="force">
<!-- Document will be displayed in "application mode"(fullscreen, forbidding gesture, etc. ) -->
<meta name="browsermode" content="application">
<!-- Disabled the UC browser's "night mode" for this document -->
<meta name="nightmode" content="disable">
<!-- Simplify the document to reduce data transfer -->
<meta name="layoutmode" content="fitscreen">
<!-- Disable the UC browser's feature of "scaling font up when there are many words in this document" -->
<meta name="wap-font-scale" content="no">
  • 📖 UC Browser Docs

⬆ back to top

<!-- iOS -->
<meta property="al:ios:url" content="applinks://docs">
<meta property="al:ios:app_store_id" content="12345">
<meta property="al:ios:app_name" content="App Links">
<!-- Android -->
<meta property="al:android:url" content="applinks://docs">
<meta property="al:android:app_name" content="App Links">
<meta property="al:android:package" content="org.applinks">
<!-- Web fall back -->
<meta property="al:web:url" content="https://applinks. org/documentation">
  • 📖 App Links

⬆ back to top

Other Resources

  • 📖 HTML5 Boilerplate Docs: The HTML
  • 📖 HTML5 Boilerplate Docs: Extend and customize

⬆ back to top

  • Atom HTML Head Snippets — Atom package for HEAD snippets
  • Sublime Text HTML Head Snippets — Sublime Text package for HEAD snippets
  • head-it — CLI interface for HEAD snippets
  • vue-head — Manipulating the meta information of the HEAD tag for Vue.js

⬆ back to top

Other Formats

  • 📄 PDF

⬆ back to top

🌐 Translations

  • 🇮🇩 Bahasa
  • 🇧🇷 Brazilian Portuguese
  • 🇨🇳 Chinese (Simplified)
  • 🇩🇪 German
  • 🇮🇹 Italian
  • 🇯🇵 Japanese
  • 🇰🇷 Korean
  • 🇷🇺 Russian/Русский
  • 🇪🇸 Spanish
  • 🇹🇷 Turkish/Türkçe

⬆ back to top

🤝 Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The HEAD repository consists of two branches:

1.
master

This branch consists of the README.md file that is reflected on the htmlhead.dev website. All changes to the content of the guide should be made in this file.

Please follow these steps for pull requests:

  • Modify only one tag, or one related set of tags at a time
  • Use double quotes on attributes
  • Don’t include a trailing slash in self-closing elements — the HTML5 spec says they’re optional
  • Consider including a link to documentation that supports your change
2.
gh-pages

This branch is responsible for the htmlhead.dev website. We use Jekyll to deploy the README.md markdown file to GitHub Pages. All website related modifications should be made in this branch.

You may find it helpful to review the Jekyll Docs and understand how Jekyll works before working in this branch.

🌟 Contributors

Check out all the super awesome contributors 🤩

👤 Author

Josh Buchea

  • GitHub: @joshbuchea
  • Twitter: @joshbuchea

💛 Support

If this project was helpful for you or your organization, please considering supporting my work directly:

  • 💛 Sponsor me on GitHub
  • ⭐️ Star this project on GitHub
  • 🐙 Follow me on GitHub
  • 🐦 Follow me on Twitter

Everything helps, thanks! 🙏

— Josh

📝 License

⬆ back to top

Семантические элементы HTML5

❮ Назад Вперед ❯

Семантические элементы являются одним из значимых нововведений в HTML5. До их появления вся разметка веб-страниц строилась при помощи элементов <div>, которым присваивались идентификаторы (id) или классы (class). Для размещения боковых панелей, верхних и нижних колонтитулов, элементов навигации и прочих структурных блоков использовались блоки div с соответствующими значениями (например, div=”footer”).

В HTML5 появились новые семантические элементы для структурирования, группировки контента и разметки текстового содержимого. Они четко описывают, какой контент содержат (было <div>, стало<footer>).

Рассмотрим подробнее семантические элементы и их значения.

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      li{display:inline-block;margin-right:10px;color:#778899}
    </style>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li>Главная</li>
          <li>О нас</li>
        </ul>
      </nav>
      <h2>Добро пожаловать на наш сайт</h2>
      <hr>
    </header>
    <article>
      <header>
        <h3>Заголовок раздела</h3>
        <p>Абзац текста. </p>
      </header>
    </article>
  </body>
</html>

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

Результат

Элемент <nav> формирует основной блок навигационных ссылок. Обратите внимание, что не все ссылки в HTML документе могут быть помещены внутрь элемента <nav>, он может включать в себя только крупные навигационные блоки.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <header>
      <h2>Курсы программирования</h2>
    </header>
    <nav>
      <a href="/uchebnik-html.html">HTML</a> |  
      <a href="/learn-css.html">CSS</a> |              
      <a href="/learn-javascript.html">JavaScript</a> | 
      <a href="/learn-php. html">PHP</a> | 
    </nav>
    <h3>Добро пожаловать на сайт W3Docs!</h3>
  </body>
</html>

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

Результат

Элемент <article>

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <article>
      <h2>Заголовок статьи</h2>
      <p>Текст статьи</p>
    </article>
  </body>
</html>

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

Результат

Элемент <section> используется для группировки тематического содержимого (оглавление, программа, разделы и т.д.).

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование тега section</title>
  </head>
  <body>
    <section>
      <h2>Язык гипертекстовой разметки HTML</h2>
      <p>Стандартизированный язык разметки документов во Всемирной паутине.  Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.</p>
    </section>
    <section>
      <h2>CSS</h2>
      <p>Формальный язык, который используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.</p>
    </section>
  </body>
</html>

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

Результат

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

Пример

<!DOCTYPE html>
<html>
  <body>
    <p>Я люблю смотреть Игру Престолов. </p>
    <aside>
      <h5>Игра Престолов</h5>
      <p>Американский телесериал в жанре фэнтези, основанный на цикле романов «Песнь Льда и Огня» Джорджа Р. Р. Мартина.</p>
    </aside>
  </body>
</html>

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

Результат

Элемент <footer> формирует нижний колонтитул секции или корневого элемента, в котором находится. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.

Пример

<!DOCTYPE html>
<html>
  <body>
    <footer>
      <p>Автор статьи: Арина Петрова</p>
      <p> <a href="mailto:[email protected]">Написать автору</a>.</p>
    </footer>
  </body>
</html>

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

Результат

Элемент <address> определяет контактную информацию автора/владельца документа или статьи.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <address>
      Автор: Алина Петрова <br/>
      3-я улица Строителей, д. 25<br/>
      Москва<br/>
    </address>
  </body>
</html>

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

Результат

Элемент <main>

Элемент <main> формирует основное содержимое документа (содержимое элемента <body>). Содержимое тега должно быть уникальным и не дублировать однотипные блоки, которые повторяются в других документах, таких как шапка сайта (header), нижний колонтитул (footer), меню, форма поиска, информация об авторских правах и т.д.

Пример

<!DOCTYPE html>
<html>
  <body>
    <main>
      <h2>Языки программирования</h2>
      <p>Языки HTML и CSS предназначены для верстки сайтов. </p>
      <article>
        <h3>HTML</h3>
        <p>HTML (Hyper Text Markup Language) - язык гипертекстовой разметки, который используется для создания веб-страниц.</p>
      </article>
      <article>
        <h3>CSS</h3>
        <p>CSS это язык стилей, определяющий отображение HTML-документов.</p>
      </article>
    </main>
  </body>
</html>

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

Результат

Элемент <figure> определяет автономный контент, являющийся самостоятельным элементом основного потока. Используется для добавления кратких аннотаций к иллюстрациям, фотографиям, диаграммам, фрагментам кода и т.д.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    </head>
  <body>
    <p>Малыш</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7. jpeg" alt="A Cute Baby">
    </figure>
  </body>
</html>

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

Результат

Элемент <figcaption> используется для добавления подписи или пояснений к содержимому тега <figure>.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
    </head>
    <p>Красивый малыш</p>
    <figure>
      <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A Cute Baby">
      <figcaption>Fig.1 - Голубоглазый ребенок.</figcaption>
    </figure>
  </body>
</html>

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

Результат

Элемент <time> определяет время (24 часа) или дату по григорианскому календарю с возможным указанием времени и смещения часового пояса.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Игра состоится <time datetime="2014-09-28 19:00">28 сентября</time>. </p>
    <p>Начало в <time>19:00</time></p>
  </body>
</html>

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

Результат

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <p>Изучайте язык гипертекстовой разметки HTML на сайте <mark>W3Docs.com</mark>.</p>
  </body>
</html>

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

Результат

Элемент <bdi> определяет фрагмент текста двунаправленного форматирования, который должен быть изолирован от остального текста.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы</title>
  </head>
  <body>
    <h2>Пример использования элемента bdi</h2>
    <p dir="ltr"><bdi>أرمينيا جميلة</bdi> Это предложение на арабском автоматически отображается справа налево. </p>
  </body>
</html>

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

Результат

Элемент <wbr> указывает браузеру место возможного разрыва длинной строки в случае необходимости.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <p>Пример текста без тега wbr.</p>
    <p>Текст, в котором встречается самое длинное слово в русском языке метоксихлордиэтиламинометилбутиламиноакридин</p>
    <p>Пример текста с использованием тега wbr.</p>
    <p>Текст, в котором встречается самое длинное слово в русском языке метоксихлор<wbr>диэтиламино<wbr>метил<wbr>бутил<wbr>амино<wbr>акридин</p>
  </body>
</html>

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

Результат

Синтаксис HTML5 — Веб учебники


❮ Назад Вперед ❯


Последовательный, чистый и аккуратный HTML код облегчает другим чтение и понимание вашего кода.

Быть умным и перспективным

Вот некоторые рекомендации и советы по созданию хорошего исходного кода HTML.


Используйте правильный тип документа

Всегда объявляйте тип документа в качестве первой строки в вашем документе.

Правильный тип документа для HTML это:

<!DOCTYPE html>


Используйте имена элементов в нижнем регистре

HTML позволяет смешивать прописные и строчные буквы в именах элементов.

Однако мы рекомендуем использовать имена элементов в нижнем регистре, поскольку:

  • Смешивание прописных и строчных имен выглядит плохо
  • Разработчики обычно используют имена в нижнем регистре
  • Нижний регистр выглядит чище
  • Строчные буквы писать проще

Хорошо:

<body>
<p>Это параграф</p>
</body>

Плохо:

<BODY>
<P>Это параграф</P>
</BODY>



Закрывайте все HTML элементы

В HTML вам не нужно закрывать все элементы (например, элемент <p>).

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

Хорошо:

<section>
  <p>Это параграф.</p>
  <p>Это параграф.</p>
</section>

Плохо:

<section>
  <p>Это параграф.
  <p>Это параграф.
</section>


Используйте имена атрибутов в нижнем регистре

HTML позволяет смешивать прописные и строчные буквы в именах атрибутов.

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

  • Смешивание прописных и строчных имен выглядит плохо
  • Разработчики обычно используют имена в нижнем регистре
  • Строчные буквы выглядят чище
  • Строчные буквы писать проще

Хорошо:

<a href=»https://schoolsw3.com/html/»>Посетите HTML Учебник</a>

Плохо:

<a HREF=»https://schoolsw3.com/html/»>Посетите HTML Учебник</a>


Всегда указывайте значения атрибутов

HTML допускает значения атрибутов без кавычек.

Тем не менее, мы рекомендуем заключение в кавычки значений атрибутов, потому что:

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

Хорошо:

<table class=»striped»>

Плохо:

<table class=striped>

Очень плохо:

Это не сработает, так как значение содержит пробелы:

<table class=table striped>


Всегда указывайте alt, width и height для изображений

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

Кроме того, всегда определяйте width и height для изображений. Это уменьшает мерцание, поскольку браузер может зарезервировать место для изображения перед загрузкой.

Хорошо:

<img src=»html5.gif» alt=»HTML5″>

Плохо:

<img src=»html5. gif»>


Пробелы и знаки равенства

HTML допускает пробелы вокруг знаков равенства. Но без пробелов легче читать и лучше группировать объекты вместе.

Хорошо:

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

Плохо:

<link rel = «stylesheet» href = «styles.css»>


Избегайте длинных строк кода

При использовании HTML редактора не удобно прокручивать вправо и влево, чтобы прочитать HTML код.

Старайтесь избегать слишком длинных строк кода.


Пустые строки и отступы

Не добавляйте пустые строки, пробелы или отступы без причины.

Для удобства чтения добавьте пустые строки для разделения больших или логических блоков кода.

Для удобства чтения добавьте два интервала отступа. Не используйте клавишу tab.

Хорошо:

<body>

<h2>Знаменитый город</h2>

<h3>Токио</h3>
<p>Токио — столица Японии, центр района Большого Токио,
и самый густонаселенный мегаполис в мире.
Это резиденция японского правительства и императорский дворец,
и дом японской императорской семьи.</p>

</body>

Плохо:

<body>

  <h2>Знаменитый город</h2>

  <h3>Токио</h3>

  <p>
    Токио — столица Японии, центр района Большого Токио,
    и самый густонаселенный мегаполис в мире.
    Это резиденция японского правительства и императорский дворец,
    и дом японской императорской семьи.
  </p>

</body>

Хороший пример таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Описание</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Описание в A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Описание в B</td>
  </tr>
</table>

Хорошо пример списка:

<ul>
  <li>Лондон</li>
  <li>Париж</li>
  <li>Токио</li>
</ul>


Никогда не пропускайте элемент <title>

Элемент <title> необходим в HTML.

Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковой системы для определения порядка размещения страниц в результатах поиска.

Элемент <title>:

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

Так что, постарайтесь сделать заголовок максимально точно и содержательно, насколько это возможно:

<title>HTML Руководство по стилю и условные обозначения кодирования</title>


Пропуск <html> и <body>?

HTML страница будет проверяться без использования тегов <html> и <body>:

Пример

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

<h2>Это заголовок</h2>
<p>Это параграф. </p>

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

Однако мы рекомендуем всегда добавлять теги <html> и <body>!

Элемент <html> — это корень документа, и рекомендуемое место для указания языка страницы. Объявление языка страницы важно для специальных приложений (программ чтения с экрана) и поисковых систем.

Пропуск <body> может привести к ошибкам в старых браузерах.

Пропуск <html> и <body> может также привести к сбою программного обеспечения DOM и XML.

Пример

<!DOCTYPE html>
<html lang=»ru-RU»>
<head>
  <title>Заголовок страницы</title>
</head>
<body>

<h2>Это заголовок</h2>
<p>Это параграф.</p>

</body>
</html>

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


Пропуск <head>?

HTML тег <head> также может быть опущен.

Браузеры добавят все элементы перед <body>, по умолчанию, элемент <head>.

Пример

<!DOCTYPE html>
<html>
<title>Заголовок страницы</title>
<body>

<h2>Это заголовок</h2>
<p>Это параграф.</p>

</body>
</html>

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

Тем не менее, мы рекомендуем использовать тег <head>.


Закрыть пустые HTML элементы?

В HTML, он является обязательным, чтобы закрыть пустые элементы.

Допустимо:

<meta charset=»utf-8″>

Также допустимо:

<meta charset=»utf-8″ />

Если вы ожидаете, что программное обеспечение XML/XHTML получит доступ к вашей странице, сохраните закрывающую косую черту (/), поскольку она требуется в XML и XHTML.


Метаданные

Чтобы обеспечить правильную интерпретацию и правильную индексацию поисковых систем, как язык, так и кодировка символов должны быть определены как можно раньше в HTML документе:

<!DOCTYPE html>
<html lang=»ru-RU»>
<head>
  <meta charset=»UTF-8″>
  <title>Заголовок страницы</title>
</head>


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

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

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

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

Это дает браузеру инструкции по управлению размерами и масштабированием страницы.

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

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

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

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


Без мета тега viewport

С помощью мета тега viewport


HTML Комментарии

Короткие комментарии должны быть написаны на одной строке, например:

<!— Это комментарий —>

Комментарии, которые охватывают более одной строки, должны быть написаны следующим образом:

<!—
  Это длинный пример комментария. Это длинный пример комментария.
  Это длинный пример комментария. Это длинный пример комментария.
—>

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


Использование каскадной таблицы стилей

Используйте простой синтаксис для связывания с таблицами стилей (атрибут type не является необходимым):

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

Короткие правила CSS можно записать сжатыми, например так:

p.intro {font-family:Verdana;font-size:16em;}

Длинные правила CSS должны быть написаны в нескольких строках:

body {
  background-color: lightgrey;
  font-family: «Arial Black», Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}

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

Загрузка JavaScript в HTML

Используйте простой синтаксис для загрузки внешних скриптов (атрибут type не является обязательным):

<script src=»myscript. js»>


Доступ к HTML элементам с помощью JavaScript

Использование «неопрятного» HTML кода может привести к ошибкам JavaScript.

Эти два оператора JavaScript будет производить различные результаты:

Пример

getElementById(«Demo»).innerHTML = «Привет»;

getElementById(«demo»).innerHTML = «Привет»;

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

Посетите руководство по стилю JavaScript.


Используйте имена файлов в нижнем регистре

Некоторые веб серверы (Apache, Unix) чувствительны к регистру имен файлов: «london.jpg» не может быть доступен как «London.jpg».

Другие веб серверы (Microsoft, IIS) не чувствительны к регистру символов: «london.jpg» можно получить доступ как «London.jpg».

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

Если вы перейдете с сервера, не чувствительного к регистру, на сервер, чувствительный к регистру, даже небольшие ошибки разрушат вашу сеть!

Чтобы избежать этих проблем, всегда используйте имена файлов в нижнем регистре!


Расширение файла

HTML файлы должны иметь расширение . html или .htm.

CSS файлы должны иметь расширение .css.

JavaScript файлы должны иметь расширение .js.


Различия между .htm и .html?

Между ними нет никакой разницы расширения файлов .htm и html!

И то, и другое будет рассматриваться как HTML любым веб браузером и веб сервером.


Имена файлов по умолчанию

Если URL адрес не указывает имя файла в конце (например: «https://schoolsw3.com/»), сервер просто добавляет имя файла по умолчанию, например «index.html», «index.htm», «default.html», или «default.htm».

Если ваш сервер настроен только на «index.html» в качестве имени файла по умолчанию ваш файл должен быть назван «index.html», а не «default.html.»

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


❮ Назад Вперед ❯

Тип документа | Учебник HTML5

Тип документа.

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

Листинг 1.1. Использование элемента <doctype>

<! DOCTYPE html>

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

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

<html>

После объявления типа документа мы переходим к построению древовидной структуры HTML. Как всегда, в корне дерева находится элемент <html>. Внутри этого элемента помещается весь остальной код HTML (листинг 1.2).

Листинг 1.2. Использование элемента <html>

<! DOCTYPE html>

<html lang=»ru»>

</html>

Единственный атрибут, указания которого требует HTML5, — это атрибут lang открывающего тега <html>. Он определяет язык содержимого в создаваемом нами документе, и в данном случае мы выбрали русский — значение ru (английскому языку соответствует значение en).

ПОВТОРЯЕМ основы —

HTML — это язык разметки для построения веб-страниц.

Теги HTML представляют собой ключевые слова и атрибуты, окруженные угловыми скобками, например, <html lang=»ru»>.

В данном случае ключевое слово — это html, а lang — атрибут со значением ru. Большинство тегов HTML парные: один открывающий, а второй закрывающий. Содержимое находится между тегами. В нашем примере <htmllang=»ru»> указывает на начало кода HTML, а </html> — на завершение кода. Сравните открывающий и закрывающий теги, и вы увидите, что закрывающий тег отличается только слешем (/) перед ключевым словом (например, </html>). Весь наш остальной код будет находиться между этими двумя тегами: <html>

… </html>.

Что касается структуры и составляющих ее элементов, HTML5 — чрезвычайно гибкий инструмент. Элемент <html> можно использовать без атрибутов или вообще не добавлять в код. Но в целях обеспечения совместимости, а также по другим причинам, которые не стоит здесь рассматривать, мы рекомендуем вам следовать некоторым базовым правилам. Мы научим вас создавать документы с использованием хорошего HTML-кода.

Значения атрибута lang для других языков вы можете найти на веб-странице: www. w3schools. com/tags/ref_language_codes. asp.

<head>

Продолжаем построение документа. HTML-код, который добавляется между тегами <html>, делится на два основных раздела. Как и в предыдущих версиях HTML, первый раздел представляет собой «голову», а второй — «тело» кода. Таким образом, нужно создать эти два раздела, используя уже знакомые элементы <head> и <body>.

Разумеется, первым идет элемент <head>, и, как и у других структурных элементов, у него есть открывающий и закрывающий теги (листинг 1.3).

Листинг 1.3. Использование элемента <head>

<! DOCTYPE html>

<html lang=»ru»>

<head> </head>

</html>

Сам тег по сравнению с предыдущими версиями языка не изменился, и его назначение остается таким же. Внутри тега <head> мы определяем заголовок веб-страницы, объявляем кодировку символов, добавляем общую информацию о документе и приводим ссылки на внешние файлы, содержащие стили, сценарии и даже изображения, необходимые для отображения страницы.

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

<body>

Следующий большой раздел, который является частью основной структуры документа HTML, — «тело». Это видимая часть документа, содержимое которой описывается внутри тега <body>. Данный тег также не изменился по сравнению с предыдущими версиями HTML.

Листинг 1.4. Использование элемента <body>

<! DOCTYPE html>

<html lang=»ru»>

<head>

</head>

<body> </body>

</html>

ПОВТОРЯЕМ ОСНОВЫ —

Пока что мы написали очень простой код, но уже с составной структурой. Смысл в том, что HTML-код — это не последовательный набор инструкций. HTML — это язык разметки, то есть набор тегов или элементов, чаще всего парных, которые можно вкладывать друг в друга (одни элементы могут целиком находиться внутри других). В первой строке кода из листинга 1.4 находится одиночный тег с определением документа, сразу за ним следует открывающий тег <html lang=»ru»>. Этот тег и закрывающий тег </html> в конце документа указывают на начало и конец HTML-кода. Между ними мы добавили теги, определяющие два важных раздела основной структуры документа: <head> и <body>. Это также парные теги. Позже в этой главе вы узнаете о других тегах, которые можно вставлять внутрь пар <head> и <body>. В результате получается древовидная структура, в корне которой находится тег <html>.

<meta>

Настало время вплотную заняться «головой» документа. Здесь было добавлено несколько изменений и новшеств, среди которых тег, определяющий кодировку символов в документе. Это тег <meta>, который указывает на то, каким образом текст должен отображаться на экране (листинг 1. 5).

Листинг 1.5. Использование элемента <meta>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

</head>

<body>

</body>

</html>

В HTML5 данный элемент (как и многие другие) упрощен. Новый тег <meta> для обозначения кодировки символов стал короче. Разумеется, вы можете поменять кодировку UTF-8 на любую другую и использовать другие теги <meta>, например description или keywords, как показано в листинге 1.6.

Листинг 1.6. Добавление различных элементов <meta>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=»Это пример кода HTML5″>

<meta name=»keywords» content=»HTML5, CSS3, DavaScript»>

</head>

<body>

</body>

</html>

ПОВТОРЯЕМ основы —

В документе может быть несколько тегов <meta>, содержащих общие объявления, однако эта информация не отображается в окне браузера. Она используется только поисковыми системами и устройствами, которым требуются предварительные данные о нашем документе. Как уже говорилось, кроме заголовка и некоторых значков, никакая другая информация между тегами <head> пользователям не видна. В коде листинга 1.6 атрибут name внутри тега <meta> определяет тип тега, а в атрибуте content объявляется его значение, однако эти сведения на экран не выводятся. Чтобы побольше узнать о теге <meta>, зайдите на наш веб-сайт и просмотрите ссылки для этой главы.

В HTML5 одинарные теги не обязательно должны иметь закрывающий слеш (/), но мы все же рекомендуем использовать его для совместимости. Предыдущий пример кода можно записать, как показано в листинге 1.7.

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″ />

<meta name=»description» content=’Это пример» />

<meta name=»keywords» content=»HTML5, CSS3, JavaScript» />

</head>

<body>

</body>

</html>

<title>

Тег <title>, как и раньше, используется для определения заголовка документа (листинг 1. 8), и ничего нового о нем сказать нельзя.

Листинг 1.8. Использование элемента <title>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=’Это пример HTML5″>

</head>

<body>

</body>

</html>

ПОВТОРЯЕМ ОСНОВЫ —

Текст между тегами <title> представляет собой общий заголовок для создаваемого документа. Чаще всего браузеры отображают его в заголовке окна.

<link>

Еще один важный элемент, являющийся частью «головы» документа, — <link>. Он используется для подключения к документу стилей, сценариев, изображений или значков из внешних файлов. Чаще всего с помощью <link> подключают таблицу стилей из внешнего CSS-файла (листинг 1.9).

Листинг 1.9. Использование элемента <link>

<! DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»utf-8″>

<meta name=»description» content=Это пример HTML5″>

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

</head>

<body>

</body>

</html>

Таблица стилей — это набор правил форматирования, позволяющий менять внешний вид документа, например размер и цвет текста. Без таких правил текст и другие элементы отображаются на экране с использованием стандартных стилей браузера (размер, цвет и другие характеристики устанавливаются по умолчанию). Стили представляют собой простые правила, занимающие обычно всего несколько строк кода, и их можно объявить в самом документе HTML. Как мы увидим далее, не обязательно подгружать эту информацию из внешних файлов, но использование отдельных файлов для таблиц стилей — хорошая практика. Загрузка стилей CSS из внешнего файла упрощает структуру основного документа, увеличивает скорость загрузки веб-сайта, а также позволяет воспользоваться преимуществами новых возможностей HTML5.

В HTML5 избавились от необходимости указывать тип подключаемой таблицы стилей, таким образом, атрибут type больше не используется. Теперь для внедрения файла со стилями достаточно двух атрибутов: rel и href. Название атрибута rel происходит от англ. relation (отношение), и его значение определяет, чем для нашего документа является подключаемый файл. В данном случае атрибуту rel присвоено значение stylesheet, то есть мы сообщаем браузеру, что mystyles. css — это CSS-файл со стилями, необходимыми для отображения страницы (в следующей главе мы займемся стилями CSS и научимся подключать их к документу).

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

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

❮ Назад Далее ❯


Элемент HTML является контейнером для следующих элементов: <название> , <стиль> , <мета> , <ссылка> , <скрипт> и <база> .


Элемент HTML

Элемент является контейнером для метаданных (данные о данных) и помещается между 9тег 0006 и тег .

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

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


HTML-элемент

</h3> <p> Элемент <code> <title> </code> определяет заголовок документа. Заголовок должен быть только текстовым и отображаться в строке заголовка браузера или в вкладка страницы. </p> <p> Элемент <code> <title> </code> обязателен в документах HTML! </p> <p> Содержание заголовка страницы очень важно для поисковой оптимизации (SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка при отображении страниц в результатах поиска. </p> <p> Элемент <code> <title> </code>: </p> <ul> <li> определяет заголовок на панели инструментов браузера </li> <li> предоставляет заголовок для страницы, когда она добавляется в избранное </li> <li> отображает заголовок страницы в результатах поиска </li> </ul> <p> Итак, постарайтесь сделать заголовок максимально точным и осмысленным! </p> <p> Простой HTML-документ: </p> <h4><span class="ez-toc-section" id="i-86"> Пример </span></h4> <p data-readability-styled="true"> <!DOCTYPE html> <br/> <html> <br/> <head> <br/> <title>Значащая страница Заголовок

Содержание документа. …..


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


HTML-элемент

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



HTML-элемент

Элемент определяет отношения между текущим документом и внешним ресурсом.

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

Пример

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

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


Элемент HTML

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

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

Примеры

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

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

CSS

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

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

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

Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:

Пример тегов:

Пример





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


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

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

Вы должны включать следующий элемент на все свои веб-страницы:

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

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

Начальная шкала =1,0 9Часть 0007 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

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

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


Без метатег области просмотра

метатег окна просмотра


Элемент HTML

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

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


HTML-элемент

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

Тег должен иметь href или целевой атрибут присутствует, или оба.

Может быть только один единственный элемент в документе!

Пример

Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:

<голова>


Stickman
базовый тег HTML

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


Резюме главы

  • The Элемент является контейнером для метаданных (данные о данных)
  • Элемент помещается между тег и тег
  • Требуется элемент </code> и он определяет название документа </li> <li> Элемент <code> <style> </code> используется для определить информацию о стиле для одного документа </li> <li> <code> <ссылка> </code> тег чаще всего используется для ссылки на внешние таблицы стилей </li> <li> Элемент <code> <meta> </code> обычно используется для указания набора символов, описания страницы, ключевых слов, автора документ и настройки видового экрана </li> <li> Элемент <code> <script> </code> используется для определения сценариев JavaScript на стороне клиента </li> <li> Элемент <code> <base> </code> определяет базовый URL-адрес и/или цель для всех относительных URL-адресов на странице </li> </ul> <hr/> <h3><span class="ez-toc-section" id="_HTML-15"> Элементы заголовка HTML </span></h3> <table> <tr> <th> Тег </th> <th> Описание </th> </tr> <tr> <td> <голова> </td> <td> Определяет информацию о документе </td> </tr> <tr> <td> <название> </td> <td> Определяет заголовок документа </td> </tr> <tr> <td> <базовый> </td> <td> Определяет адрес по умолчанию или цель по умолчанию для всех ссылок на странице </td> </tr> <tr> <td> <ссылка> </td> <td> Определяет связь между документом и внешним ресурсом </td> </tr> <tr> <td> <мета> </td> <td> Определяет метаданные о HTML-документе </td> </tr> <tr> <td> <сценарий> </td> <td> Определяет скрипт на стороне клиента </td> </tr> <tr> <td> <стиль> </td> <td> Определяет информацию о стиле для документа </td> </tr> </table> <p> Полный список всех доступных тегов HTML см.<img loading='lazy' src='/800/600/http/slideplayer.info/slide/15800724/88/images/7/LATCSS05.HTML+%3Chtml%3E+%3Chead%3E.jpg' /> в нашем справочнике по тегам HTML. </p> <p> ❮ Предыдущий Далее ❯ </p> <br/> <h2><span class="ez-toc-section" id="_HTML-16"> Что в голове? Метаданные в HTML — Изучите веб-разработку </span></h2> <ul> <li> Предыдущий </li> Обзор <li>: введение в HTML </li> <li> Следующий </li> </ul> <p> Заголовок HTML-документа — это часть, которая не отображается в веб-браузере при загрузке страницы. Он содержит такую ​​информацию, как страница <code> <title> </code> , ссылки на CSS (если вы решите стилизовать свой HTML-контент с помощью CSS), ссылки на пользовательские значки избранного и другие метаданные (данные о HTML, такие как автор, и важные ключевые слова, описывающие документ). Веб-браузеры используют информацию, содержащуюся в заголовке, для правильного отображения HTML-документа. В этой статье мы рассмотрим все вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой. </p> <p/> <table> <tbody> <tr> <th scope="row"> Необходимые условия: </th> <td> Базовое знакомство с HTML, как описано в Начало работы с HTML.<img loading='lazy' src='/800/600/http/cf.ppt-online.org/files1/slide/2/20tCizTfgQFKHYXo749ucZEPlvBLyORw1prjqN/slide-74.jpg' /> </td> </tr> <tr> <th scope="row"> Цель: </th> <td> Чтобы узнать о заголовке HTML, его назначении, наиболее важных элементах, может содержать и какое влияние это может оказать на HTML-документ. </td> </tr> </tbody> </table> <p> Давайте вернемся к простому HTML-документу, который мы рассмотрели в предыдущей статье: </p> <pre> <!DOCTYPE html> <html lang="en-US"> <голова> <метакодировка="utf-8" /> <title>Моя тестовая страница <тело>

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

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

     
      <метакодировка="utf-8" />
      Моя тестовая страница
    
     

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

    Мы уже видели элемент </code> в действии — его можно использовать для добавления заголовка к документу. Однако его можно спутать с элементом <code> <h2> </h2></code>, который используется для добавления заголовка верхнего уровня к основному содержимому — его также иногда называют заголовком страницы. Но это разные вещи! </p> <ul> <li> Элемент <code> <h2> </h2> </code> появляется на странице при загрузке в браузере — обычно его следует использовать один раз на странице, чтобы разметить заголовок содержимого вашей страницы (заголовок статьи, заголовок новости или что-то еще). подходит для вашего использования.<img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-uLIO_IJ4HOU/XOV32XK_TNI/AAAAAAAAAY0/lB-tB5bq30gfpEkHJQ2vtHztW_3mrZ2-ACLcBGAs/s1600/602310_ec9f.png' /> ) </li> <li> Элемент <code> <title> </code> — это метаданные, представляющие заголовок всего HTML-документа (а не содержимое документа). </li> </ul> <h4><span class="ez-toc-section" id="i-95"> Активное обучение: проверка простого примера </span></h4> <ol> <li> Чтобы начать активное обучение, мы предлагаем вам перейти в наш репозиторий GitHub и загрузить копию нашей страницы title-example.html. Для этого либо <ol> <li> Скопируйте и вставьте код со страницы в новый текстовый файл в редакторе кода, затем сохраните его в подходящем месте. </li> <li> Нажмите кнопку «Raw» на странице GitHub, что приведет к появлению необработанного кода (возможно, в новой вкладке браузера). Затем выберите в браузере меню <em> Сохранить страницу как… </em> и выберите подходящее место для сохранения файла. </li> </ol> </li> <li> Теперь откройте файл в браузере. Вы должны увидеть что-то вроде этого: Теперь должно быть совершенно очевидно, где появляется содержимое <code> <h2> </h2> </code> и где появляется содержимое <code> <title> </code>! </li> <li> Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере.<img loading='lazy' src='/800/600/http/creativealys.com/blog/wp-content/uploads/2015/03/Learning-PHP-MySQL-JavaScript-CSS-HTML5.jpg' /> Повеселитесь с этим. </li> </ol> <p> Содержимое элемента <code> <title> </code> также используется другими способами. Например, если вы попытаетесь добавить страницу в закладки (<em> Bookmarks > Bookmark This Page </em> или значок звездочки в адресной строке в Firefox), вы увидите содержимое <code> <title> </code>, заполненное в качестве предлагаемого имени закладки. </p> <p> </p> <p> Содержимое <code> <title> </code> также используется в результатах поиска, как вы увидите ниже. </p> <p> Метаданные — это данные, которые описывают данные, а в HTML есть «официальный» способ добавления метаданных в документ — элемент <code> <meta> </code>. Конечно, другие вещи, о которых мы говорим в этой статье, также можно рассматривать как метаданные. Существует множество различных типов элементов <code> <meta> </code>, которые можно включить в <head> вашей страницы, но мы не будем пытаться объяснить их все на данном этапе, так как это может слишком запутать. Вместо этого мы объясним несколько вещей, которые вы можете часто видеть, просто чтобы дать вам представление.<img loading='lazy' src='/800/600/http/psdahtmlpasoapaso.com/blog/wp-content/uploads/2013/04/html5css3.png' /> </p> <h4><span class="ez-toc-section" id="i-96"> Указание кодировки символов вашего документа </span></h4> <p> В приведенном выше примере была включена эта строка: </p> <pre> <meta charset="utf-8" /> </pre> <p> Этот элемент указывает кодировку символов документа — набор символов, который разрешено использовать документу. <code> utf-8 </code> — это универсальный набор символов, который включает практически любой символ любого человеческого языка. Это означает, что ваша веб-страница сможет отображать любой язык; поэтому рекомендуется устанавливать это на каждой веб-странице, которую вы создаете! Например, ваша страница прекрасно справляется с английским и японским языками: </p> <p> Если вы установите кодировку символов, например, <code> ISO-8859-1 </code> (набор символов для латинского алфавита), рендеринг вашей страницы может выглядеть совершенно испорченным: </p> <p> </p> <p> <strong> Примечание: </strong> Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не увидеть эту проблему.<img loading='lazy' src='/800/600/http/webworksagency.com/wp-content/uploads/2015/08/laying-out-your-naviation.jpg' /> Вы все равно должны установить кодировку <code> utf-8 </code> на своей странице, чтобы избежать возможных проблем в других браузерах. </p> <h4><span class="ez-toc-section" id="i-97"> Активное обучение: поэкспериментируйте с кодировкой символов </span></h4> <p> Чтобы попробовать это, снова откройте простой HTML-шаблон, который вы получили в предыдущем разделе, на <code> <title> </code> (страница title-example.html), попробуйте изменить значение метакодировки на <code> ISO-8859-1 </code> и добавьте японский язык на свою страницу. Вот код, который мы использовали: </p> <pre> <p>Пример на японском языке: ご飯が熱い。</p> </pre> <h4><span class="ez-toc-section" id="i-98"> Добавление автора и описания </span></h4> <p> Многие <code> <meta> </code> элементов включают <code> имя </code> и <code> содержимое </code> атрибуты: </p> <ul> <li> <code> имя </code> определяет тип метаэлемента; какой тип информации он содержит. </li> <li> <code> content </code> указывает фактический метаконтент. </li> </ul> <p> Два таких метаэлемента, которые полезно включить на страницу, определяют автора страницы и дают краткое описание страницы.<img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/9/2/7/9270eda8c123b20a6ba3b4c4f130945a.jpeg' /> Давайте рассмотрим пример: </p> <pre> <meta name="author" content="Chris Mills" /> <мета имя = "описание" content="Область обучения MDN Web Docs направлена ​​на предоставление полные новички в Интернете со всем, что им нужно знать, чтобы получить начал с разработки веб-сайтов и приложений." /> </pre> <p> Указание автора полезно во многих отношениях: полезно иметь возможность понять, кто написал страницу, если у вас есть какие-либо вопросы по содержанию, и вы хотели бы связаться с ними. Некоторые системы управления контентом имеют средства для автоматического извлечения информации об авторе страницы и предоставления ее для таких целей. </p> <p> Указание описания, включающего ключевые слова, относящиеся к содержимому вашей страницы, полезно, так как потенциально ваша страница будет отображаться выше в релевантных поисковых запросах, выполняемых поисковыми системами (такие действия называются поисковой оптимизацией или SEO.) </p> <h4><span class="ez-toc-section" id="i-99"> Активное обучение: Использование описания в поисковых системах </span></h4> <p> Описание также используется на страницах результатов поисковых систем.<img loading='lazy' src='/800/600/http/i.ytimg.com/vi/_92s7qSwUXY/hqdefault.jpg' /> Давайте выполним упражнение, чтобы изучить этот </p> <ol> <li> Перейдите на первую страницу The Mozilla Developer Network. </li> <li> Просмотр источника страницы (щелкните правой кнопкой мыши страницу, выберите <em> Просмотр источника страницы </em> в контекстном меню.) </li> <li> Найти метатег описания. Это будет выглядеть примерно так (хотя со временем может измениться): <pre> <мета имя = "описание" content="Сайт веб-документов MDN предоставляет информацию об открытых веб-технологиях включая HTML, CSS и API для веб-сайтов и прогрессивные веб-приложения." /> </pre> </li> <li> Теперь выполните поиск «MDN Web Docs» в своей любимой поисковой системе (мы использовали Google). Вы заметите описание <code> <meta> </code> и <code> <title> </code> элементов содержимого, используемых в результатах поиска — определенно стоит иметь! </li> </ol> <p> <strong> Примечание: </strong> В Google вы увидите некоторые соответствующие подстраницы веб-документов MDN, перечисленные под ссылкой на главную страницу — они называются ссылками сайта и настраиваются в инструментах Google для веб-мастеров — это способ улучшить результаты поиска вашего сайта в поиске Google.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/d/4/c/d4ca6d560d35986e7887734b1d9b0505.jpeg' /> двигатель. </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-100"> Другие типы метаданных </span></h4> <p> Путешествуя по Интернету, вы найдете и другие типы метаданных. Многие функции, которые вы увидите на веб-сайтах, являются проприетарными творениями, предназначенными для предоставления определенным сайтам (например, сайтам социальных сетей) определенной информации, которую они могут использовать. </p> <p> Например, Open Graph Data — это протокол метаданных, разработанный Facebook для предоставления более подробных метаданных для веб-сайтов.<img loading='lazy' src='/800/600/http/i.ytimg.com/vi/vxQewNq5Xbg/hqdefault.jpg' /> В исходном коде веб-документов MDN вы найдете следующее: </p> <pre> <meta свойство = «ог: изображение» content="https://developer.mozilla.org/static/img/opengraph-logo.png" /> <мета свойство = «ог: описание» content="Сеть разработчиков Mozilla (MDN) предоставляет информация об открытых веб-технологиях, включая HTML, CSS и API для обоих веб-сайтов. и HTML-приложения." /> <meta property="og:title" content="Сеть разработчиков Mozilla" /> </pre> <p> Одним из последствий этого является то, что когда вы ссылаетесь на MDN Web Docs на Facebook, ссылка появляется вместе с изображением и описанием: это делает работу пользователей более удобной. </p> <p> </p> <p> Твиттер также имеет свои собственные аналогичные проприетарные метаданные, называемые Twitter Cards, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например: </p> <pre> <meta name="twitter:title" content="Mozilla Developer Network" /> </pre> <p> Чтобы еще больше обогатить дизайн вашего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/a/f/1/af1548a010fd648f25d82a25c6300ad2.jpeg' /> Чаще всего используется 9.0117 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> <link rel="icon" href="favicon.<img loading='lazy' src='/800/600/http/i.pinimg.com/originals/e9/cf/b2/e9cfb26fed28a054d19b6a77c5afd12e.png' /> ico" type="image/x-icon" /> </pre> </li> </ol> <p> Вот пример фавикона в панели закладок: </p> <p> </p> <p> В наши дни есть много других типов значков. Например, вы найдете это в исходном коде домашней страницы MDN Web Docs: </p> <pre> <!-- iPad третьего поколения с дисплеем Retina с высоким разрешением: --> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon144.png" /> <!-- iPhone с дисплеем Retina высокого разрешения: --> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon114.png" /> <!-- iPad первого и второго поколения: --> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon72.png" /> <!-- iPhone без Retina, iPod Touch и устройства Android 2.1+: --> <ссылка rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png" /> <!-- основная иконка --> <ссылка отн = "значок" href="https://developer.<img loading='lazy' src='/800/600/http/i.pinimg.com/736x/cb/ab/22/cbab22a600cf3f84d7cdfea6abd11c34--free-ebooks-elisabeth.jpg' /> mozilla.org/static/img/favicon32.png" /> </pre> <p> Комментарии объясняют, для чего используется каждый значок — эти элементы охватывают такие вещи, как предоставление хорошего значка с высоким разрешением для использования при сохранении веб-сайта на главном экране iPad. </p> <p> Не беспокойтесь о внедрении всех этих типов значков прямо сейчас — это довольно продвинутая функция, и вам не нужно знать об этом, чтобы продвигаться по курсу. Основная цель здесь — сообщить вам, что это такое, на случай, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов. </p> <p> <strong> Примечание: </strong> Если ваш сайт использует политику безопасности контента (CSP) для повышения безопасности, эта политика применяется к фавиконам. Если вы столкнулись с проблемами, когда значок не загружается, убедитесь, что директива <code> img-src </code> заголовка <code> Content-Security-Policy </code> не препятствует доступу к нему. </p> <p> Почти все веб-сайты, которые вы будете использовать в наши дни, будут использовать CSS, чтобы придать им крутой вид, и JavaScript для поддержки интерактивных функций, таких как видеоплееры, карты, игры и многое другое.<img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/n/nua6RAM0omQeiKfI2WSvgpDJPxGzCZEcLhb7Bs/slide-15.jpg' /> Они чаще всего применяются к веб-странице с использованием <code> элемент <link> </code> и элемент <code> <script> </code> соответственно. </p> <ul> <li> Элемент <code> <link> </code> всегда должен находиться внутри заголовка вашего документа. Он принимает два атрибута: <code> rel="stylesheet" </code> , который указывает, что это таблица стилей документа, и <code> href </code> , который содержит путь к файлу таблицы стилей: <pre> <link rel="stylesheet" href="my-css-file.css" /> </pre> </li> <li> <code> <сценарий> 9Элемент 0007 также должен находиться в заголовке и включать атрибут <code> src </code>, содержащий путь к JavaScript, который вы хотите загрузить, и <code> defer </code> , который в основном указывает браузеру загружать JavaScript после того, как страница завершила анализ HTML. . Это полезно, так как гарантирует, что весь HTML-код будет загружен до запуска JavaScript, поэтому вы не получите ошибок, возникающих из-за того, что JavaScript пытается получить доступ к HTML-элементу, которого еще нет на странице.<img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/t/Tqhbns1HRgKu8PXoBWlGeLUMc6dxF47SZkVYmy9itQ/slide-7.jpg' /> На самом деле существует несколько способов обработки загрузки JavaScript на вашей странице, но это самый надежный способ использования для современных браузеров (для других см. Стратегии загрузки скриптов). <pre> <script src="my-js-file.js" отложить></script> </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.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/f/6/2/f62cf7159563144a33ecb85e372b8751.jpeg' /> </li> </ol> <p> Если все сделано правильно, при сохранении HTML и обновлении браузера вы увидите, что все изменилось: </p> <p> </p> <ul> <li> JavaScript добавил на страницу пустой список. Теперь, когда вы щелкнете в любом месте за пределами списка, появится диалоговое окно с просьбой ввести текст для нового элемента списка. При нажатии кнопки OK в список, содержащий текст, будет добавлен новый элемент списка. Когда вы нажимаете на существующий элемент списка, появляется диалоговое окно, позволяющее вам изменить текст элемента. </li> <li> CSS заставил фон стать зеленым, а текст стал больше. Он также применил стиль к некоторому контенту, добавленному на страницу с помощью JavaScript (красная полоса с черной рамкой — это стиль, добавленный CSS в список, сгенерированный JS). </li> </ul> <p> <strong> Примечание: </strong> Если вы застряли в этом упражнении и не можете применить CSS/JS, попробуйте просмотреть нашу страницу с примерами css-and-js.html. </p> <p> Наконец, стоит отметить, что вы можете (и действительно должны) установить язык своей страницы.<img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/1/4/7/147a2a3557754ff972b62d545d9f1cec.png' /> Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как показано в файле meta-example.html и показано ниже).0003 <pre> <html lang="en-US"> … </html> </pre> <p> Это полезно во многих отношениях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в результатах, зависящих от языка, например), и это полезно для людей с нарушениями зрения, использующих программы чтения с экрана (например, слово «шесть» существует как во французском, так и в английском языках, но произносится по-разному.) </p> <p> Вы также можете установить, чтобы подразделы вашего документа распознавались как разные языки. Например, мы можем настроить наш раздел японского языка так, чтобы он распознавался как японский, например: </p> <pre> <p>Пример на японском языке: <span lang="ja">ご飯が熱い。</span>.</p> </pre> <p> Эти коды определены стандартом ISO 639-1. Вы можете найти больше о них в разделе Языковые теги в HTML и XML.<img loading='lazy' src='/800/600/http/slideplayer.info/slide/13757022/85/images/6/HTML5+Struktur+HTML..jpg' /> </p> <p> На этом наш краткий обзор HTML-головы подходит к концу — здесь вы можете сделать гораздо больше, но исчерпывающий обзор на данном этапе был бы скучным и запутанным, и мы просто хотели дать вам представление о самых общие вещи, которые вы найдете там сейчас! В следующей статье мы рассмотрим основы HTML-текста. </p> <ul> <li> Предыдущий </li> Обзор <li>: введение в HTML </li> <li> Следующий </li> </ul> <ul> <li> Начало работы с HTML </li> <li> Что в голове? Метаданные в HTML </li> <li> Основы HTML-текста </li> <li> Создание гиперссылок </li> <li> Расширенное форматирование текста </li> <li> Структура документа и веб-сайта </li> <li> Отладка HTML </li> <li> Разметка письма </li> <li> Структурирование страницы содержимого </li> </ul> <p> <b> Последнее изменение: </b> <time datetime="2022-09-14T12:03:40.000Z"> 14 сентября 2022 г. </time> , участниками MDN </p> <h2><span class="ez-toc-section" id="HTML-6"> HTML: тег </span></h2> <hr/> <p> В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом <strong> <head> </strong>, с синтаксисом и примерами.<img loading='lazy' src='/800/600/http/onvolga.ru/images/stories/ris/mistake-code-6.jpg' /> </p> <h3><span class="ez-toc-section" id="i-101"> Описание </span></h3> <p> Тег HTML <strong> <head> </strong> содержит метаданные и инструкции для браузера, которые не отображаются непосредственно на веб-странице. Этот тег также часто называют элементом <head>. </p> <h3><span class="ez-toc-section" id="i-102"> Синтаксис </span></h3> <p> В HTML синтаксис тега <strong> <head> </strong>: </p> <pre> <head> </head> </pre> <h3><span class="ez-toc-section" id="i-103"> Атрибуты </span></h3> <p> Помимо глобальных атрибутов, ниже приведен список атрибутов, специфичных для тега <head>: </p> <p/> <table> <thead> <tr> <th> Атрибут </th> <th> Описание </th> <th> HTML-совместимость </th> </tr> </thead> <tbody> <tr> <td> профиль </td> <td> URI профилей метаданных </td> <td> HTML 4, устарело в HTML5 </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-104"> Примечание </span></h3> <ul> <li> HTML-элемент <head> находится внутри тега <html>. </li> <li> Наиболее часто встречающиеся элементы в теге <head>: теги <title>, <meta>, <link> и <script>. </li> </ul> <h3><span class="ez-toc-section" id="i-105"> Совместимость с браузерами </span></h3> <p> Тег <head> имеет базовую поддержку со следующими браузерами: </p> <ul> <li> Chrome </li> <li> Андроид </li> <li> Firefox (Геккон) </li> <li> Firefox Mobile (Геккон) </li> <li> Internet Explorer (IE) </li> <li> Пограничный мобильный телефон </li> <li> Опера </li> <li> Опера Мобайл </li> <li> Сафари (веб-кит) </li> <li> Сафари Мобильный </li> </ul> <h3><span class="ez-toc-section" id="i-106"> Пример </span></h3> <p> Мы обсудим тег <head> ниже, исследуя примеры использования тега <head> в HTML5, HTML 4.<img loading='lazy' src='/800/600/http/meropustak.com/app/assets/9/computer/html/clip_image006.jpg' /> 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1. </p> <ul> <li data-tab="1"> HTML5 </li> <li data-tab="2"> HTML4 </li> <li data-tab="3"> XHTML </li> </ul> <h4><span class="ez-toc-section" id="_HTML5-4"> Документ HTML5 </span></h4> <p> Если вы создали новую веб-страницу в HTML5, ваш тег <head> может выглядеть следующим образом: </p> <pre> <!doctype html> <html> <голова> <мета-кодировка="UTF-8"> <title>Пример HTML5 от www.techonthenet.com <тело>

    В этом примере документа HTML5 мы разместили тег и тег внутри тега <head>. Вы всегда должны видеть тег <title> внутри тега <head>. </p> <h4><span class="ez-toc-section" id="HTML_401_Transitional_Document"> HTML 4.01 Transitional Document </span></h4> <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <head> может выглядеть следующим образом: </p> <pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// RU" "http://www.w3.org/TR/html4/loose.dtd"> <html> <голова> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Переходный пример HTML 4.<img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/l/lxRCWE1eG4h6O8Prvpfa5YJZKSukg7o0jzV2btmdA/slide-2.jpg' /> 01 от www.techonthenet.com <тело>

    В этом примере переходного документа HTML 4.01 мы поместили тег и тег в тег <head>. </p> <h4><span class="ez-toc-section" id="_XHTML_10_Transitional"> Документ XHTML 1.0 Transitional </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <head> может выглядеть следующим образом: </p> <pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// RU" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Переходный пример XHTML 1.0 <тело>

    В этом примере переходного документа XHTML 1.0 мы поместили тег и тег в тег <head>. </p> <h4><span class="ez-toc-section" id="XHTML_10_Strict_Document"> XHTML 1.0 Strict Document </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег <head> может выглядеть следующим образом: </p> <pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// RU" "http://www.<img loading='lazy' src='/800/600/http/acadrepairs.ru/upload/photos/2021/04/CKzke3OvY9q195fw7YNS_02_49c851c29b3f853488b1bd2e456224ae_image.png' /> w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Строгий пример XHTML 1.0 от www.techonthenet.com <тело>

    В этом примере XHTML 1.0 Strict Document мы поместили тег и тег в тег <head>. </p> <h4><span class="ez-toc-section" id="_XHTML_11"> Документ XHTML 1.1 </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <head> может выглядеть так: </p> <pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <голова> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Пример XHTML 1.1 с сайта www.techonthenet.com <тело>

    В этом примере документа XHTML 1.1 мы разместили тег и тег внутри тега <head>. </p> <h3><span class="ez-toc-section" id="_HTML-17"> Краткое описание HTML-тега </span></h3><head> </h3> <p> Как видите, независимо от типа документа, который вы выбрали для создания, тег <head> будет содержать очень похожие элементы, самые основные из которых — это тег <title> и <meta > тег.<img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/4/c/d/4cd52886caf2d413e243ec4e6d19287d.png' /> </p> <p data-readability-styled="true"> Поделись: </p> <p> Реклама </p> <h2><span class="ez-toc-section" id="Head_First_HTML5_Programming"> Head First HTML5 Programming [Книга] </span></h2> <h3><span class="ez-toc-section" id="i-107"> Описание книги </span></h3> <p> HTML был в бешеном темпе. Конечно, HTML начинался как простой язык разметки, но в последнее время HTML нарастил некоторые мощные мускулы. Теперь у нас есть язык, настроенный для создания веб-приложений с веб-хранилищем, 2D-рисованием, автономной поддержкой, сокетами и потоками и многим другим. И чтобы говорить на этом языке, вам нужно выйти за пределы разметки HTML5 и погрузиться в мир DOM, событий и API-интерфейсов JavaScript. </p> <p> Теперь вы, вероятно, уже знаете все о HTML-разметке (также известной как структура) и все знаете о стиле CSS (представление), но чего вам не хватало, так это JavaScript (поведения). Если все, что вы знаете о структуре и представлении, вы можете создать несколько великолепно выглядящих страниц, но они все равно будут просто страницами. Когда вы добавляете поведение с помощью JavaScript, вы можете создать интерактивный опыт; еще лучше, вы можете создавать полноценные веб-приложения.<img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/3/c/83c10042eacf7511ddc0742d972fe0da.png' /> </p> <p> <i> Head First HTML5 Programming </i> — это ваш лучший путеводитель по созданию веб-приложений с помощью HTML5 и JavaScript, и мы даем вам все, что вам нужно знать для их создания, в том числе: как добавить интерактивности на ваши страницы, как общаться с мир веб-сервисов и как использовать новые замечательные API-интерфейсы, разрабатываемые для HTML5. </p> <p> Вот лишь некоторые из вещей, которые вы узнаете в курсе <i> Head First HTML5 Programming </i> : </p> <ul> <li> Узнайте, как сделать ваши страницы по-настоящему интерактивными с помощью возможностей модели DOM. </li> <li> Наконец-то поймите, как работает JavaScript, и пройдите путь от новичка до хорошо осведомленного всего за несколько глав. </li> <li> Узнайте, как API JavaScript вписываются в экосистему HTML5 и как использовать любой API на своих веб-страницах. </li> <li> Используйте API геолокации, чтобы узнать, где находятся ваши пользователи. </li> <li> Проявите в себе художника с Canvas, новой двухмерной поверхностью для рисования HTML5.<img loading='lazy' src='/800/600/http/michaelcropper.co.uk/wp-content/uploads/2012/03/html5-seo-page.png' /> </li> <li> Не ограничивайтесь простой вставкой видео на свои страницы и создавайте собственные видеоконтенты. </li> <li> Узнайте секрет захвата пяти мегабайт памяти в браузере каждого пользователя. </li> <li> Улучшите скорость отклика и производительность вашей страницы с помощью веб-воркеров. </li> <li> И многое другое. </li> </ul> <h3><span class="ez-toc-section" id="i-108"> Содержание </span></h3> <ol> <li> Head First HTML5 Programming создание веб-приложений с помощью javascript </li> <li> Преданность </li> <li> Примечание относительно дополнительных файлов </li> <li> Предварительная похвала за программирование Head First HTML5 </li> <li> Похвала другим книгам Эрика Фримена и Элизабет Робсон </li> <li> Авторы Head First HTML5 Programming </li> <li> Как пользоваться этой книгой: введение <ol> <li> для кого эта книга? <ol> <li> Кому, наверное, следует отказаться от этой книги? </li> </ol> </li> <li> Мы знаем, что вы думаете </li> <li> И мы знаем, о чем думает ваш мозг </li> <li> Метапознание: мышление о мышлении </li> <li> Вот что МЫ сделали: </li> <li> Вот что ВЫ можете сделать, чтобы заставить свой мозг подчиняться </li> <li> Прочти меня </li> <li> Требования к программному обеспечению </li> <li> Группа технического обзора </li> <li> Благодарности </li> <li> Еще больше благодарностей! </li> <li> Safari® Книги онлайн </li> </ol> </li> <li> 1.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/9/2/f/92fd9bdbedfc3dea7ed4e964dc46dc58.jpeg' /> Знакомство с HTML5: добро пожаловать в Webville <ol> <li> Пожалуйста, встаньте, НАСТОЯЩИЙ HTML5... </li> <li> Как на самом деле работает HTML5... </li> <li> Что можно сделать с помощью JavaScript? </li> <li> Написание серьезного JavaScript </li> <li> Новый взгляд на написание серьезного JavaScript... </li> </ol> </li> <li> 2. Знакомство с JavaScript и DOM: небольшой код <ol> <li> Как работает JavaScript </li> <li> Что можно сделать с помощью JavaScript? </li> <li> Объявление переменной <ol> <li> Три шага создания переменной </li> </ol> </li> <li> Как назвать ваши переменные <ol> <li> Правило № 1: Начинайте свои переменные с буквы, знака подчеркивания или знака доллара.<img loading='lazy' src='/800/600/http/2.bp.blogspot.com/-mtDo8J1zmRY/WMa3CLH2o8I/AAAAAAAAAA0/fN33abc2Fm8OAFJGIHJ4KXLver-kOXsZgCLcB/s1600/Section.png' /> </li> <li> Правило № 2: Затем вы можете использовать любое количество букв, цифр, символов подчеркивания или знаков доллара. </li> <li> Правило № 3: Убедитесь, что вы избегаете всех зарезервированных слов JavaScript </li> </ol> </li> <li> Получение выразительности </li> <li> Делать что-то снова и снова... </li> <li> Принимайте решения с помощью JavaScript </li> <li> Принятие большего количества решений... и добавление универсальных </li> <li> Как и где добавить JavaScript на свои страницы </li> <li> Как JavaScript взаимодействует с вашей страницей </li> <li> Как испечь свой собственный DOM </li> <li> Первый вкус DOM </li> <li> Тест-драйв планет </li> <li> Вы не можете возиться с DOM, пока страница не загрузится полностью <ol> <li> Перезагрузить страницу </li> </ol> </li> <li> Итак, для чего еще хорош DOM? </li> <li> Можем ли мы снова поговорить о JavaScript? Или как хранить несколько значений в JavaScript <ol> <li> Как создать массив </li> <li> Добавление еще одного элемента в массив </li> <li> Использование элементов вашего массива </li> <li> Знайте размер вашего массива, иначе </li> </ol> </li> <li> Фраза-O-Matic </li> </ol> </li> <li> 3.<img loading='lazy' src='/800/600/http/s3.amazonaws.com/media-p.slid.es/uploads/345253/images/4035212/Screenshot_from_2017-08-07_15-20-01.png' /> События, обработчики и все такое прочее: небольшое взаимодействие <ol> <li> Будьте готовы к мелодиям Webville </li> <li> Начиная... <ol> <li> Дайте ему тест-драйв </li> </ol> </li> <li> Но ничего не происходит, когда я нажимаю «Добавить песню». </li> <li> Обработка событий </li> <li> Составление плана... </li> <li> Получение доступа к кнопке «Добавить песню» </li> <li> Предоставление кнопке обработчика щелчка <ol> <li> Подвергая испытанию... </li> </ol> </li> <li> Посмотрите внимательно на то, что только что произошло... </li> <li> Получение названия песни </li> <li> Как добавить песню на страницу? </li> <li> Как создать новый элемент </li> <li> Добавление элемента в DOM </li> <li> Положил все это вместе.<img loading='lazy' src='/800/600/http/4.bp.blogspot.com/-Jr8RlR6RZNE/WBryb20jeII/AAAAAAAAAS8/3gmxT6YjKQAR8QJ09ZJwN5lKf98E5otIQCLcB/s640/html5-css3.jpg' /> .. </li> <li> ... и взять его на тест-драйв </li> <li> Обзор — что мы только что сделали </li> <li> Как добавить код готовой выпечки... </li> <li> Интеграция вашего готового кода для выпечки <ol> <li> Тест-драйв сохраненных песен </li> </ol> </li> </ol> </li> <li> 4. Функции и объекты JavaScript: серьезный JavaScript <ol> <li> Расширение словарного запаса </li> <li> Как добавить свои функции <ol> <li> Создайте функцию проверки предположения </li> </ol> </li> <li> Как работает функция </li> <li> Локальные и глобальные переменные <ol> <li> Знайте разницу или рискуйте унижением </li> </ol> </li> <li> Знание области действия ваших локальных и глобальных переменных </li> <li> Короткая жизнь переменных </li> <li> О, мы упоминали, что функции также являются значениями? </li> <li> Что вы можете делать с функциями в качестве значений </li> <li> Кто-то сказал «Объекты»?! </li> <li> Думая о свойствах.<img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/e/e7HP4hYpRV5jLfwvalMkZNodyB6nGs1Q9xIU2Wc0Ar/slide-38.jpg' /> .. </li> <li> Как создать объект в JavaScript </li> <li> Некоторые вещи, которые вы можете делать с объектами </li> <li> Поговорим о передаче объектов в функции <ol> <li> Посадить Фидо на диету.... </li> </ol> </li> <li> Наш следующий показ состоится в.... </li> <li> Тестирование на въезде </li> <li> Объекты тоже могут иметь поведение... </li> <li> Тем временем в кинотеатре Webville... </li> <li> Но мы знаем, что это не может быть совсем правильно... </li> <li> Давайте вытащим оттуда параметр фильма... </li> <li> Что теперь? </li> <li> Добавление ключевого слова «это» </li> <li> Тест-драйв с «этим» </li> <li> Как создать конструктор </li> <li> Теперь воспользуемся нашим конструктором </li> <li> Как это работает на самом деле? </li> <li> Испытайте свой конструктор прямо с завода </li> <li> Что такое объект окна? </li> <li> Пристальный взгляд на window.<img loading='lazy' src='/800/600/http/image1.slideserve.com/3203718/basic-html-structure-l.jpg' /> onload </li> <li> Еще один взгляд на объект документа </li> <li> Более пристальный взгляд на document.getElementById </li> <li> Еще один объект, о котором следует подумать: ваши объекты-элементы </li> </ol> </li> <li> 5. Осведомленность о местоположении в HTML: геолокация <ol> <li> Место, Место, Место </li> <li> Широта и долгота этого... </li> <li> Как API геолокации определяет ваше местоположение </li> <li> Только где ты вообще? </li> <li> Протестируйте свое местоположение </li> <li> Что мы только что сделали... </li> <li> Как все это сочетается </li> <li> Раскрытие нашего секретного местоположения.<img loading='lazy' src='/800/600/http/thecrazyprogrammer.com/wp-content/uploads/2017/08/Difference-between-HTML-and-HTML5.png' /> .. </li> <li> Написание кода для нахождения расстояния </li> <li> Тест-драйв с учетом местоположения </li> <li> Отображение вашей позиции </li> <li> Как добавить карту на свою страницу <ol> <li> Подготовка к созданию карты... </li> </ol> </li> <li> Отображение карты </li> <li> Протестируйте свой новый проекционный дисплей </li> <li> Воткнув в него булавку... </li> <li> Тестирование маркера </li> <li> Тем временем вернемся к API геолокации... </li> <li> Можем ли мы поговорить о вашей точности? </li> <li> Проверка точности </li> <li> «Куда бы ты ни пошел, ты там» <ol> <li> Как мы будем отслеживать ваши перемещения </li> </ol> </li> <li> Запуск приложения </li> <li> Переделываем наш старый код.<img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/4/d/b4d67a81ae7b35b775d2efd9b6db507d.jpeg' /> .. <ol> <li> Написание обработчика watchLocation </li> <li> Написание обработчика clearWatch </li> <li> Нам все еще нужно сделать небольшое обновление для displayLocation... </li> </ol> </li> <li> Время двигаться! </li> <li> У вас есть несколько вариантов... <ol> <li> Можем мы снова поговорить о вашей точности? </li> </ol> </li> <li> Мир тайм-аутов и максимального возраста... </li> <li> Как указать параметры </li> <li> Давайте закончим это приложение! </li> <li> Интеграция нашей новой функции </li> <li> И еще раз... </li> </ol> </li> <li> 6. Разговор с Интернетом: экстравертные приложения <ol> <li> Майти Гамбол хочет веб-приложение </li> <li> Еще немного предыстории Майти Гамбола </li> <li> Просто быстрый старт.<img loading='lazy' src='/800/600/http/goodellgroup.com/tutorial/wpimages/wpd0550bd2_05_06.jpg' /> .. <ol> <li> Перевернуть двигатель... </li> </ol> </li> <li> Так как же мы делаем запросы к веб-сервисам? </li> <li> Как сделать запрос из JavaScript </li> <li> Откажитесь от XML, познакомьтесь с JSON </li> <li> Быстрый пример использования JSON </li> <li> Давай приступим к работе! <ol> <li> Написание функции обработчика загрузки </li> </ol> </li> <li> Отображение данных о продажах жевательной резинки </li> <li> Осторожно, объезд впереди! </li> <li> Как настроить собственный веб-сервер </li> <li> Как настроить собственный веб-сервер, продолжение </li> <li> Вернуться к коду </li> <li> Давайте уже это проверим! </li> <li> Впечатление клиента.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/f/4/7/f471772faa9b07043938b37fc5a4462f.jpeg' /> .. </li> <li> Переработка нашего кода для использования JSON </li> <li> Финишная линия... </li> <li> Переход на живой сервер </li> <li> Живой тест-драйв... </li> <li> Это клиффхэнгер! </li> <li> Помните, мы оставили вас с клиффхэнгером? Жук </li> <li> Итак, что нам теперь делать?! </li> <li> Какая политика безопасности браузера? <ol> <li> Допустимое поведение для кода JavaScript </li> <li> Недопустимое поведение кода JavaScript </li> </ol> </li> <li> Итак, какие у нас есть варианты? </li> <li> Познакомьтесь с JSONP </li> <li> Но для чего нужна буква «P» в JSONP? </li> <li> Давайте обновим веб-приложение Mighty Gumball.<img loading='lazy' src='/800/600/http/i.ytimg.com/vi/PLuT7uj3l74/hqdefault.jpg' /> </li> <li> Протестируйте свой новый код, заряженный JSONP </li> <li> Улучшение Майти Гамбола </li> <li> Шаг 1: Забота об элементе скрипта... </li> <li> Шаг 2: Теперь пришло время для таймера </li> <li> Тест-драйв на время </li> <li> Шаг 3: Повторная реализация JSONP <ol> <li> Во-первых, давайте настроим URL-адрес JSONP. </li> <li> Далее давайте создадим новый элемент скрипта </li> <li> Как вставить скрипт в DOM? </li> <li> Теперь давайте напишем код для вставки скрипта в DOM. </li> </ol> </li> <li> Чуть не забыли: следите за ужасным кешем браузера </li> <li> Еще один тест-драйв TIME </li> <li> Как удалить повторяющиеся отчеты о продажах </li> <li> Обновление URL-адреса JSON для включения времени последнего отчета </li> <li> Тест-драйв lastReportTime </li> <li> Специальное сообщение из главы 7.<img loading='lazy' src='/800/600/http/slideplayer.com/slide/13723041/85/images/10/5.1+FRAMEs+%28not+suppurted+in+HTML5%21%21%21%29.jpg' /> .. </li> </ol> </li> <li> 7. Выявление вашего внутреннего художника: холст <ol> <li> Наш новый стартап: TweetShirt </li> <li> Проверка «композиций» </li> <li> Давайте заглянем к команде Tweetshirt... </li> <li> Как получить холст на вашей веб-странице </li> <li> Протестируйте свой новый холст </li> <li> Как увидеть свой холст </li> <li> Рисование на холсте </li> <li> Небольшой тест-драйв Canvas... </li> <li> Пристальный взгляд на код </li> <li> Неудача изящно </li> <li> Tweetshirt: общая картина </li> <li> Во-первых, давайте установим HTML </li> <li> Теперь добавим <form> </li> <li> Время заняться вычислениями с помощью JavaScript </li> <li> Написание функции drawSquare </li> <li> Время тест-драйва! <ol> <li> Почему мы видим старые квадраты и новые квадраты при предварительном просмотре? </li> </ol> </li> <li> Добавьте вызов fillBackgroundColor <ol> <li> Еще один быстрый тест-драйв, чтобы убедиться, что наша новая функция fillBackgroundColor работает.<img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/p/PTxehtbEAf2CHQod9c6qyBY5iazgNURZSuIjD1/slide-22.jpg' /> .. </li> </ol> </li> <li> Тем временем, вернемся на TweetShirt.com... <ol> <li> И через пару часов... </li> </ol> </li> <li> Рисование с гиками </li> <li> Разрушение метода дуги </li> <li> Небольшой вкус использования дуги </li> <li> Я говорю градус, ты говоришь радиан </li> <li> Вернемся к написанию кода круга TweetShirt </li> <li> Написание функции drawCircle... <ol> <li> ...и тест-драйв! </li> </ol> </li> <li> Добро пожаловать обратно... </li> <li> Получение ваших твитов </li> <li> Тест-драйв Твиты </li> <li> Дайте DrawText вращение </li> <li> Завершение функции drawText </li> <li> Быстрый тест-драйв, а затем ЗАПУСК! </li> <li> Еще один тест-драйв <ol> <li> Итак, у вас есть путь! Что теперь? </li> </ol> </li> </ol> </li> <li> 8.<img loading='lazy' src='/800/600/http/images.myshared.ru/6/538306/slide_9.jpg' /> Телевидение не твоего отца: видео ... со специальной приглашенной звездой «Canvas» <ol> <li> Познакомьтесь с Webville TV </li> <li> HTML, давайте сделаем это... </li> <li> Подключите этот набор и проверьте его... </li> <li> Как работает элемент видео? </li> <li> Внимательно изучаем атрибуты видео... </li> <li> Что нужно знать о видеоформатах </li> <li> Претенденты </li> <li> Как жонглировать всеми этими форматами... </li> <li> Как быть еще более конкретным с вашими форматами видео </li> <li> Мне сказали, что будут API? </li> <li> Небольшое «программирование» контента на Webville TV </li> <li> Внедрение плейлиста Webville TV </li> <li> Так что же не так с этим кодом обработчика событий? </li> <li> Как написать обработчик «конец видео» </li> <li> Очередной тест-драйв.<img loading='lazy' src='/800/600/http/images.slideplayer.com/28/9315168/slides/slide_4.jpg' /> .. </li> <li> Как работает метод canPlayType <ol> <li> Использование canPlayType </li> <li> Интеграция функции getFormatExtension </li> <li> И тест-драйв... </li> </ol> </li> <li> Мы нуждаемся в твоей помощи! </li> <li> Зайдите в кабинку, давайте посмотрим... </li> <li> Распаковка демонстрационного устройства </li> <li> Проверка остальной части заводского кода <ol> <li> А теперь JavaScript... </li> <li> Глядя на обработчики кнопок </li> </ol> </li> <li> Обработчики setEffect и setVideo </li> <li> А вот вспомогательные функции </li> <li> Этот запах новой демонстрационной машины.<img loading='lazy' src='/800/600/http/cdn.lynda.com/video/370809-170-635592392266409043_338x600_thumb.jpg' /> .. время тест-драйва! </li> <li> Готовим демо-видео... </li> <li> Внедрение элементов управления видео </li> <li> Реализация остальных элементов управления видео </li> <li> Очередной тест-драйв! </li> <li> Уход за свободным концом... </li> <li> И другой... </li> <li> Переключение тестовых видео <ol> <li> Меняйте водителей и тест-драйв! </li> </ol> </li> <li> Пришло время спецэффектов </li> <li> План форекс </li> <li> Пришло время заставить эти кнопки эффектов работать </li> <li> Как работает обработка видео </li> <li> Как обрабатывать видео с помощью рабочего буфера </li> <li> Реализация рабочего буфера с помощью Canvas </li> <li> Как расположить видео и холсты </li> <li> Написание кода для обработки видео </li> <li> Как создать буфер </li> <li> Как обработать буфер <ol> <li> Мы обработали один кадр, что дальше? </li> </ol> </li> <li> Теперь нам нужно написать некоторые эффекты </li> <li> Тест-драйв фильма нуар </li> <li> Большой тест-драйв </li> <li> Если бы это был идеальный мир.<img loading='lazy' src='/800/600/http/images.slideplayer.com/24/7397560/slides/slide_2.jpg' /> .. </li> <li> Как использовать события ошибок </li> <li> Тестовый сбой! </li> <li> Куда вы можете пойти отсюда? </li> </ol> </li> <li> 9. Локальное хранение вещей: веб-хранилище <ol> <li> Как работает хранилище браузера (1995–2010) </li> <li> Как работает веб-хранилище HTML5 </li> <li> себе на заметку... </li> <li> Время тест-драйва! </li> <li> Были ли локальное хранилище и массив разделены при рождении? <ol> <li> Но подождите, есть еще! </li> </ol> </li> <li> Серьезно относиться к липучкам </li> <li> Создание интерфейса </li> <li> Теперь добавим JavaScript </li> <li> Время для еще одного тест-драйва! </li> <li> Завершение пользовательского интерфейса </li> <li> Очередной тест-драйв! </li> <li> Нам нужно остановиться на небольшое запланированное обслуживание </li> <li> Техническое обслуживание своими руками </li> <li> У нас есть технологии.<img loading='lazy' src='/800/600/http/otvet.imgsmail.ru/download/183577358_f5c9939754a615c4b03e43a9fad13d98_800.jpg' /> .. </li> <li> Переработка нашего приложения для использования массива <ol> <li> До... </li> <li> Новый и улучшенный </li> </ol> </li> <li> Преобразование createSticky для использования массива </li> <li> Что нужно изменить? </li> <li> Собираем все вместе </li> <li> Продолжаем собирать все вместе... </li> <li> Тест-драйв! </li> <li> Удаление заметок </li> <li> Функция deleteSticky </li> <li> Как выбрать стикер для удаления? </li> <li> Как сделать так, чтобы стикер удалялся с мероприятия </li> <li> Удалите липкое из DOM тоже <ol> <li> Ладно, тестируй.<img loading='lazy' src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/141702151/original/d36a4bea794cc90cef97fdedfbddc844e382a03d/setup-storj-node-on-your-server.png' /> .. </li> </ol> </li> <li> Но мы, конечно, можем! </li> <li> Обновите пользовательский интерфейс, чтобы мы могли указать цвет </li> <li> JSON.stringify не только для массивов </li> <li> Использование нового stickyObj </li> <li> Тест-драйв цветных стикеров </li> <li> Теперь, когда вы знаете localStorage, как вы собираетесь его использовать? </li> </ol> </li> <li> 10. Использование JavaScript в работе: веб-воркеры <ol> <li> Ужасно медленный сценарий </li> <li> Как JavaScript тратит свое время </li> <li> Когда однопоточность становится ПЛОХОЙ </li> <li> Добавление еще одного потока управления, чтобы помочь </li> <li> Как работают веб-воркеры </li> <li> Ваш первый веб-воркер.<img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-jnEFh4lsrWU/WSNusEGXoBI/AAAAAAAAFCI/YiYIPSKDA3cf--LJxEp0L8F1Nbnd6PpKACLcB/s1600/Screen%2BShot%2B2017-05-22%2Bat%2B16.05.07.png' /> .. <ol> <li> Как создать веб-воркера </li> </ol> </li> <li> Написание Manager.js </li> <li> Получение сообщений от работника </li> <li> Теперь напишем рабочий <ol> <li> Написание обработчика сообщений воркера </li> </ol> </li> <li> Обслуживание тест-драйва </li> <li> Виртуальный захват земли </li> <li> Посмотрите вокруг </li> <li> Как вычислить множество Мандельброта </li> <li> Как использовать несколько воркеров </li> <li> Давайте создадим приложение Fractal Explorer <ol> <li> Создание HTML-разметки Fractal Viewer </li> </ol> </li> <li> Создавать рабочих и давать им задания.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/2/b/8/2b8864c3f4e168f72cab8b7720c7f011.jpeg' /> .. </li> <li> Написание кода </li> <li> Запуск рабочих </li> <li> Реализация работника </li> <li> Небольшой пит-стоп... </li> <li> Пора возвращаться в путь... </li> <li> Назад к коду: как обрабатывать результаты воркера </li> <li> Психоделический тест-драйв. <ol> <li> Обработка события клика </li> </ol> </li> <li> Еще один тест-драйв </li> <li> Подгонка холста к окну браузера </li> <li> Внимательный к аналу шеф-кодировщик </li> <li> Время финального тест-драйва! </li> <li> Поздравляем! Вы сделали это до конца </li> </ol> </li> <li> A.<img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/a/f/5/af5ea5335781e311a9239759249b7d9a.jpeg' /> Остатки: десять основных тем (мы не затронули) <ol> <li> #1 Модернизр <ol> <li> Добавление Modernizr на вашу страницу </li> <li> Как обнаружить поддержку </li> </ol> </li> <li> #2 Аудио <ol> <li> Стандарт кодирования аудио </li> </ol> </li> <li> # 3 jQuery </li> <li> #4 XHTML мертв, да здравствует XHTML </li> <li> # 5 SVG </li> <li> #6 Оффлайн веб-приложения </li> <li> 7. Веб-сокеты </li> <li> #8 Больше API холста </li> <li> # 9 API селекторов </li> <li> # 10 Но это еще не все! <ol> <li> API индексированных баз данных и веб-SQL </li> <li> Перетащите </li> <li> Обмен сообщениями между документами </li> <li> И мы могли бы продолжить.<img loading='lazy' src='/800/600/http/as-v1.tamasha.com/statics/images/posters/0b/eb/m00ol_0bebd826e57379f2d8cd07b6d55a7696865857d5_854x480.jpg' /> .. </li> </ol> </li> <li> Руководство HTML5 по новому строительству </li> <li> Добавление стиля к вашей новой конструкции с помощью CSS3 </li> </ol> </li> <li> B. Это не прощание </li> <li> Индекс </li> <li> Об авторах </li> <li> Колофон </li> <li> Авторские права </li> </ol> <h2><span class="ez-toc-section" id="HTML-_javatpoint"> HTML-заголовок — javatpoint </span></h2> <table> <tr> <td> <p> следующий → ← предыдущая </p> <p> Элемент HTML <head> используется как контейнер для метаданных (данные о данных). Он используется между тегом <html> и тегом <body>. </p> <p> Заголовок HTML-документа — это часть, содержимое которой не отображается в браузере при загрузке страницы. Он просто содержит метаданные о документе HTML, которые указывают данные о документе HTML.<img loading='lazy' src='/800/600/http/i.ytimg.com/vi/AD0u6LweP1g/hqdefault.jpg' /> </p> <p> Заголовок HTML может содержать много информации метаданных или может содержать очень мало информации или вообще не содержать ее, это зависит от наших требований. Но головная часть играет решающую роль HTML-документа при создании веб-сайта. </p> <p> Метаданные определяют заголовок документа, набор символов, стили, ссылки, скрипты и другую метаинформацию. </p> <p> Ниже приведен список тегов, используемых в метаданных: </p> <ul> <li> <название> </li> <li> <стиль> </li> <li> <мета> </li> <li> <ссылка> </li> <li> <скрипт> </li> <li> <базовый> </li> </ul> <h3><span class="ez-toc-section" id="HTML-7"> HTML-элемент </span></h3><title> </h3> <p> Элемент HTML <title> используется для определения заголовка документа. Он используется во всех документах HTML/XHTML. Элемент <title> должен располагаться между элементом <head>, и в одном документе может быть только один элемент title. </p> <p> <strong> Что делает элемент <title>? </strong> </p> <ol> <li> Определяет заголовок на вкладке браузера. </li> <li> Предоставляет заголовок для страницы, когда она добавляется в избранное.<img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/e/a/4/ea4bc0f98cd97e87a0bbbc9c102561e7.jpeg' /> </li> <li> Отображает заголовок страницы в результатах поиска. </li> </ol> <h5><span class="ez-toc-section" id="_65_70"> Примечание. В элементе заголовка должно быть указано конкретное описание документа, а его рекомендуемая длина составляет от 65 до 70 символов, включая пробелы. </span></h5> <p> <strong> Пример: </strong> </p> <p> <!ДОКТИП HTML> <html> <голова> <title>Название этой страницы <тело>

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

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

    Протестируйте сейчас

    HTML-элемент