<var>: 变量元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<var> HTML 元素表示数学表达式或编程上下文中的变量名。它通常会以当前字体样式斜体显示,但这种行为取决于浏览器。

试一试

<p>
  The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where
  <var>l</var> represents the length, <var>w</var> the width and
  <var>h</var> the height of the box.
</p>
var {
  font-weight: bold;
}

属性

此元素仅包含全局属性

用法说明

<var> 常用到的上下文中,其他也可能用到的元素包括:

  • <code>: HTML 代码元素
  • <kbd>: HTML 键盘输入元素
  • <samp>: HTML 样本输出元素

如果您发现代码错误地为了样式目的而不是语义目的而使用了 <var>,您应该使用带有适当 CSS 的 <span> 元素,或者使用以下适当的语义元素之一:

默认样式

大多数浏览器在渲染 <var> 时会应用 font-style: "italic" 样式。您可以使用 CSS 覆盖此行为,如下所示:

css
var {
  font-style: normal;
}

示例

基本示例

这是一个基本示例,使用 <var> 来表示数学方程中的变量名。

html
<p>An algebraic equation: <var>x</var> = <var>y</var> + 2</p>

结果

覆盖默认样式

您可以使用 CSS 来覆盖 <var> 元素的默认样式。在此示例中,变量名将以粗体显示,如果可用则使用 Courier 字体,否则将回退到默认的等宽字体。

CSS

css
var {
  font:
    bold 15px "Courier",
    "Courier New",
    monospace;
}

HTML

html
<p>
  The variables <var>minSpeed</var> and <var>maxSpeed</var> control the minimum
  and maximum speed of the apparatus in revolutions per minute (RPM).
</p>

此 HTML 使用 <var> 包裹了两个变量的名称。

结果

技术摘要

内容类别 流式内容语句内容、明显内容。
允许内容 短语内容.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受短语内容的元素。
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 任意
DOM 接口 HTMLElement

规范

规范
HTML
# the-var-element

浏览器兼容性