Спецсимволы и их мнемоники в html

Мягкий перенос(­)

В противоположность неразрывному пробелу, символ мягкого переноса — ­ служит для создания переноса в том месте, где это может потребоваться. При этом, на месте переноса появляется символ «-«. Если перенос не требуется, символ ­ не визуализируется. Применяется мягкий перенос преимущественно в длинных словах, для более равномерного распределения текста на странице.

Пример. Применение мягкого переноса.

<p>В 1991 году была предпри&shy;нята попытка создать единую 
универ&shy;сальную двухбай&shy;товую коди&shy;ровку, охваты&shy;вающую 
все алфавиты и иерогли&shy;фичес&shy;кие системы мира. Результа&shy;том 
стал стандарт ...
</p>

Символы кодирования URL

Появление адресов Что такое ссылка URL стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы, цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические символы французского языка, то нужные нам символы должны быть перекодированы особым образом.
Функции в PHP:

• urlencode() — URL-кодирование строки
• urldecode() — Декодирование URL— кодированной строки. Пример запроса пытающегося получить доступ к файлу с паролями в Linux. Что такое SQL Injection защита

  <?php
  $query = "/component/country?country=unitedarabemirates&BMMZ%3D6733
  %20AND%201%3D1%20UNION%20ALL
  %20SELECT%201%2C2%2C3%2Ctable_name
      %20FROM%20information_schema.tables%20WHERE%202%3E1--%20
      ..%2F..%2F..%2Fetc%2Fpasswd";
   
  echo urldecode($query);

  Результат:

  componentcountry?country=unitedarabemirates&
  BMMZ=6733 AND 1=1 UNION ALL SELECT 1,2,3,TABLE_NAME 
  FROM information_schema.tables WHERE 2>1-- ../../../etc/passwd

Распространенные символы. Таблица символов кодирования URL
space	%20
#	%23
<	%3c
=	%3d
>	%3e
,	%2c
%2f
(	%28
)	%29

Кавычки.

В полиграфии существует три вида кавычек: двойные угловые кавычки или «елочки» (« »), типографские кавычки (“ ”) и рукописные «лапки» („ ”). При работе с программными кодами вы будете пользоваться двойными прямыми кавычками (» «) и одинарными прямыми кавычками (‘ ‘).
По традиции в русском языке основным видом кавычек считаются “елочки”. В HTML «елочкам» соответствуют символы « и ». Во многих изданиях вместо «елочек» используются также типографские кавычки и двойные прямые кавычки. Левой и правой типографским кавычкам соответствуют символы “ и ” соответственно, а нижней левой кавычке — „. Прямым двойным кавычкам соответствует спецсимвол ".

Применение спецсимволов кавычек показано в следующем примере:

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

Карта символов Windows доступна во всех операционных системах Microsoft. Карта символов отображает все специальные символы, разделенные в зависимости от типа шрифта (например, Arial, Helvetica или Times New Roman).

Давайте посмотрим, как открыть карту символов Windows.

1. Нажмите на клавиатуре компьютера клавиши Win (это клавиша с логотипом Windows) и R одновременно.
2. Откроется окно «Выполнить». В поле Открыть: введите charmap и нажмите OK.
3. В Шрифт выберите шрифт, который хотите использовать. Если вы не знаете, какой выбрать, используйте тот, который предложен Windows.
4. Нажмите левой кнопкой мыши на специальный символ, который хотите вставить в документ и нажмите кнопку Выбрать.
5. Специальный символ будет скопирован в поле Для копирования: нажмите кнопку Копировать.
6. Теперь откройте документ или приложение электронной почты, куда хотите вставить специальный символ.
7. Щелкните правой кнопкой мыши в том месте куда хотите добавить символ и нажмите Вставить. Или нажмите Ctrl + V, тогда скопированный символ будет вставлен рядом с активным курсором в тексте.

Чтобы скопировать несколько специальных символов одновременно, щелкните левой кнопкой мыши на первом символе, который хотите использовать. Нажмите кнопку Выбрать. Теперь нажмите на второй символ, который хотите использовать. И ещё раз нажмите Выбрать. Повторяйте операцию для всех специальных символов, которые хотите скопировать. Наконец, нажмите Копировать.

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

Создать пробелы и физическое разделение элементов в HTML с помощью CSS

