首页 › 建站教程 › 第 04 章

第 04 章 · 改页面与界面优化

网站已经能打开了，但页面上还是模板自带的名字和文字。这一章教你把页面变成自己的： 改文字、换配色、换头像、加板块，用浏览器自带的开发者工具边改边看， 最后再讲怎么让网站又快又好看。全程不需要你会写代码 —— 你只需要会「找」和「换」。

一个网页只有三种东西可以改

很多人以为"改网页"是件很玄的事，其实网页就像一个房子，能改的只有三样： 房子里摆什么（内容）、墙刷成什么颜色（样式）、 房子有几个房间（结构）。除此之外没有第四种。

类别	是什么	举例	在文件的哪儿
内容	文字和图片	站名、自我介绍、卡片文字、头像、邮箱地址	<body> 里的文字，以及 src="…" 指向的图片
样式	长什么样	颜色、字号、间距、圆角、边框、阴影、动画	<head> 里的 <style>…</style>
结构	有几块	多一个板块、多一个导航项、多一张卡片、多一条笔记	复制一段 HTML 代码

所以你的 index.html 打开以后，其实是两个世界： 上面 <head> 里的 <style> 是"化妆说明书"（CSS）， 下面 <body> 里的是"房子的内容"（HTML）。 你在网页上看到的每一个字、每一块颜色，都能在这两个地方找到出处。

「我想改…」对照表

下面这张表建议直接收藏。左边是你想改的东西，右边告诉你去搜什么关键词。

我想改	去哪儿改	搜这个关键词
浏览器标签页上的标题	<head> 里	<title>
整站的配色（按钮、高亮、图标底色）	<style> 最上面	--主色
左上角的站名	顶部导航	class="logo"
首屏那句最大的话	首屏板块	<h1> 或「你好，我是」
头像	关于我板块	class="头像"
自我介绍、技能标签	关于我板块	class="标签"
作品卡片	我在做的事板块	class="卡片"
笔记 / 文章列表	笔记板块	class="文章"
相册里的照片	相册板块	class="相册项"
"最近"的时间线	动态板块	class="时间线条目"
邮箱、GitHub 按钮	联系板块	mailto: / class="按钮"
页脚署名、友情链接、年份	<footer> 里	© 或「友情链接」

改文件的三条路

先记住一句最重要的话：别人访问网站时看到的，永远是服务器上那个文件。 你电脑上的副本、开发者工具里的试验，都不会影响别人。所以"改"这件事，最后一定要落到 "把改好的文件放回服务器"。

三条路怎么选

方法	适合场景	优点	缺点
面板在线编辑	改一两个字、临时救急	不用装任何软件，手机也能操作	编辑器弱，容易改错
本地改 + 上传	日常改页面（推荐）	好编辑、能撤销、能搜索替换	多一步上传
FTP	文件多、要批量操作	像操作本地文件夹一样直观	要装软件、要配账号

HTML 最小知识：网页的骨架

HTML 的全部工作就是一件事：给内容贴标签。 你告诉浏览器"这是标题""这是一段话""这是一张图片"，浏览器就按对应的样式显示出来。 你不需要会"写"，只要会"认得"和"换掉"。

标签长什么样

<p class="板块说明">这里是一段说明文字。</p>
 ↑    ↑                    ↑              ↑
 标签名 属性（可选）        内容           结束标签（多一个斜杠）

• 开始标签 <p> 和 结束标签 </p> 成对出现。
• 属性写在开始标签里，格式是 名字="值"，比如 class="卡片"。
• 少数标签没有内容也不需要结束标签：<img>、<br>、<meta>、<link>。

常用标签速查

标签	作用	在模板里的例子
<h1>	最大的标题，一页一般只用一个	首屏那句"你好，我是…"
<h2>	板块标题	"关于我""我在做的事"
<h3>	小标题（卡片标题）	"我的第一个网站"
<p>	一段文字	所有正文段落
<a>	链接，点一下跳走	导航、按钮、"发邮件"
<img>	图片，src 是图片路径	头像、相册照片
<div>	一个"盒子"，用来装东西（用得最多）	卡片、图标、导航
<span>	一小段行内文字，用来单独上色	大标题里高亮的名字
<section>	一个板块	关于我、作品、相册…
<ul><li>	无序列表 / 列表项	相册外的普通列表
<br>	换行	大标题里的强制换行
<audio>	音频播放器	"随便听听"那个播放条
<iframe>	把一个页面嵌进来	留言板就是嵌进来的

