介绍
# Website Development Rules
{ "text": "# 网站开发规范\n\n## 性能\n- 图片是导致网站缓慢的首要原因 —— 请使用 WebP/AVIF 格式，对视口下方内容进行懒加载，并设置明确的宽/高以防止布局偏移\n- 阻塞渲染的 CSS 会延迟首次绘制 —— 将关键 CSS 内联在 `<head>` 中，其余的延后加载\n- 第三方脚本（分析、聊天挂件）通常会增加 500ms 以上的延迟 —— 使用 `async` 或 `defer` 加载它们，并定期审计\n- 字体会导致隐形文本闪烁 (FOIT) —— 使用 `font-display: swap` 并预加载关键字体\n- 在无痕模式下使用 Lighthouse 进行测量 —— 浏览器扩展会歪曲结果\n\n## 移动优先\n- 编写 CSS 时从移动端样式开始，使用 `min-width` 媒体查询增加复杂度 —— 比从臃肿的桌面端代码精简下来更容易扩展\n- 触摸目标最小需要 44x44 像素 —— 手指操作不够精确，小按钮会让用户感到沮丧\n- 在真实设备上测试，而不仅仅是浏览器 DevTools —— 节流模拟无法捕捉现实世界中的卡顿\n- 横向滚动是一个严重的 Bug —— 每个页面至少要在 320px 宽度下进行测试\n- 必须包含 `viewport` meta 标签：`<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">`\n\n## 无障碍访问\n- 每个 `<img>` 都需要 `alt` 文本 —— 装饰性图片使用空 `alt=\"\"`，有意义的图片使用描述性文本\n- 正文文本的颜色对比度最低为 4.5:1 —— 使用 WebAIM 对比度检查器\n- 表单输入必须有关联的 `<label>` 元素 —— 仅靠占位符是不符合无障碍标准的\n- 键盘导航必须可用 —— 使用 Tab 键测试每一个交互元素\n- 屏幕阅读器会朗读标题层级 —— 按逻辑顺序使用 H1-H6，切勿跳级\n\n## HTML 结构\n- 每个页面只能有一个 `<h1>` —— 它是页面标题，不是样式工具\n- 使用语义化元素：`<nav>`、`<main>`、`<article>`、`<aside>`、`<footer>` —— 它们向浏览器和辅助技术传达结构信息\n- 操作用 `<button>`，导航用 `<a>` —— 不要使用带点击处理程序的 div\n- 外部链接应设置 `rel=\"noopener\"` —— 防止 `target=\"_blank\"` 带来的安全漏洞\n- 验证 HTML —— 损坏的标记会导致跨浏览器渲染不一致\n\n## CSS 模式\n- 避免使用 `!important` —— 它会破坏层叠规则并使调试变得痛苦。请修正优先级问题\n- 文本大小使用相对单位 (`rem`、`em`、`%`) 而非固定的 `px` —— 尊重用户的字体大小偏好设置\n- CSS 自定义属性（变量）可以减少重复 —— 一次定义颜色和间距，随处使用\n- 一维布局使用 Flexbox，二维布局使用 Grid —— 不要强求其中一个去完成另一个的工作\n- 在未加载 CSS 的情况下进行测试 —— 内容在纯 HTML 状态下仍应可读\n\n## 常见错误\n- 缺少 favicon 会导致服务器日志中出现大量 404 垃圾信息 —— 始终包含一个，即使是一个简单的 PNG\n- 未设置 `<html lang=\"en\">` 会破坏屏幕阅读器的发音\n- 硬编码 `http://` 链接在 HTTPS 网站上会失效 —— 使用协议相对路径 `//` 或始终使用 `https://`\- 假设 JavaScript 一定可用 —— 核心内容应在没有 JS 的情况下也能工作（渐进增强）\n- 忘记打印样式 —— 为用户可能打印的页面（收据、文章）添加 `@media print`\n\n## 上线前\n- 测试所有表单是否真能提交 —— 损坏的联系表单会悄无声息地流失潜在客户\n- 检查 404 页面是否存在且有帮助 —— 默认的服务器 404 页面看起来很不专业\n- 使用 Open Graph 标签验证社交分享预览 —— 在 Facebook/Twitter 调试器中进行测试\n- 将网站地图提交到 Google Search Console —— 加快索引速度\n- 设置正常运行时间监控 —— 在用户投诉之前了解网站何时宕机" }