Создание пробелов и физическое разделение элементов в HTML может быть трудным для понимания начинающим веб-дизайнером. Это связано с тем, что у HTML есть свойство, известное как «разрушение пробелов». Независимо от того, вводите ли вы пробел 1 или 100 в своем HTML-коде, веб-браузер автоматически сворачивает эти пробелы в один пробел. Это отличается от программы, подобной Microsoft Word, которая позволяет создателям документов добавлять несколько пробелов для разделения слов и других элементов этого документа. Это не так, как работает дизайн сайта.

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

Пробелы в HTML с помощью CSS

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

В CSS вы можете использовать свойства margin или padding, чтобы добавить пространство вокруг элементов. Кроме того, свойство text-indent добавляет пространство в начале текста, например, для отступа абзацев.

Вот пример того, как использовать CSS, чтобы добавить пространство перед всеми вашими абзацами. Добавьте следующий CSS к вашей внешней или внутренней таблице стилей:

 p { текстовый отступ: 3em; } 

Пробелы в HTML внутри вашего текста

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

Вот пример того, как добавить пять пробелов внутри строки текста:

 Этот текст содержит пять лишних пробелов внутри 

Использует HTML:

 Этот текст имеет & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; пять дополнительных пробелов внутри него 

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

 Это предложение имеет пять разрывов строк в конце 

Почему интервалы в HTML – плохая идея

Хотя обе эти опции работают – элемент неразрывных пробелов действительно добавит интервалы к вашему тексту, а разрывы строк добавят интервалы под абзацем, показанным выше – это не лучший способ создания интервалов на вашей веб-странице. Добавление этих элементов в ваш HTML добавляет визуальную информацию в код, а не отделяет структуру страницы (HTML) от визуальных стилей (CSS). Лучшие практики требуют, чтобы они были отдельными по ряду причин, включая простоту обновления в будущем и общий размер файла и производительность страницы.

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

Рассмотрим приведенный выше пример предложения с пятью тегами в конце. Если вы хотите, чтобы такой интервал находился внизу каждого абзаца, вам нужно будет добавить этот HTML-код в каждый абзац всего сайта. Это достаточное количество дополнительной разметки, которая раздувает ваши страницы. Кроме того, если в будущем вы решите, что этот интервал слишком велик или слишком мал, и вы хотите немного его изменить, вам нужно будет отредактировать каждый абзац на всем сайте. Нет, спасибо!

Вместо добавления этих элементов-интервалов в ваш код используйте CSS.

 p { padding-bottom: 20px; } 

Эта одна строка CSS добавит пробелы под абзацами вашей страницы. Если вы хотите изменить этот интервал в будущем, отредактируйте эту строку (вместо кода всего сайта), и все готово!

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

Как вводить специальные символы с клавиатуры

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

Например, чтобы вставить символ градуса °, удерживайте нажатой Alt и набирайте на цифровой клавиатуре 0176.

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

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

Клавиатуры ноутбуков обычно не имеют цифровой клавиатуры. Часто, однако, есть клавиша Fn (функциональная), которая позволяет использовать обычные буквенные клавиши вместо цифровой клавиатуры.

Чтобы узнать, какая комбинация клавиш соответствует специальному символу, откройте таблицу символов Windows. Нажмите на специальный символ. В правом нижнем углу окна, после Клавиша:, будет отображаться комбинация клавиш, которая будет использоваться (если доступно).

Коды символов

Ниже приведен список основных кодов символов. Удерживайте клавишу Alt и с помощью цифровой клавиатуры набирайте число, чтобы вставить специальный символ.

• 0162 – Знак цента ¢
• 0163 – Знак фунта £
• 0164 – Знак валюты ¤
• 0165 – Знак иены ¥
• 0166 – Вертикальная черта с прерыванием ¦
• 0167 – Символ параграфа §
• 0168 – Диарез ¨
• 0169 – Символ авторского права
• 0170 – Женский порядковый указатель ª
• 0171 – Открывающая кавычка «
• 0172 – Знак отрицания ¬
• 0173 – Дефис —
• 0174 – Товарный знак знак Recorder
• 0175 – Макрон ¯
• 0176 – Символ градуса °
• 0177 – Символ плюс-минус ±
• 0178 – Показатель степени 2 ²
• 0179 – Показатель степени 3 ³
• 0180 – Акцент ´
• 0181 – Символ микро µ
• 0182 – Символ абзаца ¶
• 0183 – Центральная точка ·
• 0186 – Мужской порядковый индикатор º
• 0187 – Символ закрывающей кавычки »
• 0188 – Дробь четверти ¼
• 0189 – Дробь половины ½

Дефис и тире.