class 和 id 的区别（很多新手卡在这）

	class（类）	id（标识）
写法	class="卡片"	id="作品"
能重复吗	能，一页可以有很多个	不能，一页只能有一个
干什么用	挂钩 CSS 样式（.卡片 { … }）	做锚点跳转（href="#作品"）
删了会怎样	这块的样式全没了	导航点过去不跳了

所以加一个新板块时，这两个都要写： <section id="相册"> 里的 id 是给导航跳转用的， 里面的 <div class="网格"> 是给样式用的。 最省事的做法：整段复制一个已有的板块，再把文字换掉，class 和 id 一起带过来改个名。

属性是干什么的

属性	写在哪	作用
href="…"	<a>	点了跳到哪：可以是网址、#板块名、mailto:邮箱
src="…"	<img>、<audio>、<iframe>	要显示哪个文件（路径）
alt="…"	<img>	图片的文字说明：图挂了会显示它，搜索引擎也读它
class / id	几乎所有标签	上面刚讲过
target="_blank"	<a>	在新标签页打开（外链都建议加上）
rel="noopener"	<a>	配合 target="_blank" 用的安全属性，一起复制就行
download	<a>	点击直接下载，而不是在浏览器里打开
loading="lazy"	<img>、<iframe>	滚到它附近才加载，省流量

注释：给自己看的便利贴

<!-- 这是注释，浏览器完全不显示，只有看代码的人能看到 -->

<!-- 也可以用来临时"关掉"一段代码：
<div class="卡片">暂时不想要这张卡片</div>
-->

你的模板全文都埋了 <!-- 【改】… --> 这样的注释， 就是为了让你在代码里一眼看到"这里可以改"。注释不影响网页显示，放心留着。

一个完整的例子（逐行解释）

<!-- 一个板块：关于我 -->
<section id="关于">                          <!-- 板块开始，id 给导航跳转用 -->
  <div class="容器">                          <!-- 容器：控制内容宽度、居中 -->
    <h2 class="板块标题">关于我</h2>          <!-- 板块大标题 -->
    <p class="板块说明">两三句话介绍自己。</p> <!-- 灰色小说明 -->
    <div class="关于">                        <!-- 这一块左右排：头像 + 文字 -->
      <img class="头像" src="avatar.svg" alt="头像">  <!-- 头像图片 -->
      <div class="关于文字">                  <!-- 右边文字 -->
        <p>我是一名普通学生，最近在折腾自己的第一个网站。</p>
        <div class="标签组">                  <!-- 标签串 -->
          <span class="标签">网页设计</span>  <!-- 一个标签 -->
        </div>
      </div>
    </div>
  </div>
</section>                                   <!-- 板块结束 -->

看懂这个例子，你就看懂了整份模板：外层套容器，里面放标题、说明、内容， 内容再用 class 去匹配样式。你要做的只是把里面的中文换掉。

三条铁律

1. 标签必须成对。有 <div> 就要有 </div>。 删内容时只删中文，别把尖括号和斜杠一起删了。
2. 不要乱删 class 和 id。它们是样式的"接头暗号"，删掉样式立刻失效。 想改样子，去 <style> 里改，而不是删属性。
3. 注释里的东西不显示。网页上看不到不代表没写错，改完记得在浏览器里验证。

新手最常见的 5 个错误

错误	症状	怎么修
漏了 </div>	后面一大片内容全挤进上一个盒子里，排版乱掉	在编辑器里点标签，看配对高亮；或数一数 div 的开头结尾数量
class 名打错（card 写成 卡片 又写成别的）	样式不生效，看着"没变化"	永远复制粘贴 class 名，别手打
用了中文标点	标点后面那段样式或文字异常	代码里一律用英文标点：, : ; " "
把 < 打成 ＜ 或 &lt;	标签被当普通文字显示在页面上	切回英文输入法重新打
删了 <meta name="viewport"> 那一行	手机上打开变得很小、要手动放大	别删 <head> 里那行 viewport

