HTML + CSS 强化教程（把页面做得更漂亮）#

前面几篇我们一直在学 JavaScript——它负责”逻辑”。但一个网页能不能让人眼前一亮，主要看 HTML（结构） 和 CSS（外观）。这一篇把这两块系统讲透，学完你就能做出结构清晰、排版好看的页面。

一、HTML 强化：让结构”语义化”#

什么是语义化标签？#

HTML 有很多标签，不只是 <div> 和 <span>。用意思明确的标签来描述内容，就叫语义化。好处：代码好读、SEO（搜索引擎）更友好、无障碍设备（屏幕阅读器）能更好工作。

常见语义化标签：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>我的页面</title>
7
</head>
8
<body>
9
  <header>     <!-- 页头：logo、导航 -->
10
    <h1>网站标题</h1>
11
    <nav>      <!-- 导航 -->
12
      <a href="/">首页</a>
13
      <a href="/about">关于</a>
14
    </nav>
15
  </header>
16

17
  <main>       <!-- 主体内容 -->
18
    <article>  <!-- 一篇文章/独立内容块 -->
19
      <h2>文章标题</h2>
20
      <p>文章内容...</p>
21
    </article>
22

23
    <section>  <!-- 一个内容分区 -->
24
      <h2>其他推荐</h2>
25
    </section>
26
  </main>
27

28
  <footer>     <!-- 页脚 -->
29
    <p>© 2026 我的网站</p>
30
  </footer>
31
</body>
32
</html>

标题层级要正确#

h1 一个页面通常只有一个（给页面主标题），下面用 h2、h3 逐级细分，不要跳级（h1 直接到 h3 是不好的习惯）。

表单强化：input 的 type 类型#

input 有很多类型，浏览器会自带不同的交互：

1
<form>
2
  <input type="text" placeholder="用户名">      <!-- 单行文本 -->
3
  <input type="email" placeholder="邮箱">       <!-- 邮箱，浏览器会校验格式 -->
4
  <input type="password" placeholder="密码">    <!-- 密码，显示为圆点 -->
5
  <input type="number" min="0" max="100">       <!-- 数字，有上下箭头 -->
6
  <input type="date">                            <!-- 日期选择器 -->
7
  <input type="checkbox"> 记住我                 <!-- 复选框 -->
8
  <input type="radio" name="gender"> 男          <!-- 单选 -->
9
  <textarea placeholder="多行文本"></textarea>   <!-- 多行文本 -->
10
  <select>
11
    <option>北京</option>
12
    <option>上海</option>
13
  </select>
14
  <button type="submit">提交</button>
15
</form>

图片和链接的好习惯#

1
<!-- 图片：alt 是图片无法显示时的替代文字，也是 SEO 的一部分 -->
2
<img src="photo.jpg" alt="一张风景照" width="400">
3

4
<!-- 链接：加 target="_blank" 在新标签页打开 -->
5
<a href="https://example.com" target="_blank" rel="noopener">外部链接</a>

二、CSS 强化：选择器与优先级#

常用选择器#

1
/* 标签选择器 */
2
p { color: black; }
3

4
/* 类选择器：最常用 */
5
.card { background: white; }
6

7
/* id 选择器：一个页面唯一 */
8
#header { height: 60px; }
9

10
/* 后代选择器：.card 里的 p */
11
.card p { font-size: 14px; }
12

13
/* 子元素选择器：.menu 的直接子元素 li */
14
.menu > li { display: inline; }
15

16
/* 伪类：鼠标悬停 */
17
.btn:hover { background: blue; }
18

19
/* 伪类：第一个子元素 */
20
li:first-child { font-weight: bold; }
21

22
/* 属性选择器：type 为 email 的 input */
23
input[type="email"] { border: 1px solid gray; }

优先级（层叠规则）#

同一个元素被多个规则命中时，按优先级：

!important > 内联样式 > id > 类/伪类 > 标签 > 通配符

1
/* 优先级从低到高 */
2
* { color: gray; }              /* 通配符，最低 */
3
p { color: blue; }              /* 标签 */
4
.text { color: green; }         /* 类 */
5
#main-text { color: red; }      /* id，最高（不含 !important） */

新手最容易踩的坑：写了新样式但”没生效”——很可能是优先级不够，或者选择器写错了。用浏览器 F12 检查元素，右边会显示哪些规则生效、哪些被划掉。

三、盒模型：理解每个元素都是”盒子”#

CSS 里每个元素都是一个盒子，从外到内四层：

margin（外边距）：盒子与盒子之间的距离
border（边框）：盒子的边
padding（内边距）：内容与边框之间的空隙
content（内容）：文字、图片等

1
.box {
2
  width: 200px;
3
  padding: 20px;         /* 四边内边距 */
4
  border: 2px solid black;
5
  margin: 10px;          /* 四边外边距 */
6
}

