Как вставить символ в html
Содержание
Иногда стандартных символов оказывается недостаточно для разработки хорошего дизайна страницы. На этот случай существует возможность использовать специальные символы. Их применение сводится ко вставке в html-код страницы ASCII-кодов этих символов. Делается это, например, так:
© Copyright by Каратель
© Copyright by Каратель
В результате чего ваши посетители увидят:
© Copyright by Каратель
В текстовых редакторах, строке чата, да и вообще где угодно, вставить символ можно следующим образом: нажимаете клавишу NumLock (включаете цифровую часть клавиатуры), затем, удерживая клавишу Alt, набираете код символа (набираете только цифры; например, для вставки символа с кодом © Вам нужно нажать Alt, и, не отпуская его, набрать 169), потом отпускаете Alt. Правда, вставить символ из другого шрифта таким образом не получится.
Вот некоторые из этих кодов для обычного шрифта:
| ƒ — ƒ † — † ‡ — ‡ ‰ — ‰ • — • ™ — ™ ¨ — ¨ © — © ® — ® ¯ — ¯ ° — ° ± — ± ² — ² ³ — ³ ¶ — ¶ · — · ¹ — ¹ ¼ — ¼ ½ — ½ ¾ — ¾ ⅛ — ⅛ ⅜ — ⅜ ⅝ — ⅝ ⅞ — ⅞ ¿ — ¿ × — × Ø — Ø ŋ — ŋ Ω — Ω Δ — Δ Θ — Θ Ξ — Ξ Σ — Σ Ψ — Ψ α — α β — β |
γ — γ δ — δ η — η θ — θ λ — λ ν — ν ξ — ξ π — π ρ — ρ φ — φ ψ — ψ ω — ω Є — Є а — а б — б в — в г — г д — д е — е ж — ж з — з и — и й — й к — к л — л м — м н — н о — о п — п р — р с — с т — т у — у ф — ф х — х ц — ц |
ч — ч ш — ш щ — щ ъ — ъ ы — ы ь — ь э — э ю — ю я — я ☺ — ☺ ☻ — ☻ ☼ — ☼ ♀ — ♀ ♂ — ♂ ♠ — ♠ ♣ — ♣ ♥ — ♥ ♦ — ♦ ♪ — ♪ ♫ — ♫ ◦ — ◦ ◙ — ◙ ◘ — ◘ ● — ● ○ — ○ ◊ — ◊ ◄ — ◄ ▼ — ▼ ► — ► ▲ — ▲ ▪ — ▪ ▫ — ▫ ▬ — ▬ ■ — ■ ▓ — ▓ ▒ — ▒ |
░ — ░ ▐ — ▐ █ — █ ▄ — ▄ ▀ — ▀ ℮ — ℮ ℓ — ℓ ℅ — ℅ ₪ — ₪ ₧ — ₧ ⁿ — ⁿ ≠ — ≠ ≡ — ≡ ≤ — ≤ ≥ — ≥ ≈ — ≈ ∫ — ∫ ∩ — ∩ ∟ — ∟ ∞ — ∞ √ — √ ∙ — ∙ ∏ — ∏ ∂ — ∂ ↕ — ↕ ↔ — ↔ ↓ — ↓ → — → ↑ — ↑ ← — ← ═ — ═ ║ — ║ ╒ — ╒ ╓ — ╓ ╔ — ╔ ╕ — ╕ |
╖ — ╖ ╗ — ╗ ╘ — ╘ ╙ — ╙ ╚ — ╚ ╛ — ╛ ╜ — ╜ ╝ — ╝ ╞ — ╞ ╟ — ╟ ╠ — ╠ ╡ — ╡ ╢ — ╢ ╣ — ╣ ╤ — ╤ ╥ — ╥ ╦ — ╦ ╧ — ╧ ╨ — ╨ ╩ — ╩ ╪ — ╪ ╫ — ╫ ╬ — ╬ ¡ — ¡ ؛ — ؛ ؟ — ؟ ٭ — ٭ ۖ — ۖ ı — ı þ — þ κ — κ |
Существуют специальные шрифты, состоящие из одних картинок, созданные для "беспроблемного" введения графики на страницы. По-английски они называются dingbats — поищите на специализированных сайтах ;). Одним из таких шрифтов является Webdings. Он хорош тем, что поставляется в составе Internet Explorer, поэтому присутствует у большинства пользователей Windows. Это означает, что то, что Вы напечатали этим шрифтом, на другом компьютере будет с большой долей вероятности выглядеть так же, как и у Вас. Вот раскладка символов для него:
| ! — ! @ — @ # — # $ — $ % — % ^ — ^ & — & * — * ( — ( ) — ) _ — _ + — + 1 — 1 2 — 2 3 — 3 4 — 4 5 — 5 6 — 6 7 — 7 8 — 8 9 — 9 0 — 0 A — A B — B C — C D — D E — E F — F G — G H — H I — I J — J K — K L — L M — M N — N |
O — O P — P R — R S — S T — T U — U W — W V — V X — X Y — Y Z — Z ` — ` a — a b — b d — d e — e f — f g — g h — h i — i j — j k — k l — l m — m n — n o — o p — p q — q r — r s — s t — t u — u v — v w — w x — x y — y |
z — z ~ — |
 — ?
