应使用语义化HTML标签（header、nav、main、footer）构建可维护骨架，配合CSS变量统一视觉系统，优先用Flex处理横向布局，Grid仅用于行列明确的复杂区域。
用 header、nav、main、footer 搭出可维护的骨架
别再用一堆 <div class="header"> 套娃了。语义化标签不是装饰，是浏览器、搜索引擎和读屏工具识别结构的依据。真实项目里，一个错用 div 代替 nav 的导航栏，会导致键盘用户无法用 Tab 跳转到菜单，SEO 工具也抓不到主导航关键词。
实操建议：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
header只包公司 logo、标语、主联系方式；不要塞导航——那是nav的事 -
nav必须加aria-label="主导航"，否则读屏软件只读“列表”，不知道这是导航 -
main是唯一且不可嵌套的，所有核心内容（服务介绍、客户案例、轮播图占位）都得在里面 -
footer别只放版权信息，把地址、电话、备案号、友情链接按语义用address和section拆开
服务卡片/团队头像这类横向排列模块，优先用 display: flex
企业官网 80% 的横向布局（导航栏、三列服务图标、四人团队展示）不需要 Grid。Flex 更轻量、更可控，尤其在响应式断点切换时不会意外破坏轨道。
常见错误现象：用 float 做导航，结果小屏下文字换行错位；用 inline-block 排卡片，因换行符产生 4px 间隙，导致最后一列掉行。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 导航栏写成
nav ul { display: flex; justify-content: space-between; }，比浮动+清除更稳 - 服务卡片容器设
gap: 1.5rem，不用 margin 手动调，避免父子 margin 合并问题 - 小屏收拢时，直接对容器加
@media (max-width: 768px) { flex-direction: column; }，别改 HTML 结构
轮播图占位区、客户案例网格、页脚多列，才该上 display: grid
Grid 不是炫技工具。它真正起作用的地方，是那些“行列关系明确且需跨列控制”的区域。比如首页大图叠加标题、客户 logo 按 4-3-2-1 列动态缩放、页脚分“联系信息 / 快速链接 / 订阅”三栏且高度自动拉齐。
容易踩的坑：在 body 上直接写 display: grid，后面加个新模块就得重算 grid-row，维护成本爆炸；或者用 grid-template-columns: 1fr 1fr 1fr 硬写死三列，结果 iPad 横屏时挤成一团。
实操建议：
- 轮播图区域用
section { display: grid; place-items: center; }快速居中文字和按钮，不依赖绝对定位 - 客户案例网格用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，比媒体查询写四遍更可靠 - 页脚用
grid-template-areas定义区域名，后续增删栏目只需改 area 名，不碰行列数
图片、字体、间距必须靠 CSS 变量统一管，别靠“感觉”调
企业官网被说“不像正规公司做的”，90% 出在视觉系统失控：同一级标题在 banner 里是 36px，在服务介绍里变成 32px；主色在按钮上是 #2563eb，在链接下划线却是 #3b82f6；段落间距靠 margin-bottom: 24px 堆出来，结果手机上看全乱了。
实操建议：
- 在
:root里定义--color-primary: #2563eb;、--space-md: 1.5rem;、--font-size-lg: 1.875rem; - 所有图片强制
img { max-width: 100%; height: auto; }，防止小屏溢出容器 - 字体栈写全
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;，别只写"Helvetica" - 禁用
!important，靠选择器层级和变量覆盖来管理样式优先级
最常被忽略的一点：语义标签和 CSS 变量不是“加分项”，而是上线前被测试同事、SEO 工程师、无障碍审核员第一眼就盯的硬指标。没加 aria-label 的 nav，或没设 max-width: 100% 的图片，在真实设备和辅助工具里会立刻暴露。
