前端清单

目的与范围

The Front-End Checklist 是一个详尽的列表，包含了在将网站或 HTML 页面发布到生产环境之前需要验证的所有元素。它为前端开发人员提供了一个全面的参考，以确保他们已经实现了高质量、可访问且经过优化的网站所需的所有必要组件。本文档概述了清单的结构、优先级系统和内容组织。

有关项目维护和质量保证流程的具体实现细节，请参阅项目维护。有关贡献指南，请参阅为项目贡献。

来源: README.md1-4

清单结构概述

《前端清单》主要记录在仓库的 README.md 文件中，并分为九个主要类别，每个类别侧重于前端开发的各个方面。

来源: README.md14-23

优先级系统

该清单使用三级优先级系统来指示每个项目的重要性。这些优先级级别由位于 data/images/priority/ 目录中的 SVG 图标以视觉方式表示。

优先级图标包括：

高优先级：红色方块图标 data/images/priority/high.svg
中优先级：橙色三角形图标 data/images/priority/medium.svg
低优先级：绿色圆形图标 data/images/priority/low.svg

来源: README.md31-39 data/images/priority/high.svg1-4 data/images/priority/medium.svg1-4 data/images/priority/low.svg1-4

资源指示符

该清单还使用表情符号来指示每个项目的资源类型。

表情符号	资源类型
📖	文档或文章
🛠	在线工具/测试工具
📹	媒体或视频内容

来源: README.md41-46

详细分类说明

1. 头部部分

本节涵盖应包含在 HTML 文档 <head> 中的元素。

关键项目包括：

文档类型声明（高优先级）
字符编码（高优先级）
视口配置（高优先级）
页面标题和元描述（高优先级）
网站图标（中优先级）
社交媒体元数据（低优先级）

来源: README.md47-297

2. HTML 部分

本节重点关注 HTML 最佳实践和验证。

关键项目包括：

正确使用 HTML5 语义元素（高优先级）
错误页面（404、5xx）的实现（高优先级）
在 `target="_blank" 的外部链接中使用 `rel="noopener" （中优先级）
通过 W3C 进行 HTML 验证（高优先级）
链接检查以防止 404 错误（高优先级）

来源: README.md301-344

3. Webfonts 部分

本节讨论 Web 字体实现方面的注意事项。

关键项目包括：

支持的字体格式（WOFF、WOFF2、TTF）（高优先级）
Web 字体大小优化（高优先级）
字体加载行为控制（低优先级）

来源: README.md348-369

4. CSS 部分

本节涵盖 CSS 最佳实践、性能和测试。

关键项目包括：

响应式网页设计实现（高优先级）
打印样式表（中优先级）
CSS 预处理器（低优先级）
唯一 ID 使用（高优先级）
CSS 重置/规范化（高优先级）
合并和最小化（高优先级）
跨浏览器和设备测试（高优先级）

来源: README.md373-464

5. 图片部分

本节重点关注图片优化和最佳实践。

关键项目包括：

图片优化（高优先级）
使用 picture/srcset 的响应式图片（中优先级）
合适的宽度和高度属性（高优先级）
可访问性的替代文本（高优先级）
懒加载实现（中优先级）

来源: README.md468-504

6. JavaScript 部分

本节讨论 JavaScript 的实现和优化。

关键项目包括：

避免行内 JavaScript（高优先级）
合并和最小化（高优先级）
JavaScript 安全注意事项（高优先级）
使用 async/defer 进行非阻塞加载（中优先级）
使用必需的且更新过的库（中优先级）
ESLint 验证（高优先级）

来源: README.md508-555

7. 安全部分

本节涵盖前端安全最佳实践。

关键项目包括：

HTTPS 实现（高优先级）
HTTP 严格传输安全（中优先级）
防止 CSRF 和 XSS 攻击（高优先级）
内容安全策略实现（中优先级）

来源: README.md559-616

8. 性能部分

本节重点关注性能优化技术。

关键项目包括：

性能目标（中优先级）
HTML 最小化（中优先级）
资源的懒加载（中优先级）
Cookie 大小优化（中优先级）
资源预取和预加载（低优先级）
使用 Google PageSpeed 等工具进行性能测试（高优先级）

来源: README.md620-699

9. 可访问性部分

本节讨论 Web 可访问性方面的注意事项。

关键项目包括：

渐进增强（中优先级）
颜色对比度符合 WCAG 标准（中优先级）
正确的标题结构（高优先级）
表单标签关联（高优先级）
键盘导航支持（高优先级）
屏幕阅读器兼容性（中优先级）

来源: README.md701-756

10. SEO 部分

本节涵盖搜索引擎优化实践。

关键项目包括：