В полиграфии существует три очень похожих друг на друга знака: длинное тире, короткое тире и дефис. Из них на компьютерной клавиатуре есть только один — это дефис. Именно его обычно и используют во всех случаях, когда в тексте нужно поставить дефис или тире. Тем не менее следует придерживаться определенных правил пунктуации относительно применения этих знаков.
Так, дефис (-) применяется только внутри слов или между цифрами. Длинное тире (—), ставится между словами в предложении и отделяется от этих слов пробелами. Длинному тире соответствует ссылка-мнемоника —. Короткое тире (–) ставится между цифрами без букв или между словами, которые набраны прописными буквами, а также используется в качестве знака «минус» в математических формулах. Между коротким тире и словами пробел не ставится. Короткому тире соответствует ссылка-мнемоника –.

Применение дефиса и тире показано в следующем примере:

Пример: Спецсимволы — и –

• Результат
• HTML-код
• Попробуй сам »

Веб-страница что-то слишком долго открывается.
Она должна загружаться за 2–4 секунды.
Время – деньги…

Символ
Описание
Мнемоническое имя
Числовой код

неразрывный пробел
 
 

>
больше чем
>
>
&
амперсанд
&
&
»
прямая двойная кавычка
"
"
‘
апостроф
'
'
левая двойная угловая кавычка
«
«
правая двойная угловая кавычка
»
»
‘
левая одинарная кавычка
‘
‘
’
правая одинарная кавычка
’
’
‚
нижняя одинарная кавычка
‚
‚
“
левая двойная кавычка
“
“
”
правая двойная кавычка
”
”
„
нижняя двойная кавычка
„
„
€
euro
€
€

копирайт
©
©

знак зареrистрированной торrовой марки
®
®

Ставим неразрывный пробел в Word различными способами :

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

Способы

Неразрывный пробел в Word и не только может быть установлен такими способами:

• С помощью специальной комбинации клавиш.
• С применением специального ASCII-кода.
• С использованием меню программы.
• С помощью буфера обмена.

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

Комбинация на клавиатуре

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

• Устанавливаем курсор ввода в месте набора данного символа.
• Зажимаем одновременно функциональные клавиши Ctrl и Shift и, не отпуская их, нажимаем пробел.
• После этого отпускаем одновременно все клавиши и получаем в тексте неразрывный пробел.

Пользуемся ASCII-кодами

Любой символ можно ввести с помощью специального ASCII-кода в поле ввода текстового процессора от «Майкрософт». Неразрывный пробел в этом плане не исключение. Алгоритм ввода в этом случае такой:

• Устанавливаем указатель ввода в необходимом месте с помощью манипулятора или клавиш управления курсором.
• Переключаемся на английский язык ввода текста с помощью все того же манипулятора на языковой панели.
• Зажимаем функциональную клавишу Alt на левой части клавиатуры.
• Последовательно набираем комбинацию клавиш 2-4-8 (это и есть ASCII-код данного символа).

После проделанных манипуляций и должен появиться именно этот символ.

Используем меню

Неразрывный пробел в Word можно также поставить с помощью меню. Для этого устанавливаем курсор ввода в месте набора. В меню переходим на вкладку «Вставка» для «Офиса 2007» и более поздних версий этого программного продукта или выбираем пункт меню «Вставка» для «Офиса 2003» и более поздних версий этого софта. Затем находим пункт «Символ» и кликаем на нем левой кнопочкой мышки.

В «Офисе 2007» и более поздних версиях этого программного обеспечения пункт «Символ», как правило, находится на правом краю дисплея. В открывшемся меню находим неразрывный пробел, выделяем его и нажимаем кнопку «Вставить».

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

Ситуация в пакете «Майкрософт Офис 2013»

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

Поэтому при первом запуске этого софта рекомендуется изменить его базовые настройки. Для этого заходим в меню или вкладку «Вставка» и находим на ней пункт «Символ». В поле «Код знака» вводим комбинацию 202F (это шестнадцатиричный код данного знака).

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

Еще один универсальный способ

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

• Находим в любом месте данный символ и выделяем его с использованием мышки. Например, в Интернете на любом сайте.
• Используем комбинацию клавиш Ctrl + С для внесения в буфер обмена символа неразрывного пробела.
• Далее переходим в то приложение, в котором необходимо вставить этот знак, и устанавливаем курсор в месте ввода.
• Затем нажимаем комбинацию Ctrl + V. После этого должен вставиться в наш документ скопированный символ.

Рекомендации

