仅靠纯 HTML 和 CSS 无法从一个 HTML 文件中动态读取并复用另一文件中的文本内容；但可通过将共享文本定义在外部 CSS 文件的 content 属性中，再在多个 HTML 页面中引用同一类名，实现“伪复用”——修改一处 CSS 即同步更新所有页面显示。
仅靠纯 html 和 css 无法从一个 html 文件中动态读取并复用另一文件中的文本内容；但可通过将共享文本定义在外部 css 文件的 `content` 属性中，再在多个 html 页面中引用同一类名，实现“伪复用”——修改一处 css 即同步更新所有页面显示。
在静态网站开发中，常需在多页共用版权信息、联系邮箱或标语等固定文本（如页脚中的 <p> 内容）。若要求“修改一次、全局生效”，且严格禁用 JavaScript，则必须放弃“从 HTML 中提取文本”的思路——因为 HTML 是独立解析的文档，浏览器不支持跨文件 DOM 引用（例如 <div id="//index.html/MyText"> 这类语法完全无效，非标准且不可解析）。
可行方案是：将文本内容移至外部 CSS 文件，利用 ::before 或 ::after 伪元素注入。这种方式虽非真正“复用 HTML 文本”，却能达成同等维护效果：
✅ 所有页面引用同一 CSS 文件
✅ 文本统一维护在 CSS 的 content 值中
✅ 修改 CSS 后，所有引入该样式表的页面自动更新显示
示例结构如下：
shared.css（外部样式表，所有页面均引入）：
立即学习“前端免费学习笔记（深入）”；
.footer-text::before {
content: "© 2024 Acme Corp. All rights reserved. Email: contact@acme.com";
}index.html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="shared.css">
</head>
<body>
<footer>
<p class="footer-text"></p>
</footer>
</body>
</html>about.html（及其他页面）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="shared.css">
</head>
<body>
<footer>
<p class="footer-text"></p>
</footer>
</body>
</html>⚠️ 注意事项：
- content 属性仅对伪元素（::before / ::after）有效，且不能插入 HTML 标签（纯文本或简单转义字符），若需富文本（如链接、换行），CSS 无解，必须转向 JS 或服务端包含（SSI）、模板引擎等方案；
- 语义性略弱：实际文本未存在于 HTML DOM 中，可能影响 SEO 和屏幕阅读器兼容性（建议配合 aria-label 或隐藏真实文本作为补充）；
- 浏览器兼容性良好（IE8+ 支持 content），但需确保 CSS 文件被正确加载且未被缓存导致更新延迟。
总结：纯前端静态场景下，“CSS content + 外部样式表”是唯一符合 HTML/CSS 规范的跨页文本同步方案。它本质是内容与结构分离的设计实践，而非动态读取——接受这一约束，即可在零 JS 前提下高效维护多页一致文案。
