语义标签、Grid布局、h1标题和真实页面链接是官网技术合规的四大硬性门槛：header/nav/main/aside/footer须正确使用，main仅出现一次，grid-template-areas需按设备分层定义，首屏必须有含公司全称与核心业务的<h1>，主导航必须指向独立HTML页面。
header/nav/main/aside/footer 必须用对，不能只靠 div 套嵌
浏览器、爬虫、屏幕阅读器都依赖这些语义标签识别页面逻辑。用 div 替代 header 或 nav，会导致 SEO 权重稀释、无障碍访问失败，甚至被 Google 视为结构松散。
关键约束条件：
-
main在整个页面中必须且只能出现一次，轮播图、产品摘要、客户案例都要包在里面 -
nav内部不塞搜索框、登录按钮；若需，应另起section或用form包裹 -
aside的内容需与main存在逻辑关联（如“相关案例”“同类服务”），不能是孤立广告位 -
footer里禁止放“返回顶部”按钮或客服弹窗入口——它们属于交互组件，应放在body末尾或固定定位层
grid-template-areas 要按设备分层定义，别写死一套
用 CSS Grid 布局时，grid-template-areas 是最直观的功能区块映射方式，但直接写成 "header nav main aside footer" 会卡死在桌面端。
移动端必须重定义：
立即学习“前端免费学习笔记（深入）”；
- 桌面端可设为
"header header header header" "nav main main aside" "footer footer footer footer" - 平板端建议
"header header" "nav main" "aside main" "footer footer" - 手机端必须简化为单列：
"header" "nav" "main" "aside" "footer"，否则aside会挤占主内容宽度 - 所有
grid-area值要与grid-template-areas中名称严格一致，大小写、空格都不能错
首屏 <h1> 不是装饰，是 SEO 和可访问性硬门槛
很多企业首页用图片替代 <h1>，或把 slogan 当标题，结果语音助手读不出主体，Google 也降权。
合规写法只有这一种：
- 首屏可见区域必须有且仅有一个
<h1> - 文本必须含公司全称 + 核心业务关键词，例如
<h1>XX电机控制与BMS解决方案专家</h1> - 不能包裹在
div或span里隐藏；display: none或visibility: hidden都算违规 - 如果品牌 Logo 是图片，需配
alt="XX电机控制与BMS解决方案专家"，且仍要保留文字<h1>
导航链接必须指向真实 HTML 页面，锚点只是辅助
纯 #about 锚点导航看着省事，但新用户首次访问无法直链到“服务”区块，分享链接也失效，SEO 更是零权重。
企业官网的主导航项应分别对应独立页面：
导航项“服务” → /services.html导航项“案例” → /case.html导航项“联系” → /contact.html- 首页内可保留锚点跳转（如“了解更多 →”按钮指向
id="service"），但仅作浏览辅助，不可替代页面级导航 - 所有
<a>标签必须带有效href值，href="#"或href="javascript:void(0)"会破坏可访问性和爬虫抓取
语义标签不是摆设，Grid 区域不是炫技工具，<h1> 和真实页面链接更是硬性门槛——漏掉任意一条，官网在技术层面就已失格。真正难的不是写出来，而是每一块都经得起审查和放大。
