Awesome

<h2 align="center"><a href="http://lab.johnsenzhou.com/Front-End-Checklist/">前端开发清单</a></h2> <p align="center"> <em><strong>前端开发清单</strong>是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。</em> </p>

它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。

一些声明

前端开发清单中的所列出的点是大部分前端项目所必需的关注的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:

推荐，但在某些特定情况下可以省略。
强烈推荐，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。
不能被任何理由忽略。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。

某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。

📖: 文档或文章
🛠: 在线工具/测试工具
📹: 媒体或视频内容

Head

注意: 你能在HEAD列表中找到HTML文档<head>标签内所有可配置的属性。

Meta 标签

Doctype（文档类型）: 以下Doctype标签声明文档为HTML5类型，需要写在HTML文件的顶部。

<!-- 声明文档为 HTML5 类型 -->
<!doctype html>

📖 设置文档字符编码格式 - HTML5 W3C

下列两个 meta 标签需要首先声明在head中：Charset 和 Viewport。*
Charset（字符）: 正确声明Charset meta (UTF-8)。

<!-- 设置文档的字符编码 -->
<meta charset="utf-8">

Viewport（视口）: 正确声明viewport meta。

<!-- 响应式网页设计viewpoint声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Title（标题）: 所有页面都必须使用title标签(SEO:Google会计算标题中使用的字符的像素宽度，范围在472和482像素之间，所以平均字符数限制大约在55个字符左右)。

<!-- 文档标题 -->
<title>网站标题不超过55个字符</title>

📖 Title 标签 - HTML - MDN

🛠 SERP 代码段生成器

Description（描述）: 提供description标签，它是唯一的，且内容不能超过150个字符。

<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

📖Meta Description 属性 - HTML - MDN

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">

🛠 Favicon 生成器

🛠 RealFaviconGenerator

📖 Favicon Cheat Sheet

📖 Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧

📖 PNG favicons - caniuse

Apple Web App Meta: 苹果设备目前使用的 Meta 标签

<!-- (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- 设置Web应用程序是否以全屏模式运行。 -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- 设置状态栏样式（有关其可用值，请参见下面的“苹果设备支持的Meta标记列表”） -->
<!-- 除非您具有先前的Meta标签，否则本Meta标签无效 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

📖 在苹果设备中配置Web应用程序

📖 苹果设备支持的Meta标记列表

Windows Tiles: Windows 操作系统磁贴

<!-- 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">

📖 使用规范的URLs - Search Console Help - Google Support

📖 rel = canonical的5个常见错误 - Google Webmaster Blog

HTML 标签

Language tag（语言标签）: 指定你网站的语言标签并与当前页面语言相关联。

<html lang="zh_cn">

Direction tag（方向标签）: direction属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)

<html dir="rtl">

📖 dir 属性 - HTML - MDN

Alternate language（备用语言）: 指定网站的语言标签并与当前页面的语言相关联。

<link rel="alternate" href="https://es.example.com/" hreflang="es">

x-default: 表明此类网页未定位到特定的语言或区域设置。

<link rel="alternate" href="https://example.com/" hreflang="x-default" />

📖 x-default - Google

Conditional comments（条件注释）: 如有需要，可针对IE添加条件注释。

📖 关于条件注释(Internet Explorer) - MSDN - Microsoft

RSS feed（RSS 订阅）: 如果你的项目是一个博客或者有大量的文章，可以添加一个RSS链接。
CSS Critical（最小 CSS 合集）: CSS critical收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在<style></style>中嵌入。

🛠 由Addy Osmani于GitHub撰写的Critical

CSS order（加载顺序）: 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。

Social meta 标签

强烈推荐Facebook OG and Twitter Cards。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体的meta。

Facebook Open Graph: 所有Facebook Open Graph（OG）都经过测试并且没有任何错误。图片至少需要600 x 315像素，建议使用1200 x 630像素。

注意: 使用 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

Twitter 卡片:

<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">

📖 推特卡片使用入门 — Twitter Developers

🛠 使用Twitter card validator测试你的页面。

⬆ 返回顶部

