使用MYSQL数据是在控制台中，而不是在HTML页面上呈现

要在HTML页面上呈现MySQL数据库中的数据，你需要通过后端服务器将数据从数据库检索出来，并将其传递到前端页面。以下是一个简单的示例，展示了如何使用Node.js和Express框架来实现这一点。

基础概念

后端服务器：处理来自前端的请求并与数据库交互。
数据库：存储数据的系统，这里是MySQL。
前端页面：用户与之交互的HTML页面。

类型

RESTful API：一种设计风格，用于构建网络服务。
GraphQL：另一种查询语言和运行时，用于API。

应用场景

Web应用程序：任何需要动态内容的网站。
移动应用：后端服务可以为移动应用提供数据。

示例代码

后端（Node.js + Express）

首先，确保你已经安装了必要的包：

npm install express mysql body-parser

然后，创建一个简单的服务器文件 server.js：

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');

const app = express();
app.use(bodyParser.json());

// 创建数据库连接
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your_username',
  password: 'your_password',
  database: 'your_database'
});

db.connect((err) => {
  if (err) throw err;
  console.log('Connected to the MySQL database.');
});

// 定义一个路由来获取数据
app.get('/api/data', (req, res) => {
  db.query('SELECT * FROM your_table', (err, results) => {
    if (err) throw err;
    res.json(results);
  });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

前端（HTML + JavaScript）

在你的HTML文件中，你可以使用JavaScript来获取这些数据并显示它们：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Display</title>
</head>
<body>
  <h1>Data from MySQL</h1>
  <ul id="data-list"></ul>

  <script>
    fetch('/api/data')
      .then(response => response.json())
      .then(data => {
        const dataList = document.getElementById('data-list');
        data.forEach(item => {
          const li = document.createElement('li');
          li.textContent = JSON.stringify(item); // 根据实际数据结构调整显示方式
          dataList.appendChild(li);
        });
      })
      .catch(error => console.error('Error fetching data:', error));
  </script>
</body>
</html>