在前端开发中,html中script 的type分别有哪几种?分别什么情况用到?

以下是 HTML 中<script>标签type属性的常见取值、说明及使用场景:

|------------------|------------------------------------------------|-----------------------------------------------------------------------------------|
| type 值 | 说明 | 使用场景 |
| 不写(空值) | HTML5 中默认等同于text/javascript,表示普通 JavaScript 脚本 | 绝大多数传统 JavaScript 代码,包括内联脚本和外部.js文件 |
| text/javascript | 明确指定为 JavaScript 脚本,与空值效果一致(HTML5 规范中) | 兼容旧版本浏览器(HTML4/XHTML 中需显式声明,现代浏览器可省略) |
| module | 表示脚本为 ES6 模块,支持import/export语法,模块作用域隔离 | 编写模块化 JavaScript 代码,需导入 / 导出其他模块时(如import utils from './utils.js') |
| importmap | 用于定义模块导入映射表(JSON 格式),指定模块标识符与实际路径的对应关系 | 简化模块导入路径,例如将"vue"映射到"https://unpkg.com/vue@3/dist/vue.esm-browser.js",需放在所有模块脚本之前 |
| text/babel | 表示脚本需要通过 Babel 转译(需配合 Babel 工具) | 编写 ES6 + 语法但需兼容低版本浏览器时,由 Babel 转译为 ES5 |
| text/typescript | 表示脚本为 TypeScript 代码(需配合 TypeScript 编译器) | 编写 TypeScript 代码,需编译为 JavaScript 后执行(通常通过构建工具处理) |
| application/json | 表示脚本内容为 JSON 数据(浏览器不执行,仅作为数据存储) | 嵌入 JSON 数据供 JavaScript 读取(需通过JSON.parse()解析内容) |
| text/template | 表示脚本为模板字符串(浏览器不执行,由框架解析) | 前端模板引擎(如 Underscore、EJS)的模板定义,例如<script type="text/template">...</script> |

说明:

  • 现代开发中,type="text/javascript"已很少显式使用,通常省略
  • module类型脚本默认启用严格模式,且会延迟执行(类似defer属性)
  • importmap是 HTML5 新增特性,用于解决模块导入路径复杂的问题,需注意浏览器兼容性
相关推荐
CharlesYu019 小时前
前端性能优化的第一性原理,是不断缩短“用户发起意图 → 获得可用结果”之间的时间
前端
平头哥技术团队9 小时前
Day 21 _ 页内锚点_给每段起个 id,目录写 href=_#id_,点一下页面就滚到那一段
前端·html·html5
子兮曰10 小时前
Bun v1.4.1 深度解析:从 Zig 到 Rust,一场 11 天、64 个 AI 代理的语言迁徙
前端·后端·bun
人民广场吃泡面11 小时前
什么是AI Agent?它又能给前端带来哪些效率提升?
前端·人工智能
中科三方11 小时前
两家域名注册商资质被ICANN终止:企业域名资产安全再受关注
前端·网络·安全·域名
bug总结11 小时前
uniapp vue3全局方法注册使用
前端·javascript·uni-app
华无丽言12 小时前
如何在宜搭中实现获取子表中的字段值赋值到父表中?
前端·javascript·低代码
IT_陈寒12 小时前
Vue的computed属性竟然坑了我一把
前端·人工智能·后端
威斯软科的老司机12 小时前
通俗讲解 CNN 图像识别、向量 Embedding、Softmax 概率计算这三块的简化原理
前端·人工智能·ui·数字孪生
泯泷13 小时前
手搓JSVM第 12 篇:完整最小 JSVM 实现与源码设计复盘
前端·javascript·前端框架