注意： 默认情况下，width: 200px 只算内容宽度，实际盒子是 200 + 202 + 22 = 244px。要改这种计算方式，用：

1
.box {
2
  box-sizing: border-box;   /* width 包含 padding 和 border */
3
}

强烈建议全局设置：

1
* {
2
  box-sizing: border-box;
3
}

这样 width: 200px 就是盒子总宽度 200px，计算省心多了。

简写记忆： padding: 10px 20px 是”上下左右”；padding: 10px 20px 30px 40px 是”上右下左”（顺时针）。

四、Flexbox：一维布局神器#

Flexbox（弹性盒） 是现在最常用的布局方式，专门解决”一排元素怎么摆”。

基本用法#

1
.container {
2
  display: flex;            /* 开启 flex */
3
  justify-content: center;  /* 主轴（水平）对齐 */
4
  align-items: center;      /* 交叉轴（垂直）对齐 */
5
  gap: 10px;                /* 元素间距 */
6
}

justify-content 的常用值（水平方向）#

1
.container {
2
  display: flex;
3
  justify-content: flex-start;    /* 靠左（默认） */
4
  /* flex-end 靠右 */
5
  /* center 居中 */
6
  /* space-between 两端对齐，中间等距 */
7
  /* space-around 每个元素两侧等距 */
8
  /* space-evenly 完全等距 */
9
}

align-items 的常用值（垂直方向）#

1
.container {
2
  display: flex;
3
  align-items: stretch;   /* 拉伸填满（默认） */
4
  /* flex-start 顶部对齐 */
5
  /* center 垂直居中 */
6
  /* flex-end 底部对齐 */
7
}

flex 方向#

1
.container {
2
  display: flex;
3
  flex-direction: row;        /* 水平排列（默认） */
4
  /* column 垂直排列 */
5
  /* row-reverse 水平反向 */
6
}

子元素的 flex 属性：分配剩余空间#

1
.item {
2
  flex: 1;   /* 占满剩余空间（多个 1 就平均分） */
3
}

1
.sidebar { flex: 1; }   /* 占 1 份 */
2
.main { flex: 3; }      /* 占 3 份，主内容区更宽 */

实战：导航栏（最常见的 flex 应用）

1
<style>
2
  .navbar {
3
    display: flex;
4
    justify-content: space-between;   /* logo 靠左，菜单靠右 */
5
    align-items: center;
6
    padding: 10px 20px;
7
    background: #333;
8
    color: white;
9
  }
10
  .menu { display: flex; gap: 20px; list-style: none; }
11
</style>
12

13
<nav class="navbar">
14
  <div class="logo">我的网站</div>
15
  <ul class="menu">
16
    <li>首页</li>
17
    <li>关于</li>
18
    <li>联系</li>
19
  </ul>
20
</nav>

五、CSS Grid：二维布局#

Grid（网格）适合同时控制行和列的复杂布局（比如卡片墙、后台管理面板）。

1
.container {
2
  display: grid;
3
  grid-template-columns: 1fr 1fr 1fr;   /* 三列，等宽 */
4
  gap: 20px;                            /* 间距 */
5
}

1fr 表示”一份”，1fr 1fr 1fr 就是三等分
也可以用固定值：200px 1fr（第一列 200px，剩下给第二列）
用 repeat(3, 1fr) 等价于 1fr 1fr 1fr

实战：商品卡片网格

1
<style>
2
  .grid {
3
    display: grid;
4
    grid-template-columns: repeat(3, 1fr);
5
    gap: 20px;
6
  }
7
  .card {
8
    border: 1px solid #ddd;
9
    border-radius: 10px;
10
    padding: 20px;
11
    text-align: center;
12
  }
13
</style>
14

15
<div class="grid">
16
  <div class="card">商品 1<br>¥10</div>
17
  <div class="card">商品 2<br>¥20</div>
18
  <div class="card">商品 3<br>¥30</div>
19
  <div class="card">商品 4<br>¥40</div>
20
  <div class="card">商品 5<br>¥50</div>
21
  <div class="card">商品 6<br>¥60</div>
22
</div>

选择建议： 一排的布局（导航、按钮组）用 Flex；多行多列的网格（卡片墙）用 Grid。

六、响应式设计：适配手机和电脑#

现在很多人用手机看网页。响应式设计就是让页面在不同屏幕宽度下自动调整。

关键一行：viewport#

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

没有这行，手机浏览器会把页面按桌面宽度缩小显示，字小得没法看。每个页面都必须加。

媒体查询：按屏幕宽度应用不同样式#

1
/* 默认（电脑）样式 */
2
.grid {
3
  display: grid;
4
  grid-template-columns: repeat(3, 1fr);
5
}
6

7
/* 屏幕宽度小于 768px（手机/平板竖屏）时 */
8
@media (max-width: 768px) {
9
  .grid {
10
    grid-template-columns: 1fr;   /* 变成一列 */
11
  }
12
}

