{"id":13816125,"url":"https://github.com/JohnsenZhou/Front-End-Checklist","last_synced_at":"2025-05-15T14:33:18.238Z","repository":{"id":39636401,"uuid":"107957304","full_name":"JohnsenZhou/Front-End-Checklist","owner":"JohnsenZhou","description":"🗂 一份完美的前端开发清单——专为现代网站和追求极致的开发者打造","archived":false,"fork":true,"pushed_at":"2020-07-11T13:43:40.000Z","size":359,"stargazers_count":1164,"open_issues_count":0,"forks_count":137,"subscribers_count":49,"default_branch":"master","last_synced_at":"2024-11-19T13:37:10.703Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://lab.johnsenzhou.com/Front-End-Checklist/","language":null,"has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"thedaviddias/Front-End-Checklist","license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JohnsenZhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"open_collective":"front-end-checklist"}},"created_at":"2017-10-23T09:01:52.000Z","updated_at":"2024-11-10T03:31:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/JohnsenZhou/Front-End-Checklist","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnsenZhou%2FFront-End-Checklist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnsenZhou%2FFront-End-Checklist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnsenZhou%2FFront-End-Checklist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JohnsenZhou%2FFront-End-Checklist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JohnsenZhou","download_url":"https://codeload.github.com/JohnsenZhou/Front-End-Checklist/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254359103,"owners_count":22058046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T05:00:35.326Z","updated_at":"2025-05-15T14:33:17.915Z","avatar_url":"https://github.com/JohnsenZhou.png","language":null,"funding_links":["https://opencollective.com/front-end-checklist"],"categories":["Translations","Others"],"sub_categories":["Accessibility testing"],"readme":"[![Front-End Checklist Logo](https://github.com/thedaviddias/Front-End-Checklist/blob/master/src/img/banners/front-end-checklist-banner-light.jpg?raw=true)](http://frontendchecklist.com)\n\n\u003ch2 align=\"center\"\u003e\u003ca href=\"http://lab.johnsenzhou.com/Front-End-Checklist/\"\u003e前端开发清单\u003c/a\u003e\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cem\u003e\u003cstrong\u003e前端开发清单\u003c/strong\u003e是一份在站点/HTML页面发布到生产环境之前需要测试的所有元素的详尽列表。\u003c/em\u003e\n\u003c/p\u003e\n\n[![Join the chat at https://gitter.im/Front-End-Checklist/Lobby](https://badges.gitter.im/Front-End-Checklist/Lobby.svg)](https://gitter.im/Front-End-Checklist/Lobby?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)\n[![Backers on Open Collective](https://opencollective.com/front-end-checklist/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/front-end-checklist/sponsors/badge.svg)](#sponsors)\n[![Contributors](https://img.shields.io/github/contributors/thedaviddias/Front-End-Checklist.svg)](https://github.com/thedaviddias/Front-End-Checklist/graphs/contributors)\n[![StackShare](https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat)](https://stackshare.io/thedaviddias/front-end-checklist)\n[![CC0](https://img.shields.io/badge/license-CC0-green.svg)](https://creativecommons.org/publicdomain/zero/1.0/)\n\n它基于前端开发人员多年的经验沉淀，以及其他优秀的开源清单。\n\n\u003ca target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/HxqChNNHFKFaMpEpEikk4EM4/thedaviddias/Front-End-Checklist'\u003e\n  \u003cimg alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/HxqChNNHFKFaMpEpEikk4EM4/thedaviddias/Front-End-Checklist.svg' /\u003e\n\u003c/a\u003e\n\n## 目录\n\n1. **[Head](#head)**\n2. **[HTML](#html)**\n3. **[Webfonts](#webfonts)**\n4. **[CSS](#css)**\n5. **[Images](#images)**\n6. **[JavaScript](#javascript)**\n7. **[Security](#security)**\n8. **[Performance](#performance)**\n9. **[Accessibility](#accessibility)**\n10. **[SEO](#seo)**\n\n## 一些声明\n\n**前端开发清单**中的所列出的点是大部分前端项目所必需的关注的, 但某些元素可以省略或者并不是这么重要 (在管理Web应用程序的情况下，你可能并不需要RSS订阅源)。我们选择使用一下3级区分:\n\n* ![Low][low_img] **推荐**，但在某些特定情况下可以省略。\n* ![Medium][medium_img] **强烈推荐**，但是可能在某些特殊情况下能被省略。某些元素，如果省略将会对性能或SEO方面产生不良影响。\n* ![High][high_img] **不能被任何理由忽略**。忽略可能会导致你的页面部分功能障碍或者产生可访问性以及SEO等问题。测试优先级需要首先考虑这些元素。\n\n某些资源拥有特定的标识符，帮助你去理解清单上不同类型的内容或帮助。\n\n* 📖: 文档或文章\n* 🛠: 在线工具/测试工具\n* 📹: 媒体或视频内容\n\n---\n\n## Head\n\n\u003e **注意:** 你能在[HEAD列表](https://github.com/joshbuchea/HEAD)中找到HTML文档`\u003chead\u003e`标签内所有可配置的属性。\n\n### Meta 标签\n\n* [ ] **Doctype（文档类型）:** ![High][high_img] 以下Doctype标签声明文档为HTML5类型，需要写在HTML文件的顶部。\n\n```html\n\u003c!-- 声明文档为 HTML5 类型 --\u003e\n\u003c!doctype html\u003e\n```\n\n\u003e * 📖 [设置文档字符编码格式 - HTML5 W3C](https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding)\n\n* 下列两个 meta 标签需要首先声明在head中：Charset 和 Viewport。*\n\n* [ ] **Charset（字符）:** ![High][high_img] 正确声明`Charset` meta (UTF-8)。\n\n```html\n\u003c!-- 设置文档的字符编码 --\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n```\n\n* [ ] **Viewport（视口）:** ![High][high_img] 正确声明`viewport` meta。\n\n```html\n\u003c!-- 响应式网页设计viewpoint声明 --\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n```\n\n* [ ] **Title（标题）:** ![High][high_img] 所有页面都必须使用`title`标签(SEO:Google会计算标题中使用的字符的像素宽度，范围在472和482像素之间，所以平均字符数限制大约在55个字符左右)。\n\n```html\n\u003c!-- 文档标题 --\u003e\n\u003ctitle\u003e网站标题不超过55个字符\u003c/title\u003e\n```\n\n\u003e * 📖 [Title 标签 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title)\n\u003e * 🛠 [SERP 代码段生成器](https://www.sistrix.com/serp-snippet-generator/)\n\n* [ ] **Description（描述）:** ![High][high_img] 提供`description`标签， 它是唯一的，且内容不能超过150个字符。\n\n```html\n\u003c!-- Meta Description --\u003e\n\u003cmeta name=\"description\" content=\"Description of the page less than 150 characters\"\u003e\n```\n\n\u003e * 📖[Meta Description 属性 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_an_author_and_description)\n\n* [ ] **Favicons（图标）:** ![Medium][medium_img] 每个`favicon`都被创建并正确显示，如果你只有一个`favicon.ico`，把它放在你网站的根目录下。 通常来说你不需要做任何操作他就能正常显示。 然而, 使用一下示例中的方法是比较好的做法。不过现在我们推荐使用**PNG**格式，相比`.ico`格式有较好的优势(推荐尺寸: 32x32px)。\n\n```html\n\u003c!-- 标准favicon --\u003e\n\u003clink rel=\"icon\" type=\"image/x-icon\" href=\"https://example.com/favicon.ico\"\u003e\n\u003c!-- 推荐favicon格式 --\u003e\n\u003clink rel=\"icon\" type=\"image/png\" href=\"https://example.com/favicon.png\"\u003e\n```\n\n\u003e * 🛠 [Favicon 生成器](https://www.favicon-generator.org/)\n\u003e * 🛠 [RealFaviconGenerator](https://realfavicongenerator.net/)\n\u003e * 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet)\n\u003e * 📖 [Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS 技巧](https://css-tricks.com/favicon-quiz/)\n\u003e * 📖 [PNG favicons - caniuse](https://caniuse.com/#feat=link-icon-png)\n\n* [ ] **Apple Web App Meta:** ![Low][low_img] 苹果设备目前使用的 Meta 标签\n\n```html\n\u003c!-- (创建至少200x200像素尺寸的Apple图标文件以支持你可能需要的用到的所有尺寸) --\u003e\n\u003clink rel=\"apple-touch-icon\" href=\"/custom-icon.png\"\u003e\n\n\u003c!-- 设置Web应用程序是否以全屏模式运行。 --\u003e\n\u003cmeta name=\"apple-mobile-web-app-capable\" content=\"yes\"\u003e\n\n\u003c!-- 设置状态栏样式（有关其可用值，请参见下面的“苹果设备支持的Meta标记列表”） --\u003e\n\u003c!-- 除非您具有先前的Meta标签，否则本Meta标签无效 --\u003e\n\u003cmeta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"\u003e\n```\n\n\u003e * 📖 [在苹果设备中配置Web应用程序](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html)\n\u003e * 📖 [苹果设备支持的Meta标记列表](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)\n\n- [ ] **Windows Tiles:**![Low][low_img] Windows 操作系统磁贴\n\n```html\n\u003c!-- Microsoft Tiles --\u003e\n\u003cmeta name=\"msapplication-config\" content=\"browserconfig.xml\" /\u003e\n```\n\nbrowserconfig.xml文件的最小所需xml标记如下所示:\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cbrowserconfig\u003e\n   \u003cmsapplication\u003e\n     \u003ctile\u003e\n        \u003csquare70x70logo src=\"small.png\"/\u003e\n        \u003csquare150x150logo src=\"medium.png\"/\u003e\n        \u003cwide310x150logo src=\"wide.png\"/\u003e\n        \u003csquare310x310logo src=\"large.png\"/\u003e\n     \u003c/tile\u003e\n   \u003c/msapplication\u003e\n\u003c/browserconfig\u003e\n```\n\n\u003e 📖 [浏览器配置模式参考](https://msdn.microsoft.com/en-us/library/dn320426(v=vs.85).aspx)\n\n* [ ] **Canonical:** ![Medium][medium_img] 使用`rel=\"canonical\"`以避免重复的内容。\n\n```html\n\u003c!-- 帮助防止重复内容出现 --\u003e\n\u003clink rel=\"canonical\" href=\"http://example.com/2017/09/a-new-article-to-red.html\"\u003e\n```\n\n\u003e - 📖 [使用规范的URLs - Search Console Help - Google Support](https://support.google.com/webmasters/answer/139066?hl=en)\n\u003e - 📖 [rel = canonical的5个常见错误 - Google Webmaster Blog](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html)\n\n### HTML 标签\n\n* [ ] **Language tag（语言标签）:** ![High][high_img] 指定你网站的语言标签并与当前页面语言相关联。\n\n```html\n\u003chtml lang=\"zh_cn\"\u003e\n```\n\n* [ ] **Direction tag（方向标签）:** ![Medium][medium_img] `direction`属性规定元素内容的文本方向。(可以在另一个HTML标签上使用)\n\n```html\n\u003chtml dir=\"rtl\"\u003e\n```\n\n\u003e * 📖 [dir 属性 - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)\n\n* [ ] **Alternate language（备用语言）:** ![Low][low_img] 指定网站的语言标签并与当前页面的语言相关联。\n\n```html\n\u003clink rel=\"alternate\" href=\"https://es.example.com/\" hreflang=\"es\"\u003e\n```\n\n* [ ] **x-default:** ![Low][low_img] 表明此类网页未定位到特定的语言或区域设置。\n\n```html\n\u003clink rel=\"alternate\" href=\"https://example.com/\" hreflang=\"x-default\" /\u003e\n```\n\n\u003e * 📖 [x-default - Google](https://webmasters.googleblog.com/2013/04/x-default-hreflang-for-international-pages.html)\n\n* [ ] **Conditional comments（条件注释）:** ![Low][low_img] 如有需要，可针对IE添加条件注释。\n\n\u003e 📖 [关于条件注释(Internet Explorer) - MSDN - Microsoft](https://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx)\n\n* [ ] **RSS feed（RSS 订阅）:** ![Low][low_img] 如果你的项目是一个博客或者有大量的文章，可以添加一个RSS链接。\n\n* [ ] **CSS Critical（最小 CSS 合集）:** ![Medium][medium_img] `CSS critical`收集并呈现当前页面可见部分的核心CSS。在主要的CSS调用渲染之前以单行(最小化)在`\u003cstyle\u003e\u003c/style\u003e`中嵌入。\n\n\u003e * 🛠 [由Addy Osmani于GitHub撰写的Critical](https://github.com/addyosmani/critical)\n\n* [ ] **CSS order（加载顺序）:** ![High][high_img] 所有CSS文件都需要在JavaScript文件加载之前加载完成(除了有时JS文件异步加载到页面之外的情况)。\n\n### Social meta 标签\n\n强烈推荐***Facebook OG*** and ***Twitter Cards***。如果你针对某些特定的存在并希望确保显示，也可以考虑其他社交媒体的meta。\n\n* [ ] **Facebook Open Graph:** ![Low][low_img] 所有Facebook Open Graph（OG）都经过测试并且没有任何错误。图片至少需要600 x 315像素，建议使用1200 x 630像素。\n\n\u003e **注意:** 使用 `og:image:width` 和 `og:image:height` 将会爬取制定尺寸的图像，以便图像能够快速呈现，无需进行异步下载和处理。\n\n```html\n\u003cmeta property=\"og:type\" content=\"website\"\u003e\n\u003cmeta property=\"og:url\" content=\"https://example.com/page.html\"\u003e\n\u003cmeta property=\"og:title\" content=\"Content Title\"\u003e\n\u003cmeta property=\"og:image\" content=\"https://example.com/image.jpg\"\u003e\n\u003cmeta property=\"og:description\" content=\"Description Here\"\u003e\n\u003cmeta property=\"og:site_name\" content=\"Site Name\"\u003e\n\u003cmeta property=\"og:locale\" content=\"en_US\"\u003e\n\u003c!-- Next tags are optional but recommended --\u003e\n\u003cmeta property=\"og:image:width\" content=\"1200\"\u003e\n\u003cmeta property=\"og:image:height\" content=\"630\"\u003e\n```\n\n\u003e * 📖 [A Guide to Sharing for Webmasters](https://developers.facebook.com/docs/sharing/webmasters/)\n\u003e * 🛠 使用[Facebook OG testing](https://developers.facebook.com/tools/debug/)测试你的页面。\n\u003e * 📖 [Best Practices - Sharing](https://developers.facebook.com/docs/sharing/best-practices/)\n\n* [ ] **Twitter 卡片:** ![Low][low_img]\n\n```html\n\u003cmeta name=\"twitter:card\" content=\"summary\"\u003e\n\u003cmeta name=\"twitter:site\" content=\"@site_account\"\u003e\n\u003cmeta name=\"twitter:creator\" content=\"@individual_account\"\u003e\n\u003cmeta name=\"twitter:url\" content=\"https://example.com/page.html\"\u003e\n\u003cmeta name=\"twitter:title\" content=\"Content Title\"\u003e\n\u003cmeta name=\"twitter:description\" content=\"Content description less than 200 characters\"\u003e\n\u003cmeta name=\"twitter:image\" content=\"https://example.com/image.jpg\"\u003e\n```\n\n\u003e * 📖 [推特卡片使用入门 — Twitter Developers](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started)\n\u003e * 🛠 使用[Twitter card validator](https://cards-dev.twitter.com/validator)测试你的页面。\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## HTML\n\n### 最佳实践\n\n* [ ] **HTML5 Semantic Elements（HTML5语义化元素）:** ![High][high_img] 正确地使用HTML5语义化标签(header, section, footer, main...).\n\n\u003e 📖 [HTML 参考](http://htmlreference.io/)\n\n* [ ] **Error pages（错误页面）:** ![High][high_img] 404页面和5xx错误页面的存在。记得在5xx错误页面中集成CSS样式文件(在当前服务器上无外部调用)。\n\n* [ ] **Noopener:** ![Medium][medium_img] 如果你使用外部链接`target=\"_blank\"`, 你的链接必须有个`rel=\"noopener\"`属性，防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器，请使用`rel=\"noopener noreferrer\"`。\n\n\u003e 📖 [关于 rel=noopener](https://mathiasbynens.github.io/rel-noopener/)\n\n* [ ] **Clean up comments（清除注释）:** ![Low][low_img] 在将页面发布到生产环境之前，应该删除不必要的代码。\n\n### HTML 测试\n\n* [ ] **W3C compliant（兼容）:** ![High][high_img] 所有页面需要使用W3C验证器进行测试，以检测HTML代码中的可能存在的问题。\n\n\u003e * 🛠 [W3C validator](https://validator.w3.org/)\n\n* [ ] **HTML Lint:** ![High][high_img] 使用工具来帮助我们分析HTML代码中可能存在的问题。\n\n\u003e * 🛠 [肮脏的标记列表](https://www.10bestdesign.com/dirtymarkup/)\n\u003e * 🛠 [webhint](https://webhint.io/)\n\n* [ ] **Desktop Browsers:** ![High][high_img] 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。\n\n* [ ] **Mobile Browsers:**  ![High][high_img] 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).\n\n* [ ] **Link checker（链接检查器）:** ![High][high_img] 页面中链接没有失效，请确认你没有404错误。\n\n\u003e * 🛠 [W3C Link Checker](https://validator.w3.org/checklink)\n\n* [ ] **Adblockers test（广告拦截器测试）:** ![Medium][medium_img] 你的的网站会在启用广告拦截器的情况下正确显示页面内容(你可以提供一条消息，引导人们停用其广告拦截器)。\n\n\u003e [Pixel Perfect - Chrome 扩展](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## Webfonts\n\n\u003e **注意:** 使用webfonts可能会导致文档样式闪烁以及文本不可见，所以在使用时需要考虑使用后备字体，或者使用webfont加载器来控制字体加载行为。\n\u003e \n\u003e * 📖 [Google Technical considerations about webfonts](https://developers.google.com/fonts/docs/technical_considerations)\n\n* [ ] **Webfont format（字体格式）:** ![High][high_img] 现代浏览器都支持WOFF、WOFF2、TTF格式\n\n\u003e * 📖 [WOFF - Web开放字体格式 - Caniuse](https://caniuse.com/#feat=woff).\n\u003e * 📖 [WOFF 2.0 - Web开放字体格式 - Caniuse](https://caniuse.com/#feat=woff2).\n\u003e * 📖 [TTF/OTF - TrueType和OpenType字体支持](https://caniuse.com/#feat=ttf)\n\u003e * 📖 [Using @font-face - CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/)\n\n* [ ] **Webfont size（字体大小）:** ![High][high_img] Webfont大小不超过 2 MB (包括所有版本在内)。\n\n* [ ] **Webfont loader（字体加载器）:** ![Low][low_img] 使用Webfont加载器控制加载行为。\n\n\u003e * 🛠 [Typekit Web字体加载器](https://github.com/typekit/webfontloader)\n\n**[⬆ 返回顶部](#目录)**\n\n## CSS\n\n\u003e **注意:** 大部分前端开发人员都会看看[CSS指南](https://cssguidelin.es/)和[Sass指南](https://sass-guidelin.es/)。如果你对CSS属性有疑问，可以访问[CSS参考文档](http://cssreference.io/)。\n\n* [ ] **响应式网站设计:** ![High][high_img] 网站使用响应式设计。\n* [ ] **CSS打印属性:** ![Medium][medium_img] 提供打印样式表，并确保使用正确。\n* [ ] **预处理器:** ![Medium][medium_img] 你的网站使用css预处理器(推荐[Sass](http://sass-lang.com/)).\n* [ ] **唯一ID:** ![High][high_img] 如果使用了ID，确保ID的唯一性。\n* [ ] **Reset CSS:** ![High][high_img] 使用CSS reset(如reset.css, normalize.css, reboot) *(如果你使用的是CSS框架，例如Bootstrap或Foundation，则reset.css已被包含在其中)*\n\n\u003e * 📖 [Reset.css](https://meyerweb.com/eric/tools/css/reset/)\n\u003e * 📖 [Normalize.css](https://necolas.github.io/normalize.css/)\n\u003e * 📖 [Reboot](https://getbootstrap.com/docs/4.0/content/reboot/)\n\n* [ ] **JS 前缀:** ![Low][low_img] 所有以**js-**开头的class(或者JavaScript文件中使用的id)不写入css文件。\n\n```html\n\u003cdiv id=\"js-slider\" class=\"my-slider\"\u003e\n\u003c!-- Or --\u003e\n\u003cdiv id=\"id-used-by-cms\" class=\"js-slider my-slider\"\u003e\n```\n\n* [ ] **CSS embed or line:** ![High][high_img] 避免使用CSS嵌入或内联，仅用于必要的情况(例如: background-image for slider, CSS critical).\n* [ ] **浏览器内核前缀:** ![High][high_img] 对部分属性加上浏览器内核前缀，生成你浏览器兼容的属性。\n\n\u003e * 🛠 [Autoprefixer CSS online](https://autoprefixer.github.io/)\n\n### 性能\n\n- [ ] **Concatenation（合并）:** ![High][high_img] 将CSS文件合并到一个文件中。 *(不适用HTTP/2)*\n- [ ] **Minification（压缩）:** ![High][high_img] 压缩所有CSS文件。\n- [ ] **Non-blocking（非阻塞）:** ![Medium][medium_img] CSS文件需要非阻塞加载，以防在DOM加载时花费大量时间。\n\n\u003e * 📖 [loadCSS by filament group](https://github.com/filamentgroup/loadCSS)\n\u003e * 📖 [使用loadCSS预加载CSS的示例](https://gist.github.com/thedaviddias/c24763b82b9991e53928e66a0bafc9bf)\n\n- [ ] **未使用的CSS:** ![Low][low_img] 删除未使用的CSS。\n\n\u003e * 🛠 [UnCSS Online](https://uncss-online.com/)\n\u003e * 🛠 [PurifyCSS](https://github.com/purifycss/purifycss)\n\u003e * 🛠 [PurgeCSS](https://github.com/FullHuman/purgecss)\n\u003e * 🛠 [Chrome DevTools Coverage](https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage)\n\n### CSS 测试\n\n* [ ] **格式检查:** ![High][high_img] 所有的CSS或SCSS文件没有任何格式错误。\n\n\u003e * 🛠 [stylelint, a CSS linter](https://stylelint.io/)\n\u003e * 📖 [Sass指南](https://sass-guidelin.es/)\n\n* [ ] **响应式网页设计:** ![High][high_img] 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况，可以设置更多)。\n\n* [ ] **CSS验证器:** ![Medium][medium_img] CSS都需经过测试，同时所有错误都被修复。\n\n\u003e 🛠 [CSS验证器](https://jigsaw.w3.org/css-validator/)\n\n* [ ] **桌面浏览器:** ![High][high_img] 所有页面都在桌面浏览器进行了测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。\n* [ ] **移动端浏览器:**  ![High][high_img] 所有页面都在移动端浏览器进行了测试(Native browser, Chrome, Safari...)。\n* [ ] **操作系统:**  ![High][high_img] 所有页面都在当前操作系统上进行了测试(Windows, Android, iOS, Mac...)。\n* [ ] **Design fidelity 设计图保真度）:** ![High][high_img] 页面需要像素级实现。根据设计稿的质量，你可能不会100％与设计稿相同，但你的网页需要尽可能的靠近设计稿的要求。\n\n\u003e [Pixel Perfect - Chrome Extension](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en)\n\n* [ ] **Reading direction（浏览文本方向）:** ![High][high_img] 如果需要的话，所有页面都需要对LTR和RTL语言进行测试。\n\n\u003e * 📖 [构建RTL-Aware Web Apps \u0026 Websites: Part 1 | Mozilla Hacks](https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1/)\n\u003e * 📖 [构建RTL-Aware Web Apps \u0026 Websites: Part 2 | Mozilla Hacks](https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2/)\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## Images\n\n\u003e **注意:** 想要完整的了解图像优化，可以在Addy Osmani查看免费电子书**[图像优化基础](https://images.guide/)**。\n\n### 最佳实践\n\n* [ ] **优化:** ![High][high_img] 所有图像都经过优化并且可在浏览器中正常显示。WebP格式可用于关键页面（如首页）。\n\n\u003e * 🛠 [Imagemin](https://github.com/imagemin/imagemin)\n\u003e * 🛠 使用[ImageOptim](https://imageoptim.com/)免费优化您的图像。\n\u003e * 🛠 使用[KeyCDN Image Processing](https://www.keycdn.com/support/image-processing) for image optimization in real time.\n\u003e * 🛠 使用[Kraken.io](https://kraken.io/web-interface) png和jpg优化的绝佳替代品。 免费计划每个文件最大1mb。\n\u003e * 🛠 [TinyPNG](https://tinypng.com/) 无损优化png，apng（动画png）和jpg图像。 提供免费和付费版本。\n\u003e * 🛠 [ZorroSVG](http://quasimondo.com/ZorroSVG/) 使用svg遮罩的类似jpg的压缩形式的透明图像。\n\u003e * 🛠 [SVGO](https://github.com/svg/svgo) 基于Nodejs的工具，用于优化SVG矢量图形文件。\n\u003e * 🛠 [SVGOMG](https://jakearchibald.github.io/svgomg/) 基于SVGO的基于Web的GUI版本，可在线优化您的svg。\n\n* [ ] **Picture/Srcset:** ![Medium][medium_img] 使用Picture/Srcset为用户当前的视口提供最合适的图像。\n\n\u003e * 📖 [如何使用srcset构建响应式图像](https://www.sitepoint.com/how-to-build-responsive-images-with-srcset/)。\n\n* [ ] **视网膜屏:** ![Low][low_img] 提供x2 或 3x的图像来支持视网膜屏显示。\n* [ ] **雪碧图:** ![Medium][medium_img] 小图片放到一个雪碧图中。\n* [ ] **宽高:** ![High][high_img] 请在\u003cimg\u003e上设置宽度和高度属性，如果最终的渲染图像大小已知（可以忽略CSS大小）。\n* [ ] **图片描述文本:** ![High][high_img] 所有 `\u003cimg\u003e` 必须有`alt`属性来直观的描述图片（在无障碍网页中尤其重要）。\n\n\u003e 📖 [Alt-文本: 终极指南](https://axesslab.com/alt-texts/)\n\n* [ ] **懒加载:** ![Medium][medium_img] 图片使用懒加载 (记得适中提供 noscript 标签).\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## JavaScript\n\n### 最佳实践\n\n* [ ] **JavaScript 内联:** ![High][high_img] 确保没有任何js代码内联(与HTML代码混合)。\n* [ ] **合并:** ![High][high_img] 合并js文件。\n* [ ] **压缩:** ![High][high_img] 压缩所有js文件(可以添加 `.min` 后缀)。\n\n\u003e [压缩资源 (HTML, CSS, and JavaScript)](https://developers.google.com/speed/docs/insights/MinifyResources)\n\n* [ ] **JavaScript安全性:** ![High][high_img]\n\n\u003e [用JavaScript开发安全应用程序指南](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet#Guidelines_for_Developing_Secure_Applications_Utilizing_JavaScript)\n\n* [ ] **`noscript` 标签:** ![Medium][medium_img] 在 HTML 的 body 标签里使用 `\u003cnoscript\u003e` 标签以在客户端不支持JavaScript时提供其他展示, [一个使用示例](https://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-noscript-element--cms-25498).\n\n```html\n\u003cnoscript\u003e\n  您需要启用JavaScript才能运行此应用。\n\u003c/noscript\u003e\n```\n\n* [ ] **Non-blocking（非阻塞）:** ![Medium][medium_img] JavaScript文件使用async或延迟使用defer属性异步加载。\n\n\u003e * 📖 [删除阻止渲染的JavaScript代码](https://developers.google.com/speed/docs/insights/BlockingJS)\n\n* [ ] **优化和更新JS依赖库:** ![Medium][medium_img] 项目中使用的所有JavaScript库需要更新至最新版本（对于简单的功能，建议使用Vanilla Javascript）。\n\n\u003e * 📖 [你或许并不需要jQuery](http://youmightnotneedjquery.com/)\n\u003e * 📖 [使用原生JavaScript来构建功能强大的Web应用程序](https://plainjs.com/)\n\n* [ ] **Modernizr（现代化）:** ![Low][low_img] 如果您需要指定某些特定功能，则可以使用自定义Modernizr在`\u003chtml\u003e`标签中添加class。\n\n\u003e * 🛠 [自定义你的 Modernizr](https://modernizr.com/download?setclasses)\n\n### JavaScript 测试\n\n* [ ] **ESLint:** ![High][high_img] 用ESLint检测并没有错误(基于你的配置规则)。\n\n\u003e * 📖 [ESLint - 适用于JavaScript和JSX的可插入linting实用程序](https://eslint.org/)\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## Security\n\n### 扫描并检查你的网站\n\n\u003e * [securityheaders.io](https://securityheaders.io/)\n\u003e * [Mozilla 的 Observatory 项目](https://observatory.mozilla.org/)\n\n### 最佳实践\n\n* [ ] **HTTPS:** ![Medium][medium_img] 每个页面和所有外部内容(插件、图像...)都使用HTTPS。\n\n\u003e * 🛠 [Let's Encrypt - 免费 SSL/TLS 证书](https://letsencrypt.org/)\n\u003e * 🛠 [免费 SSL 服务测试](https://www.ssllabs.com/ssltest/index.html)\n\u003e * 📖 [Can I Use 上严格的传输安全列表](http://caniuse.com/#feat=stricttransportsecurity)\n\n* [ ] **HTTP严格传输安全性(HSTS):** ![Medium][medium_img] HTTP头设置 'Strict-Transport-Security'.\n\n\u003e * 🛠 [检查HSTS预加载状态和资格](https://hstspreload.org/)\n\u003e * 📖 [HTTP严格传输安全速查表 - OWASP](https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet)\n\u003e * 📖 [传输层保护速查表 - OWASP](https://www.owasp.org/index.php/Transport_Layer_Protection_Cheat_Sheet)\n\n* [ ] **跨站点请求伪造攻击(CSRF):** ![High][high_img] 确保向服务器端发出的请求是合法的，并来自您的网站/应用程序，以防止发生CSRF攻击。\n\n\u003e 📖 [跨站点请求伪造（CSRF）防范清单 - OWASP](https://www.owasp.org/index.php/Cross-Site_Request_Forgery_(CSRF)_Prevention_Cheat_Sheet)\n\n* [ ] **跨站脚本攻击(XSS):** ![High][high_img] 确保页面或网站没有XSS攻击的可能性。\n\n\u003e * 📖 [XSS (跨站脚本攻击) 防范清单 - OWASP](https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet)\n\u003e * 📖 [基于DOM的XSS防范清单 - OWASP](https://www.owasp.org/index.php/DOM_based_XSS_Prevention_Cheat_Sheet)\n\n* [ ] **Content Type Options（内容类型选项）** ![Medium][medium_img] 防止Google Chrome和Internet Explorer尝试将响应的内容类型从服务器声明的内容类型中嗅探出来。\n\n\u003e * 📖 [X-Content-Type-Options - Scott Helme](https://scotthelme.co.uk/hardening-your-http-response-headers/#x-content-type-options)\n\n* [ ] **X-Frame-Options (XFO)（外部框架连接设定）** ![Medium][medium_img] 保护网站的访问者免受劫持攻击。\n\n\u003e * 📖 [X-Frame-Options - Scott Helme](https://scotthelme.co.uk/hardening-your-http-response-headers/#x-frame-options)\n\u003e * 📖 [RFC7034 - HTTP Header Field X-Frame-Options](https://tools.ietf.org/html/rfc7034)\n\n* [ ] **Content Security Policy（内容安全策略）** ![Medium][medium_img] 定义内容如何加载到您的网站上的方式以及允许加载的位置。也可以用来防止劫持攻击。\n \n\u003e * 📖 [内容安全策略 - 介绍 - Scott Helme](https://scotthelme.co.uk/content-security-policy-an-introduction/)\n\u003e * 📖 [CSP 速查表 - Scott Helme](https://scotthelme.co.uk/csp-cheat-sheet/)\n\u003e * 📖 [CSP 速查表 - OWASP](https://www.owasp.org/index.php/Content_Security_Policy_Cheat_Sheet)\n\u003e * 📖 [内容安全政策参考](https://content-security-policy.com/)\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## Performance\n\n### 最佳实践\n\n- [ ] **需要达到的目标:** ![Medium][medium_img] 你的网页需要达到如下目标：\n  - 在第一秒内展示出一个有意义的绘画\n  - 在“平均”配置下互动时间不到5秒（在速度为400ms的RTT和400kbps传输速度的慢速3G网络上，售价200美元的Android）在2秒内可以重复访问\n  - 压缩后的关键文件大小低于170Kb\n\n\u003e * 🛠 [网站页面分析器](https://tools.pingdom.com)\n\u003e * 🛠 [WebPageTest](https://www.webpagetest.org/)\n\u003e * 📖 [Size Limit: 使网页更轻](https://evilmartians.com/chronicles/size-limit-make-the-web-lighter)\n\n- [ ] **文件压缩:** ![Medium][medium_img] 压缩你的HTML文件。\n\n* [ ] **懒加载:** ![Medium][medium_img] 图片、js脚本和CSS需要懒加载，以提高当前页面的响应时间（请参见各自部分的详细信息）。\n\n* [ ] **Cookie大小:** ![Medium][medium_img] 如果使用Cookie，确保每个Cookie不超过4096个字节，并且域名下不超过20个Cookie。\n\n\u003e * 📖 [Cookie规范: RFC 6265](https://tools.ietf.org/html/rfc6265)\n\u003e * 📖 [Cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies)\n\u003e * 🛠 [浏览器Cookie限制](http://browsercookielimits.squawky.net/)\n\n* [ ] **第三方组件:** ![Medium][medium_img] 在可能的情况下，用静态组件替代依赖于外部JS的第三方iframe或组件（如共享按钮），从而限制对外部API的调用，并将用户活动保持为私有。\n\n\u003e * 🛠 [简单的共享按钮生成器](https://simplesharingbuttons.com/)\n\n### 为将到来的请求做准备\n\n\u003e 📖 [以下几种技术的详细说明](https://css-tricks.com/prefetching-preloading-prebrowsing/)\n\n* [ ] **DNS解析:** ![Low][low_img] 使用`dns-prefetch`让第三方DNS服务商主动去执行域名解析的功能。\n\n```html\n\u003clink rel=\"dns-prefetch\" href=\"https://example.com\"\u003e\n```\n\n* [ ] **预连接:** ![Low][low_img] 使用`preconnect`在空闲期间提前做好DNS查询, TCP三次握手和TLS协商。\n\n```html\n\u003clink rel=\"preconnect\" href=\"https://example.com\"\u003e\n```\n\n* [ ] **预获取:** ![Low][low_img] 使用`prefetch`在空闲期间提前请求即将需要的资源(例如：图像的懒加载)。\n\n```html\n\u003clink rel=\"prefetch\" href=\"image.png\"\u003e\n```\n\n* [ ] **预加载:** ![Low][low_img] 使用`preload`提前加载当前页面所需要的资源(例如：js脚本放在`\u003cbody\u003e`的最后)。\n\n```html\n\u003clink rel=\"preload\" href=\"app.js\"\u003e\n```\n\n\u003e 📖 [预加载和预获取之间的差异](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf)\n\n### 性能测试\n\n* [ ] **Google PageSpeed:** ![High][high_img] 所有的网页都经过测试（不仅仅是首页），而且得分至少为90/100。\n\n\u003e * 🛠 [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/)\n\u003e * 🛠 [用Google测试移动端速度](https://testmysite.withgoogle.com)\n\u003e * 🛠 [WebPagetest - 网站性能和优化测试](https://www.webpagetest.org/)\n\u003e * 🛠 [GTmetrix - 网站速度和性能优化](https://gtmetrix.com/)\n\u003e * 🛠 [Speedrank - 改善您网站的性能](https://speedrank.app/)\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## Accessibility\n\n\u003e **注意:** 查看注意事项视频列表[A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) 📹\n\n### 最佳实践\n\n- [ ] **渐进式增强:** ![Medium][medium_img] 主要功能如主导航和搜索等功能应该在没有启用JavaScript的情况下能够正常运行。\n\n\u003e 📖 [在Chrome开发者具中启用/禁用JavaScript](https://www.youtube.com/watch?v=kBmvq2cE0D8)\n\n- [ ] **颜色对比度:** ![Medium][medium_img] 颜色对比度至少通过WCAG AA标准验证(移动端需要通过AAA)。\n\n\u003e * 🛠 [Contrast ratio](https://leaverou.github.io/contrast-ratio/)\n\n#### 标题\n\n* [ ] **H1:** ![High][high_img] 所有页面都有H1，它不是网站的标题。\n* [ ] **Headings:** ![High][high_img] 标题应以正确的顺序合理使用(H1至H6)。\n\n\u003e * 📹 [Why headings and landmarks are so important -- A11ycasts #18](https://www.youtube.com/watch?v=vAAzdi1xuUY\u0026index=9\u0026list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)\n\n### 语义化\n\n- [ ] **使用特定的HTML5输入类型:** ![Medium][medium_img] 这对于显示不同类型的自定义键盘和小部件的移动设备尤其重要。\n\n\u003e * 📖 [Mobile Input Types](http://mobileinputtypes.com/)\n\n### 表单\n\n* [ ] **Label:** ![High][high_img] `label`与每个输入表单元素相关联，如果`label`无法显示，请使用`aria-label`代替。\n\n\u003e 📖 [使用aria-label属性 - MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute)\n\n### Accessibility 测试\n\n* [ ] **Accessibility标准测试:** ![High][high_img] 使用WAVE工具测试你的页面是否符合accessibility标准。\n\n\u003e * 🛠 [Wave testing](http://wave.webaim.org/)\n\n* [ ] **Keyboard navigation（键盘导航）:** ![High][high_img] 在你的键盘上以可能出现的操作顺序去测试，确保所有交互式元素都可访问和可用。\n* [ ] **Screen-reader（屏幕阅读器）:** ![Medium][medium_img] 所有页面都在屏幕阅读器(VoiceOver, ChromeVox, NVDA or Lynx)中进行了测试。\n* [ ] **Focus style（专注风格）:** ![High][high_img] 如果焦点被禁用，它将被CSS中的可见状态所替代。\n\n\u003e * 📹 [Managing Focus - A11ycasts #22](https://www.youtube.com/watch?v=srLRSQg6Jgg\u0026index=5\u0026list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## SEO\n\n* [ ] **Google Analytics:** ![High][high_img] Google Analytics 正确安装和配置。\n\n\u003e * 🛠 [Google Analytics](https://analytics.google.com/analytics/web/)\n\u003e * 🛠 [GA Checker (and others)](http://www.gachecker.com/)\n\n* [ ] **Baidu Analytics:** ![High][high_img] Baidu Analytics 正确安装和配置（国内网站）。\n\n* [ ] **Headings logic:** ![Medium][medium_img] 标题文字有助于表达当前页面的主要内容。\n\n\u003e * 🛠 [Tota11y, tab Headings](http://khan.github.io/tota11y/#Try-it)\n\n* [ ] **sitemap.xml:** ![High][high_img] 创建`sitemap.xml`文件并提交到Google Search Console(以前的Google管理员工具)。\n\n\u003e * 🛠 [Sitemap generator](https://websiteseochecker.com/html-sitemap-generator/)\n\n* [ ] **robots.txt:** ![High][high_img] `robots.txt`正确配置，不要阻止网页被爬取。\n\n\u003e * 📖 [The robots.txt file](https://varvy.com/robottxt.html)\n\u003e * 🛠 使用[Google Robots Testing Tool](https://www.google.com/webmasters/tools/robots-testing-tool)测试你的`robots.txt`。 \n\n* [ ] **Structured Data（结构化数据）:** ![High][high_img] 使用Structured Data的页面通过测试并且没有错误。Structured Data会帮助爬虫理解当前页面的内容。\n\n\u003e * 📖 [Structured Data 简介 | 搜索 | Google Developers](https://developers.google.com/search/docs/guides/intro-structured-data)\n\u003e * 📖 [RDFa - Linked Data in HTML](https://rdfa.info/)\n\u003e * 📖 [JSON-LD](https://json-ld.org/)\n\u003e * 📖 [Microdata](https://www.w3.org/TR/microdata/)\n\u003e * 🛠 使用[Structured Data Testing Tool](https://developers.google.com/structured-data/testing-tool/)测试你的页面。\n\u003e * 🛠 适用于结构化数据的完整结构列表[Schema.org Full Heirarchy](http://schema.org/docs/full.html)\n\n* [ ] **Sitemap HTML（HTML网站地图）:** ![Medium][medium_img] 提供HTML网站地图，可通过网站页脚中的链接进行访问。\n\n\u003e * 📖 [Sitemap 指南 | Google 支持](https://support.google.com/webmasters/answer/183668?hl=en)\n\u003e * 🛠 [Sitemap 生成器](https://websiteseochecker.com/html-sitemap-generator/)\n\n* [ ] **Pagination link tags:** ![Medium][medium_img] Provide `rel=\"prev\"` and `rel=\"next\"` to indicate paginated content.\n\n\u003e * 🛠 [分页（rel =“ prev / next”）测试工具](https://technicalseo.com/seo-tools/rel-prev-next/)\n\u003e * 📖 [分页准则 - Google Support](https://support.google.com/webmasters/answer/1663744?hl=en)\n\n```html\n\u003c!-- Example: Pagination link tags for page 2 of a paginated list --\u003e\n\u003clink rel=\"prev\" href=\"https://example.com/?page=1\"\u003e\n\u003clink rel=\"next\" href=\"https://example.com/?page=3\"\u003e\n```\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## 多语种清单\n\n这份“前端开发清单”同样被翻译为如下语言版本，感谢所有翻译者的热情贡献！\n\n* 🇯🇵 日语: [miya0001/Front-End-Checklist](https://github.com/miya0001/Front-End-Checklist)\n* 🇪🇸 西班牙语: [eoasakura/Front-End-Checklist-ES](https://github.com/eoasakura/Front-End-Checklist-ES)\n* 🇨🇳 简体中文: [JohnsenZhou/Front-End-Checklist](https://github.com/JohnsenZhou/Front-End-Checklist)\n* 🇰🇷 韩语: [kesuskim/Front-End-Checklist](https://github.com/kesuskim/Front-End-Checklist)\n* 🇧🇷 葡萄牙语: [jcezarms/Front-End-Checklist](https://github.com/jcezarms/Front-End-Checklist)\n* 🇻🇳 越南语: [euclid1990/Front-End-Checklist](https://github.com/euclid1990/Front-End-Checklist)\n* 🇹🇼 繁体中文: [EngineLin/Front-End-Checklist](https://github.com/EngineLin/Front-End-Checklist)\n* 🇫🇷 法语: [ynizon/Front-End-Checklist](https://github.com/ynizon/Front-End-Checklist)\n* 🇷🇺 俄语: [ungear/Front-End-Checklist](https://github.com/ungear/Front-End-Checklist)\n* 🇹🇷 土耳其语: [erdoganoksuz/Front-End-Checklist](https://github.com/erdoganoksuz/Front-End-Checklist)\n* 🇩🇪 德语: [xfuture603/Front-End-Checklist](https://github.com/xFuture603/Front-End-Checklist)\n\n---\n\n## 前端开发清单徽章\n\n如果想标示出你的项目遵循了这份“前端开发清单”的各项规定，欢迎将如下徽章放在你的项目的README文件上！\n\n➔ [![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)\n\n```md\n[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)\n```\n\n**[⬆ 返回顶部](#目录)**\n\n---\n\n## 贡献\n\n**提issue或提交合并请求以建议更改或添加。**\n\n### 指南\n\n**前端开发清单** 项目有两个分支:\n\n#### 1. `master`\n\n该分支包含`README.md`,内容会自动映射到[前端开发清单](http://frontendchecklist.com/)。\n网站上。\n\n#### 2. `develop`\n\n这个分支将用于对结构和内容进行一些重大更改。不过最好还是使用主分支来修复小错误或添加新项目。\n\n## 社区支持\n\n如果您有任何问题或建议，可以通过Gitter或Twitter联系我们：\n\n* [Chat on Gitter](https://gitter.im/Front-End-Checklist/Lobby?utm_source=share-link\u0026utm_medium=link\u0026utm_campaign=share-link)\n* [Facebook](https://www.facebook.com/frontendchecklist/)\n* [Twitter](https://twitter.com/thedaviddias)\n\n## 作者\n\n**[David Dias](https://github.com/thedaviddias/Front-End-Checklist)**\n\n## 贡献者\n\n感谢以下人员对本项目的贡献 [[Contribute]](CONTRIBUTING.md)。\n\u003ca href=\"graphs/contributors\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/contributors.svg?width=890\" /\u003e\u003c/a\u003e\n\n## 支持者\n\n感谢所有赞助我们的朋友! 🙏 [[成为支持者](https://opencollective.com/front-end-checklist#backer)]\n\n\u003ca href=\"https://opencollective.com/front-end-checklist#backers\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/backers.svg?width=890\"\u003e\u003c/a\u003e\n\n## 赞助商\n\n通过成为赞助商来支持这个项目。您的徽标将显示在这里，并链接到您的网站。 [[成为赞助商](https://opencollective.com/front-end-checklist#sponsor)]\n\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/0/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/0/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/1/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/1/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/2/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/2/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/3/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/3/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/4/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/4/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/5/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/5/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/6/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/6/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/7/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/7/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/8/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/8/avatar.svg\"\u003e\u003c/a\u003e\n\u003ca href=\"https://opencollective.com/front-end-checklist/sponsor/9/website\" target=\"_blank\"\u003e\u003cimg src=\"https://opencollective.com/front-end-checklist/sponsor/9/avatar.svg\"\u003e\u003c/a\u003e\n\n## 开源协议\n\n[![CC0](https://i.creativecommons.org/p/zero/1.0/88x31.png)](https://creativecommons.org/publicdomain/zero/1.0/)\n\n**[⬆ 回到顶部](#目录)**\n\n[low_img]: data/images/priority/low.svg\n[medium_img]: data/images/priority/medium.svg\n[high_img]: data/images/priority/high.svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJohnsenZhou%2FFront-End-Checklist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJohnsenZhou%2FFront-End-Checklist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJohnsenZhou%2FFront-End-Checklist/lists"}