你写了1000行代码
却少了8个字母

一个网页有完整的JavaScript逻辑、精心设计的动画、复杂的按钮交互——
但少了一个标签，浏览器会把这1000行代码当成普通文字读过去，什么都不执行。

这8个字母是 <script> ↓ 往下看，3 分钟搞懂
<script> 标签
HTML 页面里 JavaScript 的"入场券"
💬 「script标签：让文字变成行动的开关。」
🧒 极简版 🙋 场景版 🎓 精准版
🏠 就像房子里的电路总开关——它本身不发电，但 JavaScript 代码必须通过它才能"通电"运行。没有 <script> 标签，代码是一张死图。
🔌 你在 HTML 文件里写了一段 JS 代码，就像把电线装进了墙里。但没有 <script> 标签，浏览器只会把那段文字当"说明书"念过去——它不知道那是需要执行的代码。

加了 <script>，浏览器才会说："哦，这里开始是代码，我要运行它！" 这就是为什么少了这个标签，再完美的 JS 逻辑也形同虚设。
⚙️ 浏览器解析 HTML 是按顺序扫描的，默认把所有内容当"结构标记"处理。<script> 是一个解析器模式切换信号——遇到它时，HTML 解析器暂停，把控制权交给 JavaScript 引擎；遇到 </script> 时，再切回 HTML 解析模式。

这也解释了为什么 <script> 的位置影响页面渲染：放在 <head> 里会阻塞后续 HTML 的渲染，放在 </body> 前则让页面先显示，再执行脚本。
🗺️ 概念坐标：先找到它在哪里
🏗️
HTML 结构
网页骨架，定义"有哪些元素"——段落、按钮、图片
前置概念
🎨
<style> 标签
CSS 的入口，和 script 同为"模式切换"标签，只不过引入样式而非行为
并列概念
🎬
<script> 标签 ★
JavaScript 的入口，让代码从"文字"变成"行动"
你在这里
⏱️
async / defer
控制 script 加载和执行时机，解决"什么时候跑"的问题
下游应用
🎯 核心类比：房子里的电路系统

🏠 房子类比

🧱
房子结构墙、门、窗——骨架
🎨
装修风格颜色、字体、布局
⚡
电路系统按开关灯才亮
🔌
电路总开关 ← 重点电路系统的入口
⟺

💻 网页代码

<body> ← HTML 结构 <style> ← CSS 入口 color: blue; </style> <script> ← JS 入口 ★ btn.addEventListener(...); </script> </body>

💡 <script> 告诉浏览器"从这里开始是JS代码"，</script> 告诉它"JS代码到这里结束"

📦 它由什么组成？（点击翻转看详情）
🟢
开标签 <script>
告诉浏览器"JS开始了"
点击翻转 →
作用：模式切换信号，HTML 解析器切换到 JS 执行模式。

类比：电路总开关拨到"开"的那一瞬间。
📝
代码区
内联JS代码，或用src引用外部文件
点击翻转 →
两种用法：
1. 内联：直接在标签里写JS
2. 外联：src="app.js"

类比：电路里的电线和设备。
🔴
闭标签 </script>
告诉浏览器"JS结束了"
点击翻转 →
重要：必须有，不可省略！

少了它，浏览器会把后面所有HTML都当成 JS 代码读，页面完全崩溃。

类比：电路总开关拨回"关"。
⏱️
async / defer
控制"什么时候执行"的属性
点击翻转 →
默认：同步，遇到就停
async：下载时不停，完成立刻执行
defer：等HTML全部解析完再执行

推荐：大多数情况用 defer。
🔄 浏览器遇到 <script> 时发生了什么？
1
浏览器从上到下扫描 HTML
就像你从第一行开始读一篇文章，遇到什么处理什么
2
遇到 <script> 标签 → 停止解析 HTML
相当于"暂停读文章，先去处理这段代码"
3
如果有 src 属性 → 下载外部 JS 文件
从网络获取代码（大文件会让页面变慢的根本原因）
4
JavaScript 引擎执行代码
按钮逻辑、动画、数据处理——全部在这一步生效
5
遇到 </script> → 切回 HTML 解析模式
继续读后面的 HTML，直到页面加载完成
🧪 动手试试：有 vs 没有 <script>

选择模式，然后点击按钮，看看页面的反应有什么不同：

aha.wiki/demo
点击上面的按钮试试
<button id="demoEl">点我变色</button> <script> ← 有这个，JS才能运行 document.getElementById('demoEl') .addEventListener('click', () => { document.body.style.background = '#dbeafe'; }); </script>
✅ 现在有script标签：浏览器识别JS代码并执行它，点按钮有反应。
💡 一个真实的例子
❌ 没有 <script> 之前
小李做了一个漂亮的网页，加了一段 JS 想让图片点击后放大。

但他不知道 JS 代码需要放在 <script> 里，直接写在 HTML 里。

结果：那段代码被浏览器当成"看不懂的文字"跳过，图片点了完全没反应。他以为是 JS 写错了，反复检查了两个小时……
✅ 加了 <script> 之后
朋友告诉他，只需要把 JS 代码包在 <script> 和 </script> 之间。

刷新页面——图片点击后立刻弹出放大效果，完全正常。

他花了两个小时找的"JS bug"，其实只是少了一个标签。这个标签，是浏览器识别 JS 代码的唯一信号。
⚠️ 常见误解
❌ 把 JS 写进 HTML 文件，浏览器会自动识别并执行
✅ 不对——浏览器需要 <script> 标签才知道"这段是代码"。没有标签，代码只是一堆被忽视的文字。
❌ <script> 放在哪里都一样，不影响效果
✅ 位置很重要——放在 <head> 里会阻塞页面显示（先跑代码再渲染），放在 </body> 前用户体验更好。
❌ 必须写 type="text/javascript"，否则不生效
✅ HTML5 之后不需要——浏览器默认 <script> 里就是 JavaScript，写不写这个属性，效果完全一样。
📏 类比的边界（哪里不完全准确）
  • 电路总开关是物理设备，<script> 只是一个文本标记——它本身不"执行"代码，只是告诉解析器"切换模式"
  • 一栋房子通常只有一个总电闸，但一个 HTML 页面可以有多个 <script> 标签，每个独立执行
  • 电路总开关控制全部电力，<script> 的 async/defer 属性可以精细控制每段 JS 的执行时机——这是电闸做不到的
✅ 秒测：你真的懂了吗？
1. 以下哪种情况，页面按钮点击后会有反应？
2. 为什么建议把 <script> 放在 </body> 前，而不是 <head> 里？
3. 一个HTML文件里，可以有几个 <script> 标签？
🎉
全对！你已经秒懂 <script> 标签了
分享给还在被"按钮没反应"困扰的朋友？