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

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70851{{"HTML Надстрочный текст"}} html/head_elems -.-> lab-70851{{"HTML Надстрочный текст"}} html/lang_decl -.-> lab-70851{{"HTML Надстрочный текст"}} html/text_dir -.-> lab-70851{{"HTML Надстрочный текст"}} html/inter_elems -.-> lab-70851{{"HTML Надстрочный текст"}} end

Настройка 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-страницы.