HTML тег Var | Программирование на HTML | Разработка в Интернете

Введение

Тег <var> в HTML используется для представления переменной в программе или математическом уравнении. Он работает аналогично тегам <strong> или <em>, но вместо того чтобы выделять текст, он отображает текстовый контент в качестве переменной.

В этом лабе вы научитесь создавать переменную в HTML-файле с использованием тега <var>.

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70879{{"Объявления переменных в HTML"}} html/head_elems -.-> lab-70879{{"Объявления переменных в HTML"}} html/text_head -.-> lab-70879{{"Объявления переменных в HTML"}} html/para_br -.-> lab-70879{{"Объявления переменных в HTML"}} html/text_dir -.-> lab-70879{{"Объявления переменных в HTML"}} html/layout -.-> lab-70879{{"Объявления переменных в HTML"}} html/doc_flow -.-> lab-70879{{"Объявления переменных в HTML"}} html/inter_elems -.-> lab-70879{{"Объявления переменных в HTML"}} html/custom_attr -.-> lab-70879{{"Объявления переменных в HTML"}} end

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

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

<!doctype html>
<html>
  <head>
    <title>HTML Var Tag Lab</title>
  </head>
  <body>
    <h1>Creating a Variable in HTML Using the Var Tag</h1>
  </body>
</html>

Создание переменной с использованием тега `<var>`

Для создания переменной в HTML вам нужно использовать тег <var>. Добавьте следующий HTML-код, чтобы создать переменную с именем userName в предложении.

<p>The current user is <var>userName</var>.</p>

Тег <var> заключает имя переменной userName. Этот тег можно использовать для представления переменной в контексте программирования или переменной в математическом уравнении.

Стилизация переменной

Тег <var> имеет стандартный курсивный стиль. Однако, вы можете добавить свойства CSS к этому тегу, чтобы изменить его внешний вид. Добавьте следующий CSS, чтобы сделать текст переменной жирным и подчеркнутым.

<style>
  var {
    font-weight: bold;
    text-decoration: underline;
  }
</style>

Отображение значения переменной

Вы также можете использовать тег <var> для отображения значения переменной, передав значение переменной в виде текста. Добавьте следующий код, чтобы отобразить значение userName.

<p>The current user is <var>John Doe</var>.</p>

Использование глобальных атрибутов

Тег <var> поддерживает глобальные атрибуты, такие как class, id и style. Вы можете добавить эти атрибуты, чтобы определить свойства CSS для текста переменной или чтобы получить доступ к переменной с использованием JavaScript. Добавьте следующий код, чтобы установить класс и идентификатор тега <var>.

<p>
  The current user is <var class="user-name" id="current-user">John Doe</var>.
</p>

Использование атрибутов событий

Вы также можете использовать атрибуты событий, такие как onclick и onmouseover, чтобы запускать события при нажатии на текст переменной или при наведении на него курсора мыши. Добавьте следующий код, чтобы отобразить сообщение об уведомлении при нажатии на текст переменной.

<p>The current user is <var onclick="alert('User clicked!')">John Doe</var>.</p>

Резюме

В этом практическом занятии вы узнали, как создавать переменную в HTML с использованием тега <var>, и как стилизовать переменную с использованием свойств CSS. Также вы узнали, как отображать значение переменной и как использовать глобальные и атрибуты событий с тегом. С этими знаниями вы теперь можете создавать переменные в своих HTML-документах и настраивать их внешний вид с использованием CSS.

Объявления переменных в HTML