HTML 和 JavaScript 是构建现代网页的核心技术。HTML 负责页面结构，JavaScript 负责动态交互。以下是两者的基本关联方式。
内联方式：直接在 HTML 中嵌入 JavaScript
在 HTML 文件中，可以通过 <script> 标签直接编写 JavaScript 代码。这种方式适合小型脚本或快速测试。
<!DOCTYPE html>
<html>
<head><title>内联 JavaScript 示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button onclick="changeText()">点击我</button><script>function changeText() {document.getElementById("demo").innerHTML = "文本已改变！";}</script>
</body>
</html>
外部引入：链接独立的 JavaScript 文件
对于复杂的逻辑，通常将 JavaScript 代码保存在独立的 .js 文件中，然后通过 <script> 标签的 src 属性引入。
HTML 文件（index.html）:
<!DOCTYPE html>
<html>
<head><title>外部 JavaScript 示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button onclick="changeText()">点击我</button><!-- 引入外部 JavaScript 文件 --><script src="script.js"></script>
</body>
</html>
JavaScript 文件（script.js）:
function changeText() {document.getElementById("demo").innerHTML = "文本已改变！";
}
事件监听：通过 JavaScript 动态绑定事件
除了在 HTML 中直接绑定事件（如 onclick），还可以通过 JavaScript 动态添加事件监听器，这种方式更灵活且易于维护。
<!DOCTYPE html>
<html>
<head><title>事件监听示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button id="myButton">点击我</button><script>document.getElementById("myButton").addEventListener("click", function() {document.getElementById("demo").innerHTML = "文本已改变！";});</script>
</body>
</html>
DOM 操作：动态修改 HTML 内容
JavaScript 可以通过 DOM（文档对象模型）接口动态修改 HTML 元素的内容、样式或结构。
<!DOCTYPE html>
<html>
<head><title>DOM 操作示例</title>
</head>
<body><h1 id="demo">Hello World!</h1><button id="myButton">点击我</button><script>const button = document.getElementById("myButton");const heading = document.getElementById("demo");button.addEventListener("click", function() {heading.innerHTML = "文本已改变！";heading.style.color = "red";});</script>
</body>
</html>
异步加载：延迟或异步执行脚本
通过 <script> 标签的 defer 或 async 属性，可以控制脚本的加载和执行时机，优化页面性能。
<!DOCTYPE html>
<html>
<head><title>异步加载示例</title><!-- 延迟执行，等到 HTML 解析完成后再运行 --><script src="script.js" defer></script>
</head>
<body><h1 id="demo">Hello World!</h1><button id="myButton">点击我</button>
</body>
</html>
总结
HTML 和 JavaScript 的关联方式多种多样，可以根据需求选择适合的方法。内联方式适合简单脚本，外部引入适合复杂逻辑，事件监听和 DOM 操作则提供了更高的灵活性和控制力。
