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

Введение

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

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

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

Настройте 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>

Создайте переменную с использованием тега

Для создания переменной в 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