前端清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。
它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。
前端清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:
意味着该项目被推荐，但在某些特定情况下可以省略。
意味着该项目是强烈推荐的，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。
意味着项目不能被任何理由省略。你的页面可能会导致功能障碍或有可访问性或SEO问题。测试优先级需要首先考虑这些元素。
某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。
- 📖: 文档或文章
- 🛠: 在线工具/测试工具
- 📹: 媒体或视频内容
注意: 你能在HTML文档的
<head>中找到所有的清单列表。
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在head中声明
- Charset:
<!-- 设置文档的字符编码 -->
<meta charset="utf-8">- X-UA-Compatible:
X-UA-Compatible元标签。
<!-- 指示Internet Explorer使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
viewport标签。
<!-- 响应式网页设计viewpoint声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
title(SEO:包括网站标题不超过65个字符)。
<!-- 文档标题 -->
<title>Page Title less than 65 characters</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">- 条件注释:
- RSS feed:
- CSS Critical:
CSS critical收集并呈现当前页面可见部分的所有CSS。在主要的CSS调用之前以单行(最小化)在<style></style>中嵌入。
- CSS 顺序:
强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体标签。
- Facebook Open Graph:
<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">
- 📖 A Guide to Sharing for Webmasters
- 🛠 使用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:
📖 HTML 参考
-
Error pages:
-
Noopener:
target="_blank", 你的链接必须有个rel="noopener"属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用rel="noopener noreferrer"。
- 清除注释:
- W3C 兼容:
- HTML Lint:
-
Desktop Browsers:
-
Mobile Browsers:
-
链接检查器:
- 广告拦截器测试:
- Pixel perfect:
- Webfont格式:
- Webfont 大小:
- 响应式网站设计:
- 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验证器
- Reading direction:
注意: 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书**图像优化基础**。
- 优化:
- 🛠 Imagemin
- 🛠 使用ImageOptim免费优化您的图像。
- 视网膜屏:
- 雪碧图:
- 宽高:
<img>都需要设置高度和宽度(不要指定px 和 %)。
注意: 许多开发人员认为设置了宽度和高度就不能实现响应式设计，实际上并不是这样的。
- Alternative text:
<img>必须有alt属性来直观的描述图片。 - 懒加载:
- JavaScript 内联:
- 连接:
- 压缩:
.min后缀)。
- JavaScript安全性:
- 非阻塞:
- Modernizr:
<html>标签中添加class。
- ESLint:
- HTTPS:
- HTTP严格传输安全性(HSTS):
- 跨站点请求伪造攻击(CSRF):
- 跨站脚本攻击(XSS):
- Content Type Options
- X-Frame-Options (XFO)
- 页面大小:
- 文件压缩:
-
懒加载:
-
Cookie大小: 如果使用Cookie，确保每个Cookie不超过4096个字节，并且域名下不超过20个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:
📹 Why headings and landmarks are so important -- A11ycasts #18
- 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。
- 结构化数据:
- Sitemap 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
If you want to show you are following the rules of the Front-End Checklist, put this badge on your README file!
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)提issue或提交合并请求以建议更改或添加。
前端清单 项目有两个分支:
该分支包含README.md,内容会自动反映到前端清单。
网站上。
这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。
查看所有贡献人员 contributors.
If you have any question or suggestion, don't hesitate to use Gitter or Twitter:
Chinese: Johnsen
