在前端開發中,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 新增特性,用于解決模塊導入路徑復雜的問題,需注意瀏覽器兼容性

?

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/95953.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/95953.shtml
英文地址,請注明出處:http://en.pswp.cn/web/95953.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

2025職教技能大賽汽車制造與維修賽道速遞-產教融合實戰亮劍?

各位職教同仁&#xff0c;2025年世界職業院校技能大賽總決賽爭奪賽&#xff08;汽車制造與維修賽道&#xff09;國內賽區的戰報新鮮出爐&#xff01;本次大賽以“技炫青春 能創未來”為主題&#xff0c;聚焦汽車產業鏈高質量發展需求&#xff0c;在真實場景中比拼技能&#xff…

日志 | Spring Boot 日志配置通用規律(AI問答)

Spring Boot 日志配置通用規律。想看特定日志&#xff0c;怎么打開日志開關 文章目錄一、一句話總結二、AI問答版提問詞AI的響應&#x1f4ca; Spring Boot 日志配置通用規律1. 基本語法結構2. 日志級別&#xff08;從詳細到簡潔&#xff09;&#x1f3af; 常用日志配置分類1. …

DJANGO后端服務啟動報錯及解決

1.報錯信息[2025-09-05 17:08:54 0800] [23438] [INFO] Worker exiting (pid: 23438) [2025-09-05 17:08:54 0800] [23440] [ERROR] Exception in worker process Traceback (most recent call last):File "/www/SOP/lib64/python3.11/site-packages/gunicorn/arbiter.py&…

Qt 中的 Q_OBJECT 宏詳解 —— 從源碼到底層機制的全面剖析

Qt 中的 Q_OBJECT 宏詳解 —— 從源碼到底層機制的全面剖析 文章目錄Qt 中的 Q_OBJECT 宏詳解 —— 從源碼到底層機制的全面剖析摘要一、Q_OBJECT 宏是什么&#xff1f;二、Q_OBJECT 宏背后的源碼三、moc 工具的作用四、信號與槽調用流程五、沒有 Q_OBJECT 會怎樣&#xff1f;六…

GD32自學筆記:5.定時器中斷

定時器中斷功能主要是兩點&#xff1a;1.怎么配置的定時器中斷時間間隔&#xff1b;2.中斷里長什么樣一、定時器中斷配置函數直接在bsp_basic_timer.c里找到下面函數&#xff1a;void basic_timer_config(uint16_t pre,uint16_t per) {/* T 1/f, time T * pre,pertime (pre …

[Godot入門大全]目錄

1 免責聲明 資源分享免責聲明&#xff1a; 本平臺/本人所分享的各類資源&#xff08;包括但不限于文字、圖片、音頻、視頻、文檔等&#xff09;&#xff0c;均來源于公開網絡環境中的可分享內容或已獲授權的傳播素材。 本平臺/本人僅出于信息交流、資源共享之目的進行傳播&…

使用 StringRedisTemplate 實現 ZSet 滾動查詢(處理相同分數場景)

1. 為什么需要改進當 ZSet 中存在相同分數 (score) 的元素時&#xff0c;單純使用分數作為偏移會導致數據漏查或重復。例如&#xff1a;多條記錄具有相同時間戳&#xff08;作為分數&#xff09;分頁查詢時可能跳過相同分數的元素或重復查詢相同分數的元素改進方案&#xff1a;…

【Android】安裝2025版AndroidStudio開發工具開發老安卓舊版App

為了開發老舊的安卓App&#xff0c;這里記錄一下2025版AndroidStudio的安裝過程&#xff0c;如果卸載以后&#xff0c;可以按照此文章的步驟順利重新安裝繼續使用。 文章目錄安裝包Android SDK新建項目新建頁面構建項目Gradle下載失敗構建失敗構建完成編譯失敗安裝失敗關于APP在…

Python跳過可迭代對象前部元素完全指南:從基礎到高并發系統實戰

引言&#xff1a;跳過前部元素的核心價值在數據處理和系統開發中&#xff0c;跳過可迭代對象的前部元素是常見且關鍵的操作。根據2024年數據處理報告&#xff1a;92%的數據清洗需要跳過文件頭部85%的日志分析需要忽略初始記錄78%的網絡協議處理需跳過頭部信息65%的機器學習訓練…

ConcurrentHashMap擴容機制

