Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Спецсимволы в HTML. Основы HTML для начинающих. Урок №4

24.06.2015


00:47


4479


пока нет


Основы HTML для начинающих — Спецсимволы в HTML. Урок №4

Спецсимволы в HTML. Основы HTML для начинающих. Урок №4

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

Ну что, давайте начнем! И начнем мы с теории :idea:.

Для чего нужны спецсимволы в 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>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;<br>
</body>
</html>

Результат:

Основы HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Объяснение:
&lt; - это спецсимвол  <
&gt; - это спецсимвол  >

Если вам нужно поставить больше одного пробела между словами, вы тоже можете использовать специальный символ  &nbsp;.

Вот так это будет выглядеть в коде:

<html>
<head>
<title>Коды спецсимволов для HTML</title>
</head>
<body>
слово1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;слово2 слово3
</body>
</html>

В результате:

Основы HTML для начинающих — Спецсимволы в HTML. Урок №4

Я думаю, вы с этим всем разобрались.

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

Выводятся спецсимволы очень просто. Смотрите в таблицу специальных символов, которая находится снизу, копируете и вставляете между тегами <body> </body> в нужное вам место.
Вот, например, нужен вам значок копирайта ©. Спецсимвол в HTML будет выглядеть вот так:

&copy;

В HTML-документе это будет так:

<html>
<head>
<title>Коды спецсимволов для HTML</title>
</head>
<body>
Все права защищены &copy; 2012-2015.
</body>
</html>

В результате вы увидите:

Все права защищены © 2012-2015.

Теперь попробуйте вывести какой-либо спецсимвол самостоятельно, пользуясь таблицей.

Таблица спецсимволов в HTML

Символ Числовой код Имя символа Описание
" &#34; &quot; знак кавычки
' &#39; &apos; апостроф
& &#38; &amp; амперсанд
< &#60; &lt; знак меньше
> &#62; &gt; знак больше
&#160; &nbsp; пробел
¡ &#161; &iexcl; перевернутый восклицательный знак
¢ &#162; &cent; цент
£ &#163; &pound; фунт
¤ &#164; &curren; валюты
¥ &#165; &yen; йен
¦ &#166; &brvbar; сломанная вертикальная черта
§ &#167; &sect; секция
¨ &#168; &uml; интервал (кириллица)
© &#169; &copy; знак копирайта
ª &#170; &ordf; женский порядковый показатель
« &#171; &laquo; угловые кавычки (левые)
¬ &#172; &not; Отрицание выражения
® &#174; &reg; зарегистрированная торговая марка
¯ &#175; &macr; макрон интервал
° &#176; &deg; градус
± &#177; &plusmn; плюс или минус
² &#178; &sup2; верхний индекс 2
³ &#179; &sup3; верхний индекс 3
´ &#180; &acute; острый интервал
µ &#181; &micro; микро
&#182; &para; параграф
· &#183; &middot; средняя точка
¸ &#184; &cedil; интервал седиль
¹ &#185; &sup1; верхний индекс 1
º &#186; &ordm; мужской порядковый показатель
» &#187; &raquo; угловые кавычки (правые)
¼ &#188; &frac14; 1/4 часть
½ &#189; &frac12; 1/2 часть
¾ &#190; &frac34; 3/4 части
¿ &#191; &iquest; перевернутый знак вопроса
× &#215; &times; умножение
÷ &#247; &divide; деление
Œ &#338; &OElig; лигатура прописная OE
œ &#339; &oelig; строчная лигатура oe
Š &#352; &Scaron; S с короной
š &#353; &scaron; строчная S с короной
Ÿ &#376; &Yuml; прописная Y с диадемой
ƒ &#402; &fnof; f с крюком
ˆ &#710; &circ; дикриатический акцент
˜ &#732; &tilde; маленькая тильда
&#8211; &ndash; тире
&#8212; &mdash; длинное тире
&#8216; &lsquo; левая одиночная кавычка
&#8217; &rsquo; правая одиночная кавычка
&#8218; &sbquo; нижняя одиночная кавычка
&#8220; &ldquo; левые двойные кавычки
&#8221; &rdquo; правые двойные кавычки
&#8222; &bdquo; нижние двойные кавычки
&#8224; &dagger; кинжал
&#8225; &Dagger; двойной кинжал
&#8226; &bull; пуля
&#8230; &hellip; горизонтальное многоточие
&#8240; &permil; промилле (тысячные доли)
&#8242; &prime; минуты
&#8243; &Prime; секунды
&#8249; &lsaquo; одиночная левая угловая кавычка
&#8250; &rsaquo; одиночная правая угловая кавычка
&#8254; &oline; надчеркивание
&#8364; &euro; евро
&#8482; или &#153; &trade; торговая марка
&#8592; &larr; стрелка влево
&#8593; &uarr; стрелка вверх
&#8594; &rarr; стрелка вправо
&#8595; &darr; стрелка вниз
&#8596; &harr; двухсторонняя стрелка
&#8629; &crarr; стрелка возврата каретки
&#8968; &lceil; левый верхний угол
&#8969; &rceil; правый верхний угол
&#8970; &lfloor; левый нижний угол
&#8971; &rfloor; правый нижний угол
&#9674; &loz; ромб
&#9824; &spades; пики
&#9827; &clubs; крести
&#9829; &hearts; черви
&#9830; &diams; буби

Математические символы, поддерживаемые в HTML

Символ Числовой код Имя символа Описание
&#8704; &forall; для любых, для всех
&#8706; &part; часть
&#8707; &exist; существует
&#8709; &empty; пустой
&#8711; &nabla; оператор Гамильтона ("набла")
&#8712; &isin; принадлежит к множеству
&#8713; &notin; не принадлежит к множеству
&#8715; &ni; или
&#8719; &prod; произведение
&#8721; &sum; сумма
&#8722; &minus; минус
&#8727; &lowast; умножение или оператор сопряженный к
× &#215; &times знак умножения
&#8730; &radic; квадратный корень
&#8733; &prop; пропорциональность
&#8734; &infin; бесконечность
&#8736; &ang; угол
&#8743; &and; и
&#8744; &or; или
&#8745; &cap; пересечение
&#8746; &cup; объединение
&#8747; &int; интеграл
&#8756; &there4; поэтому
&#8764; &sim; подобно
&#8773; &cong; сравнимо
&#8776; &asymp; приблизительно равно
&#8800; &ne; не равно
&#8801; &equiv; идентично
&#8804; &le; меньше или равно
&#8805; &ge; больше или равно
&#8834; &sub; подмножество
&#8835; &sup; надмножестов
&#8836; &nsub; не подмножество
&#8838; &sube; подмножество
&#8839; &supe; надмножество
&#8853; &oplus; прямая сумма
&#8855; &otimes; тензерное произведение
&#8869; &perp; перпендикуляр
&#8901; &sdot; оператор точка

 



Случайные записи:

  1. Всплывающие подсказки. Основы bootstrap 3 для начинающих. Урок №19
  2. Информеры. Основы bootstrap 3 для начинающих. Урок №20
  3. Как подключить CSS - способы подключения. Основы CSS для начинающих. Урок №3
  4. Вкладки. Основы bootstrap 3 для начинающих. Урок №21
  5. Таблицы. Основы bootstrap 3 для начинающих. Урок №13

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245