最稳妥的企业官网结构起点是用<header><nav><main><aside><footer>五个语义化标签分块；<main>只能出现一次，<nav>仅含跳转链接并加aria-label，<aside>须与<main>逻辑相关，<section>划分模块并配<h2>和aria-labelledby，首屏<h1>需含公司名与主营业务。
直接用 <header>、<nav>、<main>、<aside>、<footer> 这五个语义化标签分块，就是最稳妥、最不容易翻车的企业官网结构起点。别先想 Grid 或 Flex 怎么写，先把骨架立对——错一步，后续所有样式和 JS 都得跟着调。
为什么必须用语义化标签，而不是一堆 <div>
浏览器、搜索引擎、屏幕阅读器靠这些标签理解“哪是导航、哪是正文、哪是页脚”。用 <div class="header">，对人看着像头部，对机器来说只是个无意义的盒子。
-
<main>必须且只能出现一次，首页轮播图、产品列表、客户案例都得包在里面 -
<nav>里只放跳转链接，别塞搜索框或登录按钮；加aria-label="主导航"是基本操作 -
<aside>不是“随便放点东西的地方”，它得和<main>内容逻辑相关（比如某篇文章的作者简介、同类产品推荐） - 用
<section>划分业务模块（如“解决方案”“成功案例”），每个<section>配一个<h2>，并用aria-labelledby关联
移动端适配时最容易忽略的三处布局断点
不是所有“响应式”都靠 @media 解决，有些问题出在结构本身。
- 导航栏在小屏收起后，别用 JS 控制
display: none—— 改用<details><summary>，无脚本环境也能展开 -
<aside>在手机上通常要挪到<main>下面，但不能靠order硬调顺序：Grid 的grid-template-areas在媒体查询里重定义更可靠 - 首屏
<h1>必须带公司名 + 主营业务，比如<h1>XX科技｜企业级SaaS服务提供商</h1>，纯图片或 slogan 当<h1>会导致 SEO 权重归零
display: flex 和 display: grid 到底该选哪个
新手优先用 Flex 做一维布局（导航栏、卡片行、页脚链接），Grid 做二维区域划分（整个页面的 header/nav/main/aside/footer 排布）。
立即学习“前端免费学习笔记（深入）”；
- Flex 适合处理“一行几个”或“一列几块”，比如
<nav>里的菜单项水平排列：display: flex; gap: 2rem; - Grid 适合定义整页功能区位置，父容器设
display: grid，再用grid-template-areas: "header header" "nav main" "nav aside" "footer footer" - 别在
<main>内部又套一层 Grid 去排产品卡片——用 Flex 更轻量，也更容易控制换行和间距 - 如果目标浏览器要兼容 IE11，Grid 就得放弃，全部改用 Flex +
flex-wrap和min-width控制换行
真正卡住新手的，从来不是怎么让三栏并排，而是没想清楚“这个区块在逻辑上属于什么角色”。<aside> 写成 <div class="sidebar"> 看着一样，但语义断裂之后，后续加无障碍支持、SEO 优化、甚至团队协作时的代码审查，都会变成隐形成本。
