html5怎么引用脚本_HTML5用外链或内嵌JS代码引用脚本【引用】

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模式，即下载不阻塞解析，下载完成立即执行，执行顺序不保证。