![Front ‑ End_Checklist followed]( https://img.shields.io/badge/Front ‑ End_Checklist-followed-brightgreen.svg)
前端开发清单是一份在站点 /HTML 页面发布到生产环境之前需要测试的所有元素的详尽列表。
它基于前端开发人员多年的经验沉淀,以及其他优秀的开源清单。
在 Product Hunt 上投票或推荐来帮助前端开发清单的推广🌈。
前端开发清单中的所有项目都是大部分项目所必需的, 但某些元素可以省略或者并不是这么重要 (在管理 Web 应用程序的情况下,你可能并不需要 RSS 订阅源)。我们选择使用一下 3 级区分:
某些资源拥有特定的标识符,帮助你去理解清单上不同类型的内容或帮助。
注意: 你能在 HTML 文档的
<head>
中找到所有的清单列表。
<!-- Doctype HTML5 -->
<!doctype html>
接下来三个 meta 标签 (Charset, X-UA Compatible, Viewport) 需要首先在 head 中声明
<!-- 设置文档的字符编码 -->
<meta charset="utf-8">
X-UA-Compatible
元标签。<!-- 指示 Internet Explorer 使用其最新的渲染引擎 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
viewport
标签。<!-- 响应式网页设计 viewpoint 声明 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
title
(SEO:包括网站标题不超过 65 个字符)。<!-- 文档标题 -->
<title>Page Title less than 65 characters</title>
description
标签, 它是唯一的同时内容不能超过 150 个字符。<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">
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">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- 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>
rel="canonical"
以避免重复的内容。<!-- 帮助防止重复内容出现 -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">
<html lang="zh_cn">
direction
属性规定元素内容的文本方向。(可以在另一个 HTML 标签上使用)。<html dir="rtl">
<link rel="alternate" href="https://es.example.com/" hreflang="es">
CSS critical
收集并呈现当前页面可见部分的所有 CSS。在主要的 CSS 调用之前以单行(最小化)在<style></style>
中嵌入。强烈推荐***Facebook OG*** and ***Twitter Cards***。如果你针对某些特定的存在并希望确保显示,也可以考虑其他社交媒体标签。
<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">
- 📖 A Guide to Sharing for Webmasters
- 🛠 使用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">
📖 HTML 参考
[ ] Error pages: 404 页面和 5xx 错误的存在。5xx 错误页面需要集成其 CSS(在当前服务器上无外部调用)。
[ ] Noopener: 如果你使用外部链接target="_blank"
, 你的链接必须有个rel="noopener"
属性,防止制表符的隐藏。如果你需要兼容旧版本的火狐浏览器,请使用rel="noopener noreferrer"
。
[ ] Desktop Browsers: 所有页面都在桌面浏览器上通过测试(Safari, Firefox, Chrome, Internet Explorer, EDGE...)。
[ ] Mobile Browsers: 所有页面都在移动端浏览器上通过测试(Native browser, Chrome, Safari...).
[ ] 链接检查器: 页面中链接没有断开,请确认你没有 404 错误。
注意: 大部分前端开发人员都会看看CSS 指南和Sass 指南。如果你对 CSS 属性有疑问,可以访问CSS 参考文档.
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
[ ] 响应式网页设计: 所有页面都需要经过以下几种情况的测试: 320px, 768px, 1024px (根据自己的项目情况,可以设置更多)。
[ ] CSS 验证器: CSS 经过测试,同时所有错误都被修复。
🛠 CSS 验证器
注意: 想要完整的了解图像优化,可以在 Addy Osmani 查看免费电子书**图像优化基础**。
- 🛠 Imagemin
- 🛠 使用ImageOptim免费优化您的图像。
<img>
都需要设置高度和宽度(不要指定 px 和 %)。注意: 许多开发人员认为设置了宽度和高度就不能实现响应式设计,实际上并不是这样的。
<img>
必须有alt
属性来直观的描述图片。.min
后缀)。<html>
标签中添加 class。 1
Kimyx 2017-10-26 12:26:07 +08:00
呦呵
|
2
Kimyx 2017-10-26 12:26:20 +08:00 1
大拇指
|
3
saberlove 2017-10-26 12:52:16 +08:00
可惜 github 上不了
|
4
1759761439 2017-10-26 12:52:44 +08:00 via Android 1
666
|
5
liyj144 2017-10-26 12:55:50 +08:00 1
666+1
|
6
luo123qiu 2017-10-26 13:11:33 +08:00 1
耐死
|
7
oswuhan 2017-10-26 13:14:01 +08:00 1
摸头起码要个三五年吧
|
8
oswuhan 2017-10-26 13:14:26 +08:00
手误,摸透
|
9
Everyman 2017-10-26 13:18:10 +08:00 1
thanks
|
10
luoyuhui 2017-10-26 13:22:00 +08:00 1
已收藏
|
11
liyer 2017-10-26 13:33:58 +08:00 1
Doctype 是 HTML5 的属性?
|
12
Fx8m 2017-10-26 13:39:59 +08:00 1
已收藏!
|
14
acthtml 2017-10-26 13:41:45 +08:00 1
不错哦。
|
15
scys 2017-10-26 13:48:58 +08:00 1
好文章,这个做好这个基本入门。
|
16
yuxuan 2017-10-26 14:20:43 +08:00
👍 话说 我还真的以为那个返回顶部是能用的😂
|
18
wintersun 2017-10-26 14:30:58 +08:00 1
后台开发人员学习之,谢谢!
|
19
yangxiongguo 2017-10-26 16:07:19 +08:00 1
好文,即适合进阶,又能查缺补漏
|
20
SEARCHINGFREE 2017-10-26 16:51:27 +08:00 1
才知道 github 又能上了
|
21
hzw94 2017-10-26 16:53:54 +08:00 1
在学习前端,得收藏,thank
github 我这边能上 |
22
yao978318542 2017-10-26 17:01:37 +08:00
@SEARCHINGFREE #20 怎么可能 不存在的
|
23
WriteJob 2017-10-26 18:03:53 +08:00 1
点赞
|
24
caryqy 2017-10-26 21:06:09 +08:00 1
点赞
|
25
bhaltair 2017-10-26 22:18:24 +08:00 via iPhone 1
from v2-cli 😝
|
26
lingo 2017-10-26 23:30:16 +08:00 1
别的不说,排版真好看。
|
27
feibilanceon 2017-10-26 23:31:53 +08:00 1
辛苦了
|
28
Mexion 2017-10-26 23:47:49 +08:00 via iPhone 1
收藏下
|
29
Meli55a 2017-10-27 09:13:29 +08:00 1
马克!
|
31
datxiaoy 2017-10-27 09:27:08 +08:00 1
好,点个赞!
|
32
klren0312 2017-10-27 12:53:28 +08:00 1
赞一个!
|
33
mrcode 2017-10-27 15:53:02 +08:00
感谢翻译
|
34
Johnsen OP 🇨🇳
|