在HTML中，我们可以使用JavaScript来添加变量，JavaScript是一种脚本语言，可以在网页上实现动态效果，在HTML中，我们可以使用<script>标签来嵌入JavaScript代码，接下来，我将详细介绍如何在HTML中使用JavaScript添加变量。
1. 声明变量
在JavaScript中，我们使用var、let或const关键字来声明变量。var是最常用的，但它有变量提升的特性；let和const则是ES6引入的新特性，它们没有变量提升，而且具有块级作用域。
我们可以声明一个名为name的变量：
var name = "张三";
或者使用let和const：
let name = "李四"; const age = 25;
2. 为HTML元素添加变量
我们可以使用JavaScript为HTML元素添加变量，我们需要获取HTML元素，然后为其属性赋值，我们可以为一个<p>元素添加一个带有变量值的文本内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script>
var name = "张三";
document.getElementById("demo").innerHTML = name;
</script>
</body>
</html>
在这个例子中，我们首先声明了一个名为name的变量，然后通过document.getElementById()方法获取了ID为demo的<p>元素，最后为其innerHTML属性赋值为变量name的值，这样，页面上就会显示“张三”。
3. 事件处理函数中的变量
我们还可以在事件处理函数中使用变量，当用户触发某个事件（如点击按钮）时，事件处理函数会被调用，在事件处理函数中，我们可以访问并修改变量的值，我们可以创建一个按钮，当用户点击按钮时，会显示一个包含变量值的警告框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="showAlert()">点击我</button>
<script>
var name = "张三";
function showAlert() {
alert(name);
}
</script>
</body>
</html>
在这个例子中，我们首先声明了一个名为name的变量，然后创建了一个名为showAlert的事件处理函数，当用户点击按钮时，会调用这个函数，在函数中，我们使用alert()函数显示变量name的值，这样，当用户点击按钮时，会弹出一个包含“张三”的警告框。
4. 改变HTML元素的样式和属性
除了为HTML元素添加文本内容外，我们还可以使用JavaScript为HTML元素添加样式和属性，我们可以为一个元素添加一个带有变量值的背景颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
var color = "red";
document.getElementById("box").style.backgroundColor = color;
</script>
</body>
</html>
在这个例子中，我们首先声明了一个名为color的变量，然后通过document.getElementById()方法获取了ID为box的<div>元素，最后为其style.backgroundColor属性赋值为变量color的值，这样，页面上的矩形背景颜色就会变为红色。
