Как написать h2o html

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальный тренажёр.

Следующие два тега обычно используются не для выделения слов, а для выделения отдельных символов. Их используют для указания единиц измерения или для написания простых формул.

Например: 20 м², H₂O, X³+X²=1

Тег <sup> отображает текст в виде верхнего индекса.

Тег <sub> отображает текст в виде нижнего индекса.

Стоит отметить, что эти теги являются чисто презентационными и не имеют собственной семантики.

Эти теги можно использовать внутри друг друга для создания более сложных формул.

Если вам нужно вставить очень сложную формулу в HTML-документ, лучше воспользоваться специальным языком разметки MathML.

Subscript: The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag defines the subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O to be written as H₂O.
Superscript: The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for footnotes.
Examples: 
 

1. Super and Sub script in HTML code: 
    

1. Output: 
    

1.  
2. Set style of subscript with CSS: 
    

1. Output: 
    

1.  
2. Another example with CSS: 
    

1. Output: 
    

1. Superscript Example With CSS: 
    

1. Output: 
    

1.  
2. Example to write mathematical equations using super and subscripts: 
    

1. Output: 
    

Supported Browser: Supported browsers are listed below. 
 

• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari

This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
 

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

Subscript: The <sub> tag is used to add a subscript text to the HTML document. The <sub> tag defines the subscript text. Subscript text appears half a character below the normal line and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O to be written as H₂O.
Superscript: The <sup> tag is used to add a superscript text to the HTML document. The <sup> tag defines the superscript text. Superscript text appears half a character above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for footnotes.
Examples: 
 

1. Super and Sub script in HTML code: 
    

1. Output: 
    

1.  
2. Set style of subscript with CSS: 
    

1. Output: 
    

1.  
2. Another example with CSS: 
    

1. Output: 
    

1. Superscript Example With CSS: 
    

1. Output: 
    

1.  
2. Example to write mathematical equations using super and subscripts: 
    

1. Output: 
    

Supported Browser: Supported browsers are listed below. 
 

• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari

This article is contributed by Shubrodeep Banerjee. If you like GeeksforGeeks and would like to contribute, you can also write an article using write.geeksforgeeks.org or mail your article to review-team@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.
 

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз. В зависимости от положительного или отрицательного значения смещения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. 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 class=»formula»>λ³ — I₁λ² +
I₂λ — I₃ = 0</p>
</body>
</html>

В примере одновременно встречается как нижний, так и верхний индекс. Для изменения начертания шрифта индекса применяются стили, которые задают единое оформление (рис. 1).

Рис. 1. Вид индексов после применения стилей

Можно вообще отказаться от использования <sup> и <sub> в пользу стилей. Аналогом этих элементов служит свойство vertical-align, заставляющее текст смещаться по вертикали на заданное расстояние. В частности, в примере 2 в качестве значения применяется 0.8em для верхнего индекса и -0.5em для нижнего. Em — это относительная единица, равная размеру текущего шрифта. Например, 0.5em говорит о том, что текст надо сдвинуть на половину размера шрифта.

Пример 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 class=»formula»>f(x) = a<span class=»sub»>0</span> + a<span class=»sub»>1</span> x + … +
a<span class=»sub»>n-1</span> x<span class=»sup»>n-1</span> +
a<span class=»sub»>n</span> x<span class=»sup»>n</span></p>
</body>
</html>

В примере сама формула выводится увеличенным размером, символы верхнего индекса устанавливаются красным цветом, а нижние — синим (рис. 2).

Рис. 2. Управление положением и видом нижнего и верхнего индекса

Использование элемента <span> делает код громоздким, поэтому лучше переопределить стили <sub> и <sup>, в частности, задать положение индекса, цвет и курсивное начертание.