你想通过HTML获取登录用户名，通常是指：

  • 用户在登录表单里输入用户名；
  • 或从已登录状态的页面显示用户名。

我给你两种常见场景的示例代码。

1. 登录表单中获取用户输入的用户名（前端示例）

这里演示如何用HTML和JavaScript获取用户在输入框中输入的用户名：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>获取登录用户名示例</title>
</head>
<body>
  <form id="loginForm">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required />
    <br/><br/>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required />
    <br/><br/>
    <button type="submit">登录</button>
  </form>

  <p id="display"></p>

  <script>
    const form = document.getElementById('loginForm');
    form.addEventListener('submit', function(event) {
      event.preventDefault(); // 阻止默认提交刷新
      const username = document.getElementById('username').value;
      // 显示用户名
      document.getElementById('display').textContent = '登录用户名是：' + username;
      // 这里可以发请求给后端，验证用户名密码
    });
  </script>
</body>
</html>

2. 用户已登录，页面显示用户名（前端示例）

假设后端已经通过某种方式传递用户名（比如通过模板渲染、API请求、或者存储在 localStorage），这里示例从 localStorage 读取用户名：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>显示登录用户名</title>
</head>
<body>
  <h2>欢迎，<span id="usernameDisplay">访客</span>！</h2>

  <script>
    // 假设登录时已经保存用户名
    // localStorage.setItem('username', '张三');

    const username = localStorage.getItem('username') || '访客';
    document.getElementById('usernameDisplay').textContent = username;
  </script>
</body>
</html>

总结

  • 获取输入用户名，前端通过 JS 获取输入框值。
  • 已登录状态显示用户名，一般需要后端支持或前端持久化（Cookie、localStorage 等）。

如果你想要具体后端语言（如 PHP、Node.js）结合示例，或者登录验证流程，告诉我！