HTML

最佳实践

HTML5 Semantic Elements（HTML5语义化元素）: 正确地使用HTML5语义化标签(header, section, footer, main...).

📖 HTML 参考

Error pages（错误页面）: 404页面和5xx错误页面的存在。记得在5xx错误页面中集成CSS样式文件(在当前服务器上无外部调用)。
Noopener: 如果你使用外部链接target="_blank", 你的链接必须有个rel="noopener"属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用rel="noopener noreferrer"。

📖 关于 rel=noopener

Clean up comments（清除注释）: 在将页面发布到生产环境之前，应该删除不必要的代码。

HTML 测试

W3C compliant（兼容）: 所有页面需要使用W3C验证器进行测试，以检测HTML代码中的可能存在的问题。

🛠 W3C validator

HTML Lint: 使用工具来帮助我们分析HTML代码中可能存在的问题。

🛠 肮脏的标记列表

🛠 webhint

Desktop Browsers: 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
Mobile Browsers: 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).
Link checker（链接检查器）: 页面中链接没有失效，请确认你没有404错误。

🛠 W3C Link Checker

Adblockers test（广告拦截器测试）: 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息，引导人们停用其广告拦截器)。

Pixel Perfect - Chrome 扩展

⬆ 返回顶部

Webfonts

注意: 使用webfonts可能会导致文档样式闪烁以及文本不可见，所以在使用时需要考虑使用后备字体，或者使用webfont加载器来控制字体加载行为。

📖 Google Technical considerations about webfonts

Webfont format（字体格式）: 现代浏览器都支持WOFF、WOFF2、TTF格式

📖 WOFF - Web开放字体格式 - Caniuse.

📖 WOFF 2.0 - Web开放字体格式 - Caniuse.

📖 TTF/OTF - TrueType和OpenType字体支持

📖 Using @font-face - CSS-Tricks

Webfont size（字体大小）: Webfont大小不超过 2 MB (包括所有版本在内)。
Webfont loader（字体加载器）: 使用Webfont加载器控制加载行为。

🛠 Typekit Web字体加载器

⬆ 返回顶部

CSS

注意: 大部分前端开发人员都会看看CSS指南和Sass指南。如果你对CSS属性有疑问，可以访问CSS参考文档。

响应式网站设计: 网站使用响应式设计。
CSS打印属性: 提供打印样式表，并确保使用正确。
预处理器: 你的网站使用css预处理器(推荐Sass).
唯一ID: 如果使用了ID，确保ID的唯一性。
Reset CSS: 使用CSS reset(如reset.css, normalize.css, reboot) (如果你使用的是CSS框架，例如Bootstrap或Foundation，则reset.css已被包含在其中)

📖 Reset.css

📖 Normalize.css

📖 Reboot

JS 前缀: 所有以**js-**开头的class(或者JavaScript文件中使用的id)不写入css文件。

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

CSS embed or line: 避免使用CSS嵌入或内联，仅用于必要的情况(例如: background-image for slider, CSS critical).
浏览器内核前缀: 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。

🛠 Autoprefixer CSS online

性能

Concatenation（合并）: 将CSS文件合并到一个文件中。 (不适用HTTP/2)
Minification（压缩）: 压缩所有CSS文件。
Non-blocking（非阻塞）: CSS文件需要非阻塞加载，以防在DOM加载时花费大量时间。

📖 loadCSS by filament group

📖 使用loadCSS预加载CSS的示例

未使用的CSS: 删除未使用的CSS。

🛠 UnCSS Online

🛠 PurifyCSS

🛠 PurgeCSS

🛠 Chrome DevTools Coverage

CSS 测试

格式检查: 所有的CSS或SCSS文件没有任何格式错误。

🛠 stylelint, a CSS linter

📖 Sass指南

响应式网页设计: 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况，可以设置更多)。
CSS验证器: CSS都需经过测试，同时所有错误都被修复。

🛠 CSS验证器

