HTML5中引入JavaScript有四种方式：一是通过外链JS文件，支持defer/async；二是内嵌代码于中，建议置于body底部；三是显式声明type属性，如type="module"启用ES模块；四是动态创建script标签实现按需加载。
js代码引用脚本【引用】">
如果您在HTML5页面中需要执行JavaScript逻辑，必须通过正确的方式将脚本引入文档。以下是HTML5中引用脚本的多种方式，涵盖外链引入与内嵌代码两种基本形式。
一、使用
外链方式将JavaScript代码保存为独立的.js文件，并通过src属性在HTML中引用，有利于代码复用、缓存利用和维护分离。
1、在项目目录中创建一个名为main.js的纯文本文件，并写入合法的JavaScript代码，例如alert("Hello");。
2、在HTML5文档的
或末尾添加。立即学习“前端免费学习笔记（深入）”；
3、确保文件路径正确，相对路径需基于当前HTML文件位置计算；若使用绝对路径，需以/开头或完整URL形式书写。
4、可添加defer属性使脚本在HTML解析完成后执行，或添加async属性实现异步加载并立即执行（适用于无依赖的独立脚本）。
二、在HTML5文档中内嵌JavaScript代码
内嵌方式将JavaScript直接写入HTML文件内的
1、在
或中插入之间，例如console.log("Script loaded");。
3、建议将内嵌脚本置于
底部，避免阻塞HTML解析；若必须放在中，应添加defer属性以确保DOM就绪后再执行。
4、内嵌脚本中不得包含字符串，否则会导致标签提前闭合；如需输出该字符串，应拆分为或使用变量拼接。
三、使用type属性明确脚本类型（HTML5可选但推荐）
HTML5默认将
1、对于传统脚本，可写为，尽管该值在HTML5中为可选且已过时，但部分旧环境仍依赖。
2、对于ES模块，必须指定type="module"，此时浏览器会按模块规范解析并启用顶层await、import/export等特性。
3、对于内联模块脚本，同样需加type="module"，例如。
4、注意：含type="module"的脚本默认延迟执行且自动启用strict模式，无法访问全局作用域中的var声明变量。
四、动态创建script标签实现按需加载
通过DOM操作动态插入
1、使用document.createElement('script')创建新script节点。
2、设置其src属性为外部JS文件地址，或设置textContent为内联代码字符串。
3、可选地设置async = true或defer = true控制加载行为。
4、调用document.head.appendChild()或document.body.appendChild()将脚本注入文档。
5、关键提示：动态插入的外链脚本默认为async模式，即下载不阻塞解析，下载完成立即执行，执行顺序不保证。
