index.html

在 head 标签内使用 link 标签引入了名为 test.css 的CSS文件

在 body 标签尾部使用 script 标签引入了名为 test.js 的JavaScript文件

<!DOCTYPE html> <!-- HTML5标准网页声明 -->
<html> <!-- HTML为根标签，代表整个网页 -->

<!-- head为头部标签，一般用来描述文档的各种属性和信息， 包括标题等-->
<head>
  <meta charset="UTF-8"> <!-- 设置字符集为utf-8 -->
  <title>Example Page</title> <!-- 设置浏览器的标题 -->
  <!-- 引入CSS文件 -->
  <link rel="stylesheet" type="text/css" href="./styles.css">
</head>

<!-- 网页所有的内容都写在body标签内 -->
<body>
  <h1>Hello, World!</h1>
  
  <!-- 添加一个按钮 -->
  <button id="myButton">Click me!</button>

  <!-- 引入JavaScript文件 -->
  <script src="./script.js"></script>
</body>

</html>

styles.css

button {
  background-color: #008cba;
  color: white;
  font-size: 16px;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #006080;
}

h1 {
  color: red;
}

script.js

// 获取按钮元素
const myButton = document.getElementById("myButton");

// 给按钮添加点击事件监听器
myButton.addEventListener("click", function () {
  alert("You clicked the button!");
});

1、在上面的示例代码中，index.html文件使用<link>标签引入了名为styles.css的CSS文件，并在页面中添加了一个按钮。同时，它还使用<script>标签引入了名为script.js的JavaScript文件。

2、在script.js文件中，我们通过调用document.getElementById()方法获取到了页面中ID为myButton的按钮元素，并使用addEventListener()方法添加了一个点击事件监听器。当用户点击按钮时，会弹出一个提示框。

3、需要注意的是，在CSS文件中我们定义了一些基本的样式，如按钮的背景颜色、文字颜色、边框等。在JavaScript文件中，我们使用了addEventListener()方法来添加事件监听器，以便响应用户的点击操作。

简单演示下html css js三个文件示例，并且用html引入css js

index.html

styles.css

script.js