在 HTML 前端开发中，JavaScript 主要负责页面的交互功能，实际应用存有三种引用方式，分别为行内式、内嵌式以及外部引用式：
1、行内式
定义：把 JavaScript 代码径直书写于 HTML 标签的事件属性当中，此种方式能够让 JavaScript 代码与 HTML 元素紧密相联，直接对元素的事件予以响应。
语法格式：
HTML 标签里，凭借事件属性（诸如 onclick、onmouseover 等等）来指定 JavaScript 代码。
使用场景和示例：当需要为某一特定的 HTML 元素增添简易的交互行为之时，行内式极为便捷。例如，在一个按钮之上添加点击事件，用以显示一个警告框。
<button onclick="alert('Hello, World!')">点击我</button>
优缺点：
优点在于代码简洁明了、直观清晰，能够迅速为元素添加简单行为；缺点则是代码的可读性欠佳，不利于进行维护，并且大量运用会致使 HTML 代码变得繁杂臃肿，也不便于重复使用。
2、内嵌式
定义：将 JavaScript 代码书写在 HTML 文档的 。
语法格式：<script> // 这里编写JavaScript代码 </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌式JavaScript</title>
<script> function showMessage() { alert('Hello World!'); } </script>
</head>
<body>
<button onclick="showMessage()">点击我</button>
</body>
</html>
使用场景和示例：当页面中的 JavaScript 代码量较少，且仅用于当前页面的交互逻辑时，内嵌式比较合适。比如，实现一个简单的图片轮播效果，在页面加载时自动切换图片。
优缺点：优点是相对集中管理 JavaScript 代码，比行内式更具可读性和维护性；缺点是如果页面中 JavaScript 代码过多，会影响 HTML 文档的结构清晰度，且不利于代码复用。
3.外部引用式
定义：将 JavaScript 代码写在一个独立的.js文件中，然后在 HTML 文档中通过<script>标签的src属性来引用该文件。
语法格式：在 HTML 中使用<script src="path/to/your.js"></script>来引用外部 JavaScript 文件，z主文件index.html内容
<!DOCTYPE html>
<html>
<head>
<title>这是javascript外联demo</title>
<script type="text/javascript src =./demo.js></script>
<head>
<body>
</body>
</html>
demo.js文件内容：
var d= "hello world!";
alert(d)
使用场景和示例：适用于 JavaScript 代码量较大，需要在多个页面中复用，或者希望将 JavaScript 代码与 HTML 代码完全分离以提高代码的可维护性和可扩展性的情况。比如，在一个大型网站中，用于实现全局的交互功能、表单验证等。
优缺点：优点是代码结构清晰，易于维护和复用，提高了代码的可维护性和可扩展性；缺点是需要额外管理外部文件，可能会增加 HTTP 请求次数，影响页面加载速度，但可以通过合理的优化措施（如合并文件、缓存等）来解决。