不一定。变量能否在HTML中被访问取决于作用域和声明方式：var声明的全局变量或显式挂载到window上的变量可以，而let/const声明的顶层变量不会自动挂载，HTML内联事件中会报ReferenceError。
直接在 HTML 中用 script 标签引入 JS 文件后，变量就能被访问吗？
不一定。变量能否在 HTML 中使用，取决于它的作用域和声明方式。全局变量（比如用 var 在顶层声明，或直接赋值给 window）可以，但 let、const 声明的顶层变量不会自动挂到 window 上，HTML 里通过内联 onclick 或 onload 等属性调用时会报 ReferenceError。
-
var globalVar = 'ok'→ 可以在 HTML 属性中直接写onclick="console.log(globalVar)" -
let localVar = 'no'→ 同样位置会报错："localVar is not defined" -
const config = { theme: 'dark' }→ 同样不可见，除非显式挂到window.config
根本原因不是“引入失败”，而是 ES6 模块作用域和脚本执行时机的问题。普通 <script src="xxx.js"></script> 是全局脚本，但 let/const 仍受词法作用域限制。
HTML 中调用 JS 变量的三种安全写法
最稳妥的方式是让变量明确暴露在全局作用域，且确保执行顺序正确。
- 把变量赋给
window：在 JS 文件末尾加window.myData = { user: 'admin' };，HTML 中就能用onclick="alert(window.myData.user)" - 用
var声明（仅限非模块环境）：var API_URL = '<a href="https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39">https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39</a>';，之后所有 HTML 内联事件都能访问 - 改用事件委托 + 外部初始化：不在 HTML 属性里硬编码变量，而是在 JS 里用
document.getElementById('btn').addEventListener('click', () => console.log(myData))—— 这样完全避开作用域问题
注意：type="module" 的脚本默认是严格私有作用域，即使 var 也不会提升到全局，必须显式挂 window。
立即学习“前端免费学习笔记（深入）”；
DOMContentLoaded 和变量可用性的关系
JS 文件加载完成 ≠ 变量一定能被 HTML 属性调用。如果 HTML 元素在 JS 执行前就尝试访问变量（比如 ），而 JS 还没执行完，就会报 init is not defined。
- 把
<script></script>放在前，比放在更可靠 - 不要依赖
onload属性调用未声明的函数；改用DOMContentLoaded回调统一初始化 - 如果必须用内联事件，确保对应变量/函数已在前面的
<script></script>中定义并执行完毕
常见错误现象：Uncaught ReferenceError: myConfig is not defined，往往是因为 script 标签在 body 后面，但 onclick 属性在前面的 button 上，浏览器解析到 button 时变量还没定义。
现代项目里更推荐的替代方案
纯 HTML + 全局变量的方式在复杂项目中容易失控，维护成本高。
- 使用数据属性（
data-）把配置从 HTML 传进 JS：<button data-api-endpoint="/users">Load</button>，JS 里用el.dataset.apiEndpoint读取 - 把初始化逻辑封装成函数，在 DOM 加载后统一执行，避免分散在多个内联事件里
- 如果用构建工具（Vite/Webpack），直接 import 变量到入口 JS，不再依赖全局污染
真正难的不是“怎么让 HTML 访问变量”，而是“要不要让它访问”——多数时候，把逻辑留在 JS 里，只让 HTML 提供结构和上下文，反而更稳定。
