在前端开发中,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 新增特性,用于解决模块导入路径复杂的问题,需注意浏览器兼容性
相关推荐
夜郎king8 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
夏幻灵9 小时前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_10 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝10 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions10 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发10 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
程序员猫哥_10 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞0510 小时前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
我爱加班、、10 小时前
Websocket能携带token过去后端吗
前端·后端·websocket
AAA阿giao10 小时前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架