在前端开发中,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 新增特性,用于解决模块导入路径复杂的问题,需注意浏览器兼容性
相关推荐
知识分享小能手2 小时前
React学习教程,从入门到精通,React 单元测试:语法知识点及使用方法详解(30)
前端·javascript·vue.js·学习·react.js·单元测试·前端框架
PineappleCoder5 小时前
搞定用户登录体验:双 Token 认证(Vue+Koa2)从 0 到 1 实现无感刷新
前端·vue.js·koa
EveryPossible5 小时前
展示内容框
前端·javascript·css
伊织code6 小时前
WebGoat - 刻意设计的不安全Web应用程序
前端·安全·webgoat
子兮曰6 小时前
Vue3 生命周期与组件通信深度解析
前端·javascript·vue.js
拉不动的猪6 小时前
回顾关于筛选时的隐式返回和显示返回
前端·javascript·面试
yinuo6 小时前
不写一行JS!纯CSS如何读取HTML属性实现Tooltip
前端
gnip6 小时前
脚本加载失败重试机制
前端·javascript
遗憾随她而去.6 小时前
Uni-App 页面跳转监控实战:快速定位路由问题
前端·网络·uni-app
码农学院6 小时前
MSSQL字段去掉excel复制过来的换行符
前端·数据库·sqlserver