在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文档的

4、必须确保script标签中不包含任何内部脚本内容，src属性与标签体内容不可共存。

二、使用script标签内嵌JavaScript代码

内嵌方式是将JavaScript代码直接写在HTML文档内的script标签内部。适用于少量逻辑、调试场景或需动态生成脚本内容的情况。

1、在HTML5文档的

2、将JavaScript代码（如console.log("Hello");）写入script标签内部。

3、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标签置于闭合前，可避免阻塞HTML解析，提升首屏渲染速度，尤其适用于不依赖DOMContentLoaded事件的传统脚本。

1、在HTML文档末尾、标签之前插入

2、在该script标签中编写或引用所需JavaScript逻辑。

3、此方式无需defer或async即可自然实现“DOM就绪后执行”的效果。