给HTML页面加上密码方可显示内容

要实现在HTML页面中添加密码，只允许授权用户访问该页面，可以使用以下两种方法：

使用HTTP身份验证

在服务器端配置HTTP身份验证，弹出一个对话框，要求用户输入用户名和密码。当用户输入正确的用户名和密码时，服务器才会允许访问该页面。这种方法需要在服务器端进行配置，常用的HTTP身份验证方法包括基本认证（Basic Authentication）和摘要认证（Digest Authentication）。

使用JavaScript

在HTML页面中，可以使用JavaScript脚本来实现密码保护功能。首先，在页面加载时弹出一个对话框，要求用户输入用户名和密码，然后使用JavaScript代码验证用户的输入。如果用户名和密码正确，就显示页面内容，否则显示错误消息。值得注意的是，这种方法虽然简单易用，但不十分安全，因为用户可以查看JavaScript代码并绕过密码验证。

综上，选择方法应根据实际情况来决定。如果服务器支持HTTP身份验证，那么使用HTTP身份验证是更加安全的选择。如果只是简单的密码保护，可以使用JavaScript来实现。

这里主要使用JavaScript实现

新建一个html页面保存以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面密码保护示例</title>
    <script src="password.js"></script>
</head>
<body>
    <div id="content">
        <h1>这是需要密码保护的页面内容</h1>
        <p>您需要正确输入密码才能查看这个页面。</p>
    </div>
</body>
</html>

在新建一个password.js保存以下代码上传到指定目录即可，这样的好处是其他页面也可以直接调用这个js

function passwordProtect() {
    window.onload = function() {
        //隐藏页面内容
        document.getElementById("content").style.display = "none";
        //显示密码输入框和“提交”按钮
        document.getElementById("password").style.display = "block";
        document.getElementById("submit").style.display = "block";
    }
    
    function checkPassword() {
        var password = document.getElementById("password").value;
        if (password === "mypassword") {
            showContent();
        } else {
            alert("密码错误，请重新输入！");
        }
    }
    
    function showContent() {
        //显示页面内容
        document.getElementById("content").style.display = "block";
        //隐藏密码输入框和“提交”按钮
        document.getElementById("password").style.display = "none";
        document.getElementById("submit").style.display = "none";
    }
}

passwordProtect();

以上只能起到简单的防护html页面。