内联脚本将JS写在HTML标签事件中，适合简单交互但不利于维护；2. 内部脚本用<script>标签写在HTML中，建议放</body>前；3. 外部脚本通过src引入.js文件，利于分离与复用，推荐使用。配合缩进、空行、驼峰命名等格式化规范可提升代码可读性和维护性。
在HTML中嵌入和格式化JS代码，主要有三种方式：内联脚本、内部脚本和外部脚本。每种方式都有其适用场景和最佳实践。
1. 内联脚本（Inline Script）
将JS代码直接写在HTML标签的事件属性中，比如 onclick、onload 等。
示例：<button onclick="alert('Hello!')">点击我</button>
这种方式适合简单交互，但不推荐用于复杂逻辑，会混杂结构与行为，不利于维护。
立即学习“前端免费学习笔记（深入）”；
2. 内部脚本（Internal Script）
使用 <script> 标签将JS代码写在HTML文档的 <head> 或 <body> 中。
示例：<script><br> function greet() {<br> console.log("欢迎访问页面");<br> }<br> greet();<br></script>
适用于页面独有、代码量较小的脚本。建议放在 </body> 结束标签前，避免阻塞页面渲染。
3. 外部脚本（External Script）
将JS代码保存为独立的 .js 文件，通过 src 属性引入。
示例：<script src="script.js"></script>
这是最推荐的方式，有利于代码分离、缓存复用和团队协作。多个页面可共享同一JS文件。
JS代码格式化建议
无论哪种嵌入方式，保持JS代码整洁易读都很重要。
- 使用两个或四个空格缩进，保持一致性
- 函数和块级作用域前后留空行
- 变量命名采用驼峰式（camelCase）
- 添加必要的注释说明逻辑
- 避免一行写多条语句
<script><br> // 页面加载后执行<br> window.addEventListener('load', function() {<br> const message = '页面已就绪';<br> console.log(message);<br> });<br></script>
基本上就这些。合理选择嵌入方式，配合良好格式，能让前端代码更清晰、易维护。
