怎么在HTML页面中引入并运行第一个JS脚本

在网页开发中，HTML 负责组织页面结构与内容，而 JavaScript（简称 JS）则负责赋予页面交互能力与动态行为。让两者产生协作的核心入口只有一个，那就是 HTML 提供的 <script> 标签。要在网页中运行你的第一行 JavaScript 代码，本质上只需两步：准备一个基本的 HTML 网页文件，并在其中通过 <script> 标签注入或引入 JS 逻辑，最后双击在浏览器中打开即可观察执行结果。

本文将从零开始带你搭建环境，分别演示内联嵌入与外部文件引入两种标准方式，解释脚本放置位置对页面渲染的影响，并指导你如何通过浏览器的开发者工具验证脚本的成功运行。

一、操作准备：极简的工作目录与开发工具

编写与运行 HTML 及 JavaScript 不需要安装庞大复杂的编译环境或配置服务器。任何现代操作系统（Windows、macOS 或 Linux）自带的工具加上一个现代浏览器（Chrome、Edge、Firefox 或 Safari）就足以完成全部工作。

建议在你的电脑桌面上新建一个专门的练习文件夹，命名为 hello-js。在该文件夹中，我们将存放后续编写的网页与脚本文件。编写代码时，推荐使用代码编辑器（如 VS Code、Sublime Text），也可以直接使用系统自带的纯文本编辑器（注意不要使用 Word 等富文本编辑器，它们会自动加入排版格式符号导致代码语法错误）。

二、方法一：直接在HTML中写入内联脚本（Inline Script）

对于初学者或者几十行内的小逻辑，最直接的方法就是使用内联脚本。所谓内联脚本，就是直接在 HTML 文件中使用成对的 <script> 和 </script> 标签，将 JavaScript 源代码直接书写在两个标签之间。

请在 hello-js 目录下创建一个名为 index.html 的文件，并录入以下完整的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 JavaScript 页面</title>
</head>
<body>
  <h1>欢迎来到前端世界</h1>
  <p>这是一个包含 JavaScript 的测试页面。</p>

  <!-- 引入内联 JavaScript 脚本 -->
  <script>
    // 弹窗提示
    alert("你好！这是我的第一个 JavaScript 脚本！");

    // 在控制台打印信息
    console.log("JavaScript 脚本已成功在后台运行！");
  </script>
</body>
</html>

代码解析与运行验证

在这段代码中：

• <script>：这是 HTML 原生专用于引入或包含脚本的元素。在现代 HTML5 标准中，你不需要再声明 type="text/javascript"，浏览器默认就会将内容当作 JavaScript 执行。
• alert(...)：调用浏览器提供的内置弹窗函数。当页面执行到这一行时，浏览器会弹出一个带有确认按钮的原生提示框，并暂停后续执行，直到用户点击“确定”。
• console.log(...)：向浏览器的开发者工具控制台输出日志。这是实际开发中最常用的调试手段，它不会打扰用户浏览界面，但能清晰记录程序运行状态。

三、方法二：引入外部独立JS文件（External Script）

内联脚本虽然方便直观，但在实际工程开发中并不推荐把大量 JavaScript 逻辑与 HTML 结构混杂在同一个文件里。当业务逻辑变复杂时，推荐采用外部文件引入模式。这种方式将 HTML 负责的内容与 JS 负责的逻辑完全解耦，不仅方便代码复用与团队协作，而且浏览器可以自动对外部 .js 文件进行缓存，提升后续加载性能。

实战步骤：创建并连接两个文件

1. 在同一 hello-js 目录下新建一个名为 main.js 的纯文本文件（注意扩展名必须是 .js）。在其中写入以下代码并保存：

// main.js - 独立外部脚本文件
console.log("正在从外部 main.js 文件中加载逻辑...");

function showMessage() {
  const title = document.getElementById("main-title");
  title.innerText = "文字已被 JavaScript 动态修改！";
  console.log("标题文字已完成动态替换。");
}

// 执行修改函数
showMessage();

2. 修改之前的 index.html，在其中通过带有 src 属性的 <script> 标签将 main.js 引入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>引入外部 JS 文件测试</title>
</head>
<body>
  <h1 id="main-title">原始的网页标题</h1>
  <p>如果外部脚本加载成功，上方的大标题将被 JS 脚本实时篡改。</p>

  <!-- 关键点：使用 src 属性指定 js 文件路径 -->
  <script src="main.js"></script>
</body>
</html>

四、核心原理：脚本放置位置与执行时机

不少刚入门的朋友会疑惑：<script> 标签到底该写在页面的 <head> 头部，还是 <body> 的最下方？这关系到浏览器的网页解析渲染机制。

浏览器在加载 HTML 时是自上而下逐行解析构建 DOM（文档对象模型）树的。当它在途中读到一个普通的 <script> 标签时，会立刻暂停整个 HTML 文档的解析与页面绘制，先去下载并执行该脚本，直到脚本完全执行完毕，才会继续向下解析剩余的 HTML。这就是所谓的“阻塞渲染”。

由此可见：

• 如果你是初学者，最稳健的做法是始终把 <script> 放在 </body> 闭合标签的正上方。此时网页元素已经全部被浏览器读入内存，JS 代码获取 document.getElementById 绝不会扑空。
• 在现代前端开发中，若希望把外部引用统一整理在 <head> 中，可以为标签加上 defer 属性：<script src="main.js" defer></script>。它会告诉浏览器“在后台异步下载此文件，等到整个 HTML 解析完毕后再按序执行”。

五、新手开发最常遇到的4个问题与排错清单

当你在浏览器中打开网页，却发现没有任何预期的弹窗、字样修改或控制台输出时，请按顺序核查以下四项：

常见故障现象	核心诱因分析	具体排查与修复方法
控制台报 404 Not Found	外部引用的 src 文件路径不正确，或文件名拼写存在大小写差异。	检查 main.js 是否和 index.html 处在同一个文件夹内。在 Windows/macOS/Linux 下注意大小写是否一致。若在子目录，请写相对路径如 src="js/main.js"。
TypeError: Cannot set property of null	JS 脚本在 DOM 节点被浏览器构建出来前就执行了，找不到目标元素。	将 <script> 标签从 <head> 挪到 </body> 最末尾，或者加上 defer 属性。
代码没有任何反应，无报错	<script src="..."> 标签中间误写了内联代码，导致内联内容被忽略。	若要同时使用外部脚本与内联测试代码，必须分写成两个独立的 <script> 标签。
Uncaught SyntaxError 语法报错	标点符号使用了中文全角输入（如中文分号、中文双引号）或圆括号未闭合。	切换到英文输入法，仔细核对引号 ""、单引号 ''、分号 ; 及括号 () 是否全部为半角符号。

六、总结与下一步建议

在 HTML 页面中引入并运行第一个 JavaScript 脚本，是走进前端动态开发的第一道门槛。归纳起来，你只需要记住三个关键原则：

1. 标签是桥梁：无论代码写在 HTML 内部还是外部独立文件，连接两者的纽带永远是 <script> 标签。
2. 外部文件是规范：练习时可用内联脚本快速验证；进入实际项目后，应统一使用 <script src="xxx.js"></script>。
3. F12 控制台是眼睛：学会利用 console.log() 与浏览器开发者工具，随时查看脚本的输出和错误提示，这是排查所有疑难杂症的最有效武器。

掌握了脚本的引入与运行之后，你可以尝试学习 DOM 选择器（如 document.querySelector）与事件监听（如按钮的 addEventListener('click', ...)），真正开始为你的网页注入丰富多彩的交互能力。