仅使用HTML和JavaScript如何向静态网页添加.txt文本文件

你想要实现的预置文本文件到网页资源、在代码中读取使用的需求完全可行，HTML没有专门对应.txt文件的原生引入标签，可通过以下几种常用方案实现：

• 方案1：Fetch API异步加载（最推荐，适合体积较大的独立txt文件）
  将.txt文件放到项目静态资源目录下，在JS中通过fetch请求读取内容即可，示例代码：

// 路径替换为你的txt文件实际相对路径
fetch('./demo.txt')
  .then(res => res.text())
  .then(content => {
    // 此处拿到txt文本内容即可按需处理
    console.log(content)
  })
  .catch(err => console.error('文件加载失败', err))

注意：本地直接双击打开HTML文件会触发跨域限制导致加载失败，使用IDE本地服务插件（如VSCode的Live Server）启动访问即可正常加载，部署到线上服务器后无此问题。

• 方案2：内容直接内嵌到JS代码中（适合小体积txt文件）
  如果txt文件体积很小，无需独立拆分，可直接将文本内容赋值给JS变量调用：

const presetTxt = `此处直接粘贴txt文件的全部内容即可`
// 后续直接使用presetTxt变量即可

• 方案3：页面直接嵌入展示txt内容（仅适用无需JS处理内容、仅需展示给用户的场景）
  如果不需要在JS中处理文本内容，只是要把txt内容显示在页面中，可直接使用<embed>标签嵌入：

<embed src="./demo.txt" type="text/plain" width="100%" height="400px">

关于你提到的浏览器审查元素看不到txt文件的问题：浏览器默认不会自动加载项目中所有未被引用的静态资源，只有当你的代码实际发起对txt文件的请求后，该文件才会出现在资源列表中。

附件 #

IDE中的源码文件列表

网页审查元素看到的源码文件列表

内容的提问来源于stack exchange，提问作者NoobEjby