企业官网核心产品展示需用语义化html结构：以包裹，配带关键词的及aria标识；每张卡片用，含型号、核心价值描述、真实链接、合规alt图；分大类时各用独立
企业官网的核心产品展示区块不是简单罗列图片和标题，而是要兼顾用户浏览路径、转化目标和SEO基础。关键在于结构清晰、语义准确、信息分层明确。
用包裹，加明确的标题与ARIA标识
整个产品展示区域必须用一个独立的 <section></section> 包裹，不能混在 <div> 或 <code><main></main> 里直接堆卡片。顶部配一个带业务关键词的 <h2></h2>，比如“工业级电机控制器系列”，并用 id 和 aria-labelledby 关联，方便屏幕阅读器识别模块意图。
<section aria-labelledby="products-title"></section><h2 id="products-title">工业级电机控制器系列</h2>- 每张产品卡片用
<article></article>标签，表示它是可独立分发的内容单元
每张产品卡片包含三类基础信息
卡片结构需统一，避免视觉跳变。每张卡片至少包含：带品牌名的型号标题（<h3></h3>）、一句话核心价值（非口号，如“支持-40℃~85℃宽温运行”）、一个真实跳转链接（指向 /product/mc-2000.html 这类独立产品页，而非锚点）。
- 图片必须带
alt，内容为“品牌+型号+用途”，例如alt="智控MC-2000三相无感BLDC电机驱动板" - 避免使用纯图标或装饰性图片替代文字说明
- 卡片底部保留“查看详情”按钮，
href指向真实页面，不写javascript:void(0)或空链接
布局适配响应式，但语义不妥协
PC端可用 CSS Grid 做三栏，移动端自动转单列，但标签结构不变。不要因为排版需要就改用 <div class="product-grid"> 替代语义化结构。
<ul>
<li>禁止在 <code><section></section> 内部再嵌套 <header></header> 或 <footer></footer> —— 那些属于整页层级
<section></section>，不要塞进同一个区块靠CSS隐藏/显示<section></section> 内部，但需用 <figure></figure> + <figcaption></figcaption> 标注用途与导航和SEO形成闭环
首页的产品区块不是孤立存在。它要和主导航中的“产品”菜单项（链接到 /products.html）保持逻辑一致，同时首屏 <h1></h1> 中的品牌名和主营业务词，应能在本区块的 <h2></h2> 和产品标题中自然复现。
- 比如首页
<h1></h1>是“智控科技｜工业电机控制与BMS系统解决方案提供商”，那么产品区块标题就该是“工业电机控制系列产品”，而不是“我们的产品” - 所有产品链接的页面，
<title></title>和<meta name="description">必须手写，不能留模板默认值 - 不建议在首页产品区放“立即询价”表单——那是联系页或产品页的职责，首页只负责引导