桌面浏览器: 所有页面都在桌面浏览器进行了测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
移动端浏览器: 所有页面都在移动端浏览器进行了测试(Native browser, Chrome, Safari...)。
操作系统: 所有页面都在当前操作系统上进行了测试(Windows, Android, iOS, Mac...)。
Design fidelity 设计图保真度）: 页面需要像素级实现。根据设计稿的质量，你可能不会100％与设计稿相同，但你的网页需要尽可能的靠近设计稿的要求。

Pixel Perfect - Chrome Extension

Reading direction（浏览文本方向）: 如果需要的话，所有页面都需要对LTR和RTL语言进行测试。

📖 构建RTL-Aware Web Apps & Websites: Part 1 | Mozilla Hacks

📖 构建RTL-Aware Web Apps & Websites: Part 2 | Mozilla Hacks

⬆ 返回顶部

Images

注意: 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书**图像优化基础**。

最佳实践

优化: 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面（如首页）。

🛠 Imagemin

🛠 使用ImageOptim免费优化您的图像。

🛠 使用KeyCDN Image Processing for image optimization in real time.

🛠 使用Kraken.io png和jpg优化的绝佳替代品。免费计划每个文件最大1mb。

🛠 TinyPNG 无损优化png，apng（动画png）和jpg图像。提供免费和付费版本。

🛠 ZorroSVG 使用svg遮罩的类似jpg的压缩形式的透明图像。

🛠 SVGO 基于Nodejs的工具，用于优化SVG矢量图形文件。

🛠 SVGOMG 基于SVGO的基于Web的GUI版本，可在线优化您的svg。

Picture/Srcset: 使用Picture/Srcset为用户当前的视口提供最合适的图像。

📖 如何使用srcset构建响应式图像。

视网膜屏: 提供x2 或 3x的图像来支持视网膜屏显示。
雪碧图: 小图片放到一个雪碧图中。
宽高: 请在<img>上设置宽度和高度属性，如果最终的渲染图像大小已知（可以忽略CSS大小）。
图片描述文本: 所有 <img> 必须有alt属性来直观的描述图片（在无障碍网页中尤其重要）。

📖 Alt-文本: 终极指南

懒加载: 图片使用懒加载 (记得适中提供 noscript 标签).

⬆ 返回顶部

JavaScript

最佳实践

JavaScript 内联: 确保没有任何js代码内联(与HTML代码混合)。
合并: 合并js文件。
压缩: 压缩所有js文件(可以添加 .min 后缀)。

压缩资源 (HTML, CSS, and JavaScript)

JavaScript安全性:

用JavaScript开发安全应用程序指南

noscript 标签: 在 HTML 的 body 标签里使用 <noscript> 标签以在客户端不支持JavaScript时提供其他展示, 一个使用示例.

<noscript>
  您需要启用JavaScript才能运行此应用。
</noscript>

Non-blocking（非阻塞）: JavaScript文件使用async或延迟使用defer属性异步加载。

📖 删除阻止渲染的JavaScript代码

优化和更新JS依赖库: 项目中使用的所有JavaScript库需要更新至最新版本（对于简单的功能，建议使用Vanilla Javascript）。

📖 你或许并不需要jQuery

📖 使用原生JavaScript来构建功能强大的Web应用程序

Modernizr（现代化）: 如果您需要指定某些特定功能，则可以使用自定义Modernizr在<html>标签中添加class。

🛠 自定义你的 Modernizr

JavaScript 测试

ESLint: 用ESLint检测并没有错误(基于你的配置规则)。

📖 ESLint - 适用于JavaScript和JSX的可插入linting实用程序

⬆ 返回顶部

Security

扫描并检查你的网站

securityheaders.io

Mozilla 的 Observatory 项目

最佳实践

HTTPS: 每个页面和所有外部内容(插件、图像...)都使用HTTPS。

🛠 Let's Encrypt - 免费 SSL/TLS 证书

🛠 免费 SSL 服务测试

📖 Can I Use 上严格的传输安全列表

HTTP严格传输安全性(HSTS): HTTP头设置 'Strict-Transport-Security'.

🛠 检查HSTS预加载状态和资格

📖 HTTP严格传输安全速查表 - OWASP

