Машинописный текст состоит из печатных знаков - графических символов.
Графические символы - это символы, которые имеют в тексте видимое отображение.
Все графические символы собраны в наборе единой универсальной системы Юникод.
Вставить графический символ Юникод в html-документ
- главное и единственное назначение для этой таблицы.
Вставить символ в html-документ можно одним из способов:
- скопировать изображение символа из окна браузера в окно своего визуального html-редактора
- скопировать html-код символа непосредственно в код html-документа
- вставлять визуальное в визуальное
- вставлять код в код.
Шрифт для символа, его размер и цвет в HTML можно задать кодом, вида:
КОД_СИМВОЛА
где,
Arial - шрифт,
10px - размер шрифта в пикселях,
#ff0000 - код цвета шрифта (красный)
Например:
☎
- размер шрифта символа 30px,
☎
- размер шрифта символа 30px, цвет - красный
☎
- размер шрифта символа 20px,
☎
- размер шрифта символа 10px.
Прим. Рекомендуемые шрифты для вставки спецсимволов - Arial, Verdana и Tahoma. Эти шрифты корректно отображают символы Юникод и сами, в свою очередь, корректно поддерживаются веб-приложениями.
- «Символ»
(видимое отображение символа)
Из этой графы можно скопировать изображение символа и вставить его в окно текстового html-редактора. Символ скопируется с размером шрифта 20px. После завершения копирования может потребоваться индивидуальная подгонка размера шрифта непосредственно для скопированного знака. - «Наименование»
(только для важных или непонятных символов)
Пояснение назначения символа, его область применения, примеры... - «Мнемоника»
Мнемоника - это буквенная конструкция вида ", обозначающая буквенный код символа в HTML. Вставляется непосредственно в html-код html-документа. Мнемоники очень популярны среди профессиональных верстальщиков. Они прекрасно запоминаются человеком и поддерживаются всеми html-приложениями. Каждая мнемоника содержит буквенное имя (обозначение) своего символа и служебный знак (&), который служит сигналом к прочтению кода для браузера и не отображается на экране монитора. Имя каждой мнемоники уникально и легко читаемо, потому что образовано от англоязычного слова, характеризующего символ.Мнемоника (греч.) - искусство запоминать что-либо. Мнемотехника применяется для облегчения восприятия труднозапоминаемой информации, когда объект запоминания приводится в ассоциативное состояние с чем-либо.
- «Код»
Код - числовой десятичный код символа в HTML, вида &. Вставляется непосредственно в html-код html-документа. Числовой десятичный код состоит из числа, обозначающего порядковый номер символа в системе Юникод и нескольких служебных знаков (& и #), которые служат сигналом к прочтению кода для браузера и не отображаются на экране монитора. Числовой десятичный код имеет широкое распространение и применение, благодаря своей универсальности и простоте восприятия.
Символы управления в HTML (XHTML)
Символы управления в HTML (XHTML) - это служебные символы HTML-языка, которые используются при HTML-вёрстке веб-страницы. Эти символы обязан поддерживать любой браузер, поскольку без них невозможно правильное отображение HTML-текста. Символы управления не отображаются в тексте и, при прямом введении с клавиатуры - интерпретируются браузером как знаки препинания, призывающие к выполнению какого-либо действия при отрисовке страницы на экране.
Допускается использовать символы управления в обычных текстах, где они символизируют общечеловеческие понятия и трактуются браузером как обычные типографские знаки. При таком использовании служебных символов в HTML-текстах требуется вводить не значение самого символа, а именно его HTML-код. Ибо, повторяюсь - в противном случае браузер будет воспринимать служебный символ, как призыв к действию и не будет корректно отображать HTML-текст на экране монитора.
Символы управления и их HTML-код знают и понимают все браузеры без исключения, чего нельзя сказать, увы - про остальные знаки, которые могут отображаться некорректно в разных браузерах или, что ещё хуже - не отображаться совсем.
Синтаксис и пунктуация
пробел длины N (обычный пробел) | |||||
пробел длины M (длинныйпробел) | |||||
- | мягкий перенос (непечатный знак) | - | | ||
‑ | дефис | ‑ |
|||
---|---|---|---|---|---|
- | тире длины N (обычное тире) | - | – | ||
— | тире длины M (длинное тире) | — | — | ||
. | точка | . | |||
, | запятая | , | |||
… | многоточие | … |
… |
||
: | двоеточие | : | |||
; | точка с запятой | ; | |||
! | знак восклицания | ! ǃ |
|||
? | вопросительный знак | ? | |||
@ | «собачка» | @ | |||
* | «звездочка» | * | |||
# | «решетка» | # | |||
‘ | одиночная верхняя левая кавычка | ‘ | ‘ |
||
’ | одиночная верхняя правая кавычка | ’ | ’ |
||
‚ | одиночная нижняя правая кавычка | ‚ | ‚ |
||
“ | двойная верхняя левая кавычка | “ | “ |
||
” | двойная верхняя правая кавычка | ” | ” |
||
„ | двойная нижняя правая кавычка | &bdquo | „ |
||
« | двойная левая угловая кавычка (рус) | « | « | ||
» | двойная правая угловая кавычка (рус) | » | » | ||
́ | знак ударения, пример: Вася́ | ́ | |||
" | апостроф, пример: Вас"я | " | |||
´ | акут, пример: Вас´я | ´ | ´ | ||
¶ | абзац (непечатный знак) | ¶ | ¶ | ||
§ | параграф | § | § | ||
ˆ | акцент (перевёрнутая птичка) | ˆ | ˆ |
||
˜ | малая тильда | ˜ | ˜ |
||
¦ | вертикальный пунктир | ¦ | ¦ | ||
( | круглая скобка влево | ( | |||
) | круглая скобка вправо | ) | |||
〈 | угловая скобка влево | 〈 | 〈 | ||
〉 | угловая скобка вправо | 〉 | 〉 | ||
‹ | угловая скобка влево, вариант | ‹ | ‹ | ||
› | угловая скобка вправо, вариант | › | › | ||
[ | квадратная скобка влево | [ | |||
] | квадратная скобка вправо | ] | |||
/ | слэш (slash) - cимвол косой черты | / | |||
\ | обратный слэш (backslash) | \ | |||
⁄ | косая дробная черта (знак деления) | ⁄ | ⁄ | ||
ǀ | вертикальная черта | ǀ | |||
ǁ | двойная вертикальная черта | ǁ | |||
‾ | надчеркивание, пример: Вася‾вася | ‾ | ‾ | ||
¯ | macron, пример: Вася¯вася | ¯ | ¯ |
Товарные знаки и валюта
+ | плюс | + | + | ||
---|---|---|---|---|---|
− | минус | − | - − |
||
= | равно | = | |||
± | плюс-минус | ± | ± | ||
× | знак умножения | × | × | ||
÷ | знак деления | ÷ | ÷ | ||
⋅ | оператор «точка» (середина строки) | ⋅ | · ⋅ |
||
∗ | оператор «звёздочка» (середина строки) | ∗ | ∗ | ||
∼ | оператор «тильда» | ∼ | ∼ | ||
. | маркер списка (середина строки) | . | |
||
¹ | верхний индекс «1» | ¹ | ¹ | ||
² | верхний индекс «2» | ² | ² | ||
³ | верхний индекс «3» | ³ | ³ | ||
Надстрочный и подстрочный индекс в HTML (XHTML) можно вставить при помощи тегов и , соответственно: ЧИСЛОНадстрочный индекс → ЧИСЛО Надстрочный индекс ЧИСЛОПодстрочный индекс → ЧИСЛО Подстрочный индекс |
|||||
½ | дробь «одна вторая» | ½ | ½ | ||
⅓ | дробь «одна треть» | ⅓ | |||
¼ | дробь «одна четвёртая» | ¼ | ¼ | ||
¾ | дробь «три четверти» | ¾ | ¾ | ||
№ | знак номера | № | |||
% | процент | % | |||
‰ | промилле | ‰ | ‰ |
||
° | градусы | ° | ° | ||
′ | штрих (минуты, футы) | ′ | ′ | ||
″ | двойной штрих (секунды, дюймы) Пример 1: 30° 25′ 12″ Пример 2: 25′ 12″ |
″ | ″ | ||
µ | микро | µ | µ | ||
π | Пи | π | π | ||
ƒ | знак функции (не путать с «интеграл») |
ƒ | ƒ |
||
∫ | интеграл | ∫ | ∫ | ||
∅ | перечеркнутый ноль, пустое множество (не путать с «диаметр») |
∅ | ∅ | ||
⌀ | диаметр (не путать с перечёркнутой латинской «о») | ⌀ | |||
ø | латинская "o" диагонально перечёркнутая | ø | ø | ||
Ø | латинская заглавная "O" диагонально перечёркнутая | Ø | Ø | ||
∏ | знак произведения | ∏ | ∏ | ||
∑ | знак суммирования | ∑ | ∑ | ||
√ | радикал (квадратный корень или корень степени x) |
√ | √ | ||
∝ | пропорционально | ∝ | ∝ | ||
∞ | бесконечность | ∞ | ∞ | ||
∠ | угол | ∠ | ∠ | ||
⊥ | ортогонально (перпендикулярно) | ⊥ | ⊥ | ||
∴ | знак «cледовательно» | ∴ | ∴ | ||
≅ | приблизительно равно | ≅ | ≅ | ||
≈ | почти равно | ≈ | ≈ | ||
≠ | не равно | ≠ | ≠ | ||
≡ | идентично | ≡ | ≡ | ||
≤ | меньше или равно | ≤ | ≤ | ||
≥ | больше или равно | ≥ | ≥ | ||
∧ | логическое И | ∧ | ∧ | ||
∨ | логическое ИЛИ | ∨ | ∨ | ||
⊕ | знак «плюс в круге» (прямая сумма) |
⊕ | ⊕ | ||
⊗ | знак «умножение в круге» (векторное произведение, стрела от наблюдателя) |
⊗ | ⊗ | ||
ʘ | точка в круге (стрела на наблюдателя) |
ʘ |
✵ ✵ |
|||||
Специальные символы – это технические знаки, которые не представлены на клавиатуре и закодированы через кодировку ЮНИКОД или иного метаязыка. Спецсимволы разделены на группы: математические, греческий алфавит, ISO 8859-1 и другие. Зачем они необходимы и как использовать читайте далее в статье.
Применение спецсимволов при написании документов
Употребление осуществляется для следующих целей:
- Придание статье завершённости и эстетичности. Особые знаки помогают быстрее понять размерные величины или прочитать историческое название на латинском или греческом языке.
- Некоторые элементы обеспечивают правильную разметку документа. К примеру, «» и “” отличаются, первые передаются стандартными средствами, другие через спецсимволы.
- Вёрстка документов математической направленности не может обойтись без знаний основных групп элементов.
Основные знаки
Материал позволит найти специальные символы в соответствующей кодировке для быстрой вставки в текст.
Внешний вид | Обозначение | HTML-код | CSS-код |
☃ | Снеговик | ☃ | \2603 |
☦ | Православный крест | ☦ | \2626 |
⚓ | Якорь | ⚓ | \2693 |
✆ | Знак телефона | ✆ | \2706 |
☎ | Телефон | ☎ | \260E |
☕ | Горячие напитки | ☕ | \2615 |
✎ | Карандаш, направленный вправо-вниз | ✎ | \270E |
✏ | Карандаш | ✏ | \270F |
✐ | Карандаш, направленный вправо-вверх | ✐ | \2710 |
✑ | Незакрашенное острие пера | ✑ | \2711 |
✒ | Закрашенное острие пера | ✒ | \2712 |
⚜ | Геральдическая лилия | ⚜ | \269C |
⛑ | Шлем с белым крестом | ⛑ | \26D1 |
⚝ | Начерченная белая звезда | ⚝ | \269D |
❄ | Снежинка | ❄ | \2744 |
❤ | Закрашенное жирное сердце | ❤ | \2764 |
❅ | Зажатая трилистниками снежинка | ❅ | \2745 |
❆ | Жирная остроугольная снежинка | ❆ | \2746 |
★ | Закрашенная звезда | ★ | \2605 |
☆ | Незакрашенная звезда | ☆ | \2606 |
✪ | Незакрашенная звезда в закрашенном круге | ✪ | \272A |
✫ | Закрашенная звезда с незакрашенным кругом внутри | ✫ | \272B |
✯ | Вращающаяся звезда | ✯ | \272F |
❉ | Звёздочка с шарообразными окончаниями | ❉ | \2749 |
❋ | Жирная восьмиконечная каплеобразная звёздочка-пропеллер | ❋ | \274B |
✲ | Звёздочка с незакрашенным центром | ✲ | \2732 |
☀ | Закрашенное солнце с лучами | ☀ | \2600 |
☁ | Облака | ☁ | \2601 |
☂ | Зонтик | ☂ | \2602 |
☑ | Галочка в квадрате | ☑ | \2611 |
☒ | Крестик в квадрате | ☒ | \2612 |
☹ | Нахмуренный смайлик | ☹ | \2639 |
☺ | Улыбающийся смайлик | ☺ | \263A |
☻ | Закрашенный улыбающийся смайлик | ☻ | \263B |
☭ | Серп и молот | ☭ | \262D |
⚑ | Закрашенный флаг | ⚑ | \2691 |
⚐ | Незакрашенный флаг | ⚐ | \2690 |
☰ | Триграмма | ☰ | \2630 |
✿ | Закрашенный цветок | ✿ | \273f |
❀ | Незакрашенный цветок | ❀ | \2740 |
✾ | Цветок с шестью лепестками | ✾ | \273E |
❁ | Закрашенный обведённый цветок | ❁ | \2741 |
❂ | Цветок из точек | ❂ | \2742 |
✉ | Конверт | ✉ | \2709 |
❦ | Сердце в виде цветка | ❦ | \2766 |
❶ | Номер 1 | ❶ | \2776 |
❷ | Номер 2 | ❷ | \2777 |
❸ | Номер 3 | ❸ | \2778 |
❹ | Номер 4 | ❹ | \2779 |
❺ | Номер 5 | ❺ | \277A |
❻ | Номер 6 | ❻ | \277B |
❼ | Номер 7 | ❼ | \277C |
❽ | Номер 8 | ❽ | \277D |
➒ | Номер 9 | ➒ | \2792 |
➓ | Номер 10 | ➓ | \2793 |
✖ | Жирный знак умножения | ✖ | \2716 |
✘ | Жирный крестик | ✘ | \2718 |
✔ | Жирная отметка галочкой | ✔ | \2714 |
✚ | Жирный крест | ✚ | \271A |
⚛ | Символ атома | ⚛ | \269B |
♺ | Символ переработки | ♺ | \267A |
❑ | Незакрашенный квадрат с правой нижней тенью | ❑ | \2751 |
❒ | Незакрашенный квадрат с правой верхней тенью | ❒ | \2752 |
◈ | Алмаз в оправе | ◈ | \25C8 |
◐ | Круг с левой закрашенной половиной | ◐ | \25D0 |
◑ | Круг с закрашенной правой половиной | ◑ | \25D1 |
⁂ | Три звездочки | ⁂ | \2042 |
Знаки препинания
Внешний вид | Обозначение | HTML-код | CSS-код |
< | Знак «меньше чем» (начало тега) | < | \003C |
> | Знак «больше чем» (конец тега) | > | \003E |
« | Левая двойная угловая скобка | « | \00AB |
» | Правая двойная угловая скобка | » | \00BB |
‹ | Левая угловая одиночная кавычка | ‹ | \2039 |
› | Правая угловая одиночная кавычка | › | \203A |
« | Двойная кавычка | " | \0022 |
′ | Одиночный штрих | ′ | \2032 |
″ | Двойной штрих | ″ | \2033 |
‘ | Левая одиночная кавычка | ‘ | \2018 |
’ | Правая одиночная кавычка | ’ | \2019 |
‚ | Нижняя одиночная кавычка | ‚ | \201A |
“ | Левая двойная кавычка | “ | \201C |
” | Правая двойная кавычка | ” | \201D |
„ | Нижняя двойная кавычка | „ | \201E |
❜ | Жирная одинарная верхняя запятая | ❜ | \275C |
❛ | Жирная одинарная повёрнутая верхняя запятая | ❛ | \275B |
& | Амперсанд | & | \0026 |
‘ | Апостроф (одинарная кавычка) | " | \0027 |
§ | Параграф | § | \00A7 |
© | Знак copyright | \00A9 | |
¬ | Знак отрицания | ¬ | \00AC |
® | Знак зарегистрированной торговой марки | ® | \00AE |
¯ | Знак долготы над гласным | ¯ | \00AF |
° | Градус | ° | \00B0 |
± | Плюс-минус | ± | \00B1 |
¹ | Верхний индекс «1» | ¹ | \00B9 |
² | Верхний индекс «2» | ² | \00B2 |
³ | Верхний индекс «3» | ³ | \00B3 |
¼ | Одна четверть | ¼ | \00BC |
½ | Одна вторая | ½ | \00BD |
¾ | Три четверти | ¾ | \00BE |
´ | Знак ударения | ´ | \00B4 |
µ | Микро | µ | \00B5 |
¶ | Знак абзаца | ¶ | \00B6 |
· | Знак умножения | · | \00B7 |
¿ | Перевернутый вопросительный знак | ¿ | \00BF |
ƒ | Знак флорина | ƒ | \0192 |
™ | Знак торговой марки | ™ | \2122 |
Маркер списка | . | \2022 | |
… | Многоточие | … | \2026 |
‾ | Надчеркивание | ‾ | \203E |
– | Среднее тире | - | \2013 |
- | Длинное тире | — | \2014 |
‰ | Промилле | ‰ | \2030 |
} | Правая фигурная скобка | } | \007D |
{ | Левая фигурная скобка | { | \007B |
= | Знак равенства | = | \003D |
≠ | Знак неравенства | ≠ | \2260 |
≅ | Конгруэнтность (геометрическое равенство) | ≅ | \2245 |
≈ | Почти равно | ≈ | \2248 |
≤ | Меньше чем или равно | ≤ | \2264 |
≥ | Больше чем или равно | ≥ | \2265 |
∠ | Угол | ∠ | \2220 |
⊥ | Перпендикулярно (кнопка вверх) | ⊥ | \22A5 |
√ | Квадратный корень | √ | \221A |
∑ | N-ичное суммирование | ∑ | \2211 |
∫ | Интеграл | ∫ | \222B |
※ | Знак сноски | ※ | \203B |
÷ | Знак деления | ÷ | \00F7 |
∞ | Знак бесконечности | ∞ | \221E |
@ | Символ собака | @ | \0040 |
[ | Левая квадратная скобка | [ | \005B |
] | Правая квадратная скобка | ] | \005D |
Стрелки
Внешний вид | Обозначение | HTML-код | CSS-код |
← | Стрелка влево | ← | \2190 |
Стрелка вверх | \2191 | ||
→ | Стрелка вправо | → | \2192 |
↓ | Стрелка вниз | ↓ | \2193 |
↔ | Стрелка влево-вправо | ↔ | \2194 |
↵ | Стрелка вниз и влево – знак возврата каретки | ↵ | \21B5 |
⇐ | Двойная стрелка налево | ⇐ | \21D0 |
⇑ | Двойная стрелка вверх | ⇑ | \21D1 |
⇒ | Двойная стрелка направо | ⇒ | \21D2 |
⇓ | Двойная стрелка вниз | ⇓ | \21D3 |
⇔ | Двойная стрелка влево-вправо | ⇔ | \21D4 |
➠ | Летящая стрела | ➠ | \27A0 |
➤ | Наконечник стрелы | ➤ | \27A4 |
➥ | Изогнутая стрела, указывающая вниз и вправо | ➥ | \27A5 |
➦ | Изогнутая стрела, указывающая вверх и вправо | ➦ | \27A6 |
➳ | Стрела направо | ➳ | \27B3 |
↺ | ↺ | \21BA | |
↻ | Круглая стрелка с наконечником против часовой стрелки | ↻ | \21BB |
⇧ | Толстая полая стрелка вверх | ⇧ | \21E7 |
↩ | Стрелка налево с крючком | ↩ | \21A9 |
➫ | Наклонённая вниз объёмная стрелка | ➫ | \27AB |
⬇ | Закрашенная стрелка вниз | ⬇ | \2B07 |
⬆ | Закрашенная стрелка вверх | ⬆ | \2B06 |
Карточные масти, знаки зодиака и значки валют
Внешний вид | Обозначение | HTML-код | CSS-код |
♠ | «Пики» | ♠ | \2660 |
♣ | «Трефы» | ♣ | \2663 |
«Червы» | \2665 | ||
♦ | «Бубны» | ♦ | \2666 |
♡ | Контур «Червы» | ♡ | \2661 |
♢ | Контур «Бубны» | ♢ | \2662 |
♤ | Контур «Пики» | ♤ | \2664 |
♧ | Контур «Трефы» | ♧ | \2667 |
¢ | Цент | ¢ | \FFE0 |
£ | Фунт стерлингов | £ | \FFE1 |
₽ | Российский рубль | ₽ | \20BD |
¥ | Йена или юань | ¥ | \00A5 |
€ | Евро | € | \20AC |
$ | Доллар | $ | \0024 |
₴ | Знак гривны | ₴ | \20B4 |
₹ | Индийская рупия | ₹ | \20B9 |
圓 | Китайский юань | 圓 | \5713 |
₸ | Казахстанский тенге | ₸ | \20B8 |
♈ | Овен | ♈ | \2648 |
♉ | Телец | ♉ | \2649 |
♊ | Близнецы | ♊ | \264A |
♋ | Рак | ♋ | \264B |
♌ | Лев | ♌ | \264C |
♍ | Дева | ♍ | \264D |
♎ | Весы | ♎ | \264E |
♏ | Скорпион | ♏ | \264F |
♐ | Стрелец | ♐ | \2650 |
♑ | Козерог | ♑ | \2651 |
♒ | Водолей | ♒ | \2652 |
♓ | Рыбы | ♓ | \2653 |
Греческий алфавит
Буква | строчные | прописные | ||
символ | html-код | символ | html-код | |
α | Α | |||
β | Β | |||
γ | Γ | |||
δ | Δ | |||
ε | Ε | |||
ζ | Ζ | |||
η | Η | |||
θ | Θ | |||
ι | Ι | |||
κ | Κ | |||
λ | Λ | |||
μ | Μ | |||
ν | Ν | |||
ξ | Ξ | |||
ο | Ο | |||
π | Π | |||
ρ | Ρ | |||
σ | Σ | |||
ς | ||||
τ | Τ | |||
υ | Υ | |||
φ | Φ | |||
χ | Χ | |||
ψ | Ψ | |||
ω | Ω |
Как употреблять на практике
![](https://i1.wp.com/poisk-v-seti.ru/wp-content/uploads/2018/02/Primenenie-poluchennykh-kodov.jpg)
Независимо от CMS, добавление статьи выполняется с использованием визуального редактора и HTML версии. Все специальные символы в кодировке возможно вставить только во втором случае. Чтобы правильно воспользоваться инструментов, рекомендуется взять на заметку таблицы, где показан код и внешнее представление.
Обращаем внимание, если вставить знак в визуальном представлении статьи, то в HTML произойдёт превращение элемента в соответствующий код. При ручном вводе информации учитывайте регистр, который влияет на конечный результат.
Здравствуйте, уважаемые читатели блога сайт. Чуть ранее мы уже успели поговорить о том, также узнали про оформление в нем . Сегодня у нас на очереди понятие пробела в ХТМЛ, а еще связанное с ним форматирование кода при его написании (для удобства последующего его чтения и восприятия).
Ну и в связи с тем, что мы затронем тему неразрывного пробела и мягкого переноса, нам придется акцентировать наше внимание на так называемых спецсимволах или мнемониках, используемых в языке Html, которые позволят вам добавить в код web документа множество дополнительных символов, вроде уже упомянутого выше. Но обо всем по порядку.
Пробелы и пробельные символы в языке Html
Прежде, чем переходить к вопросу форматирования текста с помощью специально предназначенных для этого тегов (абзаца, заголовков и т.д.) я хочу остановиться на том моменте, как в языке ХТМЛ интерпретируются пробелы, переносы строки (Enter) и табуляция, как осуществляется разбивка текста в окне браузера при изменении его размера.
Правда для такого рода визуального форматирования (которое не будет видно на вебстранице) чаще всего используют не сами пробелы, а именно символы табуляции и переноса строки. Есть такое правило — когда начинаете писать вложенный Html тег, то сделайте отступ с помощью табуляции (клавиша Tab на клавиатуре), а когда этот тег закрываете, то уберите отступ (сочетание клавиш Shift+Tab на клавиатуре).
Делать это нужно так, чтобы открывающий и закрывающий тэги были бы на одном вертикальном уровне (на одинаковом количестве табуляций от правого края страницы вашего Html редактора, например, Notepad++, о котором я писал ). Кроме этого советую непосредственно после написания открывающего элемента сделать несколько переносов строки и сразу же прописать закрывающий на том же уровне (количестве табуляций), чтобы потом не забыть это сделать.
Т.е. открывающий и закрывающий элементы должны стоять на одном уровне по вертикали, а внутренние теги сдвигаем на один знак табуляции и располагаем закрывающие и открывающие опять же на одном уровне.
Для простых веб документов это может показаться излишеством, но при создании более-менее сложных, их код станет гораздо более наглядным и читаемым за счет обилия пробелов, а также в нем будет гораздо проще заметить ошибки за счет симметричного расположения тегов.
Спецсимволы или мнемоники в Html коде
Так, а теперь давайте поговорим о так называемых специальных символах, удобство использования которых я анонсировал в начале этой статьи. Спецсимволы еще иногда называют мнемоники или подстановки. Они предназначены для того, чтобы решить довольно давно возникшую в языке гипертекстовой разметки проблему, связанную с используемыми кодировками.
Когда вы набираете текст с клавиатуры, то происходит кодирование символов вашего языка по заранее установленному алгоритму, а потом они отображаются на сайте с помощью используемых вами шрифтов (где найти и как установить для сайта) за счет декодирования.
Кодировок существует очень много, но для языка Html по умолчанию была принята расширенная версия кодировок .
В этой кодировке текста было возможно записать всего лишь 256 знаков — 128 от ASCII и еще 128 для букв русского языка. В результате возникла проблема с использованием на сайтах знаки, которые не входят в ASCII и не являются буквами русского языка, входящими в состав кодировки Windows 1251 (CP1251). Ну, вздумалось вам использовать тильду или апостроф, а возможности такой изначально в используемой языком Html кодировке не заложено.
Именно для таких случаев и были придуманы подстановки или же, другими словами, мнемоники. Изначально спецсимволы имели цифровой вид записи , но затем для самых распространенных из них были добавлены их буквенные аналоги для простоты их запоминания.
В общем понимании, мнемоника — это такой знак, который начинается с амперсанда «&» и заканчивается точкой с запятой «;». Именно по этим признакам браузер при разборе Html кода выделяет из него спецсимволы. Сразу за амперсандом в цифровом коде подстановки должен следовать знак решетки «#», который иногда называют хеш. А уже потом следует цифровой код нужного символа в кодировке юникод.
В юникоде можно записать более 60 000 знаков — главное, чтобы нужный вам символ мнемоники поддерживался используемым на вашем сайте шрифтом. Есть шрифты с поддержкой почти всех знаков кодировки юникод, а есть варианты только с определенным набором символов.
Полный список спецсимволов будет просто огромен, но наиболее часто используемые мнемоники вы можете позаимствовать, например, из этой таблицы:
Cимвол | Html-код | Десятичный код | Описание |
---|---|---|---|
неразрывный пробел | |||
узкий пробел (еn-шириной в букву n) | |||
широкий пробел (em-шириной в букву m) | |||
– | - | – | узкое тире (en-тире) |
- | — | — | широкое тире (em -тире) |
| - | | мягкий перенос |
а́ | ́ | ударение, ставится после «ударной» буквы | |
© | © | копирайт | |
® | ® | ® | знак зарегистрированной торговой марки |
™ | ™ | ™ | знак торговой марки |
º | º | º | копье Марса |
ª | ª | ª | зеркало Венеры |
‰ | ‰ | ‰ | промилле |
π | π | π | пи (используйте Times New Roman) |
¦ | ¦ | ¦ | вертикальный пунктир |
§ | § | § | параграф |
° | ° | ° | градус |
µ | µ | µ | знак «микро» |
¶ | ¶ | ¶ | знак абзаца |
… | … | … | многоточие |
‾ | ‾ | ‾ | надчеркивание |
´ | ´ | ´ | знак ударения |
№ | № | знак номера | |
🔍 | 🔍 | Лупа (наклонённая влево) | |
🔎 | 🔎 | Лупа (наклонённая вправо) | |
знаки арифметических и математических операций | |||
× | × | × | умножить |
÷ | ÷ | ÷ | разделить |
< | < | меньше | |
> | > | > | больше |
± | ± | ± | плюс/минус |
¹ | ¹ | ¹ | степень 1 |
² | ² | ² | степень 2 |
³ | ³ | ³ | степень 3 |
¬ | ¬ | ¬ | отрицание |
¼ | ¼ | ¼ | одна четвертая |
½ | ½ | ½ | одна вторая |
¾ | ¾ | ¾ | три четверти |
⁄ | ⁄ | ⁄ | дробная черта |
− | − | − | минус |
≤ | ≤ | ≤ | меньше или равно |
≥ | ≥ | ≥ | больше или равно |
≈ | ≈ | ≈ | приблизительно (почти) равно |
≠ | ≠ | ≠ | не равно |
≡ | ≡ | ≡ | тождественно |
√ | √ | √ | квадратный корень (радикал) |
∞ | ∞ | ∞ | бесконечность |
∑ | ∑ | ∑ | знак суммирования |
∏ | ∏ | ∏ | знак произведения |
∂ | ∂ | ∂ | частичный дифференциал |
∫ | ∫ | ∫ | интеграл |
∀ | ∀ | ∀ | для всех (видно только если жирным шрифтом) |
∃ | ∃ | ∃ | существует |
∅ | ∅ | ∅ | пустое множество |
Ø | Ø | Ø | диаметр |
∈ | ∈ | ∈ | принадлежит |
∉ | ∉ | ∉ | не принадлежит |
∋ | ∋ | ∗ | содержит |
⊂ | ⊂ | ⊂ | является подмножеством |
⊃ | ⊃ | ⊃ | является надмножеством |
⊄ | ⊄ | ⊄ | не является подмножеством |
⊆ | ⊆ | ⊆ | является подмножеством либо равно |
⊇ | ⊇ | ⊇ | является надмножеством либо равно |
⊕ | ⊕ | ⊕ | плюс в кружке |
⊗ | ⊗ | ⊗ | знак умножения в кружке |
⊥ | ⊥ | ⊥ | перпендикулярно |
∠ | ∠ | ∠ | угол |
∧ | ∧ | ∧ | логическое И |
∨ | ∨ | ∨ | логическое ИЛИ |
∩ | ∩ | ∩ | пересечение |
∪ | ∪ | ∪ | объединение |
знаки валют | |||
₽ | ₽ | Рубль. Знак рубля должен использоваться с отбивкой от числа. Стандарт Юникод 7.0. Если Вы не видите изображение, обновите свои Unicode-шрифты. | |
€ | € | € | Евро |
¢ | ¢ | ¢ | Цент |
£ | £ | £ | Фунт |
¤ | ¤ | ¤ | Знак валюты |
¥ | ¥ | ¥ | Знак йены и юаня |
ƒ | ƒ | ƒ | Знак флорина |
маркеры | |||
. | простой маркер | ||
○ | ○ | круг | |
· | · | · | средняя точка |
† | † | крестик | |
‡ | ‡ | двойной крестик | |
♠ | ♠ | ♠ | пики |
♣ | ♣ | ♣ | трефы |
червы | |||
♦ | ♦ | ♦ | бубны |
◊ | ◊ | ◊ | ромб |
✏ | ✏ | карандаш | |
✎ | ✎ | карандаш | |
✐ | ✐ | карандаш | |
✍ | ✍ | рука | |
кавычки | |||
" | " | " | двойная кавычка |
& | & | & | амперсанд |
« | « | « | левая типографская кавычка (кавычка-елочка) |
» | » | » | правая типографская кавычка (кавычка-елочка) |
‹ | ‹ | одиночная угловая кавычка открывающая | |
› | › | одиночная угловая кавычка закрывающая | |
′ | ′ | ′ | штрих (минуты, футы) |
″ | ″ | ″ | двойной штрих (секунды, дюймы) |
‘ | ‘ | ‘ | левая верхняя одиночная кавычка |
’ | ’ | ’ | правая верхняя одиночная кавычка |
‚ | ‚ | ‚ | правая нижняя одиночная кавычка |
“ | “ | “ | кавычка-лапка левая |
” | ” | ” | кавычка-лапка правая верхняя |
„ | „ | „ | кавычка-лапка правая нижняя |
❛ | ❛ | одиночная английская кавычка открывающая | |
❜ | ❜ | одиночная английская кавычка закрывающая | |
❝ | ❝ | двойная английская кавычка открывающая | |
❞ | ❞ | двойная английская кавычка закрывающая | |
стрелки | |||
← | ← | ← | стрелка влево |
стрелка вверх | |||
→ | → | → | стрелка вправо |
↓ | ↓ | ↓ | стрелка вниз |
↔ | ↔ | ↔ | стрелка влево и вправо |
↕ | ↕ | стрелка вверх и вниз | |
↵ | ↵ | ↵ | возврат каретки |
⇐ | ⇐ | ⇐ | двойная стрелка влево |
⇑ | ⇑ | ⇑ | двойная стрелка вверх |
⇒ | ⇒ | ⇒ | двойная стрелка вправо |
⇓ | ⇓ | ⇓ | двойная стрелка вниз |
⇔ | ⇔ | ⇔ | двойная стрелка влево и вправо |
⇕ | ⇕ | двойная стрелка вверх и вниз | |
▲ | ▲ | треугольная стрелка вверх | |
▼ | ▼ | треугольная стрелка вниз | |
треугольная стрелка вправо | |||
◄ | ◄ | треугольная стрелка влево | |
звездочки, снежинки | |||
☃ | ☃ | Снеговик | |
❄ | ❄ | Снежинка | |
❅ | ❅ | Зажатая трилистниками снежинка | |
❆ | ❆ | Жирная остроугольная снежинка | |
★ | ★ | Закрашенная звезда | |
☆ | ☆ | Незакрашенная звезда | |
✪ | ✪ | Незакрашенная звезда в закрашенном круге | |
✫ | ✫ | Закрашенная звезда с незакрашенным кругом внутри | |
✯ | ✯ | Вращающаяся звезда | |
⚝ | ⚝ | Начерченная белая звезда | |
⚪ | ⚪ | Средний незакрашенный круг | |
⚫ | ⚫ | Средний закрашенный круг | |
⚹ | ⚹ | Секстиле (типа снежинка) | |
✵ | ✵ | Восьмиконечная вращающаяся звезда | |
❉ | ❉ | Звёздочка с шарообразными окончаниями | |
❋ | ❋ | Жирная восьмиконечная каплеобразная звёздочка-пропеллер | |
✺ | ✺ | Шестнадцатиконечная звёздочка | |
✹ | ✹ | Двенадцатиконечная закрашенная звезда | |
✸ | ✸ | Жирная восьмиконечная прямолинейная закрашенная звезда | |
✶ | ✶ | Шестиконечная закрашенная звезда | |
✷ | ✷ | Восьмиконечная прямолинейная закрашенная звезда | |
✴ | ✴ | Восьмиконечная закрашенная звезда | |
✳ | ✳ | Восьмиконечная звёздочка | |
✲ | ✲ | Звёздочка с незакрашенным центром | |
✱ | ✱ | Жирная звёздочка | |
✧ | ✧ | Заострённая четырёхконечная незакрашенная звезда | |
✦ | ✦ | Заострённая четырёхконечная закрашенная звезда | |
⍟ | ⍟ | Звезда в круге | |
⊛ | ⊛ | Снежинка в круге | |
часы, время | |||
⏰ | ⏰ | Часы | |
⌚ | ⌚ | Часы | |
⌛ | ⌛ | Песочные часы | |
⏳ | ⏳ | Песочные часы |
Существует довольно интересный способ получения кода Html мнемоник для необходимого вам знака. Для этого достаточно будет открыть редактор Microsoft Word, создать новый документ и выбрать из верхнего меню «Вставка» — «Символ» (я пользуюсь 2003 версией, поэтому не знаю как сделать аналогичную операцию в более поздних версиях).
В открывшемся окне вам нужно выбрать шрифт, например, Times New Roman (или любой другой, который заведомо будет присутствовать на большинстве компьютеров посетителей вашего сайта — Courier или Arial, к примеру).
Добавьте из открывшегося списка в свой документ Word все нужные вам спецсимволы и сохраните данный вордовский документ как веб страницу (выбирается из выпадающего списка «.html» при сохранении). Ну, а затем вам лишь останется открыть эту веб страницу в любом Html редакторе (все тот же Notepad++ подойдет) и вы увидите все цифровые коды нужных вам мнемоник:
Способ немного сложноватый, но если приспичит использовать на странице своего сайта какой-нибудь редкий спецсимвол, то это будет проще, чем отыскивать в сети интернет таблицы, подобные приведенной чуть выше. Полученный код спецсимвола вам нужно будет вставить в нужное место и вместо него на веб странице браузер отобразит нужный вам знак (например, неразрывный пробел).
Неразрывный пробел и мягкий перенос в примерах
Как я уже упоминал выше и как вы можете видеть из приведенной чуть выше таблицы спецсимволов, некоторые мнемоники в Html получили кроме цифрового еще и символьное обозначение для их более простого запоминания. Т.е. вместо знака решетки «#» (хеша) в символьных вариантах используются слова. Например, все тот же неразрывный пробел может быть записан либо как (цифровая мнемоника), либо как (символьная).
При написании статей, если вам потребуется вставить в текст документа знак амперсанда (&) или открывающей угловой скобки (<), то для этого обязательно нужно использовать спецсимволы. Дело в том, что эти знаки в Html означают начало тега и браузер будет рассматривать их именно с этой точки зрения и отображать в тексте не будет.
Т.е., если вы пишите статью, в которой вам нужно будет в текст вставить, например, отображение тега < body> или же вам просто нужно вставить знак меньше (<), то сделав это без использования подстановок на веб странице вы ничего не увидите, т.к. браузер, обнаружив «<» , поймет, что это Html тег, а не текст статьи.
Поэтому вам нужно будет вставить для решения подобной задачи следующую конструкцию:
Тоже самое касается и отображения кода самих мнемоник, ибо они начинаются с амперсанда. Вам нужно будет вставить в текст код с заменой знака амперсанда на его подстановку (спецсимвол):
Это нужно будет сделать, чтобы получить на странице <, а не отображение левой угловой скобки (<), в которую преобразует браузер мнемонику <, обнаружив при разборе знак амперсанда. Хитро, но вы все поймете попробовав это на практике.
Также вы скорее всего будет использовать неразрывный пробел, который на веб странице будет выглядеть как обычный пробел, но при этом браузер не будет воспринимать его как пробельный символ вообще и не будет осуществлять по нему перенос (например, это будет уместно для таких словосочетаний, как 1400 гБ и т.п., которые не желательно будет разносить переносом по разным строкам):
1400 гБ.
Иногда может возникнуть обратная ситуация, когда в тексте присутствуют очень длинные слова и хочется сделать так, чтобы при возникновении необходимости браузер мог бы разбивать это слова переносом . Для таких целей предусмотрен спецсимвол «мягкий перенос» -
Длинноепредлин­ноеслово;
При возникновении необходимости перехода на другую строку, браузер вместо мнемоники мягкого переноса поставит дефис и отправит оставшуюся часть слова на следующую строку. Если места для размещения всего этого слова на одной строке будет достаточно, то никакого перевода строки браузер рисовать не будет. Вот так вот все просто.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
MailTo - что это и как в Html создать ссылку для отправки Емейла
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Как вставить в HTML ссылку и картинку (фото) - теги IMG и A
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Списки в Html коде - теги UL, OL, LI и DL
Ряд цифр и букв имеют внешне схожее начертание,
малоразличимое при небольшом размере шрифта.
Например, цифры "0", "1" и буквы
"О", "l" (L).
Это является серьёзной проблемой, особенно в тех случаях,
когда необходимо строго однозначное прочтение
символов. К примеру, при записи ручкой на листке бумаги
или печати на принтере своего буквенно-цифрового
пароля. Решением данной проблемы пришлось
заниматься первым программистам и
фонт-дизайнерам (в XX-м веке, в самом начале
компьютерной эры). Давно уже, появились
специальные контрастные шрифты, такие как
Inconsolata, Consolas (системный в OS Windows), Anonymous Pro, Deja Vu Sans Mono и многие другие.
Некоторые из них можно бесплатно скачать по ссылкам с
сайтов их авторов-создателей и с профильных Интернет-ресурсов.
Смотреть пример:
http://www.levien.com/type/myfonts/inconsolata.html
Если допускается техническими условиями и
проектным заданием, то вместо цифрового нуля, в
HTML-код ставится
"Ø" (latin capital letter O with stroke, с косым штрихом,
из модификации латинского алфавита для
скандинавских языков -
норвежского и датского), приблизительно похожий,
своим начертанием, на перечёркнутый пополам
нолик. В текстовом редакторе -
такой значок берётся, копируется из таблицы
спецсимволов (Special Character), и вставляется в нужную
позицию в строке. Данный
лайфхак-приём будет полезен, если возникают
сложности с поиском и установкой на девайс
специального фонта. Этот совет позволит
сэкономить время и не перепутать цифру "0"
(zero) с буквой "О" не только на мониторе вашего
ПК, но и на экранах других
устройств, где может не оказаться нужного шрифта.
Такая форма записи, традиционно, применяется при
обозначении на листе бумаги
смешанной, буквенно-цифровой информации,
например, своего пароля, кода доступа.
Примечательно, что даже есть шутливое выражение
" ", подчёркивающее важность
наличия этого элемента, наделяющего
символ определённым смыслом и значением.
Графический вид нуля в разных типах шрифтов -
можно посмотреть и сравнить их изображение на
картинках с помощью специализированного сервиса
на странице сайта:
http://www.fileformat.info/info/unicode/char/0030/fontsupport.htm
Рисунок 2
При редактировании и правке текста, перечёркивание неправильно написанного или ненужного символа - производится большим косым крестиком (двумя крест-накрест перекрещивающимися диагональными штрихами равной длины). В текстовом редакторе это осуществляется средствами форматирования - сначала выделяется фрагмент, а затем в меню нажимается последовательность кнопок и вкладок (Format - Character - Font Effects - Strikethrough) для выбора из выпадающих списков необходимого эффекта. Зачёркивание одного или нескольких слов в строчке или в целом абзаце документа - делается с помощью горизонтальной одинарной или двойной линии, достаточной толщины.
Если нужно точно выяснить, что в тексте написано - буква или цифра, то можно, в режиме поиска на странице, задать нужный символ и убедиться, что он будет найден именно там.