疑问式标题：如何在HTML中正确加载JavaScript？解决方案式标题：HTML和JavaScript一起使用的最佳实践_SEO优化

如何在HTML中加载JavaScript？

JavaScript是一种脚本语言，主要用于改善网站的用户体验，并为网站提供更多的动态功能。在HTML文件中加载JavaScript有多种方式，本文将介绍一些常用的方法。

1. 内联方式（Inline）

在HTML文件中嵌入JavaScript代码，使用<script>标签将JavaScript代码直接写在HTML文件中。这种方式适用于只有一个页面需要使用JavaScript的情况。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>加载JavaScript</title>
    <script>
        alert("Hello, World!");
    </script>
</head>
<body>
    <!页面内容>
</body>
</html>

2. 外部引用方式（External）

将JavaScript代码保存到一个单独的JS文件中，通过<script>标签的src属性引用该外部JS文件。这种方式适用于多个页面需要使用相同的JavaScript代码的情况。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>加载JavaScript</title>
    <script src="script.js"></script>
</head>
<body>
    <!页面内容>
</body>
</html>

3. 事件触发方式（Eventbased）

使用HTML元素的事件属性（如onclick、onload等）来触发JavaScript函数。在HTML文件中直接编写JavaScript代码或引用外部JS文件均可实现。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>加载JavaScript</title>
    <script>
        function showAlert() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="showAlert()">点击我</button>
    <!页面内容>
</body>
</html>

4. DOM加载完成后执行方式（DOM Content Loaded）

等待整个文档加载完成后再执行特定的JavaScript代码。用JavaScript的事件监听器来实现，等待DOMContentLoaded事件的发生后再执行相应代码。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>加载JavaScript</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            alert("Hello, World!");
        });
    </script>
</head>
<body>
    <!页面内容>
</body>
</html>