在前端开发中,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 新增特性,用于解决模块导入路径复杂的问题,需注意浏览器兼容性
相关推荐
oak隔壁找我19 小时前
Node.js的package.json
前端·javascript
talenteddriver19 小时前
web: http请求(自用总结)
前端·网络协议·http
全栈派森19 小时前
Flutter 实战:基于 GetX + Obx 的企业级架构设计指南
前端·flutter
Awu122719 小时前
Vue3自定义渲染器:原理剖析与实践指南
前端·vue.js·three.js
支撑前端荣耀20 小时前
从零实现前端监控告警系统:SMTP + Node.js + 个人邮箱 完整免费方案
前端·javascript·面试
进击的野人20 小时前
Vue.js 插槽机制深度解析:从基础使用到高级应用
前端·vue.js·前端框架
重铸码农荣光20 小时前
🎯 从零搭建一个 React Todo 应用:父子通信、状态管理与本地持久化全解析!
前端·react.js·架构
用户40993225021220 小时前
Vue3 v-if与v-show:销毁还是隐藏,如何抉择?
前端·vue.js·后端
Mr_chiu20 小时前
🚀 效率暴增!Vue.js开发必知的15个神级提效工具
前端
shanLion20 小时前
Vite项目中process报红问题的深层原因与解决方案
前端·javascript