📖 传输层保护速查表 - OWASP

跨站点请求伪造攻击(CSRF): 确保向服务器端发出的请求是合法的，并来自您的网站/应用程序，以防止发生CSRF攻击。

📖 跨站点请求伪造（CSRF）防范清单 - OWASP

跨站脚本攻击(XSS): 确保页面或网站没有XSS攻击的可能性。

📖 XSS (跨站脚本攻击) 防范清单 - OWASP

📖 基于DOM的XSS防范清单 - OWASP

Content Type Options（内容类型选项） 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。

📖 X-Content-Type-Options - Scott Helme

X-Frame-Options (XFO)（外部框架连接设定） 保护网站的访问者免受劫持攻击。

📖 X-Frame-Options - Scott Helme

📖 RFC7034 - HTTP Header Field X-Frame-Options

Content Security Policy（内容安全策略） 定义内容如何加载到您的网站上的方式以及允许加载的位置。也可以用来防止劫持攻击。

📖 内容安全策略 - 介绍 - Scott Helme

📖 CSP 速查表 - Scott Helme

📖 CSP 速查表 - OWASP

📖 内容安全政策参考

⬆ 返回顶部

Performance

最佳实践

需要达到的目标: 你的网页需要达到如下目标：
- 在第一秒内展示出一个有意义的绘画
- 在“平均”配置下互动时间不到5秒（在速度为400ms的RTT和400kbps传输速度的慢速3G网络上，售价200美元的Android）在2秒内可以重复访问
- 压缩后的关键文件大小低于170Kb

🛠 网站页面分析器

🛠 WebPageTest

📖 Size Limit: 使网页更轻

文件压缩: 压缩你的HTML文件。

懒加载: 图片、js脚本和CSS需要懒加载，以提高当前页面的响应时间（请参见各自部分的详细信息）。
Cookie大小: 如果使用Cookie，确保每个Cookie不超过4096个字节，并且域名下不超过20个Cookie。

📖 Cookie规范: RFC 6265

📖 Cookies

🛠 浏览器Cookie限制

第三方组件: 在可能的情况下，用静态组件替代依赖于外部JS的第三方iframe或组件（如共享按钮），从而限制对外部API的调用，并将用户活动保持为私有。

🛠 简单的共享按钮生成器

为将到来的请求做准备

📖 以下几种技术的详细说明

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: 所有的网页都经过测试（不仅仅是首页），而且得分至少为90/100。

🛠 Google PageSpeed

🛠 用Google测试移动端速度

🛠 WebPagetest - 网站性能和优化测试

🛠 GTmetrix - 网站速度和性能优化

🛠 Speedrank - 改善您网站的性能

⬆ 返回顶部

Accessibility

注意: 查看注意事项视频列表A11ycasts with Rob Dodson 📹

最佳实践

渐进式增强: 主要功能如主导航和搜索等功能应该在没有启用JavaScript的情况下能够正常运行。

📖 在Chrome开发者具中启用/禁用JavaScript

颜色对比度: 颜色对比度至少通过WCAG AA标准验证(移动端需要通过AAA)。

🛠 Contrast ratio

标题

H1: 所有页面都有H1，它不是网站的标题。
Headings: 标题应以正确的顺序合理使用(H1至H6)。

📹 Why headings and landmarks are so important -- A11ycasts #18

语义化

使用特定的HTML5输入类型: 这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。

📖 Mobile Input Types

表单

Label: label与每个输入表单元素相关联，如果label无法显示，请使用aria-label代替。

📖 使用aria-label属性 - MDN

Accessibility 测试

Accessibility标准测试: 使用WAVE工具测试你的页面是否符合accessibility标准。

🛠 Wave testing

Keyboard navigation（键盘导航）: 在你的键盘上以可能出现的操作顺序去测试，确保所有交互式元素都可访问和可用。
Screen-reader（屏幕阅读器）: 所有页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。
Focus style（专注风格）: 如果焦点被禁用，它将被CSS中的可见状态所替代。

📹 Managing Focus - A11ycasts #22

