前端自检清单
目录
如何使用？
前端自检表 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分：
意味着 推荐 该项，但在某些特定情况下可以省略。
意味着 强烈推荐 该项，并且在某些特定情况下最终可以省略。如果省略某些元素，可能会对性能或SEO产生不良影响。
意味着该项 不能被省略 ，不管你有什么理由。如果忽略了这项，页面中可能会造成功能障碍，或存在可访问性或SEO问题。测试优先级需要首先关注在这些元素上。
有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型：
📖: 文档或文章
🛠: 在线工具或测试工具
📹: 媒体或视频内容
你可以通过阅读 README_APP 文件 为 前端自检表应用 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。
Head
注意： 你可以找到一份可能在HTML document的
<head>里包含了所有东西的列表。
Meta tag
<!doctype html> <!-- HTML5 -->
接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。
<!-- Set character encoding for the document -->
<meta charset="utf-8"><!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><!-- Document Title -->
<title>Page Title less than 55 characters</title><!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters"><!-- 标准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 (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"><!-- 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>
📖 [Browser configuration schema reference](https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx)
<!-- Helps prevent duplicate content issues -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-read.html">HTML tags
<html lang="en"><html dir="rtl"><link rel="alternate" href="https://es.example.com/" hreflang="es">
📖 [About conditional comments (Internet Explorer) - MSDN - Microsoft](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx)
🛠 Critical by Addy Osmani on GitHub automates this.
Social meta
可视化并自动生成带有元标记的social 元标记。
Facebook OG 和 Twitter Cards 是的，对于任何网站，强烈推荐。如果你的目标用户是某个特定的用户，并且想要确保显示效果，可以考虑其他社交(social )媒体标签。
注意： 使用
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">
🛠 Test your page with the Facebook OG testing
<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">🛠 Test your page with the Twitter card validator
HTML
最佳实践
HTML testing
🛠 webhint
Webfonts
注意： 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。
CSS
注意： 看看大多数前端开发人员所遵循的CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS Reference。为了保持一致性，还有一个简短的代码指南。
📖 Reboot
<div id="js-slider" class="my-slider"> <!-- Or --> <div id="id-used-by-cms" class="js-slider my-slider">
Performance
🛠 PurgeCSS
CSS testing
Images
注意： 要全面了解图片优化，请查看Addy Osmani的免费电子书Essential Image Optimization。
Best practices
🛠 Imagemin
🛠 使用ImageOptim to optimise your images for free.
🛠 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
最佳实践
<noscript> You need to enable JavaScript to run this app. </noscript>
JavaScript testing
Security
最佳实践
📖 [Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet)
📖 [XSS (Cross Site Scripting) Prevention Cheat Sheet - OWASP](https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet)
Performance
最佳实践
📖 Cookies
Preparing upcoming requests
<link rel="dns-prefetch" href="https://example.com"><link rel="preconnect" href="https://example.com"><link rel="prefetch" href="image.png"><link rel="preload" href="app.js">Performance testing
Accessibility
注意: 你可以观看注意事项视频列表A11ycasts with Rob Dodson 📹
最佳实践
Headings
Semantics
Form
Accessibility testing
SEO
🛠 Test your robots.txt with Google Robots Testing Tool
📖 JSON-LD
🛠 Test your page with the Structured Data Testing Tool
🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy
<!-- 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
Last updated