‚ — ‚
ƒ — ѓ
„ — „
… — …
† — †
‡ — ‡
ˆ — ˆ
‰ — ‰
Š — Š
‹ — ‹
Œ — Œ
 — ?
Ž — Ž
 — ?
 — ?
‘ — ‘
’ — ’
“ — “
” — ”
• — •
– — –
— — —
˜ — ˜
› — ›
¡ — ¡
£ — £
¤ — ¤
¥ — ¥
¦ — ¦
§ — §
¨ — ¨
© — ©
ª — ª
® — ®
° — °
± — ±
² — ²
³ — ³
´ — ´
µ — µ
· — ·
¸ — ¸
¹ — ¹
º — º
» — »
¾ — ¾
¿ — ¿
À — À
Á — Á
 — Â
à — Ã
Ä — Ä
Å — Å
Ç — Ç
È — È
É — É
Ê — Ê
Ë — Ë
Ì — Ì
Í — Í
Î — Î
Ï — Ï
Ð — Ð
Ñ — Ñ
Ò — Ò
Ó — Ó
Ô — Ô
Õ — Õ
Ý — Ý
Þ — Þ
à — à
á — á
â — â
ã — ã
ä — ä
å — å
æ — æ
ç — ç
è — è
é — é
ë — ë
ì — ì
ñ — ñ
ò — ò
ó — ó
ô — ô
õ — õ
ö — ö
Ч — Ч
Ш — Ш
Щ — Щ
Ъ — Ъ
Ы — Ы
Ь — Ь
ч — ч
ш — ш
щ — щ
ы — ы
ь — ь
э — э
ю — ю
я — я
Еще один шрифт, который стоит практически у всех пользователей Windows — это Wingdings. Ниже приведена таблица кодов для него.
| ! — ! " — " # — # $ — $ % — % & — & ‘ — ‘ ( — ( ) — ) * — * + — + , — , — — — . — . / — / 0 — 0 1 — 1 2 — 2 3 — 3 4 — 4 5 — 5 6 — 6 7 — 7 8 — 8 9 — 9 : — : ; — ; = — = |
E — E F — D G — G H — H I — I J — J K — K L — L M — M N — N O — O P — P Q — Q R — R S — S T — T U — U V — V W — W X — X Y — Y Z — Z [ — [ — ] — ] ^ — ^ _ — _ ` — ` a — a b — b c — c d — d e — e f — f g — g |
h — h i — i j — j k — k l — l m — m n — n o — o p — p q — q r — r s — s t — t u — u v — v w — w x — x y — y z — z < — < | — | — € — ? — ‚ — ƒ — „ — … — † — ‡ — ˆ — ‰ — Š — ‹ — Œ — ? |
— Ž — ? — ? — ‘ — ’ — “ — ” — • — – — — — ˜ — ™ — š — › — œ — ? — ž — Ÿ — ¡ — ¡ ¢ — ¢ £ — £ ¤ — ¤ ¥ — ¥ ¦ — ¦ § — § ¨ — ¨ © — © ª — ª « — « ¬ — ¬ — ® — ® ¯ — ¯ ° — ° |
± — ± ² — ² ³ — ³ ´ — ´ µ — µ ¶ — ¶ Ã — Ã Ä — Ä Å — Å Æ — Æ Ç — Ç È — È É — É Ê — Ê Ë — Ë Ì — Ì Í — Í Î — Î Ï — Ï Ð — Ð Ñ — Ñ Ò — Ò Ó — Ó Ô — Ô Õ — Õ Ö — Ö û — û ü — ü ý — ý þ — þ ÿ — ÿ |
Для некоторых значков введены буквенные коды, которые можно использовать вместо цифровых:
Спецсимволы HTML – это специальные языковые конструкции, которые ссылаются на символы из набора символов, используемых в текстовых файлов. В таблице приведен список зарезервированных и специальных символов, которые не могут быть добавлены в исходный код HTML-документа с помощью клавиатуры:
- символы, которые невозможно ввести с помощью клавиатуры (например символ копирайта)
- символы предназначенные для разметки (например знак больше или меньше)
Такие символы добавляются с помощью числового кода или имени.
Для добавления любого символа, перечисленного ниже, на вашу веб-страницу, просто вставьте код символа (или его имя) в месте, где требуется отобразить выбранный символ. Подробнее об использовании спецсимволов и пример добавления их на страницу смотрите в разделе "Зачем нужны спецсимволы и как ими пользоваться".
| Символ | Числовой код | Имя символа | Описание |
|---|---|---|---|
| " | " | " | знак кавычки |
| ‘ | ‘ | ‘ | апостроф |
| & | & | & | амперсанд |
| > | > | знак больше | |
| неразрывный пробел (Неразрывный пробел — это пробел отображающийся внутри строки как обычный пробел, но не позволяющий программам отображения и печати разорвать в этом месте строку.) | |||
| ¡ | ¡ | ¡ | перевернутый восклицательный знак |
| ¢ | ¢ | ¢ | цент |
| £ | £ | £ | фунт |
| ¤ | ¤ | ¤ | валюты |
| ¥ | ¥ | ¥ | йен |
| ¦ | ¦ | ¦ | сломанная вертикальная черта |
| § | § | § | секция |
| ¨ | ¨ | ¨ | интервал (кириллица) |
| © | © | © | знак копирайта |
| ª | ª | ª | женский порядковый показатель |
| « | « | « | французские кавычки (ёлочки) — левая |
| ¬ | ¬ | ¬ | отрицание-выражения |
| ® | ® | ® | зарегистрированная торговая марка |
| ¯ | ¯ | ¯ | макрон интервал |
| ° | ° | ° | градус |
| ± | ± | ± | плюс или минус |
| ² | ² | ² | верхний индекс 2 |
| ³ | ³ | ³ | верхний индекс 3 |
| ´ | ´ | ´ | острый интервал |
| µ | µ | µ | микро |
| ¶ | ¶ | ¶ | параграф |
| · | · | · | средняя точка |
| ¸ | ¸ | ¸ | интервал седиль |
| ¹ | ¹ | ¹ | верхний индекс 1 |
| º | º | º | мужской порядковый показатель |
| » | » | » | французские кавычки (ёлочки) — правая |
| ¼ | ¼ | ¼ | 1/4 часть |
| ½ | ½ | ½ | 1/2 часть |
| ¾ | ¾ | ¾ | 3/4 части |
| ¿ | ¿ | ¿ | перевернутый знак вопроса |
| × | × | × | умножение |
| ÷ | ÷ | ÷ | деление |
| ́ | ́ | ударение | |
| Œ | Œ | Œ | лигатура прописная OE |
| œ | œ | œ | строчная лигатура oe |
| Š | Š | Š | S с короной |
| š | š | š | строчная S с короной |
| Ÿ | Ÿ | Ÿ | прописная Y с диадемой |
| ƒ | ƒ | ƒ | f с крюком |
| ˆ | ˆ | ˆ | дикриатический акцент |
| ˜ | ˜ | ˜ | маленькая тильда |
| – | – | – | тире |
| — | — | — | длинное тире |
| ‘ | ‘ | ‘ | левая одиночная кавычка |
| ’ | ’ | ’ | правая одиночная кавычка |
| ‚ | ‚ | ‚ | нижняя одиночная кавычка |
| “ | “ | “ | левые двойные кавычки |
| ” | ” | ” | правые двойные кавычки |
| „ | „ | „ | нижние двойные кавычки |
| † | † | † | кинжал |
| ‡ | ‡ | ‡ | двойной кинжал |
| • | • | • | пуля |
| … | … | … | горизонтальное многоточие |
| ‰ | ‰ | ‰ | промилле (тысячные доли) |
| ′ | ′ | ′ | минуты |
| ″ | ″ | ″ | секунды |
| ‹ | ‹ | ‹ | одиночная левая угловая кавычка |
| › | › | › | одиночная правая угловая кавычка |
| ‾ | ‾ | ‾ | надчеркивание |
| € | € | € | евро |
| ™ | ™ или | ™ | торговая марка |
| ← | ← | ← | стрелка влево |
| ↑ | ↑ | ↑ | стрелка вверх |
| → | → | → | стрелка вправо |
| ↓ | ↓ | ↓ | стрелка вниз |
| ↔ | ↔ | ↔ | двухсторонняя стрелка |
| ↵ | ↵ | ↵ | стрелка возврата каретки |
| ⌈ | ⌈ | ⌈ | левый верхний угол |
| ⌉ | ⌉ | ⌉ | правый верхний угол |
| ⌊ | ⌊ | ⌊ | левый нижний угол |
| ⌋ | ⌋ | ⌋ | правый нижний угол |
| ◊ | ◊ | ◊ | ромб |
| ♠ | ♠ | ♠ | пики |
| ♣ | ♣ | ♣ | крести |
| ♥ | ♥ | ♥ | черви |
| ♦ | ♦ | ♦ | буби |
Математические символы, поддерживаемые в HTML
| Символ | Числовой код | Имя символа | Описание |
|---|---|---|---|
| ∀ | ∀ | ∀ | для любых, для всех |
| ∂ | ∂ | ∂ | часть |
| ∃ | ∃ | ∃ | существует |
| ∅ | ∅ | ∅ | пустое множество |
| ∇ | ∇ | ∇ | оператор Гамильтона ("набла") |
| ∈ | ∈ | ∈ | принадлежит множеству |
| ∉ | ∉ | ∉ | не принадлежит множеству |
| ∋ | ∋ | ∋ | или |
| ∏ | ∏ | ∏ | произведение |
| ∑ | ∑ | ∑ | сумма |
| − | − | − | минус |
| ∗ | ∗ | ∗ | умножение или оператор сопряженный к |
| × | × | × | знак умножения |
| √ | √ | √ | квадратный корень |
| ∝ | ∝ | ∝ | пропорциональность |
| ∞ | ∞ | ∞ | бесконечность |
| ⋮ | ⋮ | кратность | |
| ∠ | ∠ | ∠ | угол |
| ∧ | ∧ | ∧ | и |
| ∨ | ∨ | ∨ | или |
| ∩ | ∩ | ∩ | пересечение |
| ∪ | ∪ | ∪ | объединение |
| ∫ | ∫ | ∫ | интеграл |
| ∴ | ∴ | ∴ | поэтому |
| ∼ | ∼ | ∼ | подобно |
| ≅ | ≅ | ≅ | сравнимо |
| ≈ | ≈ | ≈ | приблизительно равно |
| ≠ | ≠ | ≠ | не равно |
| ≡ | ≡ | ≡ | идентично |
| ≤ | ≤ | ≤ | меньше или равно |
| ⩽ | ⩽ ⩽ |
⩽ ⩽ |
меньше или равно |
| ≥ | ≥ | ≥ | больше или равно |
| ⩾ | ⩾ ⩾ |
⩾ ⩾ |
больше или равно |
| ⊂ | ⊂ | ⊂ | подмножество |
| ⊃ | ⊃ | ⊃ | надмножестов |
| ⊄ | ⊄ | ⊄ | не подмножество |
| ⊆ | ⊆ | ⊆ | подмножество |
| ⊇ | ⊇ | ⊇ | надмножество |
| ⊕ | ⊕ | ⊕ | прямая сумма |
| ⊗ | ⊗ | ⊗ | тензерное произведение |
| ⊥ | ⊥ | ⊥ | перпендикуляр |
| ⋅ | ⋅ | ⋅ | оператор точка |
Греческий и коптский алфавиты
| Символ | Числовой код | Шестнадцатеричный код | Имя символа |
|---|---|---|---|
| Ͱ | Ͱ | Ͱ | |
| ͱ | ͱ | ͱ | |
| Ͳ | Ͳ | Ͳ | |
| ͳ | ͳ | ͳ | |
| ʹ | ʹ | ʹ | |
| ͵ | ͵ | ͵ | |
| Ͷ | Ͷ | Ͷ | |
| ͷ | ͷ | ͷ | |
| ͺ | ͺ | ͺ | |
| ͻ | ͻ | ͻ | |
| ͼ | ͼ | ͼ | |
| ͽ | ͽ | ͽ | |
| ; | ; | ; | |
| ΄ | ΄ | ΄ | |
| ΅ | ΅ | ΅ | |
| Ά | Ά | Ά | |
| · | · | · | |
| Έ | Έ | Έ | |
| Ή | Ή | Ή | |
| Ί | Ί | Ί | |
| Ό | Ό | Ό | |
| Ύ | Ύ | Ύ | |
| Ώ | Ώ | Ώ | |
| ΐ | ΐ | ΐ | |
| Α | Α | Α | Α |
| Β | Β | Β | Β |
| Γ | Γ | Γ | Γ |
| Δ | Δ | Δ | Δ |
| Ε | Ε | Ε | Ε |
| Ζ | Ζ | Ζ | Ζ |
| Η | Η | Η | Η |
| Θ | Θ | Θ | Θ |
| Ι | Ι | Ι | Ι |
| Κ | Κ | Κ | Κ |
| Λ | Λ | Λ | Λ |
| Μ | Μ | Μ | Μ |
| Ν | Ν | Ν | Ν |
| Ξ | Ξ | Ξ | Ξ |
| Ο | Ο | Ο | Ο |
| Π | Π | Π | Π |
| Ρ | Ρ | Ρ | Ρ |
| Σ | Σ | Σ | Σ |
| Τ | Τ | Τ | Τ |
| Υ | Υ | Υ | Υ |
| Φ | Φ | Φ | Φ |
| Χ | Χ | Χ | Χ |
| Ψ | Ψ | Ψ | Ψ |
| Ω | Ω | Ω | Ω |
| Ϊ | Ϊ | Ϊ | |
| Ϋ | Ϋ | Ϋ | |
| ά | ά | ά | |
| έ | έ | έ | |
| ή | ή | ή | |
| ί | ί | ί | |
| ΰ | ΰ | ΰ | |
| α | α | α | α |
| β | β | β | β |
| γ | γ | γ | γ |
| δ | δ | δ | δ |
| ε | ε | ε | ε |
| ζ | ζ | ζ | ζ |
| η | η | η | η |
| θ | θ | θ | θ |
| ι | ι | ι | ι |
| κ | κ | κ | κ |
| λ | λ | λ | λ |
| μ | μ | μ | μ |
| ν | ν | ν | ν |
| ξ | ξ | ξ | ξ |
| ο | ο | ο | ο |
| π | π | π | π |
| ρ | ρ | ρ | ρ |
| ς | ς | ς | ς |
| σ | σ | σ | σ |
| τ | τ | τ | τ |
| υ | υ | υ | υ |
| φ | φ | φ | φ |
| χ | χ | χ | χ |
| ψ | ψ | ψ | ψ |
| ω | ω | ω | ω |
| ϊ | ϊ | ϊ | |
| ϋ | ϋ | ϋ | |
| ό | ό | ό | |
| ύ | ύ | ύ | |
| ώ | ώ | ώ | |
| Ϗ | Ϗ | Ϗ | |
| ϐ | ϐ | ϐ | |
| ϑ | ϑ | ϑ | ϑ |
| ϒ | ϒ | ϒ | ϒ |
| ϓ | ϓ | ϓ | |
| ϔ | ϔ | ϔ | |
| ϕ | ϕ | ϕ | ϕ |
| ϖ | ϖ | ϖ | ϖ |
| ϗ | ϗ | ϗ | |
| Ϙ | Ϙ | Ϙ | |
| ϙ | ϙ | ϙ | |
| Ϛ | Ϛ | Ϛ | |
| ϛ | ϛ | ϛ | |
| Ϝ | Ϝ | Ϝ | Ϝ |
| ϝ | ϝ | ϝ | ϝ |
| Ϟ | Ϟ | Ϟ | |
| ϟ | ϟ | ϟ | |
| Ϡ | Ϡ | Ϡ | |
| ϡ | ϡ | ϡ | |
| Ϣ | Ϣ | Ϣ | |
| ϣ | ϣ | ϣ | |
| Ϥ | Ϥ | Ϥ | |
| ϥ | ϥ | ϥ | |
| Ϧ | Ϧ | Ϧ | |
| ϧ | ϧ | ϧ | |
| Ϩ | Ϩ | Ϩ | |
| ϩ | ϩ | ϩ | |
| Ϫ | Ϫ | Ϫ | |
| ϫ | ϫ | ϫ | |
| Ϭ | Ϭ | Ϭ | |
| ϭ | ϭ | ϭ | |
| Ϯ | Ϯ | Ϯ | |
| ϯ | ϯ | ϯ | |
| ϰ | ϰ | ϰ | ϰ |
| ϱ | ϱ | ϱ | ϱ |
| ϲ | ϲ | ϲ | |
| ϳ | ϳ | ϳ | |
| ϴ | ϴ | ϴ | |
| ϵ | ϵ | ϵ | ϵ |
| ϶ | ϶ | ϶ | ϶ |
| Ϸ | Ϸ | Ϸ | |
| ϸ | ϸ | ϸ | |
| Ϲ | Ϲ | Ϲ | |
| Ϻ | Ϻ | Ϻ | |
| ϻ | ϻ | ϻ | |
| ϼ | ϼ | ϼ | |
| Ͻ | Ͻ | Ͻ | |
| Ͼ | Ͼ | Ͼ | |
| Ͽ | Ͽ | Ͽ |
Зачем нужны спецсимволы и как ими пользоваться
Предположим, вы решили описать какой-нибудь тег на вашей странице, но, поскольку браузер использует символы как начало и конец тега, применение их внутри содержимого вашего html-кода может привести к проблемам. Но HTML дает вам легкий способ определять эти и другие специальные символы с помощью простых аббревиатур, называемых ссылками на символы.
Рассмотрим, как это работает. Для каждого символа, который считается специальным или который вы хотите использовать на своей веб-странице, но который невозможно напечатать в вашем редакторе (например, символ авторского права), вы находите аббревиатуру и печатаете ее в html-коде вместо нужного символа. Например, для символа ">" аббревиатура — >, а для символа " очень важен» на своей странице. Вместо этого вам придется воспользоваться ссылками на нужные вам символы для корректного отображения записи, и в итоге ваша запись в коде должна будет выглядеть так:
Еще один специальный символ, о котором вам нужно знать — символ & (амперсанд). Если вы хотите, чтобы он отображался на вашей HTML-странице, используйте ссылку & вместо символа &.
Спецсимволы HTML + CSS
Мнемоника и коды специальных символов html в десятичной и шестнадцатиричной системе, а также инструкция как использовать спецсимволы html через CSS.
Инструкция вставки спецсимволов в HTML
Для вставки специальных символов в HTML код вы можете использовать любое из значений столбиков «Обозначение», «10-ный код» или «16-ный код». Ошибки не будет.
Пример добавления специальных символов:
Вот как это будет выглядеть на странице:
Инструкция вставки спецсимволов через CSS
Для вставки специальных символов через CSS код можно использовать только 16-ный код и не в том виде, что он дан в таблице.
Каждый 16-ный символ в таблице кодируется так — &#x "Шестнадцитиричный код" ;
Если вы хотите добавить символ, то вам нужно скоппировать необходимый "Шестнадцитиричный код" из таблицы (без приставки &#x), поставить перед ним обратный слеш и добавить его при помощи свойства content . Чаше всего также для использования свойства content применяют псевдоклассы :before или :after.
Пример: «закрашенный телефон»: ☎
десятичный код:
шестнадцатиричный код:
css код:
Загрузка...