StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
24.06.2015
00:47
9586
пока нет
Спецсимволы в HTML. Основы HTML для начинающих. Урок №4
Всем привет!
В сегодняшнем уроке хочу познакомить вас с таким понятием как спецсимволы для HTML. Вы узнаете, для чего нужны спецсимволы в HTML, как их выводить в HTML-документе и в конце статьи вы найдете таблицу спецсимволов в HTML.
Ну что, давайте начнем! И начнем мы с теории 
.
○ Для чего нужны спецсимволы в HTML
Спецсимволы в HTML – это такие символы, которые отсутствуют на клавиатуре компьютера. Либо эти символы могут не работать напрямую в HTML-документе.
Вот, например, как вы поставите в HTML документе знак copyright - ©? Упссс! Никак 
.
Или, как вы сделаете пять пробелов в HTML документе? Сколько бы вы не сделали пробелов в HTML документе, все равно браузер выведет один пробел.
Все это можно легко сделать при помощи спецсимволов.
А, вот еще пришел в голову один пример, где без спецсимволов ну никак нельзя.
Из предыдущих уроков вы знаете, что все, что находится между скобками <и> браузер читает как тег и выводит как обработанную программу.
Как быть, если вы на сайте хотите показать пример, из каких тегов состоит HTML документ? Ведь если вы вставите пример состоящий из тегов в HTML-документ, то большая вероятность, что сайт вообще не заработает, либо не отобразится.
<html> <head> <title>Спецсимволы в HTML - StepkinBlog.ru</title> </head> <body > <p>Основы HTML </p> <html> <head> <title> </title> </head> <body > </body> </html> </body> </html>
Строка №7-№13 браузером проигнорируеться.
Но если вы замените скобки < тег > на спецсимволы, то все заработает.
Вот пример:
<html> <head> <title>Спецсимволы в HTML - StepkinBlog.ru</title> </head> <body> <p>Основы HTML </p> <html><br> <head><br> <title></title><br> </head><br> <body><br> </body><br> </html><br> </body> </html>
Результат:
Основы HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Объяснение:
< - это спецсимвол <
> - это спецсимвол >
Если вам нужно поставить больше одного пробела между словами, вы тоже можете использовать специальный символ .
Вот так это будет выглядеть в коде:
<html> <head> <title>Коды спецсимволов для HTML</title> </head> <body> слово1 слово2 слово3 </body> </html>
В результате:
Я думаю, вы с этим всем разобрались.
○ Как выводить спецсимволы в HTML-документе
Выводятся спецсимволы очень просто. Смотрите в таблицу специальных символов, которая находится снизу, копируете и вставляете между тегами <body> </body> в нужное вам место.
Вот, например, нужен вам значок копирайта ©. Спецсимвол в HTML будет выглядеть вот так:
©
В HTML-документе это будет так:
<html> <head> <title>Коды спецсимволов для HTML</title> </head> <body> Все права защищены © 2012-2015. </body> </html>
В результате вы увидите:
Все права защищены © 2012-2015.
Теперь попробуйте вывести какой-либо спецсимвол самостоятельно, пользуясь таблицей.
Таблица спецсимволов в HTML
| Символ | Числовой код | Имя символа | Описание |
| " | " | " | знак кавычки |
| ' | ' | ' | апостроф |
| & | & | & | амперсанд |
| < | < | < | знак меньше |
| > | > | > | знак больше |
|   | | пробел | |
| ¡ | ¡ | ¡ | перевернутый восклицательный знак |
| ¢ | ¢ | ¢ | цент |
| £ | £ | £ | фунт |
| ¤ | ¤ | ¤ | валюты |
| ¥ | ¥ | ¥ | йен |
| ¦ | ¦ | ¦ | сломанная вертикальная черта |
| § | § | § | секция |
| ¨ | ¨ | ¨ | интервал (кириллица) |
| © | © | © | знак копирайта |
| ª | ª | ª | женский порядковый показатель |
| « | « | « | угловые кавычки (левые) |
| ¬ | ¬ | ¬ | Отрицание выражения |
| ® | ® | ® | зарегистрированная торговая марка |
| ¯ | ¯ | ¯ | макрон интервал |
| ° | ° | ° | градус |
| ± | ± | ± | плюс или минус |
| ² | ² | ² | верхний индекс 2 |
| ³ | ³ | ³ | верхний индекс 3 |
| ´ | ´ | ´ | острый интервал |
| µ | µ | µ | микро |
| ¶ | ¶ | ¶ | параграф |
| · | · | · | средняя точка |
| ¸ | ¸ | ¸ | интервал седиль |
| ¹ | ¹ | ¹ | верхний индекс 1 |
| º | º | º | мужской порядковый показатель |
| » | » | » | угловые кавычки (правые) |
| ¼ | ¼ | ¼ | 1/4 часть |
| ½ | ½ | ½ | 1/2 часть |
| ¾ | ¾ | ¾ | 3/4 части |
| ¿ | ¿ | ¿ | перевернутый знак вопроса |
| × | × | × | умножение |
| ÷ | ÷ | ÷ | деление |
| Œ | Œ | Œ | лигатура прописная OE |
| œ | œ | œ | строчная лигатура oe |
| Š | Š | Š | S с короной |
| š | š | š | строчная S с короной |
| Ÿ | Ÿ | Ÿ | прописная Y с диадемой |
| ƒ | ƒ | ƒ | f с крюком |
| ˆ | ˆ | ˆ | дикриатический акцент |
| ˜ | ˜ | ˜ | маленькая тильда |
| – | – | – | тире |
| — | — | — | длинное тире |
| ‘ | ‘ | ‘ | левая одиночная кавычка |
| ’ | ’ | ’ | правая одиночная кавычка |
| ‚ | ‚ | ‚ | нижняя одиночная кавычка |
| “ | “ | “ | левые двойные кавычки |
| ” | ” | ” | правые двойные кавычки |
| „ | „ | „ | нижние двойные кавычки |
| † | † | † | кинжал |
| ‡ | ‡ | ‡ | двойной кинжал |
| • | • | • | пуля |
| … | … | … | горизонтальное многоточие |
| ‰ | ‰ | ‰ | промилле (тысячные доли) |
| ′ | ′ | ′ | минуты |
| ″ | ″ | ″ | секунды |
| ‹ | ‹ | ‹ | одиночная левая угловая кавычка |
| › | › | › | одиночная правая угловая кавычка |
| ‾ | ‾ | ‾ | надчеркивание |
| € | € | € | евро |
| ™ | ™ или ™ | ™ | торговая марка |
| ← | ← | ← | стрелка влево |
| ↑ | ↑ | ↑ | стрелка вверх |
| → | → | → | стрелка вправо |
| ↓ | ↓ | ↓ | стрелка вниз |
| ↔ | ↔ | ↔ | двухсторонняя стрелка |
| ↵ | ↵ | ↵ | стрелка возврата каретки |
| ⌈ | ⌈ | ⌈ | левый верхний угол |
| ⌉ | ⌉ | ⌉ | правый верхний угол |
| ⌊ | ⌊ | ⌊ | левый нижний угол |
| ⌋ | ⌋ | ⌋ | правый нижний угол |
| ◊ | ◊ | ◊ | ромб |
| ♠ | ♠ | ♠ | пики |
| ♣ | ♣ | ♣ | крести |
| ♥ | ♥ | ♥ | черви |
| ♦ | ♦ | ♦ | буби |
Математические символы, поддерживаемые в HTML
| Символ | Числовой код | Имя символа | Описание |
| ∀ | ∀ | ∀ | для любых, для всех |
| ∂ | ∂ | ∂ | часть |
| ∃ | ∃ | ∃ | существует |
| ∅ | ∅ | ∅ | пустой |
| ∇ | ∇ | ∇ | оператор Гамильтона ("набла") |
| ∈ | ∈ | ∈ | принадлежит к множеству |
| ∉ | ∉ | ∉ | не принадлежит к множеству |
| ∋ | ∋ | ∋ | или |
| ∏ | ∏ | ∏ | произведение |
| ∑ | ∑ | ∑ | сумма |
| − | − | − | минус |
| ∗ | ∗ | ∗ | умножение или оператор сопряженный к |
| × | × | × | знак умножения |
| √ | √ | √ | квадратный корень |
| ∝ | ∝ | ∝ | пропорциональность |
| ∞ | ∞ | ∞ | бесконечность |
| ∠ | ∠ | ∠ | угол |
| ∧ | ∧ | ∧ | и |
| ∨ | ∨ | ∨ | или |
| ∩ | ∩ | ∩ | пересечение |
| ∪ | ∪ | ∪ | объединение |
| ∫ | ∫ | ∫ | интеграл |
| ∴ | ∴ | ∴ | поэтому |
| ∼ | ∼ | ∼ | подобно |
| ≅ | ≅ | ≅ | сравнимо |
| ≈ | ≈ | ≈ | приблизительно равно |
| ≠ | ≠ | ≠ | не равно |
| ≡ | ≡ | ≡ | идентично |
| ≤ | ≤ | ≤ | меньше или равно |
| ≥ | ≥ | ≥ | больше или равно |
| ⊂ | ⊂ | ⊂ | подмножество |
| ⊃ | ⊃ | ⊃ | надмножестов |
| ⊄ | ⊄ | ⊄ | не подмножество |
| ⊆ | ⊆ | ⊆ | подмножество |
| ⊇ | ⊇ | ⊇ | надмножество |
| ⊕ | ⊕ | ⊕ | прямая сумма |
| ⊗ | ⊗ | ⊗ | тензерное произведение |
| ⊥ | ⊥ | ⊥ | перпендикуляр |
| ⋅ | ⋅ | ⋅ | оператор точка |