前端清单
前端清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。
它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。
在Product Hunt上投票或推荐来帮助前端清单的推广?。
目录
How to use?
前端清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:
-
意味着该项目被推荐，但在某些特定情况下可以省略。
-
意味着该项目是强烈推荐的，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。
-
意味着项目不能被任何理由省略。你的页面可能会导致功能障碍或有可访问性或SEO问题。测试优先级需要首先考虑这些元素。
某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。
- ?: 文档或文章
- ?: 在线工具/测试工具
- ?: 媒体或视频内容
Head
注意: 你能在HTML文档的
<head>中找到所有的清单列表。
Meta 标签
- [ ] 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">? 指定旧文档模式(Internet Explorer).aspx)
- [ ] 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>? 浏览器配置模式参考.aspx)
- [ ] Canonical:
rel="canonical"以避免重复的内容。
<!-- 帮助防止重复内容出现 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">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 顺序:
Social meta
强烈推荐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">HTML
最佳实践
- [ ] HTML5 Semantic Elements:
? HTML 参考
- [ ] Error pages:
- [ ] Noopener:
target="_blank", 你的链接必须有个rel="noopener"属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用rel="noopener noreferrer"。
- [ ] 清除注释:
HTML 测试
- [ ] W3C 兼容:
- [ ] HTML Lint:
- [ ] Desktop Browsers:
- [ ] Mobile Browsers:
- [ ] 链接检查器:
- [ ] 广告拦截器测试:
- [ ] Pixel perfect:
Webfonts
- [ ] Webfont格式:
- [ ] Webfont 大小:
CSS
- [ ] 响应式网站设计:
- [ ] 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验证器:
? CSS验证器
- [ ] Reading direction:
Images
注意: 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书图像优化基础。
最佳实践
- [ ] 优化:
- ? Imagemin
- ? 使用ImageOptim免费优化您的图像。
- [ ] 视网膜屏:
- [ ] 雪碧图:
- [ ] 宽高:
<img>都需要设置高度和宽度(不要指定px 和 %)。
注意: 许多开发人员认为设置了宽度和高度就不能实现响应式设计，实际上并不是这样的。
- [ ] Alternative text:
<img>必须有alt属性来直观的描述图片。 - [ ] 懒加载:
JavaScript
最佳实践
- [ ] JavaScript 内联:
- [ ] 连接:
- [ ] 压缩:
.min后缀)。
- [ ] JavaScript安全性:
- [ ] 非阻塞:
- [ ] Modernizr:
<html>标签中添加class。
JavaScript 测试
- [ ] ESLint:
Security
扫描并检查你的网站
最佳实践
- [ ] HTTPS:
- [ ] HTTP严格传输安全性(HSTS):
- [ ] 跨站点请求伪造攻击(CSRF):
? 跨站点请求伪造（CSRF）防范清单 - OWASP_Prevention_Cheat_Sheet)
- [ ] 跨站脚本攻击(XSS):
- ? XSS (跨站脚本攻击) 防范清单 - OWASP_Prevention_Cheat_Sheet)
- ? 基于DOM的XSS防范清单 - OWASP
- [ ] Content Type Options
- [ ] X-Frame-Options (XFO)
Performance
最佳实践
- [ ] 页面大小:
- [ ] 文件压缩:
- [ ] 懒加载:
- [ ] 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:
Accessibility
注意: 查看播放列表A11ycasts with Rob Dodson ?
最佳实践
- [ ] 渐进式增强:
- [ ] 颜色对比度:
标题
- [ ] H1:
- [ ] Headings:
? Why headings and landmarks are so important -- A11ycasts #18
Landmarks
- [ ] banner角色:
<header>标签中加入role="banner"属性。 - [ ] navigation角色:
<nav>标签中加入role="navigation"属性。 - [ ] main角色:
<main>标签中加入role="main"属性。
语义化
- [ ] 使用特定的HTML5输入类型:
表单
- [ ] Label:
label与每个输入表单元素相关联，如果label无法显示，请使用aria-label代替。
Accessibility 测试
- [ ] Accessibility标准测试:
- [ ] Keyboard navigation:
- [ ] Screen-reader:
- [ ] Focus style:
SEO
- [ ] Google Analytics:
- [ ] Headings logic:
- [ ] sitemap.xml:
sitemap.xml存在并提交到Google Search Console(以前的Google管理员工具)。 - [ ] robots.txt:
robots.txt正确配置，不阻止网页被爬取。
- ? 使用Google Robots Testing Tool测试你的
robots.txt。
- [ ] 结构化数据:
- [ ] Sitemap HTML:
Translation
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
前端清单徽章
如果想显示出你的项目遵循了前端清单的各项规定，请将此徽章放在项目的README文件上！
➔
[](https://github.com/thedaviddias/Front-End-Checklist/)Contributing
提issue或提交合并请求以建议更改或添加。
Guide
前端清单 项目有两个分支:
1. master
该分支包含README.md,内容会自动反映到前端清单。
网站上。
2. develop
这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。
贡献
查看所有贡献人员 contributors.
Support
如果您有任何问题或建议，可以通过Gitter或Twitter联系我们：
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。