<commit_before># 成为高级前端，必知必会的知识点和技能
前端会写简单页面后，应该学哪些什么呢？前端的知识多如牛毛。如果没有目的的学，学着学着就迷失了。我从2011年开始接触前端，后来一直从事前端开发，到现在(2020年)也有10年了。做为一个算比较有经验的前端，我来分享一些要成为高级前端，必知必会的知识和技能。

# 知识点
## 熟悉W3C标准
在找工作的时候，大家经常看到招聘信息有一条：“熟悉W3C标准”。什么是W3C标准？
> W3C标准是W3C(万维网联盟,World Wide Web Consortium) 制定的一系列Web技术标准。标准包括：语义Web, SVG, CSS, WOFF, 及XML和各类APIs。

W3C标准的目标是为各类应用的开发打造一个开放的Web平台。

W3C相关链接:
* [W3C-中国 官网](http://www.chinaw3c.org/standards.html)
* [W3C 所有的标准和草案](https://www.w3.org/TR/?status=rec)
* [W3C重点报告（2018年10月版）](https://www.w3.org/2018/10/w3c-highlights/cn.Overview.html)
* [W3C HTML标准验证工具](https://validator.w3.org/unicorn/) 用来检查页面是否满足W3C标准。

还有个制定Web规范的组织叫[WHATWG](https://whatwg.org/)(Web Hypertext Application Technology Working Group)。

W3C曾意图放弃HTML，发展XML。WHATWG从2004年起，就开始力推HTML标准。直到2007年W3C才接受WHATWG的HTML5标准。虽然此后两个组织名义上是在一起工作，其实暗地里有很大的分歧。

WHATWG相关链接：
* [HTML Living Standard](https://html.spec.whatwg.org/multipage/)
* [WHATWG HTML标准验证工具](https://whatwg.org/validator/)

需要熟悉W3C标准的原因：
* 有利于写出高质量的代码。规范中，有很多技术使用的最佳实践，值得参考学习。
* 有利于拓展自己的Web知识的广度，提高解决问题的能力。

## HTML
### 能写符合W3C标准的HTML
W3C标准关于HTML的内容很长，这边列几个我觉得重要的：
* HTML文档必须有文档类型定义(DTD)。规范推荐使用:`<!DOCTYPE html>`。
* 所有标签中的字母必须是小写字母。
* 标签属性值用双引号包起来。
* 标签必须闭合。自闭合标签，以 / 闭合标签，如 `<input type="text" />`。
* 自定义属性名，以 `data-` 开头。
* img 标签的 alt 属性必填。图片加载失败时，会显示 alt 属性的值。

可以用[HTML标准验证工具](https://validator.w3.org/unicorn/)检查，HTML 是否符合W3C标准。

### 能熟练使用语义化(Semantic)标签
标签语义化(Semantic)指根据内容的语义，去选择与之匹配的标签。
图片

使用语义化标签的原因：
1. 有利于开发者维护代码。语义化标签能提升代码的可读性，让开发者更快找到目标代码。
2. 有利于SEO。爬虫通过语义化标签，能抓取更多页面的信息。

常用的语义化标签有：header, footer, aside, article, section, hgroup, h1\~h6, nav, strong, small。推荐通读下[HTML Living Standard](https://html.spec.whatwg.org/multipage/)。

尽量不用 div 和 span 这2个没有实际意义的标签。

### 了解文档类型定义(DTD)和渲染模式
浏览器根据文档类型定义来决定该用何种渲染模式来渲染页面。文档类型定义写在HTML的第一行，如:
```
<!DOCTYPE html>
```

渲染模式指渲染页面的方式。出现渲染模式的目的的为了兼容一些老旧（不符合w3c标准）的的页面。浏览器中有三种渲染模式: 怪癖模式（quirks mode），接近标准模式（almost standards mode）和标准模式（standards mode）。不同渲染模式介绍见[怪异模式和标准模式(MDN)](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。



## CSS
flex，POS，响应式布局，rem，媒体查询

## jQuery

## 熟练使用一个框架
模板的循环
绑定事件

## 构建工具
npm，webpack

# 技能
## 决策的能力
什么重要，什么不重要。选什么框架，什么技术栈，对新知识敏感，

## 独立解决问题的能力


## 学习能力<commit_msg>enchance<commit_after># 成为高级前端，必知必会的知识点和技能
前端会写简单页面后，应该学哪些什么呢？前端的知识多如牛毛。如果没有目的的学，学着学着就迷失了。我从2011年开始接触前端，后来一直从事前端开发，到现在(2020年)也有10年了。做为一个算比较有经验的前端，我来分享一些要成为高级前端，必知必会的知识和技能。

# 知识点
## 熟悉W3C标准
在找工作的时候，大家经常看到招聘信息有一条：“熟悉W3C标准”。什么是W3C标准？
> W3C标准是W3C(万维网联盟,World Wide Web Consortium) 制定的一系列Web技术标准。标准包括：语义Web, SVG, CSS, WOFF, 及XML和各类APIs。

W3C标准的目标是为各类应用的开发打造一个开放的Web平台。

W3C相关链接:
* [W3C-中国 官网](http://www.chinaw3c.org/standards.html)
* [W3C 所有的标准和草案](https://www.w3.org/TR/?status=rec)
* [W3C重点报告（2018年10月版）](https://www.w3.org/2018/10/w3c-highlights/cn.Overview.html)
* [W3C HTML标准验证工具](https://validator.w3.org/unicorn/) 用来检查页面是否满足W3C标准。

还有个制定Web规范的组织叫[WHATWG](https://whatwg.org/)(Web Hypertext Application Technology Working Group)。

W3C曾意图放弃HTML，发展XML。WHATWG从2004年起，就开始力推HTML标准。直到2007年W3C才接受WHATWG的HTML5标准。虽然此后两个组织名义上是在一起工作，其实暗地里有很大的分歧。

WHATWG相关链接：
* [HTML Living Standard](https://html.spec.whatwg.org/multipage/)
* [WHATWG HTML标准验证工具](https://whatwg.org/validator/)

需要熟悉W3C标准的原因：
* 有利于写出高质量的代码。规范中，有很多技术使用的最佳实践，值得参考学习。
* 有利于拓展自己的Web知识的广度，提高解决问题的能力。

## HTML
### 能写符合W3C标准的HTML
W3C标准关于HTML的内容很长，这边列几个我觉得重要的：
* HTML文档必须有文档类型定义(DTD)。规范推荐使用:`<!DOCTYPE html>`。
* 标签中的字母必须是小写字母。
* 标签必须闭合。自闭合标签，以 / 闭合标签，如 `<input type="text" />`。
* 标签属性值用双引号包起来。
* 属性名称中的字母必须是小写字母。
* 自定义属性名，以 `data-` 开头。
* img 标签的 alt 属性必填。图片加载失败时，会显示 alt 属性的值。

可以用[HTML标准验证工具](https://validator.w3.org/unicorn/)检查，HTML 是否符合W3C标准。

### 能熟练使用语义化(Semantic)标签
标签语义化(Semantic)指根据内容的语义，去选择与之匹配的标签。
图片

使用语义化标签的原因：
1. 有利于开发者维护代码。语义化标签能提升代码的可读性，让开发者更快找到目标代码。
2. 有利于SEO。爬虫通过语义化标签，能抓取更多页面的信息。

常用的语义化标签有：header, footer, aside, article, section, hgroup, h1\~h6, nav, strong, small。推荐通读下[HTML Living Standard](https://html.spec.whatwg.org/multipage/)。

尽量不用 div 和 span 这2个没有实际意义的标签。

### 了解文档类型定义(DTD)和渲染模式
浏览器根据文档类型定义来决定该用何种渲染模式来渲染页面。文档类型定义写在HTML的第一行，如:
```
<!DOCTYPE html>
```

渲染模式指渲染页面的方式。出现渲染模式的目的的为了兼容一些老旧（不符合w3c标准）的的页面。浏览器中有三种渲染模式: 怪癖模式（quirks mode），接近标准模式（almost standards mode）和标准模式（standards mode）。不同渲染模式介绍见[怪异模式和标准模式(MDN)](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。



## CSS
### 布局技术
Flex，POS，响应式布局，rem，媒体查询

### 效果类
动画，渐变，

## JavaScript
### 熟悉ES6， ES7

### 熟悉数据类型的方法

### 掌握闭包
闭包常常出现在高阶函数数中。

可以用闭包来实现私有变量。

柯里化(Curry)

### 熟悉继承
JavaScript 是基于原型的继承。当

### 掌握 this 的用法
this 在 JavaScript 指函数的调用者。新手常常 this 指

### Canvas

## jQuery

## 熟练使用一个框架
模板的循环
绑定事件
自定义组件
组件间的通信
路由
状态管理。

## 构建工具
npm，webpack

## HTTP 知识


## 了解一些优秀的框架
underscore, lodash

# 技能

## 解决问题的能力


## 学习的能力

## 决策的能力
什么重要，什么不重要。选什么框架，什么技术栈，对新知识敏感，
{'fraction_non_alphanumeric': 0.1479215024266723, 'fraction_numerical': 0.02616585777590209, 'mean_word_length': 7.681318681318682, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 11, 'https://': 18, 'lorem ipsum': 0, 'www.': 6, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6465409', 'n_tokens_mistral': 3472, 'n_tokens_neox': 3941, 'n_words': 257}