跳到主要内容

JS 嵌入HTML

内联脚本​

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Hello, World!</p>
    <script>
        console.log('Hello from JavaScript!');
    </script>
</body>
</html>

代码写在 <script> 标签中，默认在浏览器加载到这里时执行。

外部脚本文件​

html
<script src="app.js"></script>

把 JS 代码写到独立 JS 文件，便于维护和复用。

内联事件处理​

（不推荐，早期常用）

html
<button onclick="alert('按钮被点击)">点击！</button>
  • JS 直接写在 HTML 元素属性中。
  • 导致结构和行为混杂，不利于维护。

脚本位置​

放在 head 中

html
<head>
  <script src="app.js"></script>
</head>
  • 在 HTML 内容加载前执行脚本
  • 如果脚本很大，可能阻塞页面渲染。

放在 <body> 底部 （推荐）

html
<body>
  <script src="app.js"></script>
</body>
  • 页面内容先加载，在执行脚本。用户体验好。

使用 defer 和 sync​

defer：脚本下载时不阻塞 HTML 解析，等 DOM 完全解析后再顺序执行。

html
<script src="app.js" defer></script>

async：脚本下载时不阻塞 HTML 解析，下载完成后立即执行（不保证顺序）。

html
<script src="analytics.js" async></script>