html引入js

作者：__龙泉丶聂风发布日期:2026-02-08 浏览:89

<!DOCTYPE html>
<html>
<head>
    <title>HTML 引入 JS 示例</title>
    <!-- 在 head 中引入外部 JS 文件 -->
    <script src="path/to/your/javascript-file.js"></script>
</head>
<body>
    <h1>这是一个 HTML 页面</h1>
    <p id="demo">点击按钮会改变这个文本。</p>
    <button onclick="changeText()">点击我</button>

    <!-- 在 body 底部引入外部 JS 文件 -->
    <script src="path/to/another-javascript-file.js"></script>

    <!-- 内联 JavaScript 代码 -->
    <script>
        // 定义一个函数，用于改变页面上的文本内容
        function changeText() {
            document.getElementById("demo").innerHTML = "文本已被修改！";
        }
    </script>
</body>
</html>

解释说明：

在 <head> 中引入外部 JS 文件：通过 <script src="path/to/your/javascript-file.js"></script> 可以在页面加载时引入外部的 JavaScript 文件。通常放在 <head> 标签内，确保在页面渲染之前加载脚本。
在 <body> 底部引入外部 JS 文件：有时为了提高页面加载速度，可以将外部 JS 文件放在页面底部（即 </body> 标签之前），这样可以确保页面内容先加载完成，再执行 JavaScript。
内联 JavaScript 代码：可以直接在 HTML 文件中使用 <script> 标签编写 JavaScript 代码，适用于简单的逻辑或与页面交互的功能。例如，上面的 changeText() 函数会在按钮被点击时改变页面中的文本内容。

上一篇：html css js三者之间的关系

下一篇：js转html