<script>: 脚本标签

最后更新：2026-10-13

<script>脚本标签

在页面中嵌入或引用 JavaScript，实现交互逻辑；可放在 head 或 body，推荐放 body 末尾以加快渲染。

分类	脚本与嵌入
内容模型	流式内容
允许的父元素	接受流式内容的元素
闭合标签	需要 `</script>` 标签
状态	标准

📝 语法

<script src="app.js"></script>

⚙️ 属性

该元素支持全局属性及以下专有属性：

属性	值	描述
`src`		外部脚本文件的地址（写了 src 则标签内代码忽略）。
`type`		脚本类型，默认 text/javascript（模块用 module）。
`async`		下载时不阻塞解析，下载完立即执行（不分先后）。
`defer`		延迟到文档解析完成后、DOMContentLoaded 前执行。
`crossorigin`		跨域脚本的 CORS 设置（anonymous/use-credentials）。

查看所有全局属性 → 查看所有事件属性 →

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
<script>	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 引用外部文件用 src；内联脚本直接写在标签内；async 与 defer 只对外链脚本有效。

❓ 常见问题

Qscript 的 async 和 defer 有什么区别？

A都是非阻塞加载外部脚本：async 下载完立即执行，顺序不保证（适合独立脚本如统计）；defer 在 DOM 解析完成后按顺序执行（适合依赖 DOM 的主脚本）。都不加则下载时阻塞 HTML 解析，现代项目外部脚本至少加其一。

Qscript 放 head 里还是 body 末尾？

A加 defer 的脚本放 head 里即可（提前下载、不阻塞渲染）；内联脚本或依赖 DOM 的无 defer 脚本放 body 末尾。现代默认做法：head + defer，配合 module 类型时默认即是 defer 行为。

Qscript 的 type='module' 有什么特别之处？

A启用 ES Module：支持 import/export、自动严格模式、默认 defer 延迟执行、作用域独立（不污染全局）。传统无 module 的脚本默认全局作用域、同步执行。新项目脚本建议统一用 module。

更多案例即将上线，敬请期待。

📚 相关教程

HTML 标签参考手册

查看全部 HTML 标签的语法、属性与示例。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。