前端开发清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。
它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。
前端开发清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:
意味着该项目被推荐，但在某些特定情况下可以省略。
意味着该项目是强烈推荐的，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。
意味着项目不能被任何理由忽略。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。
某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。
- 📖: 文档或文章
- 🛠: 在线工具/测试工具
- 📹: 媒体或视频内容
注意: 你能在HEAD列表中找到HTML文档
<head>标签内所有可配置的属性。
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在head中声明
- Charset（字符类型）:
Charsetmeta(UTF-8)。
<!-- 设置文档的字符编码 -->
<meta charset="utf-8">- X-UA-Compatible（IE相关设定）:
X-UA-Compatiblemeta。
<!-- 指示Internet Explorer使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport（视口）:
viewportmeta。
<!-- 响应式网页设计viewpoint声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title（标题）:
title(SEO:Google会计算标题中使用的字符的像素宽度，范围在472和482像素之间，所以平均字符数限制大约在55个字符左右)。
<!-- 文档标题 -->
<title>网站标题不超过55个字符</title>- Description（描述）:
description标签， 它是唯一的同时内容不能超过150个字符。
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">- Favicons:
favicon都被创建并正确显示，如果你只有一个favicon.ico，把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用PNG格式，相比.ico格式有较好的优势(推荐尺寸: 32x32px)。
<!-- 标准favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- 推荐favicon格式 -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">- Apple Touch Icon:
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">- Windows Tiles:
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />browserconfig.xml文件的最小所需xml标记如下所示:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>- Canonical:
rel="canonical"以避免重复的内容。
<!-- 帮助防止重复内容出现 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">- Language tag（语言标签）:
<html lang="zh_cn">- Direction tag（方向标签）:
direction属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)。
<html dir="rtl">- Alternate language（备用语言）:
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Alternate language（条件注释）:
- RSS feed（RSS 訂閱）:
- Inline critical CSS（最小 CSS 合集）:
CSS critical收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在<style></style>中嵌入。
- CSS order（加载顺序）:
强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体的meta。
- Facebook Open Graph:
注意: 使用
og:image:width和og:image:height将会爬取制定尺寸的图像，以便图像能够快速呈现，无需进行异步下载和处理。
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Next tags are optional but recommended -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 A Guide to Sharing for Webmasters
- 🛠 使用Facebook OG testing测试你的页面。
- 📖 Best Practices - Sharing
- 🛠 Test your page with the Facebook OG testing
- Twitter Card:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">- HTML5 Semantic Elements（HTML5语义化元素）:
📖 HTML 参考
-
Error pages（错误页面）:
-
Noopener:
target="_blank", 你的链接必须有个rel="noopener"属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用rel="noopener noreferrer"。
- Clean up comments（清除注释）:
- W3C compliant（兼容）:
- HTML Lint:
-
Desktop Browsers:
-
Mobile Browsers:
-
Link checker（链接检查器）:
- Adblockers test（广告拦截器测试）:
- Pixel perfect:
注意: 使用webfonts可能会导致文档样式闪烁以及文本不可见，所以在使用时需要考虑使用后备字体，或者使用webfont加载器来控制字体加载行为。
- Webfont format（字体格式）:
-
Webfont size（字体大小）:
-
Webfont loader（字体加载器）:
- 响应式网站设计:
- CSS打印属性:
- 预处理器:
- 唯一ID:
- Reset CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- JS 前缀:
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS embed or line:
- 浏览器内核前缀:
- 连接:
- 压缩:
- 非阻塞:
- 未使用的CSS:
- 格式检查:
-
响应式网页设计:
-
CSS验证器:
🛠 CSS验证器
- 桌面浏览器:
- 移动端浏览器:
- 操作系统:
- Pixel perfect:
- Reading direction:
注意: 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书**图像优化基础**。
- 优化:
- 🛠 Imagemin
- 🛠 使用ImageOptim免费优化您的图像。
- 🛠 使用Kraken.io优化png和jpg格式图像。
- Picture/Srcset:
- 视网膜屏:
- 雪碧图:
- 宽高:
<img>都需要设置高度和宽度(不要指定px 和 %)。 - 图片描述文本:
<img>必须有alt属性来直观的描述图片（在无障碍网页中尤其重要）。
- 懒加载:
- JavaScript 内联:
- 连接:
- 压缩:
.min后缀)。
- JavaScript安全性:
- Non-blocking（非阻塞）:
- Modernizr:
<html>标签中添加class。
- ESLint:
- HTTPS:
- HTTP严格传输安全性(HSTS):
- 跨站点请求伪造攻击(CSRF):
- 跨站脚本攻击(XSS):
- Content Type Options
- X-Frame-Options (XFO)（外部框架连接设定）
- Content Security Policy（内容安全策略）
- 页面大小:
- 文件压缩:
-
懒加载:
-
Cookie大小:
- 第三方组件:
- DNS解析:
dns-prefetch让第三方DNS服务商主动去执行域名解析的功能。
<link rel="dns-prefetch" href="https://example.com">- 预连接:
preconnect在空闲期间提前做好DNS查询, TCP三次握手和TLS 协商。
<link rel="preconnect" href="https://example.com">- 预获取:
prefetch在空闲期间提前请求即将需要的资源(例如：图像的懒加载)。
<link rel="prefetch" href="image.png">- 预加载:
preload提前加载当前页面所需要的资源(例如：js脚本放在<body>的最后)。
<link rel="preload" href="app.js">- Google PageSpeed:
注意: 查看播放列表A11ycasts with Rob Dodson 📹
- 渐进式增强:
- 颜色对比度:
- H1:
- Headings:
- banner角色:
<header>标签中加入role="banner"属性。 - navigation角色:
<nav>标签中加入role="navigation"属性。 - main角色:
<main>标签中加入role="main"属性。
- 使用特定的HTML5输入类型:
- Label:
label与每个输入表单元素相关联，如果label无法显示，请使用aria-label代替。
- Accessibility标准测试:
- Keyboard navigation（键盘导航）:
- Screen-reader（屏幕阅读器）:
- Focus style（专注风格）:
- Google Analytics:
- Headings logic:
- sitemap.xml:
sitemap.xml存在并提交到Google Search Console(以前的Google管理员工具)。 - robots.txt:
robots.txt正确配置，不阻止网页被爬取。
- 🛠 使用Google Robots Testing Tool测试你的
robots.txt。
- Structured Data（结构化数据）:
- 📖 Structured Data简介 | 搜索 | Google Developers
- 🛠 使用Structured Data Testing Tool测试你的页面。
- 🛠 适用于结构化数据的完整结构列表Schema.org Full Heirarchy
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- Sitemap HTML（HTML网站地图）:
The Front-End Checklist is also available in other languages. Thanks for all translators and their awesome work!
- 🇯🇵 Japanese: miya0001/Front-End-Checklist
- 🇪🇸 Spanish: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinese: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Korean: kesuskim/Front-End-Checklist
- 🇧🇷 Portuguese: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamese: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
- 🇫🇷 French: ynizon/Front-End-Checklist
- 🇷🇺 Russian: ungear/Front-End-Checklist
- 🇹🇷 Turkish: erdoganoksuz/Front-End-Checklist
如果想显示出你的项目遵循了前端开发清单的各项规定，请将此徽章放在项目的README文件上！
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)提issue或提交合并请求以建议更改或添加。
前端开发清单 项目有两个分支:
该分支包含README.md,内容会自动反映到前端开发清单。
网站上。
这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。
如果您有任何问题或建议，可以通过Gitter或Twitter联系我们：
感谢以下人员对本项目的贡献 [Contribute]。
Thank you to all our backers! 🙏 [Become a backer]
通过成为赞助商来支持这个项目。您的徽标将显示在这里，并链接到您的网站。 [成为赞助商]
