使用语义化标签（如<section>）、正确设置alt属性、添加viewport元标签、外链配rel="noopener"及打印样式优化，可提升团队页的可访问性、响应式表现与安全性。
页面结构用 <section> 划分比用 <div> 更稳妥
浏览器对 <div> 完全没语义理解，而 <section> 能让屏幕阅读器、SEO 工具识别出“团队介绍”“核心成员”“技术栈”是独立内容块。实际写的时候别堆砌嵌套——一个 <section> 包住标题 + 成员列表就够了，别再套三层 <div>。
常见错误：把所有内容塞进一个 <div id="team"> 里，结果后期加锚点跳转或 CSS 定位时样式互相污染。建议按逻辑切分：
-
<section id="founders">—— 创始人介绍 -
<section id="engineers">—— 开发成员（带title属性说明技术方向） -
<section id="advisors">—— 顾问（用<aside>包裹更合适）
图片加载失败时 fallback 文字必须写在 <img> 的 alt 属性里
很多人把备用文字放在 <img> 外面当 <p> 写，结果图片加载失败时那段文字根本不会显示。真正起作用的只有 alt 值，而且它得具体——alt="张伟，后端工程师，5年Go经验" 比 alt="团队成员" 有用得多。
注意两点：
立即学习“前端免费学习笔记（深入）”；
- 空
alt=""表示该图纯装饰，屏幕阅读器会跳过；但人物头像绝不能空 - 不要用
title替代alt，title只在鼠标悬停时显示，且不被读屏软件识别 - 本地开发时故意删掉一张图片路径，看浏览器是否真显示了
alt文字——这是最简单的验证方式
响应式布局别只靠 @media，先用 <meta name="viewport"> 打底
没加这行，手机上打开永远是缩放后的小窗口，所有媒体查询都白写：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后才是断点处理。初创团队页通常不需要复杂栅格，直接用 flex + min-width 更轻量：
- 成员卡片用
display: flex; flex-wrap: wrap; - 单张卡片设
min-width: 280px;，一行最多放 3 张（桌面端），小屏自动换行 - 避免用
float或固定像素宽高，否则在 iPhone SE 和 iPad 上表现不一致
链接目标别默认全开新页，target="_blank" 必须配 rel="noopener"
团队页常有 GitHub、LinkedIn 等外链，加 target="_blank" 是方便，但不加 rel="noopener" 会导致安全漏洞：新页面可通过 window.opener 访问原页面 DOM，可能被恶意站点利用。
正确写法只有一种：
<a href="https://github.com/xxx" target="_blank" rel="noopener">GitHub</a>
顺带提醒：如果链接指向站内页（比如 /about.html），绝对不要加 target="_blank"——用户离开当前页就中断了浏览路径，尤其移动端返回键会失效。
团队介绍页最容易被忽略的是打印样式——投资人可能直接 Ctrl+P 打印 PDF 留存。加几行 @media print 隐藏无关元素（比如导航栏、背景图），保留姓名、职位、联系方式就行。这点没人提，但真有人这么干。
