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 操作則提供了更高的靈活性和控制力。
