聊聊《重学前端》

先来看个大纲

整个系列包含三个部分，即构建Web应用程序或页面要用的最基本的三部分：HTML、CSS和JavaScript。

HTML部分

HTML语义：只用和是不是就够了？

HTML语义：一篇wiki文章究竟会用到哪些语义元素？

文档元信息：你知道里一共能写哪几种标签吗？

链接：除了标签，还有标签叫链接？

嵌入型元素：怎么一个CSS要用，而引入JS要用呢？

HTML标签：标签总结

HTML语言：到底是什么？

ARIA：可访问性不止是给盲人用户的特性

初看了一下提纲中的八个部分。细思了一下，原本自以为相对了解HTML的我，有几点还是不敢肯定、准确的说出答案。那么从我自己的角度来看这几点。

HTML语义化

早期的前端开发者都会比较在意和注重这方面。随着时代的迁移，其实有很多同学开始不太在意这方面的细节。因此在很多网站通篇的只能看到这样的标签元素。但事实上，像和这样的标签元素是没有任何语义化的，他们仅仅是只被运用于布局上。而且在任何浏览器中，都无法使用键盘让其获得焦点，另外也可访问性API也无法进行任何通信。事实上，构建一个具有语义化的页面或应用程序，我们除了使用具有语义化的HTML标签之外，还需要在结构做一些考量，比如说，、、、、和标签，应该放在什么位置，应该在什么地方使用它们。

在我的认知里，一个具有语义化的页面是要经得起HTML标记验证服务的验证。另外还有一种更土的方式，那就是当你的Web页面在CSS裸奔的时候，结构清晰，而且不会影响用户对网站的浏览。更为高层次的呢？

写出来的HTML结构要让机器可以读懂，也要能让人可以读懂！

有关于HTML语义化相关的讨论也较多，其中 @E0 大大在知乎上的回答就很详细。有关于其他的讨论和文章，要是感兴趣的话，可以阅读下面的几篇文章：

The practical value of semantic HTML

Semantics in HTML 5

semantic html

Semantic HTML

Accessibility Through Semantic HTML

Let’s Talk about Semantics

能放些什么标签

标签是所有文档元素的容器，它包含了文档的全部信息。常见的信息主要包括：、、、、、和等标签。而其中的信息量是最大的。比如：

有关于标签更详细的介绍可以阅读：

Meta 标签与搜索引擎优化

meta 标签大全

HTML Meta标签知多少

HTML Tags for SEO: to use or not to use?

Complete list of html meta tags/

链接：除了标签，还有标签叫链接？

这个话题我比较期待。在HTML中除了标签，还有什么标签叫链接？在我的印象中，标签有点类似于标签，可以做链接跳转。但是不是这个答案，我将期待着。

怎么一个CSS要用，而引入JS要用呢？

这个问题真没有细想过。前段时间刚好在哪翻到过这方面的讨论，可以找不到答案了。不过在stackoverflow网站上也有一个类似的问题。看了一个点赞较高的答案：

简单点说，使用表达的是该无事的内容可以被替换，比如、、元素；表达的是超链接，与引用文档或外部资源建立关系，比如，等元素。

其他

另外几条，相对而言接触的比较多。特别是ARIA相关的方面。有关于ARIA相关的东西，在24 Accessibility网站有很多话题。另外在Web内容无障碍指南 2.0是ARIA方面最新的规范指南。

CSS部分

媒体、分页、视口：除了属性和选择器，你还要知道这些带的规则

选择器：为什么只有子元素选择器，没有父元素选择器

布局正常流：其实从毕升开始，你们就在用正常流

布局弹性盒：垂直居中为什么这么难？

文本：到底是啥东西？

颜色与形状：CSS是如何绘制颜色与形状的？

动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？

CSS属性：CSS总结

对于CSS部分而言，自己相对接触的比较多一点，如果要把CSS方面的东西讲全，那足可以讲好久，甚至花一本书的章节来介绍，都不一定难阐述的完。简单的列了一个大纲，差不多有26章节的内容可聊。自己也在根据这个大纲完善内容。相比之下，我在完善的内容是怎么使用CSS，而@winter大大在聊的是为什么？比如其中：

