前端开发清单

前端开发清单是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。

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

目录

1. Head
2. HTML
3. Webfonts
4. CSS
5. Images
6. JavaScript
7. Security
8. Performance
9. Accessibility
10. SEO

一些声明

前端开发清单中的所列出的点是大部分前端项目所必需的关注的, 但某些元素可以省略或者并不是这么重要 (在管理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的图像来支持视网膜屏显示。
• 雪碧图: 小图片放到一个雪碧图中。
• 宽高: 请在上设置宽度和高度属性，如果最终的渲染图像大小已知（可以忽略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联系我们：

• Chat on Gitter
• Facebook
• Twitter

作者

David Dias

贡献者

感谢以下人员对本项目的贡献 [Contribute]。

支持者

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

赞助商

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

开源协议

⬆ 回到顶部