html中script的作用 html中script标签使用指南-html教程-PHP中文网

html中script的作用 html中script标签使用指南

穿越時空

发布： 2025-06-23 17:10:02

原创

891人浏览过

html中script的作用 html中script标签使用指南

解决方案

立即学习“前端免费学习笔记（深入）”；

1. 内联脚本：直接嵌入代码

这是最直接的方式，将 JavaScript 代码直接写在 <script> 标签内部。</script>

<!DOCTYPE html>
<html>
<head>
  <title>内联脚本示例</title>
</head>
<body>

  <h1>欢迎来到我的网页</h1>

  <button onclick="alert('你好！')">点击我</button>

  <script>
    // JavaScript 代码
    console.log("页面加载完成！");
  </script>

</body>
</html>

登录后复制

这种方式的优点是简单直接，适用于少量、与特定页面相关的脚本。缺点是可复用性差，不利于代码维护。而且，如果脚本体积较大，会增加 HTML 文档的体积，影响加载速度。

2. 外部脚本：引用外部文件

将 JavaScript 代码保存在独立的 .js 文件中，然后在 HTML 中使用 <script> 标签的 src 属性引用该文件。</script>

<!DOCTYPE html>
<html>
<head>
  <title>外部脚本示例</title>
</head>
<body>

  <h1>欢迎来到我的网页</h1>

  <script src="my_script.js"></script>

</body>
</html>

登录后复制

my_script.js 文件内容：

// my_script.js
console.log("外部脚本加载完成！");

document.querySelector("h1").addEventListener("click", function() {
  alert("你点击了标题！");
});

登录后复制

这种方式的优点是代码可复用性高，便于维护，可以利用浏览器缓存提高加载速度。缺点是需要额外的 HTTP 请求来加载外部文件，可能会略微增加加载时间。

3. async 和 defer 属性：控制脚本加载和执行

这两个属性用于控制外部脚本的加载和执行时机，避免阻塞 HTML 解析。

async: 异步加载脚本，下载完成后立即执行，不保证执行顺序。适用于不依赖其他脚本的独立脚本。

<script src="my_script.js" async></script>

登录后复制

defer: 延迟加载脚本，在 HTML 解析完成后，按照脚本在文档中的顺序执行。适用于依赖 DOM 结构的脚本。

<script src="my_script.js" defer></script>

登录后复制

4. type 属性：指定脚本类型

虽然现在默认是 JavaScript，但为了兼容性，最好还是显式指定 type 属性。

<script src="my_script.js" type="text/javascript"></script>

登录后复制

对于 ES Module，则需要指定 type="module"。

<script src="my_module.js" type="module"></script>

登录后复制

如果用户禁用了 JavaScript，或者浏览器不支持 JavaScript，可以使用

<noscript>
  <p>您的浏览器不支持 JavaScript，或者 JavaScript 已被禁用。</p>
</noscript>

登录后复制

script标签应该放在head里还是body里？通常建议将 <script> 标签放在 <body> 标签的底部，</script>

以上就是html中script的作用 html中script标签使用指南的详细内容，更多请关注php中文网其它相关文章！