改文字和图片需在语义化标签内替换，图片用大小写严格的相对路径；CSS主题色应修改:root变量而非硬编码；viewport必须置于head最前且参数正确；语义化标签不可删除但可增强lang属性。
直接改文本、图片路径和 CSS 变量，别碰语义化结构和 viewport 声明——90% 的“改崩了”都源于删了 nav 里的 id="mobile-menu" 或漏写 <meta name="viewport">。
怎么改文字和图片才不触发 net::ERR_FILE_NOT_FOUND 或 JS 报错
模板里所有可见内容（标题、段落、按钮文案）都该在 <h1>、<p>、<a> 标签内部替换，而不是删掉整行或改标签名。图片路径必须用相对路径且大小写严格一致：
-
src="images/logo.png"→ 确保项目根目录下真有images/文件夹，且文件名是logo.png（不是Logo.PNG） - 社交媒体图标如
<i class="fab fa-github"></i>，只改href值，别删这整行——它常被 JS 用来绑定点击事件 - 若替换后导航点不开、轮播不动，立刻检查是否误删了带
id="header-nav"或class="js-toggle-menu"的元素
为什么改完颜色在手机上还是蓝的？CSS 变量怎么找
现代模板（尤其 Bootstrap 5+、Tailwind 或自定义 CSS 变量的）通常把主题色抽成 :root 变量。硬编码改 #3498db 会漏改按钮、边框、悬停态，导致视觉割裂。正确做法是：
- 全局搜索
:root {或--primary-color:，在<style>或.css文件开头附近 - 改
--primary-color: #2563eb;后，所有color: var(--primary-color)、border-color: var(--primary-color)自动同步 - 如果没找到
:root定义，别手写——先确认模板是否真支持变量；强行加会导致旧浏览器渲染异常或覆盖失效
<meta name="viewport"> 放错位置或参数错误的后果
这行必须出现在 <head> 最前面，且不能含 user-scalable=no。它不是“可选优化”，而是响应式生效的前提：
立即学习“前端免费学习笔记（深入）”；
- 漏写或写在
<body>里 → 手机默认按 980px 渲染，文字小到看不清，@media规则全失效 - 写成
content="width=375, initial-scale=1"→ iPad、折叠屏等设备视口宽度 ≠ 375，布局直接错位 - 加
maximum-scale=1→ iOS Safari 某些版本禁用双击放大，损害可访问性 - 正确写法只有这一种：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
语义化标签删不得，但可以加 lang 属性提升 SEO
<header>、<nav>、<main>、<section>、<footer> 不是装饰，是响应式布局和屏幕阅读器识别的锚点。删一个，JS 控制菜单展开/收起就可能找不到目标节点。但你可以安全增强：
-
<html lang="zh-CN">必须写，比lang="en"更利于中文搜索引擎判断主体语言 - 英文段落内加
<p lang="en">API Documentation</p>，让翻译工具和读屏软件准确切换发音规则 - 别用
<div class="header">替代<header>——后者自带隐式 ARIA role，前者要手动补role="banner"
真正卡住人的从来不是“怎么加新功能”，而是改完首页发现移动端菜单点不动、图片全裂开、SEO 掉一半——问题往往藏在 <meta> 标签顺序、路径大小写、或者一个被你顺手删掉的 id 上。
