HTML/CSS/JS计数器网站仅显示标题，无计数内容问题求助

我尝试使用HTML、CSS和JS（Hypertext Markup Language、Cascading Stylesheets、JavaScript）制作一个简单的计数器网站，使用的代码如下：

HTML文件（jswebsite.html） #

<!DOCTYPE html>
<html>
    <head>
        <title>JS Website</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles3.css">
        <link rel="script" href="script1.js">
    </head>
    <body>
        <h1>Counter</h1>
        <p id="counter"></p>
    </body>
</html>

CSS文件（styles3.css） #

body {
    background-color: rgb(255, 169, 0);
}

h1, p {
    text-align: center;
    color: rgb(255, 69, 0);
    background-color: rgb(148, 43, 226);
    margin-left: auto;
    margin-right: auto;
}

JS文件（script1.js） #

var number = 0;
var i = 0;

while (i < 1) {
    document.getElementById("counter").innerHTML = number;
    number++;
}

但网站并未显示计数器，仅显示标题“Counter”，无其他文本内容。请问哪里操作出错了？

1. JS文件引入方式错误 #

HTML里加载JavaScript不能用<link>标签，<link>仅用于加载样式表、图标等资源。正确的做法是使用<script>标签，并且建议放在<body>标签末尾（确保DOM元素加载完成后再执行JS），修改后的HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>JS Website</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles3.css">
    </head>
    <body>
        <h1>Counter</h1>
        <p id="counter"></p>
        <!-- 正确引入JS文件 -->
        <script src="script1.js"></script>
    </body>
</html>

2. JavaScript循环逻辑错误 #

原JS代码中的while (i < 1)是死循环：变量i初始值为0，循环内部没有任何修改i的代码，导致循环会无限执行，浏览器主线程被阻塞，无法正常渲染内容，甚至可能崩溃。

如果要实现持续递增的计数器，应该用setInterval定时更新数值，修改后的JS代码：

var number = 0;
// 每隔1000毫秒（1秒）更新一次计数器
setInterval(function() {
    document.getElementById("counter").innerHTML = number;
    number++;
}, 1000);

如果只是想显示初始数值后停止，直接去掉循环即可：

var number = 0;
document.getElementById("counter").innerHTML = number;

3. 可选优化：CSS元素宽度问题 #

当前CSS中h1和p的margin-left: auto; margin-right: auto无法让背景色居中显示（块级元素默认宽度为100%），可以添加宽度属性优化：

h1, p {
    text-align: center;
    color: rgb(255, 69, 0);
    background-color: rgb(148, 43, 226);
    margin-left: auto;
    margin-right: auto;
    width: 200px; /* 限制宽度让背景色居中 */
    padding: 10px; /* 可选：添加内边距提升美观度 */
}

内容的提问来源于stack exchange，提问作者LeviB414