Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Html кодировка windows 1251: Атрибут charset | htmlbook.ru

Meta теги. Учебник html

Глава 10

В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:

<html> — начало документа
<head> — начало головы
</head> — закрытие головы
<body> — начало тела
</body> — закрытие тела
</html> — конец документа

Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.

С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы.

Теперь новый тег <meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.

<meta> тег имеет следующие атрибуты:

  • http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
  • name — информационное имя. (применяется в паре с атрибутом content)
  • content — информационное содержание, связанное с мета именем (name)

Теперь на примерах будем вникать в суть дела.

Пример (очень нужный и важный):

<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>

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

Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.

Теперь разберём по «слогам» нашу запись:
<meta http-equiv=»Content-Type» — указываем что в этом мета теге мы будем заниматься Content-Type — типом содержания
Content=»text/html; — а именно его текстом
Charset=Windows-1251″>

— документ для Windows — Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252

В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8

То есть писать в голове документа вот так:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Пример:

<meta http-equiv=»Content-Language» Content=»ru»>

В этой строчке говорится о том что язык Language документа является русским Content=»ru»

Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.

Пример:

<meta name=»author» Content=»Остап Бендер»>
<meta name=»copyright» Content=»»Рога и копыта» Остап Бендер»>

Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=»author» указывает имя автора страницы, а name=»copyright» авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду…

Пример:

<meta name =»Generator» Content=»Microsoft Notepad»>

Если хотите можете указать с помощью какого html редактора была написана данная страница.

Пример:

<meta name=»description» Content=»Производим закупку по выгодным ценам рогов и копыт!»>

Description — краткое описание страницы.

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

Пример:

<meta name=»keywords» Content =»рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене»>

Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.

Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта 🙂 Какие слова и фразы Вы будите вводить в строке «Поиск»? ну наверно что то типа: «Где продать коровьи рога?» или «Реализовать копыта по выгодной цене» Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска.

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

Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.

Пример:

<meta name=»Publisher-Email» Content=»Ваш_e-mail@сервер.домен»>
<meta name=»Publisher-URL» Content=»http://www.Ваш_сайт/»>

Думаю понятно.. здесь указывается адрес Вашего почтового ящика

Publisher-Email и адрес сайта Publisher-URL

Пример:

<meta name =»revisit-after» Content=»15 days»>

Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить «к Вам в гости» раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..

Пример:

<meta http-equiv=»expires» content=»Sun, 24 jan 2010 12:28:36 GMT+03:00″>

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

Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(

GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.

Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели

Месяцы:От Английского:Сокращения:
ЯнварьJanuaryJan
ФевральFebruaryFeb
МартMarchMar
АпрельAprilApr
МайMayMay
ИюньJuneJun
ИюльJulyJul
АвгустAugustAug
СентябрьSeptemberSep
ОктябрьOctoberOct
НоябрьNovemberNov
ДекабрьDecemberDec
Дни недели:От Английского:Сокращения:
ПонедельникMondayMon
ВторникTuesdayTue
СредаWednesdayWed
ЧетвергThursdayThu
ПятницаFridayFri
СубботаSaturdaySat
ВоскресеньеSundaySun

Атрибуту content можно присвоить значение

«0» <meta http-equiv=»Expires» content=»0″> в этом случае страница всегда будет загружаться с сервера.

И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..

Пример:

<meta http-equiv=»pragma» content=»no-cache»>

А такая запись вовсе запретит браузеру кэшировать данную страницу.

Пример:

<meta name=»robots» content=»Index,follow»>

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

Список возможных команд роботу:

  • Index — индексировать страницу
  • Noindex — не индексировать страницу
  • Follow — прослеживать гиперссылки на странице
  • Nofollow — не прослеживать гиперссылки на странице
  • All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
  • None — не индексировать страницу и не прослеживать гиперссылки на странице

Пример:

<meta http-equiv=»Refresh» content=»10; URL=http://www. mysite/index.html»>

Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
<title>Переадресация</title>
</head>
<body>
<font size=»+1″>
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href=»http://www.mysite.ru/index.html»><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href=»http://www.mysite.ru/index.html»>здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>

смотреть пример  

Разберём и осмыслим строчку из примера:

<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>

meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content=»10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.

Пример:

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

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.

Пример:

<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=0)»>
<meta http-equiv =»Page- Exit » Content=»RevealTrans(Duration=3.0, Transition=23)»>

Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

  • Page-Enter — Эффект появления страницы
  • Page- Exit — Эффект исчезновения страницы

В которых:

  • Duration — время действия эффекта в секундах
  • Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
НомерОписание эффектаНомерОписание эффекта
0Прямоугольники внутрь12Растворение
1Прямоугольники наружу13Вертикальная панорама внутрь
2Круг внутрь14Вертикальная панорама наружу
3Круг наружу15Горизонтальная панорама внутрь
4Наплыв наверх16Горизонтальная панорама наружу
5Наплыв вниз17Уголки влево — вниз
6Наплыв вправо18Уголки влево — вверх
7Наплыв влево19Уголки вправо – вниз
8Вертикальные жалюзи20Уголки вправо – вверх
9Горизонтальные жалюзи21Случайные горизонтальные полосы
10Шажки горизонтальные22Случайные вертикальные полосы
11Шажки вертикальные23Случайный выбор эффекта

