HTML 与 CSS

一、HTML：页面的骨架

HTML（超文本标记语言）用标签描述页面结构。一个商品卡片长这样：

<div class="product-card">
  <img src="/images/phone.jpg" alt="手机" />
  <h3>某品牌手机 512GB</h3>
  <p class="price">¥3999</p>
  <button>加入购物车</button>
</div>

高频标签速查：

标签	用途
div / span	通用容器（块级 / 行内）
h1~h6	标题
p	段落
a	链接
img	图片（必须写 alt）
ul / li	无序列表
button / input	按钮 / 输入框
header / main / footer	语义化布局（可读性更好）

语义化

能用 <header> 就别用 <div class="header">。语义化标签对 SEO 和可访问性友好，面试也常问。

二、CSS：页面的样式

CSS 三件套：选择器 + 属性 + 值。

.product-card {
  width: 240px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: translateY(-4px);   /* 悬停上浮，商城常见的卡片效果 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

盒子模型（面试必问）

CSS 中每个元素都是一个"盒子"：

┌──────────────────────┐ ← margin 外边距（和其他元素的距离）
│  ┌────────────────┐  │ ← border 边框
│  │ ┌────────────┐ │  │ ← padding 内边距
│  │ │  content   │ │  │   内容区
│  │ └────────────┘ │  │
│  └────────────────┘  │
└──────────────────────┘

.box {
  box-sizing: border-box;   /* 推荐：width 包含 border 和 padding */
  width: 200px;
  padding: 20px;
}

布局两大神器：Flex 和 Grid

Flex（一维布局）——商品卡片一行排开：

.product-list {
  display: flex;
  gap: 16px;
  justify-content: space-between;  /* 主轴对齐 */
  align-items: center;             /* 交叉轴对齐 */
  flex-wrap: wrap;                 /* 换行 */
}

Grid（二维布局）——商品网格：

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

minmax(240px, 1fr) 让卡片在窄屏自动变一列、宽屏变多列，这就是最简单的响应式。

移动端适配

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

@media (max-width: 768px) {
  .product-grid { grid-template-columns: 1fr 1fr; }
}

三、CSS 在 Vue/React 里的写法

框架里的 CSS 基本一样，只是多了一些"作用域"写法：

• Vue：<style scoped> 让样式只作用于当前组件。
• React：*.module.css（CSS Modules）达到同样的隔离效果。

两者解决的是同一个问题：避免全局样式互相污染。

这一章的核心目标

看到 HTML 能读懂结构，看到 CSS 能猜出布局。不用会背，但遇到要"把一个列表排成一行"时，能想起用 display: flex。