语义化 HTML 与现代 CSS

学习目标：做出可响应、可键盘操作、结构清晰的页面，而不只会还原静态截图。

1. 先选语义，再写样式

语义化 HTML让浏览器、辅助技术和测试工具理解页面结构。导航用 nav，主要内容用 main，可提交的操作用 button；不要把可点击的 div 当按钮。

<main>
  <h1>我的笔记</h1>
  <form>
    <label for="query">搜索笔记</label>
    <input id="query" name="query" type="search" />
    <button type="submit">搜索</button>
  </form>
</main>

表单控件要有可见或可感知的标签；错误提示应与字段关联。标题层级反映内容结构，不按字体大小随意跳级。真实交互还需要空状态、加载状态和失败反馈。

2. 布局：Flex 与 Grid

.page { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: 1rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

不要只按设备名称断点；看内容何时挤压，再调整布局。图片设 max-width: 100%，长标题允许换行，缩放到 200% 后也应能完成主要任务。

3. 交互可用性

• 明显保留键盘焦点：使用 :focus-visible，不要无替代地移除轮廓。
• 鼠标悬停不是唯一提示；错误不能只用红色区分。
• 动画尊重 prefers-reduced-motion，重要信息不能只靠动效呈现。
• aria-* 只能补充语义，不能替代正确的原生控件。

自测

1. 搜索框没有可见占位符时，是否可以只用 placeholder 代替标签？不建议；标签应独立存在。
2. 何时优先用 Grid？布局同时需要行列约束时。

4. 表单语义与错误关联

每个输入应有可访问名称，优先通过 <label for> 与 id 关联。必填字段可用原生 required 提供基础约束，但服务端仍需校验。字段错误可以用 aria-describedby 关联说明和错误文本；若提交后出现汇总错误，还应把焦点引导到能发现问题的位置。

<label for="title">标题</label>
<input id="title" name="title" required aria-describedby="title-help" />
<p id="title-help">最多 120 个字符</p>

按钮写 type="button" 或 type="submit"，避免在表单内意外触发提交。导航用链接，执行操作用按钮；不要用点击事件把两者混淆。

5. 响应式布局的验证方法

先让内容在窄屏自然排布，再在需要时增加断点。检查 320 CSS 像素宽度、200% 放大和长中文/英文标题，确保没有水平滚动、被裁剪的按钮或无法读完的错误提示。Grid 的 minmax(min(16rem, 100%), 1fr) 可防卡片最小宽度超过容器，但仍要对实际内容测试。

图片要声明尺寸或宽高比，避免加载后布局跳动。使用 :focus-visible 给键盘焦点明确轮廓；悬停、颜色、动画都不能成为唯一反馈。

练习：把搜索、列表和新增表单做成一个纯 HTML/CSS 页面，关闭 CSS 后检查内容顺序，再只用 Tab、Enter、Space 完成基本操作。