Символы html5. Спецсимволы HTML
Спецсимволы HTML - это специальные языковые конструкции, которые ссылаются на символы из набора символов, используемых в текстовых файлов. В таблице приведен список зарезервированных и специальных символов, которые не могут быть добавлены в исходный код HTML-документа с помощью клавиатуры:
- символы, которые невозможно ввести с помощью клавиатуры (например символ копирайта)
- символы предназначенные для разметки (например знак больше или меньше)
Такие символы добавляются с помощью числового кода или имени.
Символ | Числовой код | Имя символа | Описание |
---|---|---|---|
" | " | " | знак кавычки |
" | " | " | апостроф |
& | & | & | амперсанд |
< | < | знак меньше | |
> | > | > | знак больше |
неразрывный пробел (Неразрывный пробел - это пробел отображающийся внутри строки как обычный пробел, но не позволяющий программам отображения и печати разорвать в этом месте строку.) | |||
¡ | ¡ | ¡ | перевернутый восклицательный знак |
¢ | ¢ | ¢ | цент |
£ | £ | £ | фунт |
¤ | ¤ | ¤ | валюты |
¥ | ¥ | ¥ | йен |
¦ | ¦ | ¦ | сломанная вертикальная черта |
§ | § | § | секция |
¨ | ¨ | ¨ | интервал (кириллица) |
© | знак копирайта | ||
ª | ª | ª | женский порядковый показатель |
« | « | « | французские кавычки (ёлочки) - левая |
¬ | ¬ | ¬ | отрицание-выражения |
® | ® | ® | зарегистрированная торговая марка |
¯ | ¯ | ¯ | макрон интервал |
° | ° | ° | градус |
± | ± | ± | плюс или минус |
² | ² | ² | верхний индекс 2 |
³ | ³ | ³ | верхний индекс 3 |
´ | ´ | ´ | острый интервал |
µ | µ | µ | микро |
¶ | ¶ | ¶ | параграф |
· | · | · | средняя точка |
¸ | ¸ | ¸ | интервал седиль |
¹ | ¹ | ¹ | верхний индекс 1 |
º | º | º | мужской порядковый показатель |
» | » | » | французские кавычки (ёлочки) - правая |
¼ | ¼ | ¼ | 1/4 часть |
½ | ½ | ½ | 1/2 часть |
¾ | ¾ | ¾ | 3/4 части |
¿ | ¿ | ¿ | перевернутый знак вопроса |
× | × | × | умножение |
÷ | ÷ | ÷ | деление |
́ | ́ | ударение | |
Œ | Œ | Œ | лигатура прописная OE |
œ | œ | œ | строчная лигатура oe |
Š | Š | Š | S с короной |
š | š | š | строчная S с короной |
Ÿ | Ÿ | Ÿ | прописная Y с диадемой |
ƒ | ƒ | ƒ | f с крюком |
ˆ | ˆ | ˆ | дикриатический акцент |
˜ | ˜ | ˜ | маленькая тильда |
– | – | - | тире |
— | — | — | длинное тире |
‘ | ‘ | ‘ | левая одиночная кавычка |
’ | ’ | ’ | правая одиночная кавычка |
‚ | ‚ | ‚ | нижняя одиночная кавычка |
“ | “ | “ | левые двойные кавычки |
” | ” | ” | правые двойные кавычки |
„ | „ | „ | нижние двойные кавычки |
† | † | † | кинжал |
‡ | ‡ | ‡ | двойной кинжал |
. | пуля | ||
… | … | … | горизонтальное многоточие |
‰ | ‰ | ‰ | промилле (тысячные доли) |
′ | ′ | ′ | минуты |
″ | ″ | ″ | секунды |
‹ | ‹ | ‹ | одиночная левая угловая кавычка |
› | › | › | одиночная правая угловая кавычка |
‾ | ‾ | ‾ | надчеркивание |
€ | € | € | евро |
™ | ™ или | ™ | торговая марка |
← | ← | ← | стрелка влево |
стрелка вверх | |||
→ | → | → | стрелка вправо |
↓ | ↓ | ↓ | стрелка вниз |
↔ | ↔ | ↔ | двухсторонняя стрелка |
↵ | ↵ | ↵ | стрелка возврата каретки |
⌈ | ⌈ | ⌈ | левый верхний угол |
⌉ | ⌉ | ⌉ | правый верхний угол |
⌊ | ⌊ | ⌊ | левый нижний угол |
⌋ | ⌋ | ⌋ | правый нижний угол |
◊ | ◊ | ◊ | ромб |
♠ | ♠ | ♠ | пики |
♣ | ♣ | ♣ | крести |
черви | |||
♦ | ♦ | ♦ | буби |
Математические символы, поддерживаемые в HTML
Символ | Числовой код | Имя символа | Описание |
---|---|---|---|
∀ | ∀ | ∀ | для любых, для всех |
∂ | ∂ | ∂ | часть |
∃ | ∃ | ∃ | существует |
∅ | ∅ | ∅ | пустое множество |
∇ | ∇ | ∇ | оператор Гамильтона ("набла") |
∈ | ∈ | ∈ | принадлежит множеству |
∉ | ∉ | ∉ | не принадлежит множеству |
∋ | ∋ | ∋ | или |
∏ | ∏ | ∏ | произведение |
∑ | ∑ | ∑ | сумма |
− | − | − | минус |
∗ | ∗ | ∗ | умножение или оператор сопряженный к |
× | × | × | знак умножения |
√ | √ | √ | квадратный корень |
∝ | ∝ | ∝ | пропорциональность |
∞ | ∞ | ∞ | бесконечность |
⋮ | ⋮ | кратность | |
∠ | ∠ | ∠ | угол |
∧ | ∧ | ∧ | и |
∨ | ∨ | ∨ | или |
∩ | ∩ | ∩ | пересечение |
∪ | ∪ | ∪ | объединение |
∫ | ∫ | ∫ | интеграл |
∴ | ∴ | ∴ | поэтому |
∼ | ∼ | ∼ | подобно |
≅ | ≅ | ≅ | сравнимо |
≈ | ≈ | ≈ | приблизительно равно |
≠ | ≠ | ≠ | не равно |
≡ | ≡ | ≡ | идентично |
≤ | ≤ | ≤ | меньше или равно |
⩽ | ⩽ ⩽ |
⩽ ⩽ |
меньше или равно |
≥ | ≥ | ≥ | больше или равно |
⩾ | ⩾ ⩾ |
⩾ ⩾ |
больше или равно |
⊂ | ⊂ | ⊂ | подмножество |
⊃ | ⊃ | ⊃ | надмножестов |
⊄ | ⊄ | ⊄ | не подмножество |
⊆ | ⊆ | ⊆ | подмножество |
⊇ | ⊇ | ⊇ | надмножество |
⊕ | ⊕ | ⊕ | прямая сумма |
⊗ | ⊗ | ⊗ | тензерное произведение |
⊥ | ⊥ | ⊥ | перпендикуляр |
⋅ | ⋅ | ⋅ | оператор точка |
Греческий и коптский алфавиты
Символ | Числовой код | Шестнадцатеричный код | Имя символа |
---|---|---|---|
Ͱ | Ͱ | Ͱ | |
ͱ | ͱ | ͱ | |
Ͳ | Ͳ | Ͳ | |
ͳ | ͳ | ͳ | |
ʹ | ʹ | ʹ | |
͵ | ͵ | ͵ | |
Ͷ | Ͷ | Ͷ | |
ͷ | ͷ | ͷ | |
ͺ | ͺ | ͺ | |
ͻ | ͻ | ͻ | |
ͼ | ͼ | ͼ | |
ͽ | ͽ | ͽ | |
; | ; | ; | |
΄ | ΄ | ΄ | |
΅ | ΅ | ΅ | |
Ά | Ά | Ά | |
· | · | · | |
Έ | Έ | Έ | |
Ή | Ή | Ή | |
Ί | Ί | Ί | |
Ό | Ό | Ό | |
Ύ | Ύ | Ύ | |
Ώ | Ώ | Ώ | |
ΐ | ΐ | ΐ | |
Α | Α | Α | Α |
Β | Β | Β | Β |
Γ | Γ | Γ | Γ |
Δ | Δ | Δ | Δ |
Ε | Ε | Ε | Ε |
Ζ | Ζ | Ζ | Ζ |
Η | Η | Η | Η |
Θ | Θ | Θ | Θ |
Ι | Ι | Ι | Ι |
Κ | Κ | Κ | Κ |
Λ | Λ | Λ | Λ |
Μ | Μ | Μ | Μ |
Ν | Ν | Ν | Ν |
Ξ | Ξ | Ξ | Ξ |
Ο | Ο | Ο | Ο |
Π | Π | Π | Π |
Ρ | Ρ | Ρ | Ρ |
Σ | Σ | Σ | Σ |
Τ | Τ | Τ | Τ |
Υ | Υ | Υ | Υ |
Φ | Φ | Φ | Φ |
Χ | Χ | Χ | Χ |
Ψ | Ψ | Ψ | Ψ |
Ω | Ω | Ω | Ω |
Ϊ | Ϊ | Ϊ | |
Ϋ | Ϋ | Ϋ | |
ά | ά | ά | |
έ | έ | έ | |
ή | ή | ή | |
ί | ί | ί | |
ΰ | ΰ | ΰ | |
α | α | α | α |
β | β | β | β |
γ | γ | γ | γ |
δ | δ | δ | δ |
ε | ε | ε | ε |
ζ | ζ | ζ | ζ |
η | η | η | η |
θ | θ | θ | θ |
ι | ι | ι | ι |
κ | κ | κ | κ |
λ | λ | λ | λ |
μ | μ | μ | μ |
ν | ν | ν | ν |
ξ | ξ | ξ | ξ |
ο | ο | ο | ο |
π | π | π | π |
ρ | ρ | ρ | ρ |
ς | ς | ς | ς |
σ | σ | σ | σ |
τ | τ | τ | τ |
υ | υ | υ | υ |
φ | φ | φ | φ |
χ | χ | χ | χ |
ψ | ψ | ψ | ψ |
ω | ω | ω | ω |
ϊ | ϊ | ϊ | |
ϋ | ϋ | ϋ | |
ό | ό | ό | |
ύ | ύ | ύ | |
ώ | ώ | ώ | |
Ϗ | Ϗ | Ϗ | |
ϐ | ϐ | ϐ | |
ϑ | ϑ | ϑ | ϑ |
ϒ | ϒ | ϒ | ϒ |
ϓ | ϓ | ϓ | |
ϔ | ϔ | ϔ | |
ϕ | ϕ | ϕ | ϕ |
ϖ | ϖ | ϖ | ϖ |
ϗ | ϗ | ϗ | |
Ϙ | Ϙ | Ϙ | |
ϙ | ϙ | ϙ | |
Ϛ | Ϛ | Ϛ | |
ϛ | ϛ | ϛ | |
Ϝ | Ϝ | Ϝ | Ϝ |
ϝ | ϝ | ϝ | ϝ |
Ϟ | Ϟ | Ϟ | |
ϟ | ϟ | ϟ | |
Ϡ | Ϡ | Ϡ | |
ϡ | ϡ | ϡ | |
Ϣ | Ϣ | Ϣ | |
ϣ | ϣ | ϣ | |
Ϥ | Ϥ | Ϥ | |
ϥ | ϥ | ϥ | |
Ϧ | Ϧ | Ϧ | |
ϧ | ϧ | ϧ | |
Ϩ | Ϩ | Ϩ | |
ϩ | ϩ | ϩ | |
Ϫ | Ϫ | Ϫ | |
ϫ | ϫ | ϫ | |
Ϭ | Ϭ | Ϭ | |
ϭ | ϭ | ϭ | |
Ϯ | Ϯ | Ϯ | |
ϯ | ϯ | ϯ | |
ϰ | ϰ | ϰ | ϰ |
ϱ | ϱ | ϱ | ϱ |
ϲ | ϲ | ϲ | |
ϳ | ϳ | ϳ | |
ϴ | ϴ | ϴ | |
ϵ | ϵ | ϵ | ϵ |
϶ | ϶ | ϶ | ϶ |
Ϸ | Ϸ | Ϸ | |
ϸ | ϸ | ϸ | |
Ϲ | Ϲ | Ϲ | |
Ϻ | Ϻ | Ϻ | |
ϻ | ϻ | ϻ | |
ϼ | ϼ | ϼ | |
Ͻ | Ͻ | Ͻ | |
Ͼ | Ͼ | Ͼ | |
Ͽ | Ͽ | Ͽ |
Зачем нужны спецсимволы и как ими пользоваться
Предположим, вы решили описать какой-нибудь тег на вашей странице, но, поскольку браузер использует символы < и > как начало и конец тега, применение их внутри содержимого вашего html-кода может привести к проблемам. Но HTML дает вам легкий способ определять эти и другие специальные символы с помощью простых аббревиатур, называемых ссылками на символы .
Рассмотрим, как это работает. Для каждого символа, который считается специальным или который вы хотите использовать на своей веб-странице, но который невозможно напечатать в вашем редакторе (например, символ авторского права), вы находите аббревиатуру и печатаете ее в html-коде вместо нужного символа. Например, для символа ">" аббревиатура - > , а для символа "<" - < .
Допустим, вы хотели напечатать «Элемент очень важен» на своей странице. Вместо этого вам придется воспользоваться ссылками на нужные вам символы для корректного отображения записи, и в итоге ваша запись в коде должна будет выглядеть так:
Элемент очень важен
Попробовать »Еще один специальный символ, о котором вам нужно знать - символ & (амперсанд). Если вы хотите, чтобы он отображался на вашей HTML-странице, используйте ссылку & вместо символа &.
Символ галочка не представлен на клавиатуре, но с помощью специальных комбинаций его можно легко добавить в ваше сообщение, пост или текстовый документ.
Рассмотрим детальнее, как это можно сделать.
Виды галочек + использование
Значок галочка (птичка, галка) – это специальный значок, который часто используется для описания подтверждения чего-либо.
Может встречаться в оформлении перечислений или подчеркиваний мысли. Прочитав следующие инструкции, найти и использовать символ вы сможете самостоятельно.
Самый простой вариант – это копирование объекта с этой статьи. Существует несколько видов значка:
Если вам понадобилась галка для использования в одном предложении или фразе, просто скопируйте понравившийся элемент с помощью его выделения и сочетания клавиш CTRL и C на клавиатуре.
Чтобы набрать птичку на клавиатуре самостоятельно, необходимо использовать кодировку Unicode. Наберите букву U и + . Затем нужно набрать код значка.
Цифровые обозначения для разных видов галочек бывают следующими: 2713 (обычный знак), 2714 (полужирный шрифт), 2705 (галочка в квадрате выделенная), 2611 (в квадрате обычная).
Если комбинация U +2713 или другая не превращается автоматически в галочку, скорее всего, в документе не настроено автоматическое распознавание символов Юникода или вы вводите код неправильно.
В текст сразу будет преображаться в нужный знак, поэтому вы можете смело набирать его в сообщениях и разных постах.
Значок в MS Word
Все, кто хоть раз использовал знают, что выставление специальных символов помогает структурировать документ и сделать его легко читаемым.
Значок галочки может понадобиться вам в процессе оформления списка задач, перечисления.
Неопытные пользователи выставляют знак с помощью добавления в документ изображения с нужным элементом. Такой подход неправильный, ведь он увеличивает конечный размер файла.
Все можно сделать гораздо проще. Чтобы поставить галку в Ворде, выполните несколько следующих шагов.
- Откройте документ в программе любой версии. В зависимости от года выпуска ПО расположение нужных вкладок может отличаться;
- Кликните на раздел «Вставка» ;
- В правой части панели инструментов найдите пункт «Символ» и нажмите на него;
- В Выпадающем окне кликните на «Другие символы» .
- Во всплывающем окне вы можете найти галочку, воспользовавшись одним из двух способов. Выберите набор «Dingbats» и в предложенном списке кликните на нужный элемент или в нижней части окошка введите код элемента в Юникод (шестнадцатеричная). К примеру, 2714. Ворд автоматически найдет объект, который вам нужен. Кликните на него и подтвердите действие, нажав на «ОК» .
Рис.3 – специальные символы в Ворде
После добавления галочки в тело документа вы сможете применить к ней любое форматирование: изменить цвет, шрифт, тип заголовка и прочие опции.
Машинописный текст состоит из печатных знаков - графических символов.
Графические символы - это символы, которые имеют в тексте видимое отображение.
Все графические символы собраны в наборе единой универсальной системы Юникод.
Вставить графический символ Юникод в 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ледовательно» | ∴ | ∴ | ||
≅ | приблизительно равно | ≅ | ≅ | ||
≈ | почти равно | ≈ | ≈ | ||
≠ | не равно | ≠ | ≠ | ||
≡ | идентично | ≡ | ≡ | ||
≤ | меньше или равно | ≤ | ≤ | ||
≥ | больше или равно | ≥ | ≥ | ||
∧ | логическое И | ∧ | ∧ | ||
∨ | логическое ИЛИ | ∨ | ∨ | ||
⊕ | знак «плюс в круге» (прямая сумма) |
⊕ | ⊕ | ||
⊗ | знак «умножение в круге» (векторное произведение, стрела от наблюдателя) |
⊗ | ⊗ | ||
ʘ | точка в круге (стрела на наблюдателя) |
ʘ |
✵ ✵ |
|||||
Сегодня вы узнаете как сделать чекбокс на HTML и добавить ему CSS стилей для лучшей совместимости с дизайном сайта.
Демонстрация
Чекбокс на HTML
Создадим блок с четырьмя чекбоксами, первый будет отмечен – с галочкой. Каждый чекбокс будет заключен в тег label , внутри которого поле для ввода, текст и элемент span , который предстоит стилизовать.
Тег label служит контейнером для каждого чекбокса, для наглядности я временно задал красную рамку тегу label . Когда мало опыта, это хороший способ, увидеть границы любого тега, чтобы не действовать вслепую.
CSS для чекбокс
Строчный тег label , заменим на блочный (display: block) , чтобы чекбоксы, встали друг под другом, user-select: none – запрещает пользователю выделять элемент.
Container {
display: block;
user-select: none;
}
Этот код прячет дефолтные браузерные стили для чекбокса. Мы делаем элемент полностью прозрачным за счет opacity, width и height с нулевым значением и на их месте, задаем кастомные стили для чекбокса.
Container input {
opacity: 0;
height: 0;
width: 0;
}
Создаем кастомные чекбоксы. Меняем размеры и цвет фона.
Checkmark {
height: 23px;
width: 22px;
background-color: #eec321;
}
При наведении курсора, делаем цвет фона немного темнее.
Container:hover input ~ .checkmark {
background-color: #ccc678;
}
Для отмеченного чекбокса, задаем другой цвет для фона.
Container input:checked ~ .checkmark {
background-color: #2196f3;
}
Прячем галочку для не отмеченных чекбоксов, применив псевдоэлемент after .
Checkmark:after {
content: "";
position: absolute;
display: none;
}
Делаем видимой галочку, только для отмеченных чекбоксов.
Container input:checked ~ .checkmark:after {
display: block;
}
Рисуем и стилизуем галочку. Галочку мы рисуем на чистом CSS . Изобразим прямоугольник с белой рамкой, у двух сторон прямоугольника, рамки нет (нулевая ширина), получается прямоугольный угол, мы его поворачиваем на 45 градусов и получается галочка.
Специальные символы – это технические знаки, которые не представлены на клавиатуре и закодированы через кодировку ЮНИКОД или иного метаязыка. Спецсимволы разделены на группы: математические, греческий алфавит, 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-код | |
α | Α | |||
β | Β | |||
γ | Γ | |||
δ | Δ | |||
ε | Ε | |||
ζ | Ζ | |||
η | Η | |||
θ | Θ | |||
ι | Ι | |||
κ | Κ | |||
λ | Λ | |||
μ | Μ | |||
ν | Ν | |||
ξ | Ξ | |||
ο | Ο | |||
π | Π | |||
ρ | Ρ | |||
σ | Σ | |||
ς | ||||
τ | Τ | |||
υ | Υ | |||
φ | Φ | |||
χ | Χ | |||
ψ | Ψ | |||
ω | Ω |
Как употреблять на практике
Независимо от CMS, добавление статьи выполняется с использованием визуального редактора и HTML версии. Все специальные символы в кодировке возможно вставить только во втором случае. Чтобы правильно воспользоваться инструментов, рекомендуется взять на заметку таблицы, где показан код и внешнее представление.
Обращаем внимание, если вставить знак в визуальном представлении статьи, то в HTML произойдёт превращение элемента в соответствующий код. При ручном вводе информации учитывайте регистр, который влияет на конечный результат.