当前位置：首页 > 行业动态 > 正文

html写入js

在HTML中通过` 标签嵌入JS代码，可置于 或 内，alert(‘Hello’);

HTML中嵌入JavaScript的常见方式

内联脚本（直接在HTML元素中写JS）

<button onclick="alert('按钮被点击')">点击我</button>
  • 特点：直接在HTML标签属性中编写JS代码，适合简单交互
  • 缺点：代码与HTML混杂，难以维护

内部脚本（在<head>或<body>中嵌入<script>）

<!DOCTYPE html>
<html>
<head>
  <script>
    // 页面加载时执行
    document.addEventListener('DOMContentLoaded', function() {
      console.log('文档加载完成');
    });
  </script>
</head>
<body>
  <h1>内部脚本示例</h1>
</body>
</html>
  • 特点：集中管理JS代码，与HTML分离度较好
  • 注意：<script>标签位置影响执行时机（head内会阻塞后续内容渲染）

外部脚本（链接独立JS文件）

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" defer></script>
</head>
<body>
  <div id="content"></div>
</body>
</html>
  • 特点：代码复用性强，浏览器可缓存JS文件
  • 推荐属性：
    • defer：延迟执行到DOM解析完成后
    • async：异步加载不阻塞渲染（可能改变执行顺序）

模块化导入（ES6+）

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="app.js"></script>
</head>
<body>
  <div id="output"></div>
</body>
</html>
  • 特点：支持ES6模块规范，需通过type="module"声明
  • 依赖管理：使用import/export实现代码分拆（如app.js中import { func } from './utils.js'）

方法对比表

方式 代码位置 执行时机 维护性 缓存优势
内联脚本 HTML标签属性 事件触发时 差 无
内部脚本 <head>/<body> 立即/DOM加载后 一般 无
外部脚本 独立.js文件 按需（defer/async） 高 有
模块化导入 独立.js文件 按需加载 高 有

相关问题与解答

Q1：内部脚本和外部脚本如何选择？
A：若JS代码仅当前页面使用且逻辑简单，可用内部脚本；若多个页面复用相同逻辑，或需要长期维护，应使用外部脚本，外部脚本还能利用浏览器缓存提升性能。

html写入js 第1张

Q2：defer和async有什么区别？
A：defer保证脚本按顺序执行且在DOM解析完成后运行，不会阻塞页面渲染；async则立即下载并尽快执行，可能打乱执行顺序，通常优先使用defer

0

相关文章