Google Analytics 实现（低优先级）
Search Console 配置（低优先级）
逻辑标题结构（中优先级）
Sitemap.xml 创建和提交（高优先级）
Robots.txt 配置（高优先级）
结构化数据实现（高优先级）

来源: README.md758-799

清单项目结构

清单中的每个项目都遵循一致的结构，如下图所示：

README 中的示例清单项目

- [ ] **Charset:** ![High][high_img] The charset (UTF-8) is declared correctly.

```html
<!-- Set character encoding for the document -->
<meta charset="utf-8">

📖 确定字符编码 - HTML5 W3C


This structure includes:
1. Checkbox for tracking completion
2. Item name with priority indicator
3. Description of what should be implemented
4. Code example when applicable
5. Resource links with type indicators

Sources: <FileRef file-url="https://github.com/thedaviddias/Front-End-Checklist/blob/09d56dfe/README.md#L69-L76" min=69 max=76 file-path="README.md">Hii</FileRef>

## How to Use the Checklist

The Front-End Checklist is intended to be used as a reference during website development and before launching to production. The workflow for using the checklist is:

1. Go through each category that applies to your project
2. Check off items as they are implemented
3. Prioritize implementation based on the priority indicators:
   - Complete all high-priority items first
   - Address medium-priority items when applicable to your project
   - Implement low-priority items as enhancements when appropriate
4. Use the provided resources for guidance on implementation

The checklist is flexible enough to be used for different types of projects, with some items being optional depending on the specific requirements.

Sources: <FileRef file-url="https://github.com/thedaviddias/Front-End-Checklist/blob/09d56dfe/README.md#L24-L46" min=24 max=46 file-path="README.md">Hii</FileRef>

## Relationship to Other Project Components

The Front-End Checklist is part of a broader ecosystem of front-end development resources created by the same author:

```mermaid
graph TD
    A["Front-End Resources"] --> B["Front-End Checklist"]
    A --> C["Front-End Performance Checklist"]
    A --> D["Front-End Design Checklist"]
    
    B --> B1["HTML Checklist Items"]
    B --> B2["CSS Checklist Items"]
    B --> B3["JS Checklist Items"] 
    B --> B4["Performance Items"]
    B --> B5["SEO Items"]
    B --> B6["Accessibility Items"]
    B --> B7["Security Items"]
    
    C --> C1["Performance-specific Items"]
    D --> D1["Design-specific Items"]
    
    style A fill:white,stroke:black
    style B fill:white,stroke:black
    style C fill:white,stroke:black
    style D fill:white,stroke:black
    style B1 fill:white,stroke:black
    style B2 fill:white,stroke:black
    style B3 fill:white,stroke:black
    style B4 fill:white,stroke:black
    style B5 fill:white,stroke:black
    style B6 fill:white,stroke:black
    style B7 fill:white,stroke:black
    style C1 fill:white,stroke:black
    style D1 fill:white,stroke:black

该仓库根据 CC0（知识共享零许可）授权，属于公共领域，允许无限制地使用、修改和分发。

来源: README.md6-9 README.md845-848

翻译

《前端清单》已被社区贡献者翻译成多种语言，每种翻译都维护在一个单独的仓库中。

语言	仓库链接
日语	miya0001/Front-End-Checklist
西班牙语	eoasakura/Front-End-Checklist-ES
中文	JohnsenZhou/Front-End-Checklist
韩语	kesuskim/Front-End-Checklist
葡萄牙语	jcezarms/Front-End-Checklist
越南语	euclid1990/Front-End-Checklist
繁体中文	EngineLin/Front-End-Checklist
法语	ynizon/Front-End-Checklist
俄语	ungear/Front-End-Checklist
土耳其语	eraycetinay/Front-End-Checklist
德语	xfuture603/Front-End-Checklist
波兰语	mbiesiad/Front-End-Checklist
印度尼西亚语	nniinnoo/Front-End-Checklist

来源： README.md802-818

总结

前端清单是前端开发人员确保他们实现高质量网站所有必需元素的综合资源。它涵盖了前端开发的各个方面，从基本的 HTML 结构到高级性能优化和安全注意事项。优先级系统可帮助开发人员首先关注最关键的元素，而广泛的文档和工具参考则为实施提供了指导。

来源： README.md1-4 README.md31-39

前端清单

目的与范围

清单结构概述

优先级系统

资源指示符

详细分类说明

1. 头部部分

2. HTML 部分

3. Webfonts 部分

4. CSS 部分

5. 图片部分

6. JavaScript 部分

7. 安全部分

8. 性能部分

9. 可访问性部分

10. SEO 部分

清单项目结构

翻译

总结

本页内容