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