在html中“设置变量”实际依赖JavaScript，通过var、let、const声明变量实现动态逻辑，而标签仅用于语义化标记变量名，不参与数据存储。此外，css自定义属性和data-*属性也提供类似变量的功能，分别用于样式值管理和html元素数据绑定，共同增强网页的动态性与可维护性。
HTML本身并不直接提供“设置变量”的功能，它是一种标记语言，主要负责内容的结构化。我们通常在HTML文档中通过JavaScript来定义和操作变量，实现动态交互。至于
<var>
标签，它的作用是语义化地表示数学表达式或编程代码中的变量名，它不会“设置”任何变量，只是标记文本的含义。
解决方案
要真正在网页中“设置”和使用变量，核心是依赖JavaScript。HTML作为骨架，JavaScript则是赋予其生命和逻辑的血液。当你需要在网页上存储数据、进行计算或者根据用户行为改变内容时，JavaScript的变量声明（
var
,
let
,
const
）就派上用场了。它们允许你为数据命名，并在脚本的生命周期中引用和修改这些数据。
举个例子，如果你想在页面上显示一个动态的计数器，你会在JavaScript中声明一个变量来存储当前计数，然后通过dom操作将其显示在HTML元素中。HTML本身只是提供一个容器，比如一个
<p id="counter"></p>
，而变量的增减和显示逻辑则完全由JavaScript负责。
而
<var>
标签，它的角色则完全不同。想象一下你在写一篇关于算法的文章，或者一个数学公式。当你想明确指出某个符号代表一个变量时，比如在“求方程
x + y = 10
中
x
的值”这句话里，你想强调
x
和
y
是变量，这时就可以用
<var>x
和
<var>y
。它主要是为了增强文本的语义性，帮助浏览器、屏幕阅读器等工具更好地理解内容的结构和意义，默认样式通常是斜体，但这只是表现层面的东西，其核心是语义。
立即学习“前端免费学习笔记（深入）”；
HTML中JavaScript变量的声明与使用
谈到在HTML里“设置变量”，其实绝大多数时候我们指的都是在HTML文档中嵌入的JavaScript代码里定义变量。这才是网页动态性的基石。JavaScript提供了几种声明变量的方式，每种都有其特定的用途和作用域规则，了解它们非常重要，因为这直接影响你代码的健壮性和可维护性。
最传统的，也是你可能最早接触到的，是
var
关键字。用
var
声明的变量，它的作用域是函数级别的，或者在函数外部就是全局的。这意味着，如果在
语句或
循环中用
var
声明一个变量，它在整个函数内部都是可见的，这有时会带来一些意想不到的问题，比如变量污染。
<script> var message = "Hello, world!"; // 全局变量 function greet() { var greeting = "Hi there!"; // 函数作用域变量 if (true) { var innerVar = "Inside if"; // 仍然是函数作用域 } console.log(greeting); // "Hi there!" console.log(innerVar); // "Inside if" } greet(); console.log(message); // "Hello, world!" // console.log(greeting); // Uncaught ReferenceError: greeting is not defined </script>
为了解决
var
的一些“坑”，es6（ecmascript 2015）引入了
let
和
const
。这两种声明方式都具有块级作用域，也就是说，它们只在声明它们的代码块（比如
{}
花括号内的区域）中有效。
let
用于声明那些值可能会改变的变量：
<script> let count = 0; function increment() { count++; console.log("Count is: " + count); } increment(); // Count is: 1 increment(); // Count is: 2 if (true) { let blockScopedVar = "I'm only visible in this block"; console.log(blockScopedVar); } // console.log(blockScopedVar); // Uncaught ReferenceError: blockScopedVar is not defined </script>
而
const
则用于声明常量，即那些一旦赋值后就不能再修改的变量。这对于那些在程序运行过程中不应改变的值（如配置项、固定的数学常数等）非常有用，它能有效防止意外修改，提高代码的可预测性。
<script> const PI = 3.14159; // PI = 3.14; // Uncaught TypeError: Assignment to constant variable. const user = { name: "Alice", age: 30 }; user.age = 31; // 对象的属性可以修改，但user这个引用本身不能被重新赋值 console.log(user); // { name: "Alice", age: 31 } // user = { name: "Bob" }; // Uncaught TypeError: Assignment to constant variable. </script>
在现代javascript开发中，通常推荐优先使用
const
，如果变量需要重新赋值，再使用
let
。除非有非常明确的理由，否则应尽量避免使用
var
，以减少作用域混乱和变量提升（hoisting）带来的问题。
<var>
<var>
标签的语义作用与实际应用场景
当我们在HTML中看到
<var>
标签时，它和JavaScript中的
var
关键字完全是两码事，它们之间没有任何直接的关联。
<var>
标签是html5语义化标签家族的一员，它的核心作用是语义化地表示一个变量。
想象一下你在编写一个技术文档，或者一个数学教程。你可能会写到：“假设我们有一个函数
f(x) = x^2 + 2x + 1
，其中
x
是一个自变量。” 在这种情况下，如果你想让浏览器或者辅助阅读设备（比如屏幕阅读器）知道
x
是一个变量，而不是普通的文本，你就可以用
<var>x
来包裹它。
在数学中，二次方程的一般形式是
<var>a</var>x<var><sup>2</sup></var> + <var>b</var>x + <var>c</var> = 0， 其中 <var>a、<var>b 和 <var>c 是系数，而 <var>x 是未知变量。在编程示例中，我们可以声明一个变量
<var>userName</var>来存储用户的名字。
默认情况下，大多数浏览器会将
<var>
标签内的文本渲染为斜体，但这只是表现层面的样式，你可以通过CSS来完全改变它。例如，如果你觉得斜体不够突出，或者想用其他颜色来标记变量，你可以这样写CSS：
var { font-style: normal; /* 取消默认的斜体 */ color: #007bff; /* 设置为蓝色 */ font-weight: bold; /* 加粗 */ }
<var>
标签的价值主要体现在以下几个方面：
- 语义清晰度： 它明确告诉浏览器和开发者，这部分内容代表一个变量。这对于机器解析和理解页面内容非常有帮助。
- 可访问性（Accessibility）： 屏幕阅读器等辅助技术可以根据这个标签更好地理解内容的结构和含义，从而为视障用户提供更准确的朗读体验。例如，它可能会以不同的语调或强调方式读出“变量”这个概念。
- 代码可读性与维护性： 对于阅读HTML源代码的人来说，
<var>
标签能够迅速识别出哪些文本是变量名，而不是普通的文字或代码关键字，这让代码意图更加清晰。
- 样式统一性： 尽管默认是斜体，但你可以通过CSS统一管理所有变量的显示样式，而不需要手动为每个变量添加
<em>
或
<i>
标签。
总的来说，
<var>
标签不是用来“设置”任何东西的，它是一个纯粹的语义标签，用于标记文本的含义，这在编写技术文档、教程或任何需要明确指出变量概念的场景中都非常有用。
除了JavaScript和
<var>
<var>
，HTML还有哪些“变量”概念？
当我们谈论HTML中的“变量”时，除了JavaScript的编程变量和
<var>
标签的语义标记，还有一些在广义上可以被视为“变量”的概念，它们虽然不是传统意义上的编程变量，但在网页开发中也扮演着存储和传递信息的角色，为HTML元素注入了动态性或可配置性。
一个非常重要的例子就是 CSS自定义属性（Custom Properties），通常被称作“CSS变量”。它们允许你在CSS中定义自己的属性，并为它们赋值，然后在其他地方引用这些值。这极大地提高了CSS的可维护性、可扩展性和主题化能力。
/* 定义CSS变量 */ :root { /* 通常在:root选择器中定义全局变量 */ --main-color: #3498db; --font-size-base: 16px; --spacing-unit: 8px; } .button { background-color: var(--main-color); /* 使用变量 */ padding: var(--spacing-unit) calc(var(--spacing-unit) * 2); font-size: var(--font-size-base); } .text-highlight { color: var(--main-color); }
CSS变量是层叠的，这意味着它们可以在不同的作用域（如
:root
、特定元素内部）被定义和覆盖。它们非常适合用来管理颜色方案、字体大小、间距等设计令牌，当你想改变网站的主题色时，只需要修改一个CSS变量的值，所有引用它的地方都会自动更新，这比手动查找替换效率高得多，也更不容易出错。
另一个值得一提的是 *<em>HTML的`data-`属性**。这些是自定义数据属性，允许开发者在标准的HTML元素上嵌入私有的、自定义的数据。这些数据对浏览器是不可见的（除非通过开发者工具查看），但可以通过JavaScript轻松访问和操作。它们通常用于存储与特定元素相关的额外信息，而这些信息可能没有对应的标准HTML属性。
<ul id="product-list"> <li data-product-id="123" data-category="electronics" data-price="99.99"> Laptop </li> <li data-product-id="456" data-category="books" data-price="15.50"> The Great Gatsby </li> </ul> <script> const productList = document.getElementById('product-list'); const laptopItem = productList.querySelector('[data-product-id="123"]'); // 通过dataset属性访问data-*数据 console.log(laptopItem.dataset.productId); // "123" console.log(laptopItem.dataset.category); // "electronics" console.log(laptopItem.dataset.price); // "99.99" // 也可以修改数据 laptopItem.dataset.price = "89.99"; console.log(laptopItem.dataset.price); // "89.99" </script>
data-*
属性提供了一种非常灵活的方式，将数据直接绑定到HTML元素上，而无需将其存储在全局JavaScript变量中或通过复杂的DOM遍历来查找。这对于构建交互式组件、传递状态信息或与后端数据进行轻量级集成非常有用。
这些“变量”概念，虽然在技术细节上与JavaScript的编程变量有所不同，但它们都体现了在HTML环境中存储、管理和利用信息的需求。理解它们各自的特点和适用场景，能够帮助我们更高效、更优雅地构建网页应用。
