HTML 变量声明

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

<var> 标签用于在 HTML 中表示程序或数学方程中的变量。它的工作方式类似于 <strong><em> 标签,但它不是强调文本,而是将文本内容显示为变量。

在本实验中,你将学习如何使用 <var> 标签在 HTML 文件中创建变量。

注意:你可以在 index.html 中练习编码,并学习 如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 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/LayoutandSectioningGroup(["`Layout and Sectioning`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) 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> 标签支持全局属性,例如 classidstyle。你可以添加这些属性来定义变量文本的 CSS 属性,或者通过 JavaScript 访问该变量。添加以下代码以设置 <var> 标签的 class 和 id。

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

使用事件属性

你也可以使用事件属性,例如 onclickonmouseover,在点击或悬停变量文本时触发事件。添加以下代码以在点击变量文本时显示一个警告消息。

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

总结

在本实验中,你学习了如何使用 <var> 标签在 HTML 中创建变量,以及如何使用 CSS 属性为变量设置样式。你还学习了如何显示变量的值,以及如何在该标签中使用全局属性和事件属性。通过这些知识,你现在可以在 HTML 文档中创建变量,并使用 CSS 自定义其外观。

您可能感兴趣的其他 HTML 教程