HTML入门教程23：HTML脚本

一、嵌入JavaScript的方式

在HTML中嵌入JavaScript脚本有三种主要方式：

内联脚本：直接在HTML文档的<script>标签中编写JavaScript代码。
外部脚本：将JavaScript代码保存在独立的.js文件中，并在HTML文档中通过<script>标签的src属性引用它。
行内事件处理：在HTML元素的属性中直接嵌入JavaScript代码，通常用于处理事件（如点击、悬停等）。

二、内联脚本

内联脚本是将JavaScript代码直接嵌入到HTML文档的<script>标签中。以下是一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内联脚本示例</title>
</head>
<body><h1>欢迎来到我的网站</h1><p id="demo"></p><script>// 这是一个简单的JavaScript代码，它会在页面加载时向<p>元素中添加文本document.getElementById("demo").innerHTML = "Hello, World!";</script>
</body>
</html>

三、外部脚本

外部脚本是将JavaScript代码保存在独立的.js文件中，并在HTML文档中引用它。这样做的好处是可以将JavaScript代码与HTML结构分离，使代码更加清晰和易于维护。

首先，创建一个名为script.js的文件，并在其中编写JavaScript代码：

// script.js
document.getElementById("demo").innerHTML = "Hello from an external script!";

然后，在HTML文档中通过<script>标签的src属性引用这个外部脚本：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外部脚本示例</title>
</head>
<body><h1>欢迎来到我的网站</h1><p id="demo"></p><script src="script.js"></script>
</body>
</html>

四、行内事件处理

行内事件处理是在HTML元素的属性中直接嵌入JavaScript代码。这种方法通常用于处理简单的事件，如按钮点击。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>行内事件处理示例</title>
</head>
<body><h1>欢迎来到我的网站</h1><button onclick="alert('Button clicked!')">点击我</button>
</body>
</html>