CSS 最小知识：给网页化妆

CSS 决定"长什么样"。它的语法只有一句口诀： 选中谁，就把什么改成什么。

.卡片 {                  /* 选中所有 class="卡片" 的元素 */
  background: #ffffff;   /* 属性名: 值;  —— 背景色设成白色 */
  padding: 26px;         /* 内边距 26 像素 */
}

.卡片:hover {            /* 鼠标移到卡片上时，额外生效 */
  transform: translateY(-4px);   /* 往上浮 4 像素 */
}

选择器：怎么"选中"

写法	选中谁	例子
p	页面上所有 <p>	标签选择器（少用，影响面太大）
.卡片	所有 class="卡片" 的元素	最常用，前面那个点是关键
#联系	id="联系" 的那一个	前面是井号
.卡片 h3	卡片里面的 <h3>	空格 = "里面的"
.按钮:hover	鼠标悬停在按钮上时	做悬停效果
@media (max-width: 560px)	屏幕宽度小于 560px 时（手机）	手机端单独调样式
:root	整个页面	放全站变量，模板里 --主色 就写在这

颜色怎么写

#2563eb 这种写法叫十六进制颜色，一共 6 位：#后面前两位是红、 中间两位是绿、后两位是蓝，每一位从 0 到 f（相当于 0~255）。 #000000 是黑，#ffffff 是白。

写法	意思	例子
#2563eb	十六进制，最常用	模板的主色就是它
rgba(0,0,0,.07)	黑色 + 7% 不透明度	做淡淡的阴影
#fff	缩写，#ffffff 的简写	白色
red / white	颜色名，够用但不精确	临时测试用

常用颜色	色值	适合什么网站
蓝	#2563eb	通用、科技、工具类（模板默认）
绿	#16a34a	环保、健康、学习打卡
紫	#7c3aed	创意、个人博客
橙	#ea580c	活泼、美食、运动
青	#0891b2	冷静、专业
粉	#db2777	少女、手作、插画
灰黑	#0f172a	文字色（模板默认）

常用的 CSS 属性

属性	管什么	值怎么写
color	文字颜色	#0f172a
background	背景色 / 背景图	#ffffff 或 url("bg.jpg") center/cover
font-size	字号	16px、1.1rem、clamp(20px,3vw,26px)
font-weight	字粗	400 正常、600 半粗、700 粗
line-height	行高（行间距）	1.75（不带单位表示倍数）
text-align	文字对齐	left / center / right
padding	内边距（内容离边框的距离）	26px 或 10px 20px（上下 左右）
margin	外边距（和隔壁的距离）	0 auto 表示"上下 0、左右自动居中"
border-radius	圆角	16px 圆角、999px 胶囊形、0 直角
border	边框	1px solid #e2e8f0（粗细 样式 颜色）
box-shadow	阴影	0 10px 30px rgba(15,23,42,.06)
max-width	最大宽度	1000px（模板里那个 --宽度）
display: flex / grid	排列方式（横排 / 网格）	模板已经写好了，你一般不用动
transition	过渡动画时长	.2s（鼠标移上去平滑一点）

内边距和外边距的区别（最经典的困惑）

┌────────── margin（外边距：我和隔壁的距离）──────────┐
│   ┌─────────── border（边框）───────────┐            │
│   │   ┌──────── padding（内边距）────┐  │            │
│   │   │      内容 content            │  │            │
│   │   └─────────────────────────────┘  │            │
│   └────────────────────────────────────┘            │
└─────────────────────────────────────────────────────┘

一句话记住：padding 是"内容离自己边框的距离"，margin 是"自己和隔壁的距离"。 觉得文字贴着卡片边缘 → 加 padding；觉得两块之间太挤 → 加 margin。

CSS 变量：模板最方便的地方

模板最上面写了一段这样的东西：

:root {
  --主色: #2563eb;     /* 定义了一个变量，名字叫「主色」 */
  --圆角: 18px;
}

.按钮-主要 {
  background: var(--主色);   /* 使用这个变量 */
  border-radius: var(--圆角);
}