Как бы там ни было, а неразрывный пробел в Word наиболее просто вставить с помощью специальной комбинации клавиш. Именно ее и рекомендуется использовать на практике.

Цвет html

В HTML существует несколько десятков названий цветов, но валидатор validator.w3.org расценивает их, как не соответствующие спецификациям HTML, кроме указанных в таблице. Например, значение цвета: orangered, для сайтов типа XHTML 0.1 Transitional, валидатор расценивает как ошибку. Поэтому значения цвета в HTML и CSS лучше задавать при помощи шестнадцатеричного кода, как в колонке «Значение».

Для сокращения можно писать: #fc4, вместо: #fc4fc4, или для черного: #000, вместо: #000000, если первых три символа после решетки совпадают с последующими тремя:

Цвет	Название	Значение
	aqua	#00ffff
	black	#000
	blue	#0000ff
	fuchsia	#ff00ff
	gray	#808080
	green	#008000
	lime	#00ff00
	maroon	#800000
	navy	#000080
	olive	#808000
	purple	#800080
	red	#f00000
	silver	#c0c0c0
	teal	#008080
	white	#fff
	yellow	#ffff00

Далее показана таблица безопасных web цветов для корректного отображения в старых браузерах. Для современных браузеров это не актуально и можно использовать любые значения цвета. Таблица поможет сориентироваться в цветовой гамме:

Рис.1 Безопасные web цвета

Пробелы и пробельные символы в HTML

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

При переносе строк и отступе от края существуют нюансы

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

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

Чтобы перенести строки внутри абзаца P, нужно воспользоваться одиночным тегом BR, с помощью которого это можно осуществить. Скажем, нам нужно вставить в текст какие-нибудь строчки из стихотворения, которые мы пишем в текстовом редакторе:

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

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

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

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

Пробел, табуляция и перенос строки

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

• Пробел — самая широкая клавиша на клавиатуре компьютера (без надписи);
• Табуляция — клавиша слева с надписью «Tab» и двумя стрелками, направленными в разные стороны;
• Перенос строки — клавиша «Enter».

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

Мы получаем код, который легко читаем и понятен благодаря пробелам. Оранжевыми стрелками отмечены отступы, создаваемые с помощью клавиши Tab, а символами CR и LF переносы строк, осуществляемые посредством кавиши Enter.

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

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

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

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

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

Распространённые специальные символы, которые являются либо недопустимыми, как знак <, который является скобкой для обозначения тегов HTML. Либо это такой необходимый символ как неразрывный пробел, который иногда требуется вставить в код страницы, чтобы браузер не смел переносить строку в этом месте. Использовать можно как литерал, так и код символа.

Название	Символ	Литерал	Код
Амперсанд	&	&	&
Длинное тире	—	—	—
Короткое тире	–	–	–
Угловые кавычки	«	«
»	»
Двойные кавычки	“	«	“
”	”	”
Меньше	<	&lt;	&#60;
Больше	>	&gt;	&#62;
Умножение	×	&times;	&#215;
Деление	÷	&divide;	&#247;
Авторское право		&copy;	&#169;
Зарегистрированная торговая марка		&reg;	&#174;
Неразрывный пробел		&nbsp;	&#160;

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

Их также можно использовать для раскрутки, путем формирования привлекательного сниппета в поисковой выдаче Google. Создание расширенного сниппета сайта увеличивает его кликабельность (CTR), и приносит больше посетителей.

