现代博客首页应使用语义化HTML标签：header包导航和标题，main放文章列表，aside放分类/关于/友链，footer放版权和备案信息；CSS布局优先选Grid实现三区域响应式，避免float或绝对定位；文章卡片需用white-space、-webkit-line-clamp和word-break防溢出；断点设为480px和768px~1023px两档，字体用rem/em保证缩放适配。
首页结构该用什么HTML语义标签
别一上来就写 <div class="header">，现代博客首页有明确语义：用 <header> 包导航和标题，<main> 放文章列表，<aside> 放分类/关于/友链，<footer> 放版权和备案信息。浏览器和读屏工具能识别这些标签，SEO 也更友好。如果硬套 <div>，后期加无障碍支持或改版会多踩三四个坑。
CSS布局选Flex还是Grid
首页典型区域是「顶部导航 + 左侧主内容（文章卡片）+ 右侧边栏 + 底部」，用 display: grid 更直接：
.layout {
display: grid;
grid-template-areas:
"header header"
"main aside"
"footer footer";
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr 300px;
}
Flex 更适合单行/单列内元素排列（比如导航菜单里的 <nav> 子项），强行用 Flex 做三区域响应式布局，媒体查询里要反复重写 flex-direction 和 order，容易漏掉某个断点。
- 小屏幕下把
grid-template-areas改成"header" "main" "aside" "footer"即可垂直堆叠 - 避免用
float或绝对定位做首页大布局，维护成本高且响应式难控制 - 不要给
<main>设固定高度，文章数量变化时会截断内容
文章卡片的CSS怎么避免文字溢出和换行错乱
博客首页的文章卡片常包含标题、摘要、日期、标签，最容易出问题是摘要文本过长导致容器撑开、省略号不生效、中文换行异常。关键在三处：
立即学习“前端免费学习笔记（深入）”；
- 标题用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，但必须配合width或max-width才有效 - 摘要用
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;控制最多显示 3 行，比 JS 截断更轻量 - 所有文字容器设
word-break: break-word;，防止长英文或 URL 不换行撑破卡片 - 别依赖
height限制摘要高度——不同字体渲染下行高不一致，会导致截断位置偏移
响应式断点怎么设才不反复修改
别按“手机 / 平板 / 桌面”机械分 3 个断点。实际观察用户访问数据，95% 的窄屏访问来自宽度 ≤ 480px 的手机竖屏，剩下主要集中在 768px（iPad 竖屏）和 ≥ 1024px（桌面）。只设两个断点足够：
-
@media (max-width: 480px)：隐藏边栏、导航转汉堡菜单、卡片 padding 减半 -
@media (min-width: 768px) and (max-width: 1023px)：边栏放在主内容下方，卡片改为两列网格 - 超过 1024px 用默认四栏或三栏布局，不再新增断点
额外注意：用 rem 或 em 写字体大小和间距，而不是固定 px，否则缩放网页时布局容易错位。很多开发者调完 PC 端就上线，结果用户用系统放大字体后首页卡片重叠——这种问题查起来特别慢。