流式布局技巧#

宽度用百分比或 max-width 而不是写死像素：

1
.container {
2
  max-width: 1200px;   /* 最大 1200px */
3
  margin: 0 auto;      /* 居中 */
4
}

图片 max-width: 100% 防止溢出

1
img {
2
  max-width: 100%;
3
  height: auto;
4
}

七、让页面好看：样式小技巧合集#

字体与颜色#

1
body {
2
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
3
  color: #333;
4
  line-height: 1.6;         /* 行高，正文推荐 1.5-1.8 */
5
}
6

7
h1 { font-size: 32px; font-weight: 700; }
8
p  { font-size: 16px; }

配色建议： 新手别自己瞎配色，用现成方案：

文字用深灰（#333）而不是纯黑
背景用白或浅灰（#f5f5f5）
主色一个就够，其他都用同色系深浅

圆角、阴影、边框#

1
.card {
2
  border-radius: 12px;                      /* 圆角 */
3
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影：水平 垂直 模糊 颜色 */
4
  border: none;
5
}

过渡与动画#

1
.btn {
2
  background: #4a90d9;
3
  color: white;
4
  padding: 10px 20px;
5
  border-radius: 8px;
6
  transition: all 0.3s;      /* 变化过程 0.3 秒 */
7
}
8

9
.btn:hover {
10
  background: #357abd;       /* 悬停变深，过渡让变化更顺滑 */
11
  transform: translateY(-2px);  /* 微微上移 */
12
}

简单动画（永远在动）：

1
@keyframes pulse {
2
  0%   { transform: scale(1); }
3
  50%  { transform: scale(1.05); }
4
  100% { transform: scale(1); }
5
}
6

7
.hot {
8
  animation: pulse 2s infinite;
9
}

八、完整案例：一张好看的”个人信息卡片”#

把上面的知识全用上，做一张精致的卡片：

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>个人信息卡片</title>
7
  <style>
8
    * { box-sizing: border-box; margin: 0; padding: 0; }
9

10
    body {
11
      font-family: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
12
      background: #f0f2f5;
13
      display: flex;
14
      justify-content: center;
15
      align-items: center;
16
      min-height: 100vh;
17
    }
18

19
    .card {
20
      width: 320px;
21
      background: white;
22
      border-radius: 16px;
23
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
24
      overflow: hidden;          /* 圆角裁掉头像溢出 */
25
      transition: transform 0.3s;
26
    }
27

28
    .card:hover { transform: translateY(-4px); }
29

30
    .avatar {
31
      width: 100%;
32
      height: 160px;
33
      background: linear-gradient(135deg, #667eea, #764ba2);  /* 渐变背景代替图片 */
34
    }
35

36
    .info { padding: 24px; text-align: center; }
37

38
    .name { font-size: 22px; font-weight: 700; }
39

40
    .title {
41
      color: #888;
42
      font-size: 14px;
43
      margin: 8px 0 16px;
44
    }
45

46
    .tags { display: flex; justify-content: center; gap: 8px; }
47

48
    .tag {
49
      background: #eef1ff;
50
      color: #5a6acf;
51
      padding: 4px 12px;
52
      border-radius: 20px;
53
      font-size: 13px;
54
    }
55

56
    .btn {
57
      margin-top: 20px;
58
      width: 100%;
59
      padding: 10px;
60
      border: none;
61
      border-radius: 8px;
62
      background: #667eea;
63
      color: white;
64
      font-size: 16px;
65
      cursor: pointer;
66
      transition: background 0.3s;
67
    }
68

69
    .btn:hover { background: #5566d8; }
70
  </style>
71
</head>
72
<body>
73
  <div class="card">
74
    <div class="avatar"></div>
75
    <div class="info">
76
      <div class="name">小明</div>
77
      <div class="title">前端开发学习者</div>
78
      <div class="tags">
79
        <span class="tag">JavaScript</span>
80
        <span class="tag">HTML</span>
81
        <span class="tag">CSS</span>
82
      </div>
83
      <button class="btn">关注我</button>
84
    </div>
85
  </div>
86
</body>
87
</html>

打开看效果：居中卡片、渐变头像、圆角标签、悬停上浮的按钮——这些都是真实网站常用的视觉元素。

九、总结#

这一篇我们强化了：

语义化 HTML：header、nav、main、article、footer，结构清晰
CSS 选择器与优先级：知道样式为什么不生效
盒模型：margin、padding、border、content，配合 border-box
Flexbox：一排元素的布局（导航栏）
CSS Grid：多行多列的网格布局（卡片墙）
响应式设计：viewport + 媒体查询，适配手机
美化技巧：字体、配色、圆角、阴影、过渡动画
完整案例：个人信息卡片

下一篇进入框架：Vue 和 React。有了 HTML/CSS/JS 的地基，框架会好懂很多。