html文件 div div id=top div input type=text style=width 400px; placeholder=请输入要查找的博客标题、作者、分类等关键字input id=btnQuery type=button value=查找 d

在HTML文件中，展示数据库的数据需要通过后端的接口获取数据，然后将数据动态地渲染到HTML页面中。

以下是一个示例，展示如何通过JavaScript使用Ajax请求后端接口获取数据，并将数据展示在HTML页面中：

1. 首先，在HTML文件中创建一个用于展示数据的容器，例如一个<div>元素的id为dataContainer：

<div id="dataContainer"></div>

2. 接下来，在JavaScript中使用Ajax请求后端接口获取数据，并将数据渲染到dataContainer中：

// 使用Ajax请求后端接口获取数据
let xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 数据请求成功
    let data = JSON.parse(xhr.responseText);
    
    // 渲染数据到HTML页面中
    let dataContainer = document.getElementById("dataContainer");
    let html = "";
    for (let i = 0; i < data.length; i++) {
      let item = data[i];
      html += "<div>" + item.title + "</div>";
    }
    dataContainer.innerHTML = html;
  }
};
xhr.send();

在上述代码中，我们使用了XMLHttpRequest对象发送了一个GET请求到后端接口http://example.com/api/data，并在接收到数据后将数据渲染到dataContainer中。

请注意，上述代码只是一个示例，实际情况中需要根据后端接口的具体情况进行相应的修改