Надстрочный текст: повысьте качество вашего HTML-контента

Введение

HTML-тег sup позволяет отображать текст в формате надстрочного индекса на веб-странице. В этом практическом занятии мы покажем, как использовать тег sup для создания надстрочного текста.

Примечание: Вы можете практиковать программирование в файле index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

Настройка HTML-файла

Создайте HTML-файл с именем index.html и настройте базовую структуру HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

Добавление надстрочного текста

Добавьте тег sup в HTML-файл. Внутри открывающего и закрывающего тегов элемента sup добавьте текст, который вы хотите отобразить в виде надстрочного индекса.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Стилизация надстрочного текста

Вы можете стилизовать тег sup с использованием CSS для настройки его размера шрифта и вертикального выравнивания. Добавьте следующий код CSS в ваш HTML-файл:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>My email address is: user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Добавление математической записи

Надстрочный текст является важной составляющей математической записи. Вы можете использовать тег sup для представления показателей степени и степеней. Например, добавьте следующий код в ваш HTML-файл:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>The value of 2<sup>3</sup> is 8.</p>
  </body>
</html>

Резюме

В этом практическом занятии мы изучили тег sup в HTML. Мы увидели, как создавать надстрочный текст и использовать его для представления показателей степени и степеней. Мы также узнали, как стилизовать тег sup с использованием CSS. С навыками, приобретенными в этом практическом занятии, вы теперь можете легко добавлять надстрочный текст на свои HTML-страницы.

HTML Надстрочный текст