以下是 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 新增特性,用于解决模块导入路径复杂的问题,需注意浏览器兼容性