1. 前言
在开发网页的过程中，我们可能需要实时刷新页面来查看页面效果的变化或者及时获取数据的变动。那么，本文将介绍如何设置HTML页面不停刷新页面的方法。
2. 使用meta标签实现页面自动刷新
2.1 meta标签介绍
meta标签是HTML页面中的一个特殊标签，在head标签中使用。它提供有关网页的元数据，例如网页的关键字、描述、作者、最后修改时间以及刷新时间等，这些信息可被浏览器等应用程序使用。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="5">
<title>页面标题</title>
</head>
上述代码中，name属性用于指定描述页面信息的类型，content属性用于提供实际描述信息的值。http-equiv属性是meta标签中一种特殊的属性，用于模拟HTTP头部的返回值，例如在此处指定refresh，则表示让页面在5秒后刷新。
2.2 meta标签实现页面自动刷新
通过设置http-equiv属性为refresh，即可实现在指定时间内进行页面自动刷新。下面举例说明。
<html>
<head>
<meta http-equiv="refresh" content="3">
<title>自动刷新页面</title>
</head>
<body>
<h3>第一次刷新时间：2019-10-01 12:00:00</h3>
<p>您正在查看的是自动刷新页面。</p>
</body>
</html>
在上述代码中，我们在head标签中添加了一个meta标签，其http-equiv属性值为refresh，content属性值为3，表示在3秒后自动刷新页面。在body标签中，我们添加了一个标题和一些文本内容，用于观察页面的实际效果。可以发现，页面将在3秒后进行自动刷新。
3. 使用JavaScript实现页面自动刷新
3.1 JavaScript定时刷新页面
JavaScript提供了定时器setTimeout()函数，该函数可在指定的时间间隔后执行一次函数。同时，我们可以在函数中使用location.reload()函数来实现页面刷新。下面我们举例说明。
<!DOCTYPE html>
<html>
<head>
<title>定时刷新页面</title>
</head>
<body>
<h3>页面自动刷新</h3>
<button onclick=setTimeout(function(){location.reload()},5000)">5秒钟后刷新页面</button>
<p></p>
</body>
</html>
在上述示例中，我们通过定义一个setTimeout的匿名函数来实现在5秒钟之后调用location.reload()函数进行页面刷新的功能，使用<button>标签来触发该函数，使得页面的自动刷新得以实现。
3.2 JavaScript循环刷新页面
上述方法只能实现一次性的页面刷新，如果需要循环刷新页面，则需要使用setInterval函数来实现。下面我们举例说明。
<!DOCTYPE html>
<html>
<head>
<title>循环刷新页面</title>
</head>
<body>
<h3>页面自动刷新</h3>
<p id="time"></p>
<button onclick=startTimer()" id="btnStart">10秒钟后开始自动刷新</button>
<button onclick=stopTimer()" id="btnStop">停止自动刷新</button>
<p></p>
<script type="text/javascript">
var timer;
var count=0;
function startTimer(){
document.getElementById("btnStart").style.display="none";
document.getElementById("btnStop").style.display="block";
timer = setInterval(function(){
count += 1;
document.getElementById("time")[xss_clean] = "当前时间：" + new Date().toLocaleString();
if(count == 10){
clearInterval(timer);
location.reload()
}
},1000);
}
function stopTimer(){
clearInterval(timer);
document.getElementById("time")[xss_clean] = "计时已停止！";
document.getElementById("btnStart").style.display="block";
document.getElementById("btnStop").style.display="none";
}
</script>
</body>
</html>
在上述代码中，我们首先在网页中添加了一个计时器，用于显示当前时间，同时定义了两个按钮，分别用于启动和停止计时器。使用定时器setInterval函数来启动循环刷新时间，并用location.reload()函数在一定时间后实现页面刷新。
4. 结论
本文介绍了如何使用meta标签和JavaScript实现HTML页面的自动刷新。使用meta标签可以在一定时间后实现页面的自动刷新，使用JavaScript的setTimeout和setInterval函数可以分别实现一次性和循环的页面刷新。这些方法可以使得我们在开发网页时更加方便地进行调试和测试，提高开发效率。