Старые браузеры, включая IE 8, не отображают все возможные специальные символы. Вместо двоеточия подставляйте цифру из заглавия колонки. Например, снеговик — (&#9731;), череп с костями — (&#9760;), а серп и молот ☭ — (&#9773;):

	1	2	3	4	5	6	7	8	9
&#931..;			①	②	③	④	⑤	⑥	⑦	⑧
&#932..;	⑨	⑩	⑪	⑫	⑬	⑭	⑮	⑯	⑰	⑱
&#933..;	⑲	⑳	⑴	⑵	⑶
&#939..;						⒳	⒴	⒵	Ⓐ	Ⓑ
&#940..;	Ⓒ	Ⓓ	Ⓔ	Ⓕ	Ⓖ	Ⓗ	Ⓘ	Ⓙ	Ⓚ	Ⓛ
&#973..;				★	☆	☇	☈	☉	☊	☋
&#974..;	☌	☍		☏	☐		☒	☓
&#976..;		☡			☤	☥		☧	☨	☩
&#977..;		☫	☬	☭
&#978..;								☻	☼	☽
&#979..;	☾	☿		♁		♃	♄	♅	♆	♇
&#980..;
&#981..;			♔	♕	♖	♗	♘	♙	♚	♛
&#982..;	♜	♝	♞	♟		♡	♢		♤
&#983..;		♧		♩	♪	♫	♬	♭	♮	♯
&#999..;	✆	✇							✎
&#1001..;	✚	✛	✜		✞	✟	✠		✢	✣
&#1002..;	✤	✥	✦	✧		✩	✪	✫	✬	✭
&#1003..;	✮	✯	✰	✱	✲			✵	✶	✷
&#1004..;	✸	✹	✺	✻	✼	✽	✾	✿	❀	❁
&#1010..;			❶	❷	❸	❹	❺	❻	❼	❽
&#1011..;	❾	❿	➀	➁	➂	➃	➄	➅	➆	➇
&#1012..;	➈	➉	➊	➋	➌	➍	➎	➏	➐	➑
&#1015..;	➦	➧	➨	➩	➪	➫	➬	➭	➮	➯
&#1016..;		➱	➲	➳	➴	➵	➶	➷	➸	➹

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

• A
  B
  C
  D E
  F
  H
  I
  K L
  M N
  O
  P Q R
  S
  T
  U V !DOCTYPE Комментарии

• Универсальные атрибуты

  Цвет

  Уроки HTML
  Справочник CSS
  Вёрстка сайта

Поделиться с друзьями:

Unicode и CSS

В CSS тоже можно обращаться к символам через их коды, но формат записи отличается от HTML. Код символа предваряется обратным слешем (\).

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

Однако, если мы захотим написать «примерно 15км», то есть «~15км», такой код не сработает:

Поскольку символы, которые могут быть интерпретированы как шестнадцатеричные цифры (0-9, a-f, A-F), будут восприняты как часть кода символа. Есть два способа исправить ситуацию: поставить пробел после кода символа (этот первый пробел не будет отображён при выводе) или использовать 6-циферный код символа.

Сводная табличка в качестве резюме:

Формат	Описание
HTML
&#A9;	Десятичная ссылка (decimal numeric character reference)
©	Шестнадцатеричная ссылка (hexadecimal numeric character reference)
©	Именованная ссылка (мнемоника, HTML entity, named character reference)
CSS
\A9	Если после идёт символ из диапазона 0-9, a-f, A-F, перед ними нужен пробел
\0000A9	Код символа должен содержать ровно 6 символов, пробел после не нужен

Unicode и HTML

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

Десятичные символьные ссылки

Возьмём произвольный символ Unicode, например, тильду (~). Её можно ввести с клавиатуры, но мы попробуем сделать это с помощью десятичной ссылки.

Код символа в таблице: U+007E.
Переводим в десятичный формат: 7E16 = 7*16 + 14 = 12610
Чтобы отобразить символ в HTML документе, нужно поместить его код между «&#» и «;».

Шестнадцатеричные символьные ссылки

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

Через числовые ссылки можно сослаться на любой символ таблицы Unicode, за исключением символов с кодами U+0000 и U+000D, перманентно не определённых символов, суррогатов (U+D800–U+DFFF) и управляющих символов помимо пробельных.
 

Именованные символьные ссылки

В начале было слово..  (с)

А в нашем случае был метаязык SGML (Standard Generalized Markup Language), на котором определялись языки разметки документов. HTML до версии 4 включительно был приложением SGML, а XML является подмножеством SGML.

В частности, SGML помимо декларативной разметки и описания типов документов (document type definition, DTD), обладал механизмом строковой подстановки, когда некоторая последовательность символов заменяется при обработке некоторой другой последовательностью (для обеспечения переносимости нестандартных символов).

В SGML строки, для которых определены подстановки, назывались entities (иногда их переводят как «объекты», Википедия называет их «символ-мнемоника»). После того, как entities объявлен, на него можно ссылаться в любом месте документа, используя его имя, перед которым ставится символ «&», а после которого — точка с запятой. Точка с запятой может быть опущена, если за ссылкой на entities следует пробел или конец записи.

В HTML определено много entities для специальных символов, вроде валют и математических знаков, а также для отображения символов, имеющих специальное значение для HTML (например, < и >). Их описание можно найти на официальном сайте консорциума. Для HTML 4 пример описания дроби 3/4 (U+00BE) выглядит так:

Затем символ можно использовать в документе:

Такое описание выглядит нагляднее, но по факту просто заменяется на: