目录
如何使用？
前端自检表 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分：
强烈推荐 该项，并且在某些特定情况下最终可以省略。如果省略某些元素，可能会对性能或SEO产生不良影响。
不能被省略 ，不管你有什么理由。如果忽略了这项，页面中可能会造成功能障碍，或存在可访问性或SEO问题。测试优先级需要首先关注在这些元素上。
有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型：
你可以通过阅读 README_APP 文件 为 前端自检表应用 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。
Head
注意： 你可以找到一份可能在HTML document的<head>里包含了所有东西的列表 。
Meta tag
Copy <!doctype html> <!-- HTML5 --> 接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。
Copy <!-- Set character encoding for the document -->
<meta charset="utf-8">
Copy <!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Copy <!-- Document Title -->
<title>Page Title less than 55 characters</title>
Copy <!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
Copy <!-- 标准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">
Copy <!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Copy <!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" /> browserconfig.xml文件所需的最低xml标记如下：
Copy <?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>
Copy <!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html"> HTML tags
Copy <link rel="alternate" href="https://es.example.com/" hreflang="es"> Social meta
可视化并自动生成带有元标记 的social 元标记。
Facebook OG Twitter Cards
注意： 使用og:image:width和og:image:height将为爬虫指定图像的尺寸，这样爬虫就可以立即呈现图像，而不必异步下载和处理图像。
Copy <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">
Copy <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
最佳实践
HTML testing
⬆ 返回顶部
Webfonts
注意： 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。
⬆ 返回顶部
CSS
注意： 看看大多数前端开发人员所遵循的CSS指南 和Sass指南 。如果你对CSS属性有疑问，可以访问CSS Reference 。为了保持一致性，还有一个简短的代码指南 。
Copy <div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider"> Performance
CSS testing
Pixel Perfect - Chrome Extension
⬆ 返回顶部
Images
注意： 要全面了解图片优化，请查看Addy Osmani的免费电子书Essential Image Optimization 。
Best practices
🛠 Use Kraken.io awesome alternative for both png and jpg optimization. Up to 1mb per files on free plan.
🛠 TinyPNG losslessly optimise png, apng (animated png) and jpg images. Free and paid version available.
🛠 ZorroSVG jpg-like compression for transparent images using svg masking.
🛠 SVGO a Nodejs-based tool for optimizing SVG vector graphics files.
🛠 SVGOMG a web-based GUI version of SVGO for optimising your svgs online.
⬆ 返回顶部
JavaScript
最佳实践
Copy <noscript>
You need to enable JavaScript to run this app.
</noscript> JavaScript testing
⬆ 返回顶部
Security
最佳实践
X-Content-Type-Options - Scott Helme
⬆ 返回顶部
Performance
最佳实践
Preparing upcoming requests
Copy <link rel="dns-prefetch" href="https://example.com">
Copy <link rel="preconnect" href="https://example.com">
Copy <link rel="prefetch" href="image.png">
Copy <link rel="preload" href="app.js"> Performance testing
⬆ 返回顶部
Accessibility
注意: 你可以观看注意事项视频列表A11ycasts with Rob Dodson 📹
最佳实践
Headings
Semantics
Form
Accessibility testing
⬆ 返回顶部
SEO
Copy <!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3"> ⬆ 返回顶部
原文：选自github
Doctype:
Charset:
Viewport:
Title:
Description:
Favicons: favicon.ico，请将其放在你网站的根目录下。通常，你不需要使用任何标记。但是，使用下面示例的link，它仍然是一个很好的实践。现如今，PNG格式已优于 ico格式(尺寸:32x32px)。
Apple Web App Meta:
Windows Tiles:
Canonical: rel="canonical"避免重复内容
Language attribute: lang属性被指定，并与当前页面的语言相关。
Direction attribute:
Alternate language:
Conditional comments:
RSS feed:
CSS Critical: <style></style>之间的一行中(缩小)。
CSS order: <head>中，所有CSS文件都要在JavaScript文件之前加载(除了有时JS文件在页面顶部异步加载)。
Facebook Open Graph:
HTML5 Semantic Elements:
Error pages:
Noopener: target="_blank"的外部链接，那么你的链接应该具有rel="noopener"属性，以防止标签被阻止。如果你需要支持旧版本的火狐，使用rel="noopener noreferrer"。
Clean up comments:
W3C compliant:
HTML Lint:
Link checker:
Adblockers test:
Webfont format:
Webfont size:
Webfont loader:
Responsive Web Design:
CSS Print:
Unique ID:
Reset CSS: (如果您使用的是Bootstrap或Foundation之类的CSS框架，那么它已经包含了一个规范化。)
JS prefix:
embedded or inline CSS: <style>标签中嵌入CSS或使用内联CSS：仅用于有效原因(例如，用于滑块的background-image，关键的CSS)。
Vendor prefixes:
Concatenation: 不适用于HTTP/2 )。
Minification:
Non-blocking:
Stylelint:
Responsive web design:
CSS Validator:
Desktop Browsers:
Mobile Browsers:
OS:
Design fidelity:
Reading direction:
Optimization:
Picture/Srcset:
Retina:
Sprite:
Width and Height: <img>上设置width 和height 属性(对于CSS大小调整可以省略)。
Alternative text: <img>。
Lazy loading:
JavaScript Inline:
Concatenation:
Minification: .min后缀)。
noscript tag: <noscript>标签。这将有助于客户端渲染重型应用程序，如React.js，请参阅示例。
Non-blocking: async异步加载，或者使用defer属性延迟加载。
Optimized and updated JS libraries:
Modernizr: <html>标签中添加class。
ESLint:
HTTPS:
HTTP Strict Transport Security (HSTS):
Cross Site Request Forgery (CSRF):
Cross Site Scripting (XSS):
Content Type Options:
X-Frame-Options (XFO):
Content Security Policy:
Goals to achieve:
Lazy loading:
Cookie size:
Third party components:
DNS resolution:
Preconnection:
Prefetching: prefetch在空闲时间期间预先请求将很快需要的资源（例如，延迟加载的图像）。
Preloading: preload提前在当前页面中所需的资源（例如，放置在末尾的脚本）。
Google PageSpeed:
Progressive enhancement:
Color contrast:
Headings:
Specific HTML5 input types are used:
Label: aria-label。
Accessibility standards testing:
Keyboard navigation:
Screen-reader:
Focus style:
Google Analytics:
Headings logic:
sitemap.xml:
robots.txt:
Structured Data:
Sitemap HTML:
Pagination link tags: rel="prev"和rel="next"来指示分页内容。