变量的意义是：你只要改一处，全站所有用到它的地方一起变。 模板里的变量清单如下，改配色、改圆角、改内容宽度都找它们：

变量	管什么	默认值
--主色	按钮、高亮文字、图标底色、链接	#2563eb
--主色深	鼠标悬停时的深一档颜色	#1d4ed8
--文字	正文颜色	#0f172a
--次要	灰色说明文字	#64748b
--背景	页面底色	#f8fafc
--卡片	卡片/内容块底色	#ffffff
--边框	分割线和描边	#e2e8f0
--圆角	所有卡片的圆角	18px（改 0 就是直角风）
--宽度	内容最大宽度	1000px

CSS 写错了不报错，只会"没效果"

10 个照抄就能用的修改

下面每一条都写成"搜什么 → 改成什么"，代码可以直接复制。 改完记得：保存 → 上传 → Ctrl+F5。示例里的文字请换成你自己的。

① 换整站配色（最爽的一次修改）

搜：--主色　位置：<style> 最上面的 :root

:root {
  --主色: #16a34a;      /* 换成你喜欢的颜色，全站按钮/高亮/图标一起变 */
  --主色深: #15803d;    /* 比主色深一档，鼠标悬停时用 */
}

比如想换成绿色，就把 #2563eb 改成 #16a34a、#1d4ed8 改成 #15803d。 配色建议：主色只用一个，其他都交给黑白灰，页面立刻显得干净。

② 改站名与浏览器标签页标题

搜：<title>（标签页）和 class="logo"（左上角）

<title>我的个人主页</title>              <!-- 浏览器标签页上的字 -->
<meta name="description" content="记录我的作品和学习笔记。">

<div class="logo">我的个人主页</div>        <!-- 网站左上角显示的字 -->

顺手把 description（搜索引擎里显示的简介）也改掉，这是最简单的 SEO。

③ 改首屏大标题

搜：「你好，我是」　位置：首屏板块的 <h1>

<h1>你好，我是<span>你的名字</span><br>一个还在学习的人</h1>

• <span> 里的字会显示成渐变色（模板里专门为它写了样式）。
• <br> 是强制换行，想一句话一行就加它，不想要就删掉。
• 下面的 <p> 是副标题，写一句自我介绍，别超过两行。

④ 换头像

搜：class="头像"

<!-- 换之前（用的是模板自带的小人图） -->
<img class="头像" src="avatar.svg" alt="头像" width="116" height="116">

<!-- 换之后（换成你自己的照片 photo.jpg） -->
<img class="头像" src="photo.jpg" alt="我的头像" width="116" height="116">

1. 找一张正方形的照片（建议 400×400 像素），重命名为 photo.jpg。
2. 用压缩工具压到 200KB 以内（在线搜"图片压缩"即可）。
3. 上传到网站根目录（和 index.html 同一层，不要放进子文件夹）。
4. 把上面那行 src 改成 photo.jpg。

看不到图？八成是三种原因：文件名写错（注意大小写）、图片没上传到同一层、或者图片太大还没加载出来。

⑤ 加一张卡片

搜：class="卡片"　位置："我在做的事"板块里

<div class="卡片">
  <div class="图标">🚀</div>          <!-- 这里放一个 emoji 当图标 -->
  <h3>新卡片标题</h3>                 <!-- 卡片的小标题 -->
  <p>这里写这张卡片的说明文字。</p>    <!-- 卡片的正文 -->
</div>

把上面这 4 行整段复制，粘贴到已有卡片的后面（</div> 和 </div> 之间），然后改中文。图标可以直接把 emoji 换掉：🌐 📝 🎨 📷 🎵 💡 🧰 🚀。 网格会自动换行，加第四张、第五张都不会挤。

⑥ 加一个导航项 + 新板块

这是最像"改结构"的一条，其实也只是复制粘贴。分三步：

第一步：在顶部导航里加一行（搜 class="导航链接"）。

<a href="#相册">相册</a>     <!-- href 写 # + 板块的 id -->

第二步：在任意板块前面插入一个新板块（比如插在"联系"之前）。