Пример:

Файл page1. html

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=12)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c5ffa0″>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page2.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>

Файл page2. html

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=2.0, Transition=23)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c0e4ff»>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок «назад» «вперёд». <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой. </font><br><br>
<a href=»page1.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>

смотреть пример  

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

  • Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!


Кодировка в html

Кодировка документа HTML задается в текстовом редакторе. Например,

Блокнот в ОС Windows по умолчанию сохраняет текстовые файлы в кодировке Windows-1251.

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

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

<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>

или

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Если кодировка не будет указана, браузер попытается «угадать» ее, но не

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

самостоятельно в меню браузера (в Internet Explorer и Mozilla Firefox: Вид → Кодировка). При разработке сайта проблем с кодировкой следует избегать, т.к. большинство пользователей сразу же покинет страницу, увидев нечитаемый набор букв на экране.

Специальные символы в html

В HTML предусмотрен механизм вставки в документ любых символов Юникод – подстановки или сущности (англ. entities). Подстановки позволяют

употреблять символы, отсутствующие на клавиатуре или даже в используемой кодировке (т.е. даже используя кодировку Windows-1251 можно вставить букву греческого алфавита). Подстановки начинаются с символа амперсанда и записываются в виде &#DDDD; где DDDD – код символа в Юникоде в десятеричной системе счисления. Также можно записывать код в шестнадцатеричной системе счисления в форме &#xHHHH; Для некоторых символов заданы специальные названия – мнемоники. Например, знак копирайта © может быть задан кодом © или © или мнемоникой ©.

Основы css

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

Синтаксис CSS

Рассмотрим синтаксис CSS. В стилях задается набор правил отображения в парах «свойство – значение», и то, к каким элементам их применять (селектор):

Селектор

{

свойство1: значение1;

свойство2: значение2;

свойство3: значение3 значение4;

}

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

CSS, как и HTML, игнорирует пробелы. Можно добавлять комментарии, заключая их между /* и */.

Селекторы

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

В качестве селектора можно использовать:

  1. Название тега – тогда стиль применится ко всем таким тегам.

Пример:

A {font-size: 12pt; text-decoration: none}

TABLE {border: black solid 1px}

Первая строчка этого CSS-кода задает всем ссылкам 12-й размер шрифта и убирает подчеркивание. На второй строчке указывается, что у всех таблиц граница будет черного цвета, сплошной (solid) и шириной 1 пиксель.

  1. Несколько тегов через запятую – тогда стиль применится для всех перечисленных тегов.

Пример:

h2, h3, h4, h5, H5, H6 {color: red} /* делаем все заголовки красными */

  1. Несколько тегов через пробел:

TABLE A {font-size: 120%}

Правило относится ко всем тегам A, вложенным в тег TABLE. Размер шрифта увеличится на 20% от базового.

  1. ID элемента. В стилях уникальный идентификатор указывается после знака # – правила применятся к тегу с атрибутом id=»идентификатор». Пример:

CSS

#supersize {font-size: 200%}

HTML

<a href=»http://htmlbook.ru»>Справочник

HTML и CSS</a>

Нельзя вносить в документ несколько элементов с одинаковым id!

  1. Символ * – правила применятся ко всем элементам документа.

  2. Классы

Классы

Часто нужно, чтобы стиль применялся не ко всем тегам на странице, а только к некоторым элементам (например, не ко всем ссылкам на странице, а только к тем, которые расположены в меню сайта). Для этого используются классы: ТЕГ.имя_класса { … }

Правила, указанные после такого селектора, будут действовать только на теги с атрибутом: <ТЕГ> … </ТЕГ>

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

Рассмотрим пример:

Для всех тегов с атрибутом добавим подчеркивание текста

и уменьшим размер шрифта, а для тега <B> уберем подчеркивание.

.class1 {text-decoration: underline; font-size: 80%}

A.class1 {text-decoration: none;}

В HTML-коде укажем для тегов имя класса:

<h1 class=»class1″>Мои любимые сайты</h1>

<a href=»http://yandex.ru»>

Яндекс</a><br>

<a href=»http://google.com»>

Google</a><br>

<a href=»http://redut.ru»>Redut.ru</a>

apache — Браузер отображает страницу в UTF-8 вместо windows-1251

Задавать вопрос

спросил

Изменено 9 лет, 2 месяца назад

Просмотрено 5к раз

У меня есть сайт, он содержит только html и много кириллицы. Браузер устанавливает кодировку UTF-8 вместо windows-1251, как и должно быть. Итак, английские буквы отображаются нормально, но все символы кириллицы похожи на ����

Вот моя установка:
RHEL 6.3 (2.6.32-279.el6.x86_64)
Apache/2.2.15 (Unix)

Вот мой файл .htaccess :

 Параметры +Включает
AddDefaultCharset WINDOWS-1251

