Содержание
Что внутри «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-документа, а не заголовок внутри его содержимого.
Активное изучение: разбор простого примера
- Чтобы приступить к активному изучению, скачайте страницу title-example.html из нашего GitHub-репозитория. Это можно сделать двумя способами:
- Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
- Нажмите на странице кнопку «Raw», нажмите Файл > Сохранить Как… в меню браузера и выберите папку для сохранения.
- Откройте файл в браузере. Вы увидите что-то вроде этого:
Теперь должно стать совершенно ясно, в чём разница между
<h2>
и<title>
! - Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!
Содержимое элемента <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">
используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.
- Перейдите на главную страницу Mozilla Developer Network.
- Откройте исходный код страницы (кликните правой кнопкой мыши и выберите Просмотреть код в контекстном меню.)
- Найдите тег meta с описанием. Он выглядит так:
<meta name="description" content="Веб-документация на MDN предоставляет собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
- Теперь найдите «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:
- Сохраните изображение в формате
.ico
(многие браузеры поддерживают и в более привычных форматах, таких как.gif
или.png
) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат.ico
- Добавьте ссылку на иконку в
<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>
.
Активное изучение: добавляем на страницу CSS и JavaScript
- Для этого упражнения скачайте файлы meta-example.html, script.js и style.css и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
- Откройте HTML в браузере и текстовом редакторе.
- Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов
<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: 000Z»>27 окт. 2022 г., by MDN contributors
— HTML | MDN
HTML-элемент <meta>
представляет такие метаданные, которые не могут быть представлены другими HTML-метатегами, такими как <base>
, <link>
, <script>
, <style>
или <title>
.
Этот элемент включает в себя глобальные атрибуты.
Примечание: атрибут name
имеет особое значение для элемента <meta>
и атрибут itemprop
не должен быть задан в <meta>
элементе в котором уже определены какие-либо name
, http-equiv
или charset
атрибуты.
charset
Этот атрибут задаёт кодировку символов, используемую на странице. Он должен содержать стандартное имя IANA MIME для кодировки символов. Хотя стандарт не требует определённой кодировки, он рекомендует:
- Авторам рекомендуется использовать
UTF-8 (en-US)
. - Не следует использовать ASCII-несовместимые кодировки, чтобы избежать угроз безопасности: браузеры, не поддерживающие их, могут интерпретировать вредоносный контент как HTML. Это относится к семейству кодировок
JIS_C6226-1983
,JIS_X0212-1990
,HZ-GB-2312
,JOHAB
иEBCDIC
.Примечание: ASCII-несовместимые кодировки — это те, которые не преобразуют 8-битные коды точек
0x20
,0x7E
,0x0020
,0x007E
в коды Unicode точек.Предупреждение:
- Авторы не должны использовать
CESU-8
,UTF-7
,BOCU-1
и/илиSCSU
, так как есть примеры атак межсайтового скриптинга (en-US) использующих данные кодировки. - Авторам не следует использовать кодировку
UTF-32
, потому что не все алгоритмы кодирования HTML5 могут отличить её отUTF-16
.
Примечание:
- Указанный набор символов должен соответствовать одной странице.
Нет веских оснований для объявления неточного набора символов. <meta>
элемент должен находиться внутри элемента<head>
и задаваться в 1024 первых байтах HTML страницы, поскольку некоторые браузеры смотрят только эти байты перед выбором кодировки.- Этот
<meta>
элемент — часть алгоритма, определяющего набор символов (algorithm to determine the character set) страницы, который браузер поддерживает. ЗаголовокContent-Type
и любые Byte-Order Marks элементы переопределяют данный элемент. - Настоятельно рекомендуется определить кодировку символов. Если для страницы не определён набор символов, то некоторые cross-scripting технологии могут повредить страницу, например такие как UTF-7 fallback cross-scripting technique. Постоянная установка этого элемента будет защищать вас от этого риска.
- Этот
<meta>
элемент это синоним для pre-HTML5<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">
где *IANAcharset
*соответствует значению эквивалентногоcharset
атрибута.
Этот синтаксис по-прежнему разрешён, хотя и устарел и больше не рекомендуется.
- Авторы не должны использовать
- Авторам рекомендуется использовать
content
Этот атрибут содержит значение для
http-equiv
илиname
атрибута, в зависимости от контекста.http-equiv
Этот атрибут определяет прагму, которая может изменять поведение серверов и пользователей. Значение прагмы определяется с помощью
content
и может быть следующим:"content-language"
Этот API вышел из употребления и его работа больше не гарантируется.- : Эта прагма определяет значение языка страницы по умолчанию.
Примечание: Не используйте эту прагму, так как она устарела Используйте глобальный атрибут
<html>
элемента вместо этого."Content-Security-Policy"
- : Это значение позволит администратору веб-сайта определить политику содержания для обслуживаемых ресурсов. За некоторыми исключениями, политика в основном включают в себя указание происхождения сервера и конечные точки сценария. Это помогает предотвратить атаки межсайтового скриптинга.
"content-type"
Этот API вышел из употребления и его работа больше не гарантируется."default-style"
- : Специализация этой прагмы — предпочтительный стиль таблиц, используемый на странице.
content
атрибут должен содержать заголовок<link>
элемента которыйhref
связывает атрибут с CSS таблцей стилей, или заголовок<style>
элемента, который содержит CSS таблицу стилей.
- : Специализация этой прагмы — предпочтительный стиль таблиц, используемый на странице.
"refresh"
- : Эта прагма определяет:
- Количество секунд перезагрузки таблицы, если
content
атрибут содержит только целое положительное число; - Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если
content
атрибут содержит целое положительное число, заканчивающийся строкой ‘;url=
‘ и корректный URL.
- Количество секунд перезагрузки таблицы, если
- : Эта прагма определяет:
"set-cookie"
Этот API вышел из употребления и его работа больше не гарантируется.
name
Этот атрибут определяет имя уровня документа метаданных.
Его не следует устанавливать, если один из атрибутовitemprop
,http-equiv
илиcharset
также указан в наборе.
Имя этого документального уровня метаданных связано со значением, которое содержится вcontent
атрибуте. Допустимые значения для имени элемента, со связанными с ними значениями, хранятся посредствомcontent
атрибута:application-name
, определяет имя веб-приложения, запущенного на веб-странице;Примечание: Замечание:* Браузеры могут использовать его для идентификации приложения. Он отличается от
<title>
элемента, который обычно состоит из имени приложения, но также может содержать специальную информацию, как например имя документа или статус;- Простые веб-страницы не определяют application-name meta.
автор
определяет в свободном формате имя автора документа;- описание, содержащее краткое и точное резюме содержания страницы. В некоторых браузерах, среди которых Firefox и Opera, этот мета используется как описание страницы по умолчанию в закладке;
- генератор, содержащий в свободном формате идентификатор программного обеспечения, создавшего страницу;;
- Ключевые слова, представленные строками, разделёнными запятыми, связанные с содержанием страницы
referrer
Её поведение в будущем может измениться»>
Экспериментальная возможность
контролирует содержимое HTTP.Referer
HTTP — заголовок, прикреплённый к любому запросу, отправленному из этого документа:Примечание: Замечание: Некоторые браузеры поддерживают ключевые слова всегда, по умолчанию и никогда для реферера. Эти значения устарели.
Примечание: Замечание: Динамическая вставка
<meta name="referrer">
(с помощью document.write или appendChild) создаёт недетерминизм, когда дело доходит до отправки рефереров. Также стоит отметить, что когда определяется несколько конфликтующих политик, применяется No-referrer policy.Атрибут также может иметь значение, взятое из существующего листа определений WHATWG Wiki MetaExtensions page. Хотя ни один из них официально не был принят, в число предложений входят несколько часто используемых имён:creator
, определят в свободном формате имя создателя документа. Это также может быть имя института. Если же имён больше чем одно, то несколько<meta>
элементов должны быть использованы;googlebot
, синонимrobots
, но только следует за Googlebot, сканирует индексы для Google;publisher
, определяет в свободном формате имя того, кто опубликовал документ. Это также может быть имя института;robots
, определяет поведение, поисковых роботов на странице. Список этих значений представлен ниже:Примечание: Замечания:
- Только кооперативные роботы будут следовать правилам, определённым именем роботов.
- Роботу необходимо получить доступ к странице, чтобы считать мета значение. Если вы хотите скрыть от них информацию, то используйте robots.txt файл.
- Если вы хотите удалить страницу индекса, изменение мета в noindex будет работать, но только тогда, когда робот снова посетит страницу. Убедитесь, что файл robots.txt не предотвращает такие посещения. Некоторые поисковые системы имеют инструменты, позволяющие быстро удалить какую-либо страницу.
- Некоторые возможные значения взаимно исключают друг друга, такие как использование индекса и noindex или follow и nofollow одновременно. В этих случаях поведение робота не определено и может варьироваться от одного к другому. Поэтому избегайте этих случаев.
- Некоторые поисковые роботы-роботы, такие как Google, Yahoo Search или Bing, поддерживают те же значения в директиве HTTP, X-Robot-Tags: это позволяет им использовать эту прагму для документов, отличных от HTML, например изображений.
slurp
,синонимrobots
, но следует только за Slurp, индексирующим роботом от Yahoo Search;Наконец несколько общих терминов:viewport
, который даёт подсказки о размере изначального размера viewport. Эта прагма используется только на некоторых мобильных устройствах.
Спецификация Статус Комментарий CSS Device Adaptation
Определение ‘<meta name=»viewport»>’ в этой спецификации.Рабочий черновик Ненормативно описывает элемент META Viewport Смотрите также:
@viewport
Примечание: Замечания:
- Хотя и не стандартизирован, этот атрибут используется разными мобильными браузерами, например Safari Mobile, Firefox for Mobile or Opera Mobile.
- Значения по умолчанию могут быть изменены у разных браузеров или устройств..
- Для изучения этой прагмы на Firefox for Mobile, посмотрите статью this article.
scheme
Этот API вышел из употребления и его работа больше не гарантируется.Этот атрибут определяет схему, которая описывает метаданные.
Схема — это контекст, ведущий к правильной интерпретацииcontent
значения, например формата.Примечание: Замечание: Не используйте этот атрибут, так как он устарел. Для него нет никакой замены, поскольку реально он не использовался. Опустите его.
В зависимости от установленных атрибутов, тип метаданных может быть одним из следующих:
- Если в наборе
name
, то это document-level metadata, применяемая ко всей странице. - Если в наборе
http-equiv
, то это pragma directive,
то есть информация, веб-сервер предоставляет информацию о том, как должна обслуживаться веб-страница. - Если в наборе
charset
, то это charset declaration,
то есть кодировка, используемая для сериализованной формы веб-страницы. - Если в наборе
itemprop
, то это user-defined metadata,
прозрачна для агента пользователя, поскольку семантика метаданных зависит от пользователя.
Экспериментальная возможность
<!-- In HTML5 --> <meta charset="utf-8"> <!-- Redirect page after 3 seconds --> <meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
Specification |
---|
HTML Standard # the-meta-element |
BCD tables only load in the browser
with JavaScript enabled. Enable JavaScript to view data.
- Другие элементы, содержащие метаданные:
<base>
,<head>
,<link>
,<style>
,<title>
.
Last modified: , by MDN contributors
Элементы заголовка HTML
❮ Назад
Далее ❯
Элемент HTML
является контейнером для следующих элементов:
<название>
, <стиль>
,
<мета>
, <ссылка>
, <скрипт>
и <база>
.
Элемент HTML
Элемент
является контейнером для метаданных (данные
о данных) и помещается между 9тег 0006 и тег
.
Метаданные HTML — это данные о документе HTML. Метаданные не отображаются.
Метаданные обычно определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.
HTML-элемент
Элемент
определяет заголовок документа.
Заголовок должен быть только текстовым и отображаться в строке заголовка браузера или в
вкладка страницы.
Элемент
обязателен в документах HTML!
Содержание заголовка страницы очень важно для поисковой оптимизации
(SEO)! Заголовок страницы используется алгоритмами поисковых систем для определения порядка
при отображении страниц в результатах поиска.
Элемент
:
- определяет заголовок на панели инструментов браузера
- предоставляет заголовок для страницы, когда она добавляется в избранное
- отображает заголовок страницы в результатах поиска
Итак, постарайтесь сделать заголовок максимально точным и осмысленным!
Простой HTML-документ:
Пример
Заголовок
Содержание документа. …..
Попробуйте сами »
HTML-элемент
Попробуйте сами »
HTML-элемент
Элемент
определяет
отношения между текущим документом и внешним ресурсом.
<ссылка>
чаще всего используется для ссылки на внешние таблицы стилей:
Пример
Попробуйте сами »
Совет: Чтобы узнать все о CSS, посетите наш учебник по CSS.
Элемент HTML
Обычно используется элемент
указать набор символов, описание страницы, ключевые слова, автора документа,
и настройки видового экрана.
Метаданные не будут отображаться на странице, но используются браузерами (как отображать контент
или перезагрузить страницу)
поисковыми системами (ключевыми словами) и другими веб-сервисами.
Примеры
Определение используемого набора символов:
Определение ключевых слов для поисковых систем:
CSS
Определите описание вашей веб-страницы:
Определить автора страницы:
Обновлять документ каждые 30 секунд:
Настройка области просмотра, чтобы ваш сайт хорошо отображался на всех устройствах:
Пример
тегов:
Пример
Попробуйте сами »
Настройка области просмотра
Область просмотра — это видимая пользователем область веб-страницы. Она зависит от устройства
- на мобильном телефоне он будет меньше, чем на экране компьютера.
Вы должны включать следующий элемент
на все свои веб-страницы:
Это дает браузеру инструкции о том, как
для управления размерами страницы и масштабированием.
Часть width=device-width
устанавливает ширину страницы в соответствии с шириной экрана устройства (которая зависит от устройства).
Начальная шкала =1,0 9Часть 0007 устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Вот пример веб-страницы без метатега области просмотра и той же веб-страницы с метатегом области просмотра :
Совет: Если вы просматриваете эту страницу с помощью телефона или планшета, Вы можете нажать на две ссылки ниже, чтобы увидеть разницу.
Без
метатег области просмотра
метатег окна просмотра
Элемент HTML
Попробуйте сами »
Совет: Чтобы узнать все о JavaScript, посетите наш учебник по JavaScript.
HTML-элемент
Элемент
указывает базовый URL-адрес и/или цель для всех относительных URL-адресов на странице.
Тег
должен иметь
href или целевой атрибут присутствует, или оба.
Может быть только один единственный
элемент в документе!
Пример
Укажите URL по умолчанию и цель по умолчанию для всех ссылок на странице:
<голова>
gif"
alt="Stickman">
базовый тег HTML
Попробуйте сами »
Резюме главы
- The
Элемент
является контейнером для метаданных (данные
о данных) - Элемент
- Требуется элемент
и
он определяет заголовок документа - Элемент
Заголовок
A
параграф.Попробуйте сами »
Example
Тег (ссылка на внешний стиль
:
лист) идет внутри
Я отформатирован со связанной таблицей стилей
Я тоже!
Попробуйте сами »
Связанные страницы
Учебник по HTML: HTML Head
Ссылка HTML DOM: Head Object
Настройки CSS по умолчанию
Большинство браузеров отображают элемент
значения:голова {
отображение: нет;
}❮ Предыдущий
Полный справочник HTML
Далее ❯НОВИНКА
Мы только что запустили
Видео W3SchoolsУзнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Top Tutorials
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQueryЛучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQueryПримеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQueryFORUM |
ОW3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.