“关于我们”页必须用语义化html标签：用划分模块、放辅助信息、+处理团队照、规范联系信息、包裹成员介绍，确保seo、无障碍与可维护性。
“关于我们”页不是套模板就能糊弄过去的页面——它得让访客三秒内判断出“这公司靠不靠谱”，同时还得被搜索引擎抓取到关键信息。直接用 <div> 堆内容、缺语义标签、漏联系信息结构，很容易变成 SEO 死角和无障碍阅读障碍点。
<h3>为什么不能只用 <code><div> 写“关于我们”
<p>纯 <code><div> 布局会让屏幕阅读器无法识别内容层级，搜索引擎也难提取组织架构、成立时间、团队规模等关键字段。HTML5 提供了明确语义的容器标签，该用就得用。
<ul>
<li>
<code><section></section> 适合划分“公司历程”“核心团队”“价值观”等逻辑区块，每个 <section></section> 应有 <h2></h2> 或更高级别标题
@#@#@#@#@#@#@#@#@#@0 @#@#@#@#@#@#@#@#@#@1团队介绍部分最容易踩的三个坑
“核心成员”模块常被做成图片墙或静态列表，既不利于 SEO，也不适配暗色模式和缩放字体场景。
- 头像必须用
<img>而非 CSSbackground-image，否则无法添加alt和响应式srcset - 每位成员信息用
<article></article>包裹（代表独立内容单元），而非<div>；标题用 <code><h3></h3>，职务用<h4></h4>，简介用<p></p> - 避免在 HTML 中硬编码社交链接图标（如 font-awesome 类名），改用 SVG 内联或
<img src="linkedin.svg" alt="LinkedIn 主页">，确保图标可访问、可缩放 - 如果团队人数超过 5 人，建议加
aria-live="polite"到筛选控件上，方便屏幕阅读器用户感知切换结果
真正难的不是写出“关于我们”页，而是让每段 HTML 都承担起它该有的语义责任——浏览器、搜索引擎、辅助技术、甚至未来可能解析它的 AI，都依赖这些标签做判断。少一个 <section></section>，多一个无意义 <div>，损失的不只是代码整洁度。</div>
