最安全的文字替换是直接修改index.html中的文本节点，保留html标签结构，注意同步更新alt、title等属性，并通过开发者工具验证样式适配。
直接改 index.html 里的文本节点最安全
别碰 JS 或 CSS 文件先，90% 的文字替换只需打开 index.html，用 VS Code 或记事本定位到 <h1></h1>、<p></p>、<li> 这类标签内部，把旧文字删掉，填上你的内容。注意保留标签结构——比如 <h2>我的家乡</h2> 只换“我的家乡”四个字，不要连 <h2></h2> 一起删。
常见错误：在 data-title、alt、placeholder 这类属性里漏改，导致图片没描述、表单提示还是旧文案；或者把中文标点（如“。”）误粘贴成全角符号，浏览器虽能显示但后续 SEO 或 CMS 导入可能出错。
批量替换用 VS Code 的 Ctrl+Shift+H，但得设好范围
想把全站“XX市”换成“YY县”，可以用全局查找替换，但必须加过滤条件：
- 勾选“仅在当前文件夹”或手动限定为
index.html和其他 HTML 页面，别让替换波及.js或.css文件 - 启用正则模式后，用
<h1>([^</h1>匹配标题再替换，避免误伤title标签或注释里的同名字符串 - 替换前务必点“预览”，尤其当目标词出现在
<script></script>块里时——比如console.log("欢迎访问")里的“欢迎访问”不该被替
改完文字后布局塌了？大概率是行高或字体撑开的
中文段落变长、字体换大、或用了新字号后，卡片高度不一致、按钮文字溢出、导航栏折行，都是典型表现。这不是代码写错了，而是 CSS 中的 line-height、max-height、white-space 没适配新内容长度。
快速验证方法：用浏览器 F12 打开开发者工具，选中出问题的元素，在右侧 Styles 面板里临时关闭 line-height 或把 height 改成 auto，看是否恢复正常。确认是样式问题后，再去对应 style.css 或 responsive.css 里微调，而不是硬塞 <br> 或空格凑高度。
contenteditable 不适合模板文字替换
看到“双击编辑”就加 contenteditable="true" 是个误区。它会让用户随意插入换行、粘贴带格式内容，甚至破坏语义化结构（比如把 <h3></h3> 里文字删光只剩一个空标签）。模板交付或上线前，所有 contenteditable 必须移除。
真要支持后期编辑，应该用 JS 动态创建 <input> 替换文本节点，保存时只取 .value 写回 textContent。但对静态模板来说，这纯属过度设计——你拿到的是 HTML 文件，不是 CMS 后台。
最容易被忽略的一点：改完文字后，记得检查所有 alt、title、aria-label 属性是否同步更新。这些字段不显示在页面上，但影响可访问性和搜索引擎抓取，而且一旦漏掉，上线后很难被发现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
