在网页开发中，常常需要从文本文件读取数据并展示在 HTML 页面上。这不仅能灵活更新内容，还能提升用户体验。以下为您带来 HTML 中读取文本文件的简易指南。

首先要了解的是，HTML 本身没有直接读取本地文本文件的原生能力。因为这涉及到安全问题，浏览器为防止恶意脚本访问用户本地文件，限制了这种操作。不过，我们可以借助 JavaScript 来实现这一功能。

一种常见的方法是使用 XMLHttpRequest 对象。它是 JavaScript 中用于与服务器进行异步通信的技术。通过它，我们可以从服务器获取文本文件内容。以下是基本步骤：

1. 创建 XMLHttpRequest 对象：在 JavaScript 代码中，使用 var xmlhttp = new XMLHttpRequest(); 来创建对象。不同浏览器可能有细微差别，但现代浏览器基本都支持这种方式。
2. 打开连接：使用 xmlhttp.open("GET", "textfile.txt", true); 方法，这里 “GET” 是请求方法，“textfile.txt” 是要读取的文本文件名，“true” 表示异步请求。
3. 发送请求：xmlhttp.send(); 执行这一步后，请求就会发送到服务器。
4. 监听状态变化：通过 xmlhttp.onreadystatechange = function() { } 来监听请求状态变化。当 xmlhttp.readyState == 4 && xmlhttp.status == 200 时，表示请求成功，此时可以通过 xmlhttp.responseText 获取文本文件内容，并将其展示在 HTML 页面上，例如 document.getElementById("result").innerHTML = xmlhttp.responseText;。

另一种方法是使用 Fetch API，它是一种更现代的方式来处理网络请求。代码示例如下：

fetch('textfile.txt')
 .then(response => response.text())
 .then(data => {
        document.getElementById("result").innerHTML = data;
    })
 .catch(error => console.error('Error fetching file:', error));

Fetch API 使用链式调用，使代码更简洁易读。首先通过 fetch 方法发送请求，然后使用 then 方法处理响应，将文本内容展示在页面上。

在 HTML 中读取文本文件虽有些复杂，但通过上述方法，能轻松实现这一功能，为网页增添更多动态性和交互性。掌握这些技巧，能在网页开发中更灵活地展示和管理内容。