Кодирование символов

Символом может быть любая буква, цифра или символ, составляющий слова и языки. Английские алфавиты и цифры 'a-z', 'A-Z', '0-9' считаются символами. Другие примеры символов включают латинскую букву á или китайский иероглиф 請 или символ деванагари ह . Набор символов представляет собой набор символов (букв и символов) в системе письма.

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

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

Примеры кодировки символов включают в себя:

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

  • Windows-1252 (Latin1) : набор символов Windows, который поддерживает 256 различных кодовых точек

  • ISO-8859-6 : содержит буквы и символы на основе арабского алфавита

  • Юникод : содержит символы для большинства живых языков и скриптов в мире

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

Вы всегда должны использовать кодировку Unicode UTF-8 для своих веб-страниц и избегать «устаревших» кодировок, таких как ASCII, Windows-1252 и ISO-8859-6, упомянутых выше. Также не используйте кодировку UTF-16 Unicode.

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

Прочитайте Введение в наборы символов и кодировки здесь .

Метатеги

Объявление кодировки страницы: в <meta> теге

Используйте элемент < meta> с атрибутом charset на своей HTML-странице, чтобы указать браузеру кодировку символов, которую вы будете использовать на странице.

<meta charset="utf-8">

Кроме того, вы также можете использовать http-equiv иcontent атрибуты.

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

Мы рекомендуем использовать первый, потому что он менее сложен. Вы также должны всегда использовать 'utf-8'.

Где это разместить?

Мета-объявление должно быть внутри элемента < head> и должно быть указано в первых 1024 байтах вашей страницы. Таким образом, чем раньше это упоминается в вашем коде, тем лучше.

W3C рекомендует размещать его сразу после открывающего тега <head> :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    ...
  </head>
</html>

Спецсимволы HTML

Почему нам нужны ссылки на символы

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

Попробуйте следующий код в своем HTML:

<p>Welcome to "HTML5 & CSS Fundamentals". The first tag we will be learning about is  the <html> tag.</p>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Welcome</title>
</head>

<body>
  <p>Welcome to "HTML5 & CSS Fundamentals". The first tag we will be learning about is the
    <html> tag.</p>
</body>

</html>

Заметим, что тег <html> отсутствует в выводе текста в параграфе? В этом случае ваш браузер принял и отработал его как реальный тег, хотя он должен был быть частью предложения в виде текста.

Из-за такой путаницы HTML нуждается в определенных символах. Если вы хотите использовать эти символы в своем HTML, вам нужно использовать ссылки на символы для их отображения.

Как использовать ссылки на символы(спецсимволы)

Все ссылки на символы HTML могут быть написаны с использованием имени или номера.

Если вы хотите использовать именованную ссылку на символ в исходном коде, используйте символ амперсанда - '&' - &amp;, за которым следует имя и точка с запятой. Имена чувствительны к регистру. Например, следующее представляет пробел без перерывов:

&NBSP;

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

Если вы используете десятичное число, используйте символ амперсанда '&', за которым следует символ '#', затем десятичное число и точка с запятой.

&#160;

Если вы используете шестнадцатеричное число, используйте символ амперсанда «&», за которым следуют символы «#x», затем шестнадцатеричное число и точка с запятой.

&#X00A0;

Защита символов, используемых для синтаксиса HTML

Пять специальных символов, перечисленных в таблице ниже, всегда должны быть написаны как ссылки на символы, если вы хотите, чтобы они появлялись на вашей странице при просмотре читателем:

Условное обозначение

Имя сущности

Номер объекта

использование

Меньше чем «<»

&lt;

&#60;

Div tag: &lt;div>

Больше чем «>»

&gt;

&#62;

Div tag: &lt;div&gt;

Амперсанд '&'

&amp;

&#38;

Tom &amp; Jerry

Неразрывный пробел - пробел, который не создаст новую строку

&nbsp;

&#160;

If you add multiple spaces, the browser will remove all but one. So you have to use this entity to add multiple spaces in your HTML page.

Котировки "

&quot;

&#34;

Link to a another section on the same page using the id of the element: &lt;a href=&quot;&num;timetable&quot;&gt;

Displayed as: <a href="#timetable">

&quot; is generally encouraged for code. For an actual quotation, <q> or <blockquote> is preferred.

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

<img src="images/test.png" alt="test image">

Вы должны написать это в своем HTML-коде:

&lt;img src=&quot;images/test.png&quot; alt=&quot;test image&quot;&gt;

Некоторые толерантные браузеры разрешают использовать символ «&» напрямую, но не все. Таким образом, вы должны использовать его ссылку на символ &amp;. Ознакомьтесь с этими примерами, иллюстрирующими важность использования сущности персонажа & amp; за &.

Хотя это может быть заманчивым , чтобы не использовать одну из этих ссылок на символы , если вы заметили , что браузер выдает ожидаемый результат в любом случае, это рекомендуется использовать символьные ссылки на эти пять специальных символов с помощью &lt;, &gt;, &quot;, &amp;и &nbsp;во все времена. Это потому, что вы никогда не можете быть уверены, какой браузер или приложение будет использоваться для просмотра вашего кода и как он будет себя вести.

&quot;Символьная ссылка особенно полезно для кавычек внутри значений атрибутов. Допустим, вы хотите добавить атрибут заголовка к аббревиатуре, чтобы обеспечить расширение аббревиатуры. Если вы попробуете приведенный ниже код в браузере и наведете указатель мыши на текст «HTML5», он покажет вам текст заголовка (он работает как всплывающая подсказка). Текст заголовка в исходном коде содержит кавычки (вокруг числа 5), например:

<abbr title="Hypertext Markup Language "5"">HTML5</abbr>

Выше не будет отображать номер 5.

Замена кавычек с на их сущность будет работать:

<abbr title="Hypertext Markup Language &quot;5&quot;">HTML5</abbr>

Другие спецсимволы

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

Существуют предопределенные именованные ссылки на символы в HTML для нескольких категорий, в том числе:

  • символы валюты

  • авторское право, товарный знак и зарегистрированный символ

  • общая пунктуация

  • стрелки

  • математические символы

  • Греческие буквы

Список ссылок на именованные символы, доступных в HTML, можно найти по адресу: https://dev.w3.org/html5/html-author/charref .

Любой символ Unicode может быть представлен с использованием числовой ссылки на символ.

Помимо символов, используемых для синтаксиса HTML (описанного в предыдущем модуле), обычно нет необходимости использовать ссылки на символы для представления символов. Все браузеры построены с использованием внутреннего Unicode, что означает, что они способны обрабатывать все возможные символы, определенные Unicode. Итак, лучшая практика для таких символов, как авторское право, символы валюты, математика и стрелки, - просто вводить их непосредственно в исходный код.

Вы можете сделать это прямо в коде: <p>This is © 2015. Breach will entail a fine of € 400</p>

Нет необходимости в &copy; или &евро; Ссылка на символ HTML, если вы можете ввести сам символ.

Если вы хотите прочитать больше информации о том, когда использовать ссылки на символы, а когда не использовать их, см. Раздел Использование экранирования символов в разметке и CSS .

PreviousЭлементы, теги и атрибутыNextЛучшие практики

Last updated