选择器：为什么只有子元素选择器，没有父元素选择器

布局弹性盒：垂直居中为什么这么难？

文本：到底是啥东西？

颜色与形状：CSS是如何绘制颜色与形状的？

动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？

上述几个问题？好几个都不知道是为什么？正好跟着大大的思路学习一下，大神是如何深入理解这些。这将为我以后深入学习CSS将会有很大的帮助。对于贝塞尔曲线和颜色，向大家推荐一篇文章，介绍的非常详细：

Bezier Curves from the Ground Up

Color: From Hexcodes to Eyeballs

JavaScript

类型：关于类型，有哪些你忽视的细节

对象：JavaScript是面向对象还是基于对象

对象：JavaScript中，我们真的需要模拟类吗

函数：有什么用？应该怎么用？

函数：JavaScript里的闭包到底要怎么用？适合用在哪里？

事件循环与微任务：里的代码为什么比先执行

语句：里面放，还会执行吗

语句：为什么会报错

运算符与表达式：新加入的运算符，好像有哪里不一样

语句，程序与表达式：在标签里写为什么会抛错

分号自动补全：到底要不要写分号呢

对于JavaScript部分，一直是我的弱项，今年立个flag，希望能跟着把这方面的知识增强一些。

浏览器实现原与API

很早温大就跟我说，要好好把浏览器的原理方面的知识理解透，这将有益学习和理解一些深层次的东西。但一直以来没有进展。这次专栏中提到了：

浏览器的工作原理：你最熟悉的浏览器，是怎么写出来的（上）

浏览器的工作原理：你最熟悉的浏览器，是怎么写出来的（中）

浏览器的工作原理：你最熟悉的浏览器，是怎么写出来的（下）

DOM：如何用JS操作文档

CSSOM：如何获取一个元素的准确位置

事件：捕获模型和冒泡模型到底是怎么来的

其它一些API：API总集合

有关于浏览器原理相关的文章，在互联网上也相当的多，其中有几篇文章我觉得还是不错的，值得推荐给大家：

浏览器的渲染原理简介

图解浏览器的工作原理

浏览器的工作原理：新式网络浏览器幕后揭秘

要Google开发者网站上，2018年@Mariko Kosaka也推出了四篇文章，深入的介绍了浏览器的工作原理：

Inside look at modern web browser (part 1)【译文】

Inside look at modern web browser (part 2)【译文】

Inside look at modern web browser (part 3)【译文】

Inside look at modern web browser (part 4)

对于DOM和CSSOM，在18年还是花了不少时间在学习，其中还是有不少的收获，但我想听完这个课之后，再回过头来对比之前学习的笔记，我想也会有较大的收获吧。

前端综合应用

性能：前端性能到底对业务数据有多大的影响

工具链：什么样的工具链才能提升团队效率

持续集成：几十个前端一起工作，怎么保证基本质量

搭建系统：大量的低价值需求如何应付

架构与基础库： 如何设计基础库

这是专栏的第四部分，我也很感兴趣。期待专栏也早点出来，估计很多同学都对这一部分很感兴趣的吧。有关于性能方面的，我也推荐几篇文章：

Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]

前端性能优化の备忘录（2018版）

前端性能优化の备忘录(2017版)

最后说一点

不少同学在说：

购买，这个课程是在交智商税

就此问题，@winter也针对性的做了阐述。感兴趣的可以点击这里。我只想说，智者见知，仁者见仁。

也有不少同学在说：

这个专栏的内容太简单了。

对而我言，虽然”很基础“，但我还有很多都不知道，特别是其中的为什么？就拿我擅长的CSS来说吧，大纲中的八个，我就有一大半不知道为什么？这就是与大神的差距。

另外，我记得前段时间在Hacker News上提出这样的一个问题”Stop Learning Frameworks“。平时也有同学问我，应该不应该去学习JS框架。其实就我个人而言，我更强调先把基础学好，如果工作是要用到框架，可以边学边用，但对于基础还是要扎实一点。

不扯了，如果大家觉得这个课程不错，可以入手：