HTML5是一种用于构建网站和Web应用程序的标记语言，在HTML5中，JavaScript是一种广泛使用的脚本语言，它允许开发者为网站添加交互性和动态功能，要在HTML5中导入JavaScript，有几种方法可以实现，本文将详细介绍如何将JavaScript代码嵌入到HTML5文档中，以及如何使用外部JavaScript文件。
我们来了解一下内联脚本，内联脚本是直接在HTML文档中编写的JavaScript代码，要使用内联脚本，只需在HTML文档的<head>或<body>部分中使用<script>标签即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内联脚本示例</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
alert('页面已加载！');
});
</script>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
</body>
</html>
在这个例子中，我们在<head>部分添加了一个<script>标签，当页面加载时，DOMContentLoaded事件会被触发，弹出一个警告框，提示用户页面已加载。
尽管内联脚本可以实现基本的JavaScript功能，但当代码量较大时，可能会使HTML文档变得杂乱，推荐使用外部JavaScript文件，外部JavaScript文件是一种将JavaScript代码与HTML文档分离的方法，有助于保持代码的整洁和可维护性。
要使用外部JavaScript文件，首先需要创建一个.js扩展名的文件，script.js，然后将JavaScript代码写入该文件，
// script.js
document.addEventListener('DOMContentLoaded', function() {
alert('页面已加载！');
});
接下来，在HTML文档中使用<script>标签引入外部JavaScript文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>外部脚本示例</title> <script src="script.js"></script> </head> <body> <h1>欢迎来到我的网站！</h1> </body> </html>
在这个例子中，我们在<head>部分使用<script>标签的src属性引入了外部JavaScript文件script.js，当页面加载时，与内联脚本相同的功能将被执行。
除了在<head>部分引入外部JavaScript文件外，还可以将其放置在<body>部分的底部，这样做的好处是确保在执行JavaScript代码之前，页面的所有元素都已加载。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>底部外部脚本示例</title> </head> <body> <h1>欢迎来到我的网站！</h1> <script src="script.js"></script> </body> </html>
有多种方法可以在HTML5中导入JavaScript，内联脚本适用于简单的JavaScript功能，而外部JavaScript文件则有助于保持代码的整洁和可维护性，根据项目的需求和规模，可以灵活选择适当的导入方式。