内联脚本将JS写在HTML标签事件中,适合简单交互但不利于维护;2. 内部脚本用标签写在HTML中,建议放前;3. 外部脚本通过src引入.js文件,利于分离与复用,推荐使用。配合缩进、空行、驼峰命名等格式化规范可提升代码可读性和维护性。

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











