在HTML5中执行JavaScript需用script标签，分外链（src属性引用.js文件）和内嵌（标签内写代码）两种方式；推荐显式设置type属性，可用defer/async控制外链脚本执行时机，或置于body底部优化渲染。
如果您希望在HTML5文档中执行JavaScript代码，则需要通过script标签将脚本引入页面。以下是实现外链与内嵌两种方式的具体操作步骤：
一、使用script标签外链引入JS文件
外链方式是将JavaScript代码保存为独立的.js文件，再通过script标签的src属性引用该文件。这种方式有利于代码复用、缓存优化和维护分离。
1、新建一个文本文件，将JavaScript代码写入其中，例如保存为main.js。
2、确保main.js文件与HTML文件在同一目录下，或正确设置相对/绝对路径。
立即学习“前端免费学习笔记（深入）”；
3、在HTML5文档的<head>或<body>底部添加script标签，并设置src属性指向该JS文件。
4、必须确保script标签中不包含任何内部脚本内容，src属性与标签体内容不可共存。
二、使用script标签内嵌JavaScript代码
内嵌方式是将JavaScript代码直接写在HTML文档内的script标签内部。适用于少量逻辑、调试场景或需动态生成脚本内容的情况。
1、在HTML5文档的<head>或<body>中插入<script></script>标签对。
2、将JavaScript代码（如console.log("Hello");）写入script标签内部。
3、script标签必须闭合，且内部不能出现未转义的</script>字符串。
4、若需延迟执行，可添加defer或async属性以控制加载时机。
三、指定script标签的type属性（可选但推荐）
HTML5中script标签的type属性默认为"text/javascript"，可省略；但显式声明有助于语义清晰及兼容旧环境解析。
1、对于标准JavaScript代码，在script标签中添加type="text/javascript"。
2、若使用ES模块语法（如import/export），则必须设置type="module"。
3、type="module"会自动启用defer行为，且无法与nomodule同时用于同一脚本。
四、控制脚本执行时机：defer与async属性
defer与async均用于异步加载外部脚本，但执行时机不同：defer保证按顺序执行且在DOM构建完成后运行；async则加载完立即执行，不保证顺序。
1、为外链script标签添加defer属性，适用于依赖DOM结构的初始化脚本。
2、为外链script标签添加async属性，适用于广告、统计等无依赖的独立脚本。
3、defer和async仅对外链script有效，内嵌脚本不支持这两个属性。
五、将script标签放置在body底部的实践方式
将script标签置于</body>闭合前，可避免阻塞HTML解析，提升首屏渲染速度，尤其适用于不依赖DOMContentLoaded事件的传统脚本。
1、在HTML文档末尾、</body>标签之前插入<script>标签。
2、在该script标签中编写或引用所需JavaScript逻辑。
3、此方式无需defer或async即可自然实现“DOM就绪后执行”的效果。
