HTML基础教程（十七）头部元素之＜script＞元素：＜script＞，让HTML“动”起来的魔法卷轴！

最新推荐文章于 2025-09-22 08:29:00 发布

原创

最新推荐文章于 2025-09-22 08:29:00 发布 · 506 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

引言：当HTML遇见JavaScript——一场“动静结合”的包办婚姻

在Web世界的早期，HTML是一位安静沉稳的“文书工作者”，只负责规规矩矩地搭建文档结构。直到1995年，一位名叫Brendan Eich的“魔法师”在短短十天内创造了JavaScript，从此<script>元素如同一位调皮捣蛋的魔法学徒，让静态页面学会了“跳舞”——尽管最初它常因阻塞渲染而被吐槽为“页面加载的猪队友”！

如今，<script>已成长为Web开发的“瑞士军刀”，从简单的表单验证到复杂的单页应用，无一不是它的舞台。但你真的了解这位老朋友吗？本文将带你用“显微镜”观察<script>的每一个毛孔，顺便用实战代码揭晓如何让它从“拖后腿”变成“神助攻”！

一、基础回顾：<script>元素的“出厂设置”

1.1 基本语法与属性

<!-- 内联脚本 -->
<script>
  alert('Hello from the 90s!');
</script>

<!-- 外部脚本 -->
<script src="app.js"></script>

但看似简单的标签背后隐藏着关键属性：

src：指定外部脚本URL（告别代码臃肿！）
type：早期用于标识语言类型（如text/javascript），如今更多用于模块脚本（module）
defer/async：加载控制“双子星”（后续详解）
crossorigin：跨域请求配置（应对CORS限制）
integrity：子资源完整性校验（防范CDN被篡改）

1.2 类型演变：从MIME类型到模块化

历史上，type属性曾被迫标注复杂的MIME类型（如text/javascript;version=1.8），但现代浏览器已统一将JavaScript作为默认语言。真正的转折点是ES6模块的引入：

<script type="module">
  import { utils } from './utils.js';
  // 模块代码享有自己的作用域，自动启

最低0.47元/天解锁文章