Page Title less than 55 characters

# 前端自检清单 ## 目录 1. [**Head**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#head) 2. [**HTML**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#html) 3. [**Webfonts**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#webfonts) 4. [**CSS**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#css) 5. [**Images**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#images) 6. [**JavaScript**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#javascript) 7. [**Security**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#security) 8. [**Performance**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#performance) 9. [**Accessibility**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#accessibility) 10. [**SEO**](/today-i-learn/front-end/qian-duan-zi-jian-qing-dan.md#seo) ## 如何使用？ **前端自检表** 中的所有项对于大多数项目都是必需的，但是有些元素可以省略或不是必需的(例如，对于管理web应用程序，你可能并不需要RSS订阅)。我们使用三个级别来灵活区分： * ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 意味着 **推荐** 该项，但在某些特定情况下可以省略。 * ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 意味着 **强烈推荐** 该项，并且在某些特定情况下最终可以省略。如果省略某些元素，可能会对性能或SEO产生不良影响。 * ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 意味着该项 **不能被省略** ，不管你有什么理由。如果忽略了这项，页面中可能会造成功能障碍，或存在可访问性或SEO问题。测试优先级需要首先关注在这些元素上。有些资源拥有相对的符号，可帮助你了解清单中可能找到的内容或类型： * 📖: 文档或文章 * 🛠: 在线工具或测试工具 * 📹: 媒体或视频内容 > 你可以通过阅读 [README\_APP 文件](https://github.com/thedaviddias/Front-End-Checklist/blob/master/README_APP.md) 为 **前端自检表应用** 做出一些贡献，README文件里详细的阐述了关于此项目的所有事情。 ## Head > **注意：** 你可以找到一份可能在HTML document的``里包含了[所有东西的列表](https://github.com/xiaohesong/TIL/blob/master/front-end/dom/head.md)。 ### Meta tag * [ ] **Doctype:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) Doctype是HTML5并且在所有HTML页面的顶部。 > ```markup > > ``` > > * 📖 [Determining the character encoding - HTML5 W3C](https://www.w3.org/TR/html5/syntax.html#determining-the-character-encoding) *接下来的两个meta标记(Charset and Viewport) 需要首先出现在head里。* * [ ] **Charset:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) charset (UTF-8) 是被正确声明 ```markup ``` * [ ] **Viewport:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) viewport 是被正确声明 ```markup ``` * [ ] **Title:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 标题用于所有页面(SEO:谷歌计算标题中使用的字符的像素宽度，并在472到482像素之间截断。平均字符限制在55个字符左右)。 ```markup Page Title less than 55 characters ``` > * 📖 [Title - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) > * 🛠 [SERP Snippet Generator](https://www.sistrix.com/serp-snippet-generator/) * [ ] **Description:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 为描述提供了meta，它是唯一的，并且不具有超过150个字符。 ```markup ``` > * 📖 [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) * [ ] **Favicons:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 每个favicon 都被创建并正确显示。如果你只有一个`favicon.ico`，请将其放在你网站的根目录下。通常，你不需要使用任何标记。但是，使用下面示例的`link`，它仍然是一个很好的实践。现如今，**PNG格式已优于** `ico`格式(尺寸:32x32px)。 ```markup ``` > * 🛠 [Favicon Generator](https://www.favicon-generator.org/) > * 🛠 [RealFaviconGenerator](https://realfavicongenerator.net/) > * 📖 [Favicon Cheat Sheet](https://github.com/audreyr/favicon-cheat-sheet) > * 📖 [Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? - CSS Tricks](https://css-tricks.com/favicon-quiz/) > * 📖 [PNG favicons - caniuse](https://caniuse.com/#feat=link-icon-png) * [ ] **Apple Web App Meta:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 对于Apple的meta-tag ```markup ``` > * 📖 [Configuring Web Applications](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html) > * 📖 [Supported Meta Tags](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) * [ ] **Windows Tiles:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) window tiles 呈现并且被link ```markup ``` `browserconfig.xml`文件所需的最低`xml`标记如下： ```markup ``` > * 📖 \[Browser configuration schema reference]\() * [ ] **Canonical:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 使用`rel="canonical"`避免重复内容 ```markup ``` > * 📖 [Use canonical URLs - Search Console Help - Google Support](https://support.google.com/webmasters/answer/139066?hl=en) > * 📖 [5 common mistakes with rel=canonical - Google Webmaster Blog](https://webmasters.googleblog.com/2013/04/5-common-mistakes-with-relcanonical.html) ### HTML tags * [ ] **Language attribute:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 你网站的`lang`属性被指定，并与当前页面的语言相关。 ```markup ``` * [ ] **Direction attribute:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 方向是在HTML标记上指定的(它可以用于其他html标记)。 ```markup ``` > * 📖 [dir - HTML - MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) * [ ] **Alternate language:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 替代语言，指定网站的语言标签，并与当前页面的语言相关。 ```markup ``` * [ ] **Conditional comments:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 如果需要，IE将提供条件注释。 > - 📖 \[About conditional comments (Internet Explorer) - MSDN - Microsoft]\() * [ ] **RSS feed:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 如果你的项目是博客或有文章，则提供RSS链接。 * [ ] **CSS Critical:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) CSS critical(或"折叠以上")收集用于呈现页面可见部分的所有CSS。它嵌入在主CSS调用之前和``之间的一行中(缩小)。 > - 🛠 [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this. * [ ] **CSS order:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 在``中，所有CSS文件都要在JavaScript文件之前加载(除了有时JS文件在页面顶部异步加载)。 ### Social meta 可视化并自动生成带有[元标记](https://metatags.io/)的social 元标记。 ***Facebook OG*** 和 ***Twitter Cards*** 是的，对于任何网站，强烈推荐。如果你的目标用户是某个特定的用户，并且想要确保显示效果，可以考虑其他社交(social )媒体标签。 * [ ] **Facebook Open Graph:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 所有的Facebook Open Graph (OG)都经过测试，没有人出错或有虚假信息。图像至少需要600 x 315像素，但推荐1200 x 630像素。 > **注意：** 使用`og:image:width`和`og:image:height`将为爬虫指定图像的尺寸，这样爬虫就可以立即呈现图像，而不必异步下载和处理图像。 ```markup ``` > * 📖 [A Guide to Sharing for Webmasters](https://developers.facebook.com/docs/sharing/webmasters/) > * 📖 [Best Practices - Sharing](https://developers.facebook.com/docs/sharing/best-practices/) > * 🛠 Test your page with the [Facebook OG testing](https://developers.facebook.com/tools/debug/) * [ ] **Twitter Card:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) ```markup ``` * 📖 [Getting started with cards — Twitter Developers](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started) * 🛠 Test your page with the [Twitter card validator](https://cards-dev.twitter.com/validator) [**⬆ 返回顶部**](https://xiaohesong.gitbook.io/today-i-learn/front-end/pages/-LjYzGxAzDjMFL0tWHAJ#目录) ## HTML ### 最佳实践 * [ ] **HTML5 Semantic Elements:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) HTML5语义元素被适当地使用(header, section, footer, main...)。 > - 📖 [HTML Reference](http://htmlreference.io/) * [ ] **Error pages:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 存在错误的404和5xx页面。请记住，5xx错误页面需要集成它们的CSS(当前服务器上没有外部调用)。 * [ ] **Noopener:** ![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 如果使用`target="_blank"`的外部链接，那么你的链接应该具有`rel="noopener"`属性，以防止标签被阻止。如果你需要支持旧版本的火狐，使用`rel="noopener noreferrer"`。 > - 📖 [About rel=noopener](https://mathiasbynens.github.io/rel-noopener/) * [ ] **Clean up comments:** ![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 在将页面发送到生产环境之前，需要删除不必要的代码。 ### HTML testing * [ ] **W3C compliant:** ![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有页面都需要使用W3C验证器进行测试，以识别HTML代码中的可能问题。 > - 🛠 [W3C validator](https://validator.w3.org/) * [ ] **HTML Lint:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 我使用工具来帮助我分析HTML代码中可能出现的任何问题。 > - 🛠 [Dirty markup](https://dirtymarkup.com/) > - 🛠 [webhint](https://webhint.io/) * [ ] **Link checker:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 在我的页面中没有破坏性的link，验证下你是否有任何404错误。 > - 🛠 [W3C Link Checker](https://validator.w3.org/checklink) * [ ] **Adblockers test:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 你的网站会在启用广告拦截器的情况下正确显示你的内容（你可以提供一条消息，鼓励他们停用其广告拦截器）。 > - 📖 [Use AdBlocking in your Dev Environment](https://andreicioara.com/use-adblocking-in-your-dev-environment-48db500d9b86) [**⬆ 返回顶部**](https://xiaohesong.gitbook.io/today-i-learn/front-end/pages/-LjYzGxAzDjMFL0tWHAJ#目录) ## Webfonts > **注意：** 使用WebFonts可能导致非样式文本的闪烁/不可见文本的闪烁-考虑使用回退字体和/或使用WebFont加载器来控制行为。 > > * 📖 [Google Technical considerations about webfonts](https://developers.google.com/fonts/docs/technical_considerations) * [ ] **Webfont format:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 所有现代浏览器都支持WOFF、WOFF2和TTF。 > - 📖 [WOFF - Web Open Font Format - Caniuse](https://caniuse.com/#feat=woff). > - 📖 [WOFF 2.0 - Web Open Font Format - Caniuse](https://caniuse.com/#feat=woff2). > - 📖 [TTF/OTF - TrueType and OpenType font support](https://caniuse.com/#feat=ttf) > - 📖 [Using @font-face - CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/) * [ ] **Webfont size:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) Webfont大小不超过2 MB(包括所有变体)。 * [ ] **Webfont loader:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 使用webfont加载器控制加载行为 > - 🛠 [Typekit Web Font Loader](https://github.com/typekit/webfontloader) [**⬆ 返回顶部**](https://xiaohesong.gitbook.io/today-i-learn/front-end/pages/-LjYzGxAzDjMFL0tWHAJ#目录) ## CSS > **注意：** 看看大多数前端开发人员所遵循的[CSS指南](https://cssguidelin.es/)和[Sass指南](https://cssguidelin.es/)。如果你对CSS属性有疑问，可以访问[CSS Reference](http://cssreference.io/)。为了保持一致性，还有一个简短的[代码指南](https://codeguide.co/)。 * [ ] **Responsive Web Design:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 该网站采用响应式网页设计。 * [ ] **CSS Print:** [![Medium](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667)](https://camo.githubusercontent.com/fe06299a75485210174d7fb41564d7745079a060/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6d656469756d2e737667) 提供了一个打印样式表，并且在每个页面上都是正确的。 * [ ] **Preprocessors:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 你的项目使用的是CSS预处理器（例如 [Sass](http://sass-lang.com/), [Less](http://lesscss.org/), [Stylus](http://stylus-lang.com/)）。 * [ ] **Unique ID:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 如果使用ID，则它们对于页面是唯一的。 * [ ] **Reset CSS:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 使用CSS重置(重置、规范化或重新启动)并保持最新。*(如果您使用的是Bootstrap或Foundation之类的CSS框架，那么它已经包含了一个规范化。)* > - 📖 [Reset.css](https://meyerweb.com/eric/tools/css/reset/) > - 📖 [Normalize.css](https://necolas.github.io/normalize.css/) > - 📖 [Reboot](https://getbootstrap.com/docs/4.0/content/reboot/) * [ ] **JS prefix:** [![Low](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667)](https://camo.githubusercontent.com/97994efa72ec3580e63f0f74aeaa82ba22a1c276/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f6c6f772e737667) 所有类(或id——在JavaScript文件中使用)都以js-开头，并且CSS文件中对其进行样式处理。 > ```markup >

> >

> ``` * [ ] **embedded or inline CSS:** [![High](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667)](https://camo.githubusercontent.com/cda7a9277ac2a93a03fc87d6a100372d41b741a8/68747470733a2f2f66726f6e742d656e642d636865636b6c6973742e6e6f772e73682f686967682e737667) 不惜一切代价避免在`