⬆ 返回顶部

SEO

Google Analytics: Google Analytics 正确安装和配置。

🛠 Google Analytics

🛠 GA Checker (and others)

Baidu Analytics: Baidu Analytics 正确安装和配置（国内网站）。
Headings logic: 标题文字有助于表达当前页面的主要内容。

🛠 Tota11y, tab Headings

sitemap.xml: 创建sitemap.xml文件并提交到Google Search Console(以前的Google管理员工具)。

🛠 Sitemap generator

robots.txt: robots.txt正确配置，不要阻止网页被爬取。

📖 The robots.txt file

🛠 使用Google Robots Testing Tool测试你的robots.txt。

Structured Data（结构化数据）: 使用Structured Data的页面通过测试并且没有错误。Structured Data会帮助爬虫理解当前页面的内容。

📖 Structured Data 简介 | 搜索 | Google Developers

📖 RDFa - Linked Data in HTML

📖 JSON-LD

📖 Microdata

🛠 使用Structured Data Testing Tool测试你的页面。

🛠 适用于结构化数据的完整结构列表Schema.org Full Heirarchy

Sitemap HTML（HTML网站地图）: 提供HTML网站地图，可通过网站页脚中的链接进行访问。

📖 Sitemap 指南 | Google 支持

🛠 Sitemap 生成器

Pagination link tags: Provide rel="prev" and rel="next" to indicate paginated content.

🛠 分页（rel =“ prev / next”）测试工具

📖 分页准则 - Google Support

<!-- 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">

⬆ 返回顶部

多语种清单

这份“前端开发清单”同样被翻译为如下语言版本，感谢所有翻译者的热情贡献！

🇯🇵 日语: miya0001/Front-End-Checklist
🇪🇸 西班牙语: eoasakura/Front-End-Checklist-ES
🇨🇳 简体中文: JohnsenZhou/Front-End-Checklist
🇰🇷 韩语: kesuskim/Front-End-Checklist
🇧🇷 葡萄牙语: jcezarms/Front-End-Checklist
🇻🇳 越南语: euclid1990/Front-End-Checklist
🇹🇼 繁体中文: EngineLin/Front-End-Checklist
🇫🇷 法语: ynizon/Front-End-Checklist
🇷🇺 俄语: ungear/Front-End-Checklist
🇹🇷 土耳其语: erdoganoksuz/Front-End-Checklist
🇩🇪 德语: xfuture603/Front-End-Checklist

前端开发清单徽章

如果想标示出你的项目遵循了这份“前端开发清单”的各项规定，欢迎将如下徽章放在你的项目的README文件上！

➔

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ 返回顶部

贡献

提issue或提交合并请求以建议更改或添加。

指南

前端开发清单 项目有两个分支:

1. `master`

该分支包含README.md,内容会自动映射到前端开发清单。网站上。

2. `develop`

这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。

社区支持

如果您有任何问题或建议，可以通过Gitter或Twitter联系我们：

作者

David Dias

贡献者

感谢以下人员对本项目的贡献 [Contribute]。 <a href="graphs/contributors"><img src="https://opencollective.com/front-end-checklist/contributors.svg?width=890" /></a>

支持者

感谢所有赞助我们的朋友! 🙏 [成为支持者]

赞助商

通过成为赞助商来支持这个项目。您的徽标将显示在这里，并链接到您的网站。 [成为赞助商]

开源协议

⬆ 回到顶部

Awesome

目录

一些声明

Head

Meta 标签

HTML 标签

Social meta 标签

HTML

最佳实践

HTML 测试

Webfonts

CSS

性能

CSS 测试

Images

最佳实践

JavaScript

最佳实践

JavaScript 测试

Security

扫描并检查你的网站

最佳实践

Performance

最佳实践

为将到来的请求做准备

性能测试

Accessibility

最佳实践

标题

语义化

表单

Accessibility 测试

SEO

多语种清单

前端开发清单徽章

贡献

指南

1. master

2. develop

社区支持

作者

贡献者

支持者

赞助商

开源协议

1. `master`

2. `develop`