当前位置：首页 > 前端开发 > 正文

如何巧妙地将js代码嵌入到HTML页面中实现功能？

admin
前端开发
2025-09-16
9

在HTML文档中引用JavaScript代码主要有两种方式：内联脚本和外部脚本，以下是详细介绍：

内联脚本

内联脚本是指将JavaScript代码直接写在HTML标签的<script>标签中，这种方式简单易行，但将JavaScript代码与HTML结构混合在一起，不利于代码的维护和扩展。

以下是一个内联脚本的示例：

<!DOCTYPE html> <html> <head>内联脚本示例</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> <script type="text/javascript"> document.write("这是一个内联脚本"); </script> </body> </html>

外部脚本

外部脚本是指将JavaScript代码保存在一个单独的文件中,然后在HTML文档中通过<script>标签的src属性引用该文件，这种方式可以将HTML结构与JavaScript代码分离，便于维护和扩展。

如何巧妙地将js代码嵌入到HTML页面中实现功能？第1张

以下是一个外部脚本的示例：

<!DOCTYPE html> <html> <head>外部脚本示例</title> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>

script.js是一个包含JavaScript代码的文件，其内容如下：

document.write("这是一个外部脚本");

脚本标签的位置

在HTML文档中,<script>标签可以放置在<head>或<body>标签中，以下是两种情况的示例：

如何巧妙地将js代码嵌入到HTML页面中实现功能？第2张

放置在<head>标签中：

<!DOCTYPE html> <html> <head>脚本标签在head中</title> <script type="text/javascript" src="script.js"></script> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> </body> </html>

放置在<body>标签中：

<!DOCTYPE html> <html> <head>脚本标签在body中</title> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> <script type="text/javascript" src="script.js"></script> </body> </html>

脚本标签的加载顺序

当脚本标签放置在<head>标签中时，浏览器会按照文档的顺序加载和执行脚本，如果脚本依赖于其他脚本或DOM元素，则可能需要将脚本标签放置在<body>标签的底部。

以下是一个示例：

如何巧妙地将js代码嵌入到HTML页面中实现功能？第3张

<!DOCTYPE html> <html> <head>脚本加载顺序示例</title> <script type="text/javascript" src="script1.js"></script> </head> <body> <h1>这是一个标题</h1> <p>这是一个段落。</p> <script type="text/javascript" src="script2.js"></script> </body> </html>

在上述示例中,script1.js会先于script2.js加载和执行。