前端基础（HTML/CSS）：从零开始搭建你的第一个页面
各位产品经理朋友，大家好。我是你们的技术讲师。今天咱们聊聊前端最基础的东西——HTML和CSS。
说实话，很多产品经理一听到「写代码」就头大。但我告诉你，HTML和CSS真没那么可怕。它们更像是搭积木和刷油漆。你不需要成为专家，但理解它们怎么工作，对你跟开发沟通、评审设计稿，甚至自己画原型，都大有帮助。
我个人习惯把前端比作一栋房子：HTML是房子的结构，CSS是装修风格。咱们先看结构。
HTML文档结构：骨架长什么样
一个标准的HTML文档，其实就几个固定部分。我刚开始学的时候，觉得这东西像填空题——把内容填到指定位置就行。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个页面</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是正文内容。</p>
</body>
</html>你看，结构就这么简单：
<!DOCTYPE html>：告诉浏览器「我是HTML5文档」<html>：整个文档的根元素，所有内容都包在里面<head>：放元数据，比如编码、标题、样式引用——用户看不到这些<body>：用户能看到的所有内容，都放这里
避坑指南：我曾经见过一个产品经理自己写邮件模板，忘了加 <meta charset="UTF-8">，结果中文全变成乱码。嗯，这个标签虽然看不见，但真不能省。
常用标签：你每天都会用到的那些
HTML标签很多，但常用的就那么十几个。你想想看，开发跟你对接时，说的「标题」「段落」「列表」「链接」「图片」，对应的就是这些标签。
| 标签 | 作用 | 使用场景 |
|---|---|---|
<h1>~<h6> |
标题，从大到小 | 页面标题、模块标题 |
<p> |
段落 | 正文文字 |
<a> |
超链接 | 跳转到其他页面 |
<img> |
图片 | 展示图片 |
<ul>/<ol> |
无序/有序列表 | 菜单、步骤说明 |
<div> |
块级容器 | 布局分组 |
<span> |
行内容器 | 包裹一小段文字 |
举个例子，一个简单的产品介绍卡片，用这些标签就能搭出来：
<div>
<h2>智能手表 Pro</h2>
<p>续航长达14天，支持心率监测。</p>
<a href="detail.html">查看详情</a>
<img src="watch.jpg" alt="手表图片">
</div>我在项目中遇到过产品经理把 <h1> 当普通文字用，结果页面标题层级全乱了。记住：每个页面最好只有一个 <h1>，这是SEO的基本要求。
CSS选择器与盒模型：装修房子的工具
HTML搭好了结构，CSS负责让它好看。CSS的核心就两件事：选中谁（选择器），怎么改（属性）。
选择器有几种常见写法：
- 标签选择器：直接写标签名，比如
p { color: red; }，所有段落变红 - 类选择器：用点号开头，比如
.title { font-size: 20px; }，只影响 class="title" 的元素 - ID选择器：用井号开头，比如
#header { background: blue; }，只影响 id="header" 的元素
我个人建议产品经理重点掌握类选择器。为什么？因为开发写组件时，类名是最常用的。你评审代码时看到 class="btn-primary"，就知道这是个主按钮。
接下来说盒模型。这个很重要——每个HTML元素都是一个盒子。盒子从内到外有四层：
盒模型四层结构：
- 内容区（content）：放文字、图片的地方
- 内边距（padding）：内容到边框的距离，像给盒子加海绵
- 边框（border）：盒子的边界线
- 外边距（margin）：盒子与其他元素的距离
举个例子，一个按钮的CSS可能是这样的：
.btn {
width: 120px; /* 内容区宽度 */
padding: 10px 20px; /* 上下10px，左右20px */
border: 2px solid #333; /* 2px实线边框 */
margin: 5px; /* 外边距5px */
}避坑指南：我曾经在做一个后台系统时，发现两个按钮之间间距总对不齐。查了半天，原来是 margin 和 padding 搞混了。记住：padding在边框里面，margin在边框外面。你想想看，padding是「撑大自己」，margin是「推开别人」。
Flex布局入门：告别手动对齐
以前做页面布局，开发得用各种奇技淫巧。现在有了Flex，简单多了。Flex说白了就是一维布局——要么横着排，要么竖着排。
核心就两个属性：
display: flex;：告诉父容器「我要用Flex布局」justify-content：控制子元素在主轴上的对齐方式align-items：控制子元素在交叉轴上的对齐方式
看个例子，三个按钮水平居中：
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 200px;
}我在项目中遇到过产品经理问「为什么这个按钮不能自动换行？」——因为Flex默认不换行。如果想换行，加个 flex-wrap: wrap; 就行。嗯，这个细节很多新手会忽略。
响应式设计理念：一个页面适配所有屏幕
现在用户用手机、平板、电脑看你的产品。响应式设计就是让页面自动适应不同屏幕。核心武器是媒体查询（Media Query）。
说白了就是：给不同宽度的屏幕，写不同的CSS规则。
/* 默认样式：大屏幕 */
.card {
width: 30%;
float: left;
}
/* 屏幕宽度小于768px时：手机 */
@media (max-width: 768px) {
.card {
width: 100%;
float: none;
}
}你想想看，如果没有响应式，用户用手机打开你的页面，字小得跟蚂蚁一样，体验多差。我建议产品经理在提需求时，一定要明确「移动端适配」的要求。这不是锦上添花，是基本要求。
小技巧：用Chrome开发者工具的手机模式，可以快速预览页面在不同屏幕下的效果。按F12，点左上角那个手机图标就行。我自己每次评审前端页面，都会先切到手机模式看一眼。
注意：响应式不是「缩放页面」。真正的响应式是重新布局——比如导航栏从横排变成汉堡菜单，图片从并排变成堆叠。如果你发现页面只是整体缩小了，那说明开发偷懒了。
好了，今天的内容就到这里。HTML是骨架，CSS是皮肤，Flex帮你排整齐，响应式让页面到处都能用。这些概念你理解了，跟开发沟通时至少能听懂他们在说什么。下一章咱们聊聊JavaScript——让页面动起来的东西。