怎样在HTML中嵌入JS代码？-js教程-PHP中文网

怎样在HTML中嵌入JS代码？

煙雲

发布： 2025-08-31 13:01:01

原创

405人浏览过

根据具体需求选择JS嵌入方式：行内适用于简单交互但影响维护；内部JS放body末尾避免阻塞解析；外部JS配合defer、CDN、压缩等优化加载性能。

怎样在html中嵌入js代码？

在HTML中嵌入JS代码，主要有三种方式：行内、内部和外部。行内直接在HTML标签里写，内部放在

<script>

登录后复制

标签里，外部则通过

<script src="...">

登录后复制

引入JS文件。选择哪种方式取决于你的具体需求和代码量。

行内虽然简单，但不推荐大量使用，代码不好维护。内部适合少量JS代码，但如果页面JS代码多，会影响HTML结构的可读性。外部则是最佳实践，便于维护和复用，还能利用浏览器缓存提升性能。

如何选择合适的JS代码嵌入方式？

选择JS代码嵌入方式，需要考虑代码量、可维护性、复用性和性能。如果只是简单的交互，比如一个按钮点击事件，行内或内部都可以。但如果JS代码很多，逻辑复杂，强烈建议使用外部文件。

行内嵌入的优点是简单直接，适用于少量、简单的交互。缺点是可维护性差，HTML结构混乱，不便于复用。例如：

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

<button onclick="alert('Hello World!')">点击我</button>

登录后复制

内部嵌入的优点是方便，JS代码和HTML代码放在一起，易于理解。缺点是如果JS代码过多，会影响HTML代码的可读性，不利于维护。例如：

<!DOCTYPE html>
<html>
<head>
<title>内部JS示例</title>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

<script>
  function myFunction() {
    document.getElementById("demo").innerHTML = "段落已更改。";
  }
</script>

<button type="button" onclick="myFunction()">点击这里</button>

<p id="demo"></p>

</body>
</html>

登录后复制

外部嵌入的优点是可维护性高，代码复用性强，可以利用浏览器缓存。缺点是需要额外加载JS文件，可能会稍微影响页面加载速度。例如：

<!DOCTYPE html>
<html>
<head>
<title>外部JS示例</title>
<script src="myScript.js"></script>
</head>
<body>

<h1>这是一个标题</h1>
<p id="demo">这是一个段落。</p>

<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

登录后复制

其中

myScript.js

登录后复制

文件内容如下：

function myFunction() {
  document.getElementById("demo").innerHTML = "段落已更改。";
}

登录后复制

总之，选择哪种方式，需要权衡各种因素，找到最适合你的方案。

如何优化外部JS文件的加载？

优化外部JS文件的加载，主要有以下几种方式：

使用
async
登录后复制
和
defer
登录后复制
属性：
```
async
```
登录后复制
属性表示异步加载，JS文件加载完成后立即执行，可能会阻塞HTML解析。
```
defer
```
登录后复制
属性也表示异步加载，但JS文件会在HTML解析完成后，按照顺序执行。通常推荐使用
```
defer
```
登录后复制
，可以避免阻塞HTML解析，并保证JS文件的执行顺序。

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

登录后复制

将
```
<script>
```
登录后复制
标签放在
</body>
登录后复制
之前：这样可以保证HTML解析完成后再加载JS文件，避免阻塞HTML解析。
使用CDN：使用CDN可以利用CDN节点的缓存，加速JS文件的加载速度。
压缩JS文件：压缩JS文件可以减小文件大小，加快加载速度。可以使用一些工具，如UglifyJS、terser等。

代码小浣熊
代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情
合并JS文件：将多个JS文件合并成一个文件，可以减少HTTP请求，加快加载速度。可以使用一些工具，如webpack、rollup等。
开启Gzip压缩：在服务器端开启Gzip压缩，可以减小JS文件的大小，加快加载速度。

这些优化方式，可以显著提升页面加载速度，改善用户体验。

行内JS代码有哪些潜在的风险？

行内JS代码虽然方便，但也存在一些潜在的风险：

XSS攻击：如果行内JS代码中包含用户输入的内容，可能会导致XSS攻击。例如：

<button onclick="alert('Hello ' + username)">点击我</button>

登录后复制

如果

username

登录后复制

变量包含恶意代码，就会被执行，导致XSS攻击。

代码可读性差：行内JS代码会使HTML代码变得混乱，可读性差，不利于维护。
代码复用性差：行内JS代码只能在当前标签中使用，无法在其他地方复用。
CSP限制：一些网站会使用CSP（Content Security Policy）来限制行内JS代码的执行，以提高安全性。

因此，除非是简单的交互，否则不建议使用行内JS代码。

内部JS代码应该放在

<head>

登录后复制

还是

<body>

登录后复制

？

内部JS代码放在

<head>

登录后复制

或

<body>

登录后复制

，各有优缺点。放在

<head>

登录后复制

中，JS代码会先于HTML解析执行，可能会导致JS代码无法访问到HTML元素。放在

<body>

登录后复制

的末尾，可以保证JS代码在HTML解析完成后执行，但可能会稍微延迟页面的交互时间。

通常建议将内部JS代码放在

<body>

登录后复制

的末尾，可以避免阻塞HTML解析，并保证JS代码可以访问到HTML元素。当然，如果JS代码不依赖于任何HTML元素，放在

<head>

登录后复制

中也是可以的。

总的来说，选择哪种方式，需要根据具体情况进行权衡。

以上就是怎样在HTML中嵌入JS代码？的详细内容，更多请关注php中文网其它相关文章！

怎样在HTML中嵌入JS代码？

如何选择合适的JS代码嵌入方式？

如何优化外部JS文件的加载？

行内JS代码有哪些潜在的风险？

内部JS代码应该放在<head>登录后复制还是<body>登录后复制？

内部JS代码应该放在
<head>
登录后复制
还是
<body>
登录后复制
？