html5中引入javascript有四种方式：一是通过外链js文件，支持defer/async；二是内嵌代码于中，建议置于body底部；三是显式声明type属性，如type="module"启用es模块；四是动态创建script标签实现按需加载。
代码复用、缓存利用和维护分离。
1、在项目目录中创建一个名为main.js的纯文本文件，并写入合法的JavaScript代码，例如alert("Hello");。
2、在HTML5文档的
或末尾添加<script>标签，设置src属性指向该文件路径，如<code><script src="main.js"></script>。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>3、确保文件路径正确，相对路径需基于当前HTML文件位置计算；若使用绝对路径，需以<code>/</code>开头或完整URL形式书写。</p> <p>4、可添加<code>defer</code>属性使脚本在HTML解析完成后执行，或添加<code>async</code>属性实现异步加载并立即执行（适用于无依赖的独立脚本）。</p> <h2>二、在HTML5文档中内嵌JavaScript代码</h2> <p>内嵌方式将JavaScript直接写入HTML文件内的<script>标签中，适合少量、页面专属、无需复用的逻辑。</script>1、在
或中插入<script>标签，不设置src属性。 <p>2、将JavaScript代码写入<script>与</script>之间，例如console.log("Script loaded");。
3、建议将内嵌脚本置于
底部，避免阻塞HTML解析；若必须放在中，应添加defer属性以确保DOM就绪后再执行。
4、内嵌脚本中不得包含字符串，否则会导致标签提前闭合；如需输出该字符串，应拆分为或使用变量拼接。
三、使用type属性明确脚本类型（HTML5可选但推荐）
HTML5默认将<script>视为JavaScript，但显式声明type可增强语义清晰度与未来兼容性，尤其在涉及模块化或新语言时。</script>
1、对于传统脚本，可写为<script type="text/javascript"></script>，尽管该值在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>元素，可在运行时决定是否加载、从何处加载脚本，适用于条件执行、<a style="color:#f60; text-decoration:underline;" title= "懒加载" href="https://www.php.cn/zt/16941.html" target="_blank">懒加载或第三方SDK集成场景。</script>
1、使用document.createElement('script')创建新script节点。
2、设置其src属性为外部JS文件地址，或设置textContent为内联代码字符串。
3、可选地设置async = true或defer = true控制加载行为。
4、调用document.head.appendChild()或document.body.appendChild()将脚本注入文档。
5、关键提示：动态插入的外链脚本默认为async模式，即下载不阻塞解析，下载完成立即执行，执行顺序不保证。