<section id="相册">                            <!-- id 要和导航里的 #相册 对上 -->
  <div class="容器">
    <h2 class="板块标题">相册</h2>
    <p class="板块说明">一些随手拍的照片。</p>
    <div class="网格">                          <!-- 网格：自动排列的格子 -->
      <div class="卡片">
        <img src="1.jpg" alt="照片说明">
      </div>
    </div>
  </div>
</section>

第三步：把照片 1.jpg 上传到根目录，刷新看效果。

⑦ 改按钮文字与链接

搜：class="按钮

<!-- 主要按钮（实心，一个区域最多放一个） -->
<a class="按钮 按钮-主要" href="mailto:你的邮箱@example.com">发邮件</a>

<!-- 次要按钮（描边，可以放多个） -->
<a class="按钮 按钮-次要" href="https://github.com/你的用户名"
   target="_blank" rel="noopener">GitHub</a>

你想让按钮干什么	href 怎么写
跳到页面上某个板块	href="#留言"
打开别人的网站	href="https://example.com"（配 target="_blank"）
发邮件	href="mailto:you@example.com"
下载一个文件	href="download/文件.zip" download
打电话（手机上）	href="tel:13800000000"

⑧ 给页面加一层浅色背景图

搜：body {　位置：<style> 里基础部分

body {
  background: #f8fafc url("bg.jpg") center/cover fixed no-repeat;
}

• #f8fafc 是图片没加载出来时的兜底底色。
• url("bg.jpg") 是图片路径（图片要上传到根目录）。
• center/cover 意思是"居中、铺满整个屏幕"。
• fixed 是"滚动时背景不动"。

⑨ 手机端字号太大 / 太小

搜：@media (max-width: 560px)（模板最下面那段手机专用样式）

@media (max-width: 560px) {
  .首屏 h1 { font-size: 24px; }   /* 手机上大标题的字号，默认是自适应，可以在这里钉死 */
  .关于 { gap: 18px; }            /* 头像和文字之间的间距 */
}

@media 的意思是"当屏幕符合条件时，才用下面这些样式"。 max-width: 560px 就是"屏幕宽度小于 560 像素时"（约等于手机）。 想单独调手机上的效果，就在这里改；电脑上的效果不受影响。

⑩ 加网站图标（浏览器标签上的小图）

搜：rel="icon"　位置：<head> 里

<!-- 用 svg 图标（清晰、体积小，推荐） -->
<link rel="icon" href="../favicon.svg" type="image/svg+xml">

<!-- 或者用传统的 ico 图标 -->
<link rel="icon" href="favicon.ico">

用一个 32×32 的小图片命名为 favicon.ico 上传到根目录即可。 模板自带 favicon.svg，你可以直接用记事本打开它， 把里面的颜色和文字改成自己的 —— 它本身就是一段纯文本，很好改。

还有三处也能照抄

想加什么	搜这个 class	怎么加
一条笔记 / 文章	class="文章"	整段 <a class="文章">…</a> 复制，改标题、摘要、日期
一张相册照片	class="相册项"	把 <div class="相册项" style="…"> 换成 <div class="相册项"><img src="1.jpg" alt="照片"></div>
一条"最近"动态	class="时间线条目"	整段复制，改日期和内容
一个技能标签	class="标签"	复制一行 <span class="标签">…</span>

用开发者工具边改边看（最值得学的一项技能）

前面说"改完上传再刷新"，一次要十几秒，试十次就烦了。 浏览器自带的开发者工具能让你当场改、当场看， 而且改坏了刷新一下就恢复 —— 它是一张免费的草稿纸。

怎么打开：右键 → 检查（不用 F12）

在网页上任意位置点右键 → 检查（有些浏览器写"审查元素"）， 开发者工具就会从右边（或下边）弹出来，并且自动选中你刚才点的那块内容。 这是最省事的打开方式，也完全绕过了笔记本键盘的 F 键问题。

四个面板，各管什么

面板	看什么	什么时候用
Elements（元素）	左边是 HTML 结构，右边是这块元素生效的 CSS	99% 的时间都在这里
Styles（在 Elements 右侧）	所有生效的样式规则，被划掉的是被别的规则覆盖了	找"为什么这里是这个颜色/大小"
Console（控制台）	JavaScript 报错	页面上有功能不工作时（比如按钮点了没反应）
Network（网络）	页面加载了哪些文件、每个的状态码、大小、耗时	查图片为什么没显示、网站为什么慢

实操七步

按 F12 打开的是计算器怎么办

很多笔记本的 F1~F12 默认是"多媒体键"，F12 被分配给了计算器，按键被系统截走，浏览器根本收不到。 按下面的顺序试，第一条最好用：

办法	怎么做	说明
① 右键 → 检查（最快）	在网页任意位置右键 → 检查 / 审查元素	完全不碰 F12，任何浏览器、任何键盘都能用，推荐一直用这个
② 快捷键	Ctrl + Shift + I	浏览器内置的开发者工具快捷键，不走 F12
③ 菜单进入	Edge 右上角 ⋯ → 更多工具 → 开发者工具	忘了快捷键时的兜底入口
④ Fn + F12	按住 Fn 再按 F12	让 F12 回到"功能键"的身份
⑤ Fn + Esc（FnLock）	按一次切换功能键模式，键盘上通常有指示灯	切换后 F1~F12 直接就是功能键，不用再按 Fn
⑥ 进 BIOS 永久改	开机狂按 F2 / Del → 找 Hotkey Mode、Action Keys Mode、Function Key Behavior → 改成 Disabled	一劳永逸，但对新手略麻烦

各品牌切换键参考： 联想 / ThinkPad / 戴尔 / 小米 / 华为 / 华硕 多为 Fn + Esc； 惠普老机型常是 Fn + Shift； 外接机械键盘一般是 Fn + Esc 或键盘侧面的拨档开关。

顺便记住这几个快捷键

快捷键	作用
Ctrl + Shift + I	打开 / 关闭开发者工具
Ctrl + Shift + C	进入"点选元素"模式（点页面上任意一块，直接定位到它的代码）
Ctrl + Shift + M	切换手机视图（模拟手机屏幕，检查手机上的排版）
Ctrl + Shift + R 或 Ctrl + F5	强制刷新，忽略浏览器缓存
Ctrl + F	在代码里搜索（搜 【改】 或 --主色）

界面优化的 10 条原则

这 10 条不需要你懂代码，但决定了你的网站"看起来专业还是业余"。

原则	一句话说明	反例
少即是多	一个页面 3~5 个板块就够，别把所有东西都堆上	首页塞了 12 个板块，还全是满屏文字
留白就是高级感	内容离边缘远一点，行与行之间松一点	文字贴着屏幕边，行行紧挨着，看着就累
层次分明	标题大而黑、正文正常、说明更小更灰，一眼看出主次	所有字一样大一样黑，看不出哪里是重点
配色不超过三种	一个主色 + 黑白灰，其余都靠留白	红标题、绿按钮、紫背景、黄边框
对齐	要么全部左对齐，要么全部居中，别混着来	标题居中、正文左对齐、按钮右对齐
一致性	所有卡片同样的圆角、间距、阴影	三张卡片三种圆角、三种阴影
可读性	正文 15~17px、行高 1.7 左右，深色底别用浅灰字	正文 12px 还用了浅灰，得凑到屏幕前看
移动优先	先在手机宽度下调好，再放大到电脑看	电脑上很漂亮，手机上文字溢出、按钮跑到屏幕外
动效克制	只用轻微的悬停变化（模板已有）	满屏飞入、旋转、闪烁，看三秒就晕
可点击的要像可点击的	按钮和链接要有颜色、下划线或边框	一段没有颜色的纯文字，其实是能点的链接

性能与体验优化：在哪做、有什么用

前面讲的都是"好不好看"，这一节讲"快不快、稳不稳"。 好消息是：个人小站只要做好前四条，速度就已经超过一大半网站了。

优化项	在哪做	效果
开启 gzip 压缩	面板 → 网站 → 站点 → 配置文件（或在站点设置里勾选 gzip）	文本类文件传输体积缩小 60% 以上
开启静态资源缓存	同上，给图片 / CSS / JS 设置过期时间	第二次访问几乎秒开
图片压缩 / 用 WebP	上传前用在线工具或格式工厂压到 200KB 以内	首屏速度提升最明显的一项
强制 HTTPS	站点 → SSL → 打开"强制 HTTPS"	更安全，地址栏不显示"不安全"
证书自动续签	站点 → SSL → 确认"自动续签"已开	避免某天突然提示证书过期
写好标题与简介	改 <title> 和 description	搜索结果里显示正确的标题和摘要
给图片写 alt	每个 <img> 都加 alt="说明"	图挂了能看到说明，搜索引擎也读得懂
robots.txt / sitemap	根目录放一个 robots.txt 允许抓取	搜索引擎更愿意收录（新手可以以后再做）
自定义 404 页面	根目录放一个 404.html	访客输错网址时看到友好提示，而不是冷冰冰的报错
每日自动备份	面板 → 计划任务 → 备份网站	改坏了、被删了都能还原
CDN 加速	有流量之后再考虑（云厂商 CDN 或 Cloudflare）	各地访问更快，还顺便挡一部分攻击

如果以后用 WordPress，界面怎么改

WordPress 是另一种玩法：页面不用你写 HTML，后台点点就能改。 等你觉得"手改 HTML 太慢"的时候，就可以换过去了。改东西的位置如下：

想改什么	在哪里改
站点标题、副标题、图标	后台 → 设置 → 常规
颜色、字体、首页布局	后台 → 外观 → 自定义（左边改、右边实时预览）
顶部导航菜单	后台 → 外观 → 菜单
侧边栏 / 页脚内容	后台 → 外观 → 小工具
换整套外观	后台 → 外观 → 主题 → 安装新主题
加功能（表单、SEO、缓存）	后台 → 插件 → 安装插件
写文章 / 页面	后台 → 文章 / 页面 → 新建
网址结构（影响 SEO）	后台 → 设置 → 固定链接 → 选"文章名"
备份	装一个备份插件（如 UpdraftPlus）

改坏了怎么办

改页面最怕的不是改错，而是改错了回不去。守住下面三条，你就永远不用担心。

怎么回滚

1. 面板 → 文件管理 → 找到 index.html，右键删除或重命名为 index-坏.html。
2. 把备份的 index-旧.html 重命名回 index.html。
3. 回网站 Ctrl+F5，世界恢复了。
4. 如果连备份都没有：宝塔文件管理有回收站 / 历史版本可以找； 再不行就用计划任务里的自动备份还原。

常见症状速查

症状	最可能的原因	怎么修
整页排版全乱、内容挤成一坨	少了一个 </div>，或者 CSS 少了一个 }	检查标签配对和花括号数量，用 Ctrl+Z 撤销最近的改动
改了但页面完全没变化	没上传 / 浏览器缓存 / 改错了文件	看文件修改时间 → Ctrl+F5 → 确认改的是服务器上的那份
样式"部分生效"，某一块特别怪	CSS 漏了分号，它后面的属性全失效	检查最后一条生效的属性和失败的第一条属性之间
图片不显示（破图）	路径或文件名不对（大小写敏感）	确认图片在根目录、文件名一字不差、扩展名对
导航点了不跳	href="#xx" 和 id="xx" 对不上	两边改成完全一样的名字
手机上文字溢出屏幕	某处写了固定宽度，或删了 viewport 那行	检查 <meta name="viewport">，用 Ctrl+Shift+M 调手机视图看
页面白屏、什么都没了	HTML 结构被改烂了	别慌，换回备份文件；这也是为什么必须先备份

改完后的验证清单

每次改完页面，照着下面走一遍，能拦住 90% 的低级问题：

• ☐ 电脑浏览器打开，并按过 Ctrl+F5 强制刷新（不是只按 F5）
• ☐ 不带 www 的裸域名也能打开（如果配了的话）
• ☐ 按 Ctrl+Shift+M 切手机视图，排版没有乱、没有横向滚动条
• ☐ 用手机 4G（不连 WiFi）真实访问一次，而不是只在电脑上模拟
• ☐ 所有图片都能显示，没有出现破图
• ☐ 所有链接都能点：邮箱、外链、导航锚点
• ☐ 浏览器标签页的标题和图标正确
• ☐ 深色模式（如果系统开了）下文字依然清楚
• ☐ 已经做了一次备份（旧文件留底或计划任务）