一、为什么这 3 天的内容是职场入门关键？
刚入职的前端新人，最常被分配的任务就是 "还原设计稿的页面结构"------ 这不是简单写标签、调样式，而是要满足「语义清晰、布局兼容、可维护性」三大职场标准。很多自学者卡在 "会写代码但不符合工作规范"，核心就是没吃透 "语义化 HTML" 和 "工程化 CSS 布局" 的底层逻辑。
这 3 天我们不追求 "多而杂"，只聚焦 2 个核心目标：
- 写的 HTML 让同事（后端 / 产品）能看懂，让搜索引擎能识别（语义化）；
- 用 CSS 实现 "自适应、可复用" 的布局（告别固定像素和冗余代码）。
二、Day1：HTML 语义化 ------ 不止是 "能用"，还要 "好用"
1. 职场避坑：为什么不能全用<div>写页面？
很多新手习惯用<div>包裹所有内容，比如：
html
预览
<!-- 错误示范：纯div布局，无任何语义 -->
<div class="header">
<div class="logo">前端集训</div>
<div class="nav">首页/教程/实战</div>
</div>
<div class="content">
<div class="title">60天能力提升</div>
<div class="article">正文内容...</div>
</div>职场问题：后端对接数据时无法快速定位模块、SEO 爬虫无法识别页面结构、后续维护需逐行看 class 命名，效率极低。
2. 核心知识点：语义化标签的 "职场用法"（附场景对应表）
| 标签 | 核心语义 | 职场使用场景 | 替代的错误写法 |
|---|---|---|---|
<header> |
页面 / 模块头部 | 网站导航栏、文章标题区 | <div class="header"> |
<nav> |
导航链接区域 | 主导航、侧边栏菜单 | <div class="nav"> |
<main> |
页面核心内容 | 文章正文、产品列表核心区域 | <div class="content"> |
<article> |
独立完整内容 | 博客文章、新闻详情、产品卡片 | <div class="article"> |
<section> |
逻辑分区 | 文章章节、功能模块分组 | <div class="section"> |
<footer> |
页面 / 模块底部 | 版权信息、联系方式 | <div class="footer"> |
3. 实战练习：用语义化标签重构 "个人博客首页结构"
html
预览
<!-- 职场标准写法：语义清晰，无冗余class -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的技术博客</title>
</head>
<body>
<!-- 页面头部：导航+Logo -->
<header>
<h1>前端技术博客</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/archive">文章归档</a></li>
<li><a href="/about">关于我</a></li>
</ul>
</nav>
</header>
<!-- 核心内容区 -->
<main>
<!-- 文章列表：每个文章是独立的article -->
<article>
<h2><a href="/post/1">60天前端实战：第一天基础夯实</a></h2>
<section>
<p>本文讲解HTML语义化的职场用法...</p>
</section>
<footer>发布时间：2024-05-01 | 阅读量：100</footer>
</article>
<article>
<h2><a href="/post/2">CSS布局实战：Flexbox快速上手</a></h2>
<section>
<p>告别浮动布局，用Flex实现自适应...</p>
</section>
<footer>发布时间：2024-05-02 | 阅读量：89</footer>
</article>
</main>
<!-- 页面底部 -->
<footer>
<p>© 2024 前端技术博客 版权所有</p>
</footer>
</body>
</html>职场验证标准：删除所有 CSS 后，页面结构依然清晰可读（浏览器默认样式下能区分头部、导航、正文）。
三、Day2-3：CSS 布局实战 ------Flexbox（职场最常用布局方案）
1. 职场痛点：为什么放弃 "浮动布局"？
新手常用的float布局存在 3 大问题：需要清除浮动、无法垂直居中、自适应场景下容易错位 ------ 这些问题在团队协作中会导致大量兼容 bug，而 Flexbox（弹性盒模型）能一站式解决，是当前企业开发的 "首选布局方案"。
2. 核心知识点：Flexbox 的 "3 个核心属性 + 职场场景"
我们不记所有属性，只掌握 "高频实用款"，结合真实需求学习：
| 属性 | 作用对象 | 核心值 | 职场使用场景 |
|---|---|---|---|
display: flex |
父容器 | - | 开启弹性布局（替代 float） |
justify-content |
父容器 | space-between | 子元素水平分布（导航栏、卡片） |
align-items |
父容器 | center | 子元素垂直居中（按钮文字、图标） |
3. 实战：用 Flex 重构 "导航栏 + 文章卡片"（对接职场 "自适应布局" 需求）
css
/* 重置默认样式：职场项目必做（避免浏览器差异） */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 关键：宽高包含内边距和边框 */
}
body {
font-family: "Microsoft YaHei", sans-serif; /* 职场常用字体 */
}
/* 1. 导航栏布局：水平分布+垂直居中 */
header {
background-color: #333;
color: #fff;
padding: 0 20px;
}
/* 父容器：开启Flex */
header nav ul {
display: flex; /* 子元素（li）横向排列 */
list-style: none; /* 去掉列表默认圆点 */
gap: 30px; /* 子元素间距（替代margin-right） */
align-items: center; /* 垂直居中（解决文字错位问题） */
height: 60px; /* 导航栏固定高度 */
}
header nav a {
color: #fff;
text-decoration: none; /* 去掉下划线 */
}
/* 2. 文章卡片布局：自适应2列+间距 */
main {
max-width: 1200px; /* 职场常用：限制最大宽度，避免大屏拉伸 */
margin: 30px auto; /* 水平居中 */
padding: 0 20px;
}
/* 父容器：开启Flex，支持换行 */
main {
display: flex;
flex-wrap: wrap; /* 屏幕变小时自动换行 */
gap: 20px; /* 卡片间距 */
}
/* 子元素：自适应宽度 */
main article {
flex: 1 1 calc(50% - 10px); /* 关键：1列2个卡片（减去间距） */
border: 1px solid #eee;
padding: 20px;
border-radius: 8px; /* 圆角：职场常用设计 */
}
/* 响应式：手机端1列显示（对接职场"多端兼容"需求） */
@media (max-width: 768px) {
main article {
flex: 1 1 100%; /* 宽度100%，1列显示 */
}
}职场验收标准：
- 大屏（电脑）：导航栏文字水平分布、垂直居中；文章卡片 2 列均匀分布；
- 小屏（手机）：文章卡片自动换行成 1 列；无横向滚动条；
- 代码可维护：类名简洁（无冗余）、样式复用性强（Flex 属性统一控制）。
四、3 天总结：职场能力落地清单
- 能独立用语义化标签搭建页面结构（不依赖<div>）；
- 能使用 Flexbox 实现 "水平 / 垂直居中、自适应分布、响应式换行"；
- 理解 "box-sizing: border-box""gap 属性" 等职场常用优化点；
- 完成作业：基于以上代码，添加 "侧边栏" 模块（用 Flex 实现 "主内容 + 侧边栏" 布局），并提交到 GitHub（练习工程化习惯）。