HTML/Элемент sup
Синтаксис
(X)HTML
<sup> ... </sup>
Описание
Элемент sup (от англ. «superscript» ‒ «надстрочный, верхний индекс») определяет вложенный в него текст как верхний индекс. Текст, вложенный в элемент sup имеет размер немного меньший, чем размер основного текста.
Примечание
Индекс по отношению к основному тексту на полкорпуса смещен вверх. Данный элемент может быть так же использован внутри элемента var для обозначения верхних индексов переменных.
Совет
С помощью подобного элемента в документе удобно создавать сноски (например, «текст[1]»), а так же в математических выражениях указывать степень числа/переменной (например, «52=25; X2=4») в формуле. Для вывода больших или сложных формул рекомендуется использовать язык математической разметки MathML, но если выражение/формула небольшая и может корректно отображаться без использования
sub и sup.
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | Font style elements |
| 4.01 | 9.2.3 Subscripts and superscripts: the SUB and SUP elements DTD: Transitional
Strict
Frameset |
| 5.0 | 4.5.16 The sub and sup elements |
5. 1 | 4.5.21. The sub and sup elements |
| XHTML | |
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset |
| 1.1 | Extensible HyperText Markup Language |
Атрибуты
- Глобальные атрибуты
- accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Элемент sup</title>
</head>
<body>
<h2>Пример использования элемента «sup»</h2>
<h3>Формула зависимости энергии от скорости света</h3>
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup> — энергия равна массе, умноженной на квадрат скорости света в свободном пространстве.
</p>
</body>
</html>
Элемент sup
Верхний и нижний индекс | WebReference
Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: <sup> (от англ. superscript) — верхний индекс и <sub> (от англ. subscript) — нижний индекс. Текст, помещённый в один из этих контейнеров, обозначается меньшим размером, чем базовый текст, и смещается относительно него вверх или вниз. В примере 1 приведено совместное использование указанных элементов и стилей для изменения вида текста.
Пример 1. Создание верхнего и нижнего индекса
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Верхний и нижний индекс</title> <style> .
formula { font-size: 1.4em; /* Размер текста формулы */ }
sup, sub {
font-style: italic; /* Курсивное начертание */
color: red; /* Красный цвет символов */
}
sub {
color: blue; /* Синий цвет символов */
}
</style>
</head>
<body>
<p>Характеристическое уравнение поверхности второй степени</p>
<p>λ<sup>3</sup> — I<sub>1</sub>λ<sup>2</sup> +
I<sub>2</sub>λ — I<sub>3</sub> = 0</p>
</body>
</html>Рис. 1. Вид индексов после применения стилей
Можно вообще отказаться от использования <sup> и <sub> в пользу стилей. Аналогом этих элементов служит свойство vertical-align, заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.
Пример 2. Использование стилей для управления индексами
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Верхний и нижний индекс</title> <style> .formula { font-size: 1.6em; /* Размер текста */ font-style: italic; /* Курсивное начертание */ } .sup, .sub { font-style: normal; /* Нормальное начертание */ font-size: 0.6em; /* Размер индекса */ color: red; /* Цвет верхнего индекса */ vertical-align: 0.8em; /* Сдвигаем текст вверх */ } .sub { color: blue; /* Цвет нижнего индекса */ vertical-align: -0.5em; /* Сдвигаем текст вниз */ } </style> </head> <body> <p>Многочлен степени <em>n</em></p> <p>f(x) = a<span>0</span> + a<span>1</span> x + .
В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).
Рис. 2. Управление положением и видом нижнего и верхнего индекса
Использование элемента <span> делает код громоздким, поэтому лучше переопределить стили <sub> и <sup>, в частности, задать положение индекса, цвет и курсивное начертание.
- <sub>
- <sup>
- vertical-align
- Выравнивание картинок
- Продвинутая семантика и доступность
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Специальные символы в HTML — Учебное пособие
к Джозеф Браунелл / Вторник, 14 июля 2015 г. / Опубликовано в HTML, Latest
Специальные символы в HTML: Обзор
Бывают случаи, когда необходимо отображать в HTML символы или специальные символы, недоступные на стандартной клавиатуре, например ©.
Вам также может понадобиться отображать специальные символы в HTML, которые имеют особое значение в HTML (<,>,& и т. д.). Для этого в HTML используется тег Special Character Entity.
Чтобы добавить специальные символы в HTML, введите амперсанд ( и ), затем знак решетки ( # ), номер кода и точку с запятой ( ; ). Например, символ © (авторское право) можно отобразить с помощью © . В настоящее время доступны буквально сотни объектов специальных символов. Некоторые из наиболее распространенных тегов перечислены в таблице ниже.
| Описание | Специальный символ | Код |
| Острый акцент | ´ | ´ |
| Амперсанд | и | & |
| Знак цента | ¢ | ¢ |
| Авторское право | © | © |
| Кинжал | † | † |
| Знак градуса | ° | º |
| Знак подразделения | ÷ | ÷ |
| Евро | € | ₫ |
| Дробь (половина) | ½ | ½ |
| Дробь (одна четвертая) | = | ¼ |
| Дробь (три четверти) | ¾ | ¾ |
| Знак «больше» | > | > |
| Левая кавычка | « | « |
| Знак меньше | < | < |
| Знак умножения | х | × |
| Знак плюс или минус | ± | ± |
| Кавычка (слева) | » | “ |
| Кавычка (справа) | ” | ” |
| Зарегистрированная торговая марка | ® | ® |
| Цитата правого ангела | » | » |
| Верхний индекс один | № | ¹ |
| Товарный знак | ™ | ™ |
Специальные символы в HTML — Учебное пособие: Изображение документа HTML5, показывающее, как кодировать специальные символы в HTML.
Специальные символы в HTML: Инструкции
- Чтобы добавить специальные символы в HTML , введите амперсанд, а затем знак решетки ( &# ) в том месте документа HTML, где вы хотите добавить специальный символ
- Введите правильный код для добавляемого символа.
- Введите точку с запятой ( ; ) для завершения.
Специальные символы в HTML: Видеоурок
В следующем видеоуроке под названием «Специальные символы» показано, как добавлять специальные символы в HTML. Этот видеоурок о специальных символах в HTML взят из нашего полного курса «Введение в HTML5 и CSS3» под названием «Упрощенное освоение HTML5 и CSS3, версия 1.0».
Отмечен под: & в html, добавить, код, кодирование, символ копирайта html, символ копирайта в html, курс, css3, отображать спец символы в html, помощь, как добавить & в html, как добавить спец символы в html, как добавить символ в html, как добавлять символы в html, как кодировать специальные символы в html, как создавать специальные символы в html, как создавать символы в html, как вставлять специальные символы в html, как использовать специальные символы в html, как писать и в html, как писать специальные символы в html, как сделать, html, коды символов html, специальные символы html, символы html, специальные символы html текста, html5, инструкции, учиться, урок, обзор, специальные символы, специальные символы html, Специальные символы в HTML, синтаксис, учить, обучение, туториал, видео, писать
org/Person»> О Джозефе БраунеллеЧто вы можете прочитать дальше
Распродажа! Полный доступ за 29 долларов США 2 Дни 13 Часы 57 Минуты 26 Секунды $199 $29 Вся библиотека!
См. сделку
Символ градуса °℃℉⊾∡⟲ копировать вставить
Скопируйте и вставьте символ градуса , знаки погоды и температуры, такие как градусы Цельсия и градусы Фаренгейта. Градус ° также является одним из самых известных математических символов, используемых для измерения углов. Если вам интересно, как набрать знак градуса ° с клавиатуры, читайте ниже.
| Градусы Температура | ☼ | ☀ | ☁ | ☂ | ☃ |
|---|---|---|---|---|---|
| ☄ | ☾ | ☽ | ❄ | ☇ | |
| ☈ | ⊙ | ☉ | ℃ | ℉ | |
| ° | ❅ | ✺ | ϟ |
| Градусы угла | ⦨ | ⦩ | ⦪ | ⦫ | ⦠ |
|---|---|---|---|---|---|
| ⦬ | ⦭ | ⦮ | ⦯ | ⦡ | |
| ∠ | ⦟ | ∡ | ∢ | ⦞ | |
| ∟ | ⊾ | ⟀ | ⦦ | 📐 |
| 360 градусов | ⟲ |
|---|---|
| ⭯ | |
| ↺ | |
| 🔄 |
Символы
Что означает степень
Символ градусов является типографским символом, который используется, среди прочего, для обозначения градусов дуги (например, в географических системах координат) или градусов температуры.
Символ состоит из небольшого выпуклого круга, исторически являвшегося нулевым глифом.
В случае угловых градусов символ градусов следует за числом без промежуточного пробела. В случае градусов температуры два органа по научным и инженерным стандартам (BIPM и Типография правительства США) предписывают температуру печати с пробелом между числом и символом градуса. Однако во многих работах с профессиональным набором, включая опубликованные научные работы издательством University of Chicago Press или Oxford University Press, символ степени печатается без пробелов между числом, символом и латинскими буквами «C» или «F», обозначающими градусы Цельсия или Фаренгейта. Прочтите статью в Википедии о символе градуса, чтобы узнать больше о его значении.
Как ввести символ градуса на клавиатуре
Выберите свою систему и узнайте.
Окна
С клавиатуры
Альтернативные коды градусов
Техника быстрого доступа, которая работает на настольных компьютерах и большинстве ноутбуков под управлением MS Windows.
Вы нажимаете Alt и, удерживая его, набираете код на цифровой клавиатуре, пока она включена. Пожалуйста, прочитайте руководство, если вы используете ноутбук. С помощью этого метода вы можете ввести много часто используемых символов.
| Альтернативный код | Условное обозначение |
|---|---|
| 0176 | ° |
Состояние переключения
Настройте раскладку клавиатуры в Windows, чтобы вы могли вводить все дополнительные символы так же просто, как и любой другой текст. Настройка занимает около 5-10 минут, но вы будете печатать как босс. С помощью этой техники вы можете назначить на клавиатуру символ градуса ° и любые другие текстовые символы.
Карта символов
CharMap позволяет просматривать и использовать все символы и символы, доступные во всех шрифтах (некоторые примеры шрифтов: «Arial», «Times New Roman», «Webdings»), установленных на вашем компьютере.
Вы можете ввести символ градуса, используя его.
Мак
Emoji на iOS (iPhone, iPad и iPod touch)
Текстовые символы с клавиатурой Emoji для iPhone 📲Простой и красивый способ узнать, как добавить виртуальную клавиатуру для символов Emoji, видимых в виде маленьких картинок. Сама клавиатура предустановлена на вашем устройстве iOS, поэтому вам не нужно ничего скачивать или покупать.
Программа просмотра клавиатуры
Вы можете создавать часто используемые технические непричудливые символы, такие как «√ ∑ π ∞ ∆ ™ © æ £ ¢» и буквы с диакритическими знаками на Mac, используя клавишу [Option]. Я составил список горячих клавиш в своей статье и объяснил, как открыть программу просмотра клавиатуры. Вы также можете использовать средство просмотра клавиатуры в качестве альтернативы моему списку.
[Опция] + [0] дает знак градуса °.
Палитра персонажей
Палитра символов позволяет вам просматривать и использовать все символы и символы, включая степени, доступные во всех шрифтах (некоторые примеры шрифтов: «Arial», «Times New Roman», «Webdings»), установленных на вашем компьютере.