Первые строки страницы:

 

<голова>
Название компании и т. д.

Пример страницы на pastebin или phpfiddle для тех, у кого нет доступа к pastebin

Итак, charset везде установлен, и если я вручную меняю кодировку в браузере на windows-1251 — отображается нормально, но автоопределение ставит utf-8, и я не знаю, почему.
Если поможет — сайт раньше размещался на Sun OS 5.10.

Спасибо за любую помощь.

  • apache
  • кодировка
  • кодировка символов
  • cp1251
11

I закомментировал следующую строку в httpd. conf , перезапустил httpd и теперь все отображается правильно:

 AddDefaultCharset utf-8
3

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

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

Ограничения тега для указания кодировки символов — Seeblog

На Reddit возник вопрос: почему моя веб-страница интерпретируется с неправильной кодировкой символов? Вопрос (который с тех пор был удален, иначе я бы дал ссылку на него) включал некоторые особенности того, как страница обслуживалась, и, перефразируя, ответ заключался в том, что страницы, сгенерированные PHP, обслуживались с HTTP Content-Type. , который включал информацию о кодировке, а статические HTML-страницы — нет.

Но разметка включала тег . Тогда разве кодировка не должна была интерпретироваться правильно независимо от заголовка Content-Type ? Я бросил быстрое замечание с оттенком карго-культа о том, что обязательно нужно поместить тег для указания кодировки символов перед тегом </code>, и кто-то еще сказал, что они думали, что он интерпретировался где-то в первом 128 байт документа.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/40129769_193824494/image-9.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/40129769_193824494/image-9.jpg' /></noscript></p><p> Вместо того, чтобы продолжать распространять слухи и сомнительно-блестящие жемчужины мудрости, я попытаюсь сформулировать некоторые фактические наблюдения о поведении тегов content-encoding-information-bearing <code><meta> </code>. Я хочу знать, как тег взаимодействует с реальными HTTP-заголовками, как он ведет себя, когда размещается в документе с разным смещением (до отображаемого содержимого? После отображаемого содержимого? Далеко от начала документа?) и поддерживаются ли разные браузеры. обращаться с этим по-другому.</p><p> <strong> tl;dr: </strong> Для HTML5 полностью избегайте этих проблем, используя только кодировку UTF-8. Все остальное нарушает текущую спецификацию, поэтому вы отдаетесь на милость реализаций браузера и обратной совместимости. И поместите тег <code><meta charset="utf-8"> </code> где-то рядом с началом вашего <code><head> </code> .</p><p> Все эти тесты основаны на одних и тех же двух тестовых файлах: 3242-байтовый тестовый файл в кодировке Windows-1251:</p><p> encoding-windows-1251Загрузить</p><p> И 5610-байтовая версия того же содержимого в кодировке UTF-8:</p><p> encoding-utf-8 Download</p><p> Содержимое предоставлено российским генератором <em> Lorem ipsum </em>.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/http/fs3.ppt4web.ru/images/132035/176080/640/img13.jpg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/http/fs3.ppt4web.ru/images/132035/176080/640/img13.jpg' /></noscript> Первоначальный вопрос касался кириллического контента, закодированного как Windows-1251, и, похоже, это был хороший пример для проверки.</p><p> Все тесты вариантов были опробованы как в виде файла, открытого браузером непосредственно с диска (как URL-адрес <code> file:/// </code>), так и в виде файла, обслуживаемого локальным веб-сервером Apache. Веб-сервер был настроен для обслуживания документов с помощью <code> Content-Type: заголовок text/html </code>, если не указано иное. Я отключил ETags и установил для заголовка <code> Cache-Control </code> значение <code> no-store </code> . Как длинная форма (<code><meta http-equiv="Content-Type" content="text/html; charset=..."> </code>), так и краткая форма (<code><meta charset="..."> </code> ) <code><meta> </code> форм тегов были протестированы для подтверждения эквивалентности. (И для краткости, в остальной части поста, когда я говорю «тег <code><meta> </code>», предположим, что я сокращаю «a <code><meta> </code> тег, несущий информацию о кодировке контента».<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/sun9-57.userapi.com/c853520/v853520624/1f6369/IbzpaC5dH4s.jpg' /><noscript><img loading='lazy' src='/800/600/https/sun9-57.userapi.com/c853520/v853520624/1f6369/IbzpaC5dH4s.jpg' /></noscript> )</p><p> Для тестирования использовались браузеры Firefox 80.0, Chrome 85.0.4183.83, Internet Explorer 11.1016.18362.0 и Edge 44.18362.449.0 (версия EdgeHTML/pre-Chromium, под предположение, что более новые версии должны вести себя примерно так же, как Chrome).</p><h3><span class="ez-toc-section" id="i-4"> Что говорит спецификация? </span></h3><p> Первое и очевидное, что нужно понять: как определяется поведение тегов <code><meta http-equiv> </code>? Ну, одним словом: едва ли.</p><h4><span class="ez-toc-section" id="MDN"> MDN </span></h4><blockquote><p> Если указано, атрибут <code> content </code> должен иметь значение « <code> text/html; кодировка=utf-8 </code> «. <strong> Примечание: </strong> Может использоваться только в документах, обслуживаемых с типом MIME <code> text/html </code>, но не в документах, обслуживаемых с типом MIME XML.</p> <cite> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv </cite></blockquote><p> Я обычно нахожу MDN довольно полезным, но в этом случае половина определение из двух предложений не имеет значения (a <code> text/html </code> Тип MIME является для нас принятым предварительным условием).<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/expertnov.ru/800/600/https/ds05.infourok.ru/uploads/ex/0ad3/00049eb2-c6e77e55/2/img5.jpg' /><noscript><img loading='lazy' src='/800/600/https/expertnov.ru/800/600/https/ds05.infourok.ru/uploads/ex/0ad3/00049eb2-c6e77e55/2/img5.jpg' /></noscript> Другая половина интересна: это означает, что UTF-8 — единственная кодировка, которую вы можете установить с помощью тега <code><meta> </code>. Мне кажется, что это не соответствует действительности, потому что я уверен, что в какой-то момент использовал его для указания кодировки, отличной от UTF-8, но, возможно, это случай, когда браузеры не соответствуют спецификации.</p><p> <strong> Редактировать, 03.09.2020 11:44 UTC: </strong> Благодаря магии вики, MDN теперь немного лучше, чем когда я впервые написал это. Если бы вся документация была так же легко редактируема!</p><h4><span class="ez-toc-section" id="W3C"> W3C </span></h4><p> Я понимаю, что W3C теперь подчиняется WHATWG в отношении спецификации HTML5, но я хотел посмотреть, что они раньше говорили. На вики-странице W3C, посвященной элементу meta, о <code> Content-Type </code> говорится даже меньше, чем в MDN, но в ней не упоминается крупица мудрости об общем поведении метатегов <code> http-equiv </code>:</p><blockquote><p> Когда http-equiv атрибут указан в метаэлементе, элемент является директивой прагмы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf2.ppt-online.org/files2/slide/o/OB2Klas1h5bCPdmWpoAIw9eJQDL7XY4knzSUTi/slide-62.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf2.ppt-online.org/files2/slide/o/OB2Klas1h5bCPdmWpoAIw9eJQDL7XY4knzSUTi/slide-62.jpg' /></noscript> Вы можете использовать этот элемент для имитации заголовка HTTP-ответа, но только в том случае, если сервер не отправляет соответствующий реальный заголовок; вы не можете переопределить заголовок HTTP с помощью <code> метаэлемент http-equiv </code>.</p> <cite> https://www.w3.org/wiki/HTML/Elements/meta? </cite></blockquote><p> Тогда это объяснило бы первоначальную проблему: если сервер уже специально указал кодировку символов, страница не может ее переопределить.</p><p> W3C Wiki (или, по крайней мере, документация по элементам HTML5) явно уходит в прошлое. Существует правило перенаправления, чтобы подтолкнуть посетителей к MDN; вам нужно добавить конечный <code>? </code> к URL-адресу, чтобы запутать и подавить перенаправление. (Возможно, намеренно, но все же дергано.)</p><h4><span class="ez-toc-section" id="WHATWG"> WHATWG </span></h4><p> В общем обзоре <code> http-equiv </code> ничего не говорится о том, как обрабатывать конфликты между заголовками HTTP и тегами <code><meta </code>>. Он говорит:</p><blockquote><p> Когда элемент <code> meta </code> вставляется в документ, если его атрибут <code> http-equiv </code> присутствует и представляет одно из вышеуказанных состояний, тогда пользовательский агент должен запустить алгоритм, соответствующий этому состоянию, как описано в следующем списке:</p> <cite> https://html.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ylianova.ru/800/600/http/images.myshared.ru/17/1034777/slide_10.jpg' /><noscript><img loading='lazy' src='/800/600/https/ylianova.ru/800/600/http/images.myshared.ru/17/1034777/slide_10.jpg' /></noscript> spec.whatwg.org/multipage/semantics.html#attr-meta-http-equiv </cite></blockquote><p> …похоже, что браузер должен отдавать предпочтение тегу над любым заголовком HTTP.</p><p> В разделе <code> content-type </code> повторяется, что следует использовать только кодировку UTF-8. Он ссылается на другой раздел, посвященный кодировке символов, что еще раз подчеркивает, что единственно допустимой кодировкой для HTML5 является UTF-8. Это гораздо более разумное значение по умолчанию, чем ISO-8859-1 или Windows-1252, что привело к некоторым довольно глупым ошибкам за эти годы, поскольку другие платформы перешли на UTF-8 по умолчанию, а Интернет — нет.</p><p> Интересно, что в неожиданном всплеске мелочей этот другой раздел также указывает, что:</p><blockquote><p> Элемент, содержащий объявление кодировки символов, должен быть полностью сериализован в пределах первых 1024 байтов документа.</p> <cite> https://html.spec.whatwg.org/multipage/semantics.html#charset1024 </cite></blockquote><p> Странно и неприятно, что такая важная информация не передается справочными сайтами, такими как MDN.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ylianova.ru/800/600/https/fs.znanio.ru/d5af0e/c8/8b/1bc9b5d10c78e4549afcbb05ed0cd90f2f.jpg' /><noscript><img loading='lazy' src='/800/600/https/ylianova.ru/800/600/https/fs.znanio.ru/d5af0e/c8/8b/1bc9b5d10c78e4549afcbb05ed0cd90f2f.jpg' /></noscript> Если тег <code><meta> </code>, определяющий <code> http-equiv </code> или <code> charset </code> были, скажем, отсортированы в алфавитном порядке с другим содержимым <code><head </code>>, его можно было легко поместить после некоторых других очень длинных тегов (например, тегов Open Graph, таблицы стилей <code><link> </code> тегов) и выскочил из этого буфера.</p><p> Наконец, в этом другом разделе есть ссылка на HTTP-заголовок <code> Content-Type </code>:</p><blockquote><p> Если HTML-документ не начинается с спецификации и <strong> его кодировка не указана явным образом в метаданных Content-Type </strong> , и документ не является документом <code> iframe </code> <code> srcdoc </code>, <strong>, то кодировка должна быть указана с использованием элемента <code> meta </code> </strong> с атрибутом </code> charset </code> или элемента <code> meta </code> с <code> http -equiv </code> атрибут в состоянии объявления кодировки.</p> <cite> https://html.spec.whatwg.org/multipage/semantics.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/3/168460164_224549425.pdf-img/168460164_224549425.pdf-5.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/3/168460164_224549425.pdf-img/168460164_224549425.pdf-5.jpg' /></noscript> html#charset </cite></blockquote><p> (выделение мое). Я не интерпретирую это как означающее, что заголовок <code> Content-Type </code> имеет приоритет над <code> Тег<meta> </code>, если он присутствует. Все это говорит о том, что если заголовок (среди прочего) <em> не присутствует </em>, то тег <code><meta </code>> должен присутствовать. Он не указывает приоритет, если присутствуют оба.</p><p> Между прочим, когда я заглянул в источник этой страницы, чтобы получить идентификатор для бита размером около 1024 байт, чтобы я мог сделать на него прямую ссылку, я обнаружил, что у него есть альтернативный идентификатор: <code> #charset512 </code> . Похоже, раньше требовалось, чтобы <code><meta> 9Тег 0051 должен находиться в пределах первых 512 байт документа. Это обсуждалось в конце 2010 г. и изменено 9 февраля 2011 г., чтобы отразить то, что браузеры уже делали.</p><h3><span class="ez-toc-section" id="_-_Windows-1252_UTF-8"> Браузеры по умолчанию по-прежнему используют Windows-1252, а не UTF-8 </span></h3><p> С моим веб-сервером, настроенным на обслуживание заголовка <code> Content-Type </code> только <code> text/html </code> и без тегов <code><meta> </code> ни в одном документе указав кодировку символов, я попытался загрузить обе версии документа в своих тестовых браузерах, как непосредственно с диска, так и с веб-сервера, чтобы увидеть, как содержимое будет определяться автоматически:</p><table><thead><tr><th> Браузер</th><th> UTF-8 из файла</th><th> Windows-1251 из файла</th><th> UTF-8 через HTTP</th><th> Windows-1251 через HTTP</th></tr> 9 0307<tbody><tr><th> Firefox</th><td> UTF-8</td><td> Windows- 1251</td><td> Windows-1252</td><td> Windows-1251</td></tr><tr><th> Chrome</th><td> UTF-8</td><td> Windows-1251</td><td> Windows-1252 903 13<td> Windows-1251</td></tr><tr><th> IE11</th><td> Windows-1252</td><td> Windows-1252</td><td> Windows-1252</td><td> Windows-1252</td></tr><tr><th> Edge</th><td> Windows-1252</td><td> Windows-1252</td> 9 0312 Windows-1252</td><td> Windows-1252</td></tr></tbody></table><p> Результаты были противоречивыми.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/http/dtmto.ru/wp-content/uploads/2/d/4/2d4663462282a881d910d6296dee0058.jpeg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/http/dtmto.ru/wp-content/uploads/2/d/4/2d4663462282a881d910d6296dee0058.jpeg' /></noscript> Я был удивлен, что Firefox и Chrome автоматически определили Windows-1251, но не UTF-8. Меня также очень удивила разница в поведении файлового и HTTP-транспорта. Я проверил оба способа, чтобы сказать, что да, а не потому, что ожидал увидеть разницу! Windows-1252 по умолчанию по-прежнему имеет смысл в некоторых ситуациях. В Интернете есть много старого контента, который не объявляет тип контента и предполагает, что он будет интерпретирован как Windows-1252. Но я ожидаю, что это будет по умолчанию для документов, которые запускают режим причуд, а не правильно сформированный HTML5.</p><p> Совершенно очевидно, что Internet Explorer и Edge просто по умолчанию используют Windows-1252 во всех случаях, не пытаясь выполнить какое-либо автоматическое определение. В IE, если я открою меню «Вид» и включу «Автовыбор» в меню «Кодирование», он правильно автоматически обнаружит все четыре. Edge решил, что параметры просмотра и контекстные меню не нужны, и я не могу найти никакой возможности изменить кодировку страницы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/prezentacii.org/upload/cloud/18/09/76247/images/screen19.jpg' /><noscript><img loading='lazy' src='/800/600/https/prezentacii.org/upload/cloud/18/09/76247/images/screen19.jpg' /></noscript> Помимо этого, они оба имеют довольно странное поведение квази-кэширования. IE, кажется, хранит кодировки страниц в памяти: если я отредактирую источник страницы, чтобы добавить <code><meta> </code> с информацией о кодировке, он по-прежнему будет интерпретировать документ с этой кодировкой при перезагрузке страницы (даже после повторного удаления тега), пока я не передам другую кодировку (либо по HTTP-заголовку, либо по <code><meta> </code> тег) или перезапустите браузер. Очистка кеша, кажется, не влияет на это так или иначе.</p><p> Edge еще хуже, потому что он кэширует кодировку символов на диск. Изменения в HTTP-заголовке <code> Content-Type </code> сами по себе не разрушают кеш страницы, равно как и перезапуск браузера. (Это то, что заставило меня установить <code> Cache-Control: заголовок </code> без сохранения. Затем изменения, по крайней мере, вступают в силу после перезапуска браузера.) Если Edge когда-либо загружает вашу страницу с неправильной кодировкой, вы не можете полагаться исключительно на исправление заголовка <code> Content-Type </code> для исправления интерпретации.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/nashaucheba.ru/docs/31/30018/conv_1/file1_html_142f0a68.png' /><noscript><img loading='lazy' src='/800/600/https/nashaucheba.ru/docs/31/30018/conv_1/file1_html_142f0a68.png' /></noscript> Лучший способ исправить это — исправить заголовок, <em> и </em> установить правильный тег <code><meta> </code>.</p><p> <strong> Вердикт: </strong> всегда указывайте тег <code><meta> </code> с кодировкой содержимого. WHATWG рекомендует всегда указывать кодировку вашего контента, и самый простой способ убедиться, что вы это делаете, — это сделать это в разметке. (Если вы также установите заголовок HTTP, то UTF-8 будет единственным вариантом, соответствующим стандартам, поэтому заголовок HTTP и тег обязательно будут согласованы.) О, и сделайте это с самого начала, потому что устаревшие версии IE/Edge будет долго кэшировать ваш моджибаке.</p><h3><span class="ez-toc-section" id="i-5"> Теги </span></h3><meta> могут указывать кодировки, отличные от UTF-8</h3><p> …даже если вы не должны этого делать.</p><p> Для этого теста я добавил правильный тег <code><meta> </code> в обе кодировки страницы сразу после открывающего тега <code><head> </code>. С этими тегами таблица из предыдущего пункта становится полностью зеленой: все браузеры правильно интерпретируют обе кодировки.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ylianova.ru/800/600/https/mypresentation.ru/documents_6/a39b1cb2ad42b020cf6bd053c713944c/img3.jpg' /><noscript><img loading='lazy' src='/800/600/https/ylianova.ru/800/600/https/mypresentation.ru/documents_6/a39b1cb2ad42b020cf6bd053c713944c/img3.jpg' /></noscript> Используйте длинную форму тега <code><meta> </code> и тип документа HTML 4.01 Strict, и он также будет проверен, потому что только в HTML5 UTF-8 является единственным допустимым вариантом.</p><p> <strong> Вердикт: </strong> HTML5 должен быть только UTF-8, но, конечно, браузеры сохранили обратную совместимость со старым содержимым и для простоты (ради здравомыслия?) распространили эту совместимость на HTML5.</p><h3><span class="ez-toc-section" id="_HTTP"> Заголовки HTTP всегда побеждают теги </span></h3><meta></h3><p> Имея это базовое понимание, давайте перейдем к конфликту: как обрабатывается кодировка контента, заданная в разметке, когда сервер указывает что-то другое? Для этого теста я перенастроил свой веб-сервер, чтобы явно обслуживать <code> Content-Type </code> заголовок <code> text/html; charset=utf-8 </code> :</p><pre> $ curl -sI http://localhost/encoding-utf-8.html HTTP/1.1 200 ОК ... Тип содержимого: текст/html; charset=utf-8 </pre><p> И я добавил <code> тегов<meta> </code> в начало <code> элементов<head> </code> HTML-документов, объявляющих соответствующие кодировки символов:</p><pre> <meta charset="windows-1251"> .<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/-32023635_43666155/image-8.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/-32023635_43666155/image-8.jpg' /></noscript> .. <meta charset="utf-8"> </pre><p> Все мои тестовые браузеры интерпретировали оба документа как UTF-8 в соответствии с инструкциями веб-сервера.</p><p> Я попытался еще раз, перенастроив веб-сервер, чтобы явно указать кодировку содержимого Windows-1251. Все мои тестовые браузеры интерпретировали оба документа как Windows-1251.</p><p> <strong> Вердикт: </strong> если заголовок HTTP <code> Content-Type </code> объявляет кодировку символов, он всегда выигрывает. Отстой, что восьмилетняя, устаревшая и трудная для Google документация W3C — единственное место, где правильно и явно упоминается такое поведение. Также немного жаль, что контент не может переопределить веб-сервер здесь (хотя, вероятно, это не является нарушителем условий сделки, если все по умолчанию используют UTF-8, как и должны).</p><h3><span class="ez-toc-section" id="i-6"> Теги </span></h3><meta> могут идти до или после<title></h3><p> У меня почему-то засело в голове, что вы должны поместить тег <code><meta> </code>, определяющий кодировку контента перед любым другим отображаемым контентом на странице, включая <code> <название> </code> .<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/1/75718253_182858081.pdf-img/75718253_182858081.pdf-7.jpg' /><noscript><img loading='lazy' src='/800/600/https/present5.com/presentation/1/75718253_182858081.pdf-img/75718253_182858081.pdf-7.jpg' /></noscript> В противном случае вы можете получить хорошо интерпретируемое содержимое тела, но искаженный заголовок на вкладке страницы и большую путаницу, потому что инструменты браузера показывают, что страница была интерпретирована так, как вы хотели. Я думаю, что я, вероятно, получил это, неправильно запомнив или неправильно прочитав предложение из превосходного введения разработчика Джоэла Спольски в кодирование текста:</p><blockquote><p> Но этот метатег действительно должен быть самым первым в разделе<head>, потому что, как только веб-браузер увидит этот тег, он прекратит синтаксический анализ страницы и начнет заново после переинтерпретации всей страницы с использованием кодировки, которую вы указано.</p> <cite> «Абсолютный минимум, который каждый разработчик программного обеспечения обязательно должен знать о Unicode и наборах символов (без оправданий!)» пытался разместить их до и после <code><title> </code> тегов. Все браузеры правильно интерпретировали заголовки обеих версий обеих кодировок.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files1/slide/z/Zv4JWEpVcqYLU9PnIglGroDK2T56w7RsHefmhizXB/slide-3.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files1/slide/z/Zv4JWEpVcqYLU9PnIglGroDK2T56w7RsHefmhizXB/slide-3.jpg' /></noscript></p><p> Ради интереса я повторно применил HTML 4.01 Strict doctype и длинные теги <code><meta> </code> из второго теста и попробовал этот тест в Firefox 3.5 (браузер 9-летней давности) и Internet Explorer 5 (21-летний браузер). годовалый). Ни один из них не заботился о том, где тег <code><meta> </code> был размещен по отношению к тегу <code><title> </code> , и правильно отображал документы в обоих направлениях.</p> Прошло некоторое время с тех пор, как IE5 отображал что-либо правильно.<p> <strong> Вердикт: </strong> не имеет значения, находится ли тег <code><meta> </code> до или после <code><title> </code> , и никогда не имело значения. Но вы, вероятно, должны поставить его на первое место, чтобы не тратить время вычислений, каким бы крошечным оно ни было.</p><h3><span class="ez-toc-section" id="i-7"> Теги </span></h3><meta> могут <em> начинаться </em> в первых 1024 байтах</h3><p> WHATWG указывает, что если вы собираетесь поместить информацию о кодировке в разметку, она должна полностью располагаться в первых 1024 байтах файла.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/v/vHg92BhJjlGYtDP3R7ieNOn0a4XWKSuUrxpsQd/slide-54.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/v/vHg92BhJjlGYtDP3R7ieNOn0a4XWKSuUrxpsQd/slide-54.jpg' /></noscript> Действительно ли браузеры применяют это ограничение? Возвращаются ли они к интерпретации кодировки по умолчанию, если она не находится в этом диапазоне?</p><p> Для этого теста я переместил тег <code><meta> </code> в разные места в документе и наблюдал, как интерпретируется кодировка. Я намеренно указал <em> неправильную кодировку содержимого </em> в теге <code><meta> </code>, чтобы можно было отличить правильное интерпретирование его значения от правильного определения кодировки по умолчанию. Для всех них желаемая точка вставки оказывалась в середине абзаца, поэтому я закрыл этот элемент и снова открыл его после <code> <мета> </code> тег. Я использовал шестнадцатеричный редактор, чтобы подтвердить свои смещения в байтах, а не в кодовых точках. Результаты были одинаковыми как для транспорта, так и для кодирования.</p><table><thead><tr><th> Браузер</th><th> Последнее принятое <code><meta> </code> позиция</th></tr></thead><tbody><tr><th> Firefox</th><td> Любая (без видимой перезагрузки : заканчивается на 1024)</td></tr><tr><th> Chrome</th><td> Начиная с 1024</td></tr><tr><th> IE11</th><td> Любой</td></tr><tr><th> Edge</th><td> Any</td></tr></tbody></table><p> Еще раз обратите внимание, что размещение <code><meta> </code> элементов любого типа за пределами <code><head> </code> не соответствует стандартам, поэтому, если леопарды съедят ваше лицо, ну, вы попросил об этом.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/studfile.net/html/2706/1026/html_m3pWH00kQ2.M4wj/img-OXXINB.png' /><noscript><img loading='lazy' src='/800/600/https/studfile.net/html/2706/1026/html_m3pWH00kQ2.M4wj/img-OXXINB.png' /></noscript></p><p> Firefox явно перерисовывает всю страницу, если какая-либо часть тега находится за пределами первых 1024 байтов. И вы получите такое уведомление в консоли:</p><blockquote><p> Страница была перезагружена, так как объявление кодировки символов HTML-документа не было найдено при предварительном сканировании первых 1024 байт файла. Объявление кодировки должно быть перемещено в пределах первых 1024 байтов файла.</p></blockquote><p> Вы получите кратковременное FOUC-заикание, пока страница перерисовывается в новой кодировке (по какой-то причине это особенно заметно, когда версия файла UTF-8 обслуживается через HTTP).</p><p> IE и Edge беспрепятственно обрабатывали информацию о кодировании из тега <code><meta> </code>, независимо от того, где она находилась на странице. Нет видимой перезагрузки, даже после заполнения файла более 32 КБ.</p><p> Хром здесь странное исключение. Как будто они обратили внимание на спецификацию, сделав <em> что-то </em> про границу в 1024 байта, но это не на тот конец тега! Даже если только начало <code> < </code> тега <code><meta> </code> попадает в первые 1024 байта файла, Chrome справится с этим.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf2.ppt-online.org/files2/slide/q/qnTxWFcAzgXjyhLiHeaBN9DZkJ3oG8ftOps1C0d4b/slide-34.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf2.ppt-online.org/files2/slide/q/qnTxWFcAzgXjyhLiHeaBN9DZkJ3oG8ftOps1C0d4b/slide-34.jpg' /></noscript> Другие браузеры будут обрабатывать его где угодно, в том числе после закрытия <code></html> </code> .</p><p> <strong> Вердикт: </strong> Постарайтесь быть немного осторожным, чтобы ваш тег <code><meta> </code> находился ближе к началу <code><head> </code> , особенно если у вас много длинных тегов Open Graph или description (вы, SEO-монстр начала 00-х, вы). Не то, чтобы это было маленькое окно, но я видел несколько ужасных заголовков шаблонов WordPress, где можно было бы упасть не с той стороны. Кроме того, если вы хотите поиграть с огнем, убедитесь, что вы считаете <em> байтов </em> , а не <em> символов </em> .</p><p> Кстати, 1024 кажется странным числом для этого. Да, это в соответствии с освященной веками традицией размера буфера быть степенью двойки, но я думаю, что-то ближе к обычному интернет-MTU (1500 байт или, может быть, 1,49 байт).2) было бы более оправданным ограничением. Но я предполагаю, что если вы пойдете по этому пути, то на самом деле вы пытаетесь сказать, что хотите, чтобы кодировка символов находилась где-то в первом ответном пакете на запрос, а затем вам нужно начать думать о размере HTTP-заголовки ответа, и он превращается в целый шарик воска.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ds-service39.ru/wp-content/uploads/0/a/f/0afbba06f82c29ead4d8841ef7188af8.jpeg' /><noscript><img loading='lazy' src='/800/600/https/ds-service39.ru/wp-content/uploads/0/a/f/0afbba06f82c29ead4d8841ef7188af8.jpeg' /></noscript></div><footer class="entry-footer"> <span class="cat-links">Категории: <a href="https://schtirlitz.ru/category/raznoe-2" rel="category tag">Разное</a></span></footer></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://schtirlitz.ru/raznoe-2/fony-dlya-sajta-idei-5-idej-dlya-zaxvatyvayushhego-fona-sajta.html" rel="prev"><span class="be-post-nav-label btn btn-sm cont-btn no-underl"><small class="fas fa-chevron-left mr-2"></small>Назад</span></a></div><div class="nav-next"><a href="https://schtirlitz.ru/raznoe-2/konstruktor-sajtov-odnostranichnikov-besplatno-obzor-10-servisov-dlya-sozdaniya-lendingov.html" rel="next"><span class="be-post-nav-label btn btn-sm cont-btn no-underl">Вперед<small class="fas fa-chevron-right ml-2"></small></span></a></div></div></nav><div id="comments" class="comments-area"> <a href="#" class="btn btn-primary btn-sm be-open-comment-form">Оставить комментарий</a><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/html-kodirovka-windows-1251-atribut-charset-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://schtirlitz.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='91444' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></div><footer id="colophon" class="site-footer row"><div class="site-info col-md-8"><p>© 2019 Штирлиц Сеть печатных салонов в Перми</p><p>Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.</p></div><div class="col-md-4"> <a href="/sitemap.xml">Карта сайта</a></div></footer></div></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://schtirlitz.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://schtirlitz.ru/wp-content/cache/autoptimize/js/autoptimize_65fc3aabbe3134b862f6f8c3f2077df8.js"></script></body></html>