ConcurrentHashMap的擴容為了提高效率&#xff0c;是多線程并發的每個線程控制一部分范圍節點的擴容(根據cpu與數組長度確定控制多大范圍)有兩個核心參數sizeCtl&#xff1a;標記擴容狀態 負數時代表正在擴容&#xff0c;存儲量參與擴容的線程數&#xff0c;正數代表出發擴容的…

Spring Cloud Gateway 進行集群化部署

如果將 Gateway 單獨部署為一個服務而不做任何高可用處理&#xff0c;它確實會成為一個單點故障&#xff08;SPOF, Single Point of Failure&#xff09;。如果這個唯一的 Gateway 實例因為服務器宕機、應用崩潰、部署更新或其他任何原因而不可用&#xff0c;那么整個系統的所有…

計算機網絡:以太網中的數據傳輸

以太網中&#xff0c;數據的傳輸依賴于一系列標準化的技術規范&#xff0c;核心包括幀結構封裝、介質訪問控制機制和物理層編碼技術&#xff0c;具體如下&#xff1a; 1. 以“幀&#xff08;Frame&#xff09;”為基本傳輸單元 以太網在數據鏈路層將網絡層的數據包&#xff08;…

元器件--USB TypC接口

USB TypC接口下圖這些都是USB接口A口與B口的區別USB A口和B口最初由USB-IF在1996年引入。根據當時的USB協議&#xff0c;A口主要用于主設備&#xff08;如電腦&#xff09;&#xff0c;而B口則用于從設備&#xff08;如打印機和攝像頭&#xff09;。隨著USB-C接口的日益普及&am…

多線程之HardCodedTarget(type=OssFileClient, name=file, url=http://file)異常

多線程之HardCodedTarget(typeOssFileClient, namefile, urlhttp://file)異常 摘要&#xff1a; 文檔描述了多線程環境下調用Feign客戶端OssFileClient時出現的HardCodedTarget異常。異常發生在異步保存文件到ES時&#xff0c;Feign調用未返回預期結果而直接打印了客戶端對象。…

計算機視覺(十二):人工智能、機器學習與深度學習

人工智能 (AI)&#xff1a;宏大的目標 人工智能是最廣泛、最宏大的概念&#xff0c;它的目標是讓機器能夠模仿人類的智能行為&#xff0c;例如&#xff1a; 推理&#xff1a;像下棋程序一樣&#xff0c;通過邏輯來做決策。規劃&#xff1a;為實現一個目標而制定步驟&#xff0c…

容器元素的滾動條回到頂部

關閉再打開后&#xff0c;容器元素的滾動條回到頂部解決方法&#xff1a;1、通過打開開發者工具&#xff08;F12&#xff09;&#xff0c;找到滾動條所屬元素為 el-textarea__inner&#xff0c;其父類 class"el-textarea content"2、代碼&#xff0c;通過元素的方法 …

分布式專題——2 深入理解Redis線程模型

1 Redis 簡介 1.1 Redis 是什么&#xff1f; Redis 全稱 Remote Dictionary Server&#xff08;遠程字典服務&#xff09;&#xff0c;是一個開源的高性能 Key-Value 數據庫&#xff1b; 官網&#xff1a;Redis - The Real-time Data Platform&#xff1b; 引用官網上的?個…

simd學習

如何查看cpu是否支持simd&#xff1f;# 檢查特定指令集 grep -o avx2 /proc/cpuinfo | head -1 # 檢查AVX2 grep -o sse4 /proc/cpuinfo | head -1 # 檢查SSE4 grep -o avx512 /proc/cpuinfo | head -1 # 檢查AVX512gcc編譯選項&#xff0c;增加支持simd-mavx2 -D__AVX2__SS…

LabVIEW汽車發動機振動測試

以某型號四缸汽油發動機為測試對象&#xff0c;借助 LabVIEW 平臺與高精度數據采集硬件&#xff0c;開展發動機全工況振動測試。通過實時采集缸體、曲軸箱關鍵部位振動信號&#xff0c;分析振動特征與故障關聯&#xff0c;驗證發動機運行穩定性&#xff0c;為后期優化設計提供數…

android 四大組件—Service

啟動服務startService//啟動服務&#xff0c;通過類名 Intent intent new Intent(this, WiFiAutoLinkService.class); startService(intent); //通過字符串啟動 Intent intent new Intent(); intent.setAction("com.launcher.app"); intent.setPackage("com.l…