如何在一个HTML页面中使用两个不同的函数

在一个HTML页面中使用两个不同的函数，可以通过以下几种方式实现：

内联方式：在HTML页面的<script>标签中直接编写函数代码。可以在<script>标签内部定义两个不同的函数，并在需要调用的位置使用函数名进行调用。

<!DOCTYPE html>
<html>
<head>
  <title>使用两个不同的函数</title>
</head>
<body>
  <h1>使用两个不同的函数</h1>

  <script>
    function function1() {
      console.log("这是函数1");
    }

    function function2() {
      console.log("这是函数2");
    }
  </script>

  <button onclick="function1()">调用函数1</button>
  <button onclick="function2()">调用函数2</button>
</body>
</html>

内部脚本方式：将函数代码放置在HTML页面的<script>标签内，但是将<script>标签放在<body>标签的底部，以确保页面加载时能够正确引入函数代码。

<!DOCTYPE html>
<html>
<head>
  <title>使用两个不同的函数</title>
</head>
<body>
  <h1>使用两个不同的函数</h1>

  <button onclick="function1()">调用函数1</button>
  <button onclick="function2()">调用函数2</button>

  <script>
    function function1() {
      console.log("这是函数1");
    }

    function function2() {
      console.log("这是函数2");
    }
  </script>
</body>
</html>

外部脚本方式：将函数代码写在一个单独的.js文件中，并在HTML页面中使用<script>标签引入外部脚本文件。确保外部脚本文件的路径正确，并在需要调用的位置使用函数名进行调用。

在external.js文件中的代码如下：

function function1() {
  console.log("这是函数1");
}

function function2() {
  console.log("这是函数2");
}

HTML页面中的代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>使用两个不同的函数</title>
  <script src="external.js"></script>
</head>
<body>
  <h1>使用两个不同的函数</h1>

  <button onclick="function1()">调用函数1</button>
  <button onclick="function2()">调用函数2</button>
</body>
</html>

以上三种方式都可以在一个HTML页面中使用两个不同的函数。需要注意的是，函数名不能重复，否则会导致函数冲突。另外，函数的具体实现根据实际需求进行编写，以上示例中的函数只是简单的输出信息到控制台，实际应用中可以根据需求进行相应的处理。