HTML如何设置变量？var标签的作用是什么？

<p id="counter"></p>

x + y = 10

y

<var>y</var>

if

for

<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>

{}

<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>

<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>

f(x) = x^2 + 2x + 1

<p>
  在数学中，二次方程的一般形式是
  <code><var>a</var>x<var><sup>2</sup></var> + <var>b</var>x + <var>c</var> = 0</code>，
  其中 <var>a</var>、<var>b</var> 和 <var>c</var> 是系数，而 <var>x</var> 是未知变量。
</p>

<p>
  在编程示例中，我们可以声明一个变量
  <code><var>userName</var></code> 来存储用户的名字。
</p>

var {
  font-style: normal; /* 取消默认的斜体 */
  color: #007bff; /* 设置为蓝色 */
  font-weight: bold; /* 加粗 */
}

/* 定义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);
}

:root

<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-*