JavaScript（JS）和HTML（HyperText Markup Language）是构建现代网页的两大基石，HTML负责定义网页的结构和内容，而JavaScript则负责为网页添加交互性和动态功能，要将JavaScript和HTML连接起来，你需要了解它们如何协同工作以及如何在你的网页代码中嵌入JavaScript代码。
JavaScript可以通过三种主要方式与HTML结合：
1、内部JavaScript：直接在HTML文档的<head>部分或<body>部分使用<script>标签嵌入JavaScript代码，这种方式允许你在网页加载时执行脚本，或者响应特定的事件（如点击按钮）。
示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript与HTML结合示例</title>
<script>
// 这段代码在页面加载时执行
window.onload = function() {
console.log('页面加载完成');
}
</script>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<button onclick="sayHello()">点击我</button>
<script>
function sayHello() {
alert('Hello, World!');
}
</script>
</body>
</html>
```
2、外部JavaScript：通过在HTML中引用外部的.js文件来使用JavaScript，这种方式有助于保持代码的组织和可维护性，特别是当脚本较长或在多个页面中共享时。
示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>外部JavaScript示例</title>
<script src="script.js"></script>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<button id="myButton">点击我</button>
</body>
</html>
```
对应的script.js文件：
```javascript
window.onload = function() {
document.getElementById('myButton').onclick = function() {
alert('Hello, World!');
};
};
```
3、事件处理器：HTML元素可以附加事件处理器，当特定事件发生时（如点击、鼠标悬停、键盘输入等），JavaScript代码会被触发执行。
示例：
```html
<!DOCTYPE html>
<html>
<head>
<title>事件处理器示例</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<button id="myButton">点击我</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('Hello, World!');
});
</script>
</body>
</html>
```
通过以上方法，你可以将JavaScript与HTML结合起来，创建动态、交互性强的网页，记住，JavaScript代码的位置（内部或外部）取决于你的项目需求和代码组织，使用外部文件可以提高页面加载速度，因为浏览器可以缓存这些文件，而内部脚本则允许更快速的页面响应，因为代码直接嵌入在页面中，不过，随着现代浏览器的优化，这种差异已经不那么明显了。