本文首发于2019年1月27日,更新于2019年5月27日(HTML部分完结)。
因为今日在知乎上看到一个有关大牛Winter开设《重学前端》培训课的问题,而知乎前端大牛大漠写了篇《聊聊重学前端》的博文
《重学前端》课程我是没有购买的,因为大部分内容已经了解,购买的性价不不高。
本文是对《聊聊〈重学前端〉》的读后感,同时尽力记录和解答其中出现的问题。

HTML部分

HTML语义:只用divspan是不是就够了?
一般来说<div>是最常用的块级元素,而<span>是最常用的行内元素,只用这两个可以构建出网页,但是网页不具备语义化;
HTML5引入了语义化标签,可以看思否上的一篇文章的介绍;
具体来说,语义化标签具备特殊的默认样式,可以在CSS丢失的时候保持独有的样式;且具备特殊的语义,虽然最终由浏览器渲染成相同的界面,从视觉上看起来一样,但是可以被搜索引擎和辅助功能识别出来,方便SEO;
常用的语义化标签有:<nav><article><sections><aside><footer><main><header>

HTML语义:一篇wiki文章究竟会用到哪些语义元素?
MDN上有HTML5所有标签的列表
以维基百科为例,维基百科对HTML标签的使用比较充分,比百度百科更有代表性;
这一步可以实战,以苏州市的百科页面为例(维基百科有可能上不去,需要VPN),进入后可以看到页面格式比较复杂,此时可以使用JS代码来提取所有标签名,按F12打开Console命令行,输入这段代码可以提取出所有HTML标签名:

1
[...new Set(Array.from(document.all, t=>t.tagName))].join(',')

原理是通过document.all获取所有的节点的伪数组,并通过Array.from( )转化为真数组并只保留标签名,然后new Set( )去重,最后使用...[]转化成数组,并使用.join( )输出。目前暂时想不出更好的解决方式。
输出结果如下:

可以看到wiki使用了这些不常见的标签:
<sup><sub>:分别表示上标、下标,例如百科中的引用数字标号要用上标;
<ruby><rt><rp>:用于表示注音,它内部使用<rt>标签包裹注音的音标;<rp>标签可以包裹括号等注释符号,它一般不会显示,只用于在浏览器不支持的时候提供回退样式;
<blockquote>:引用其他来源的内容;
<cite>:作品的标题;
<q>:内联的引用;
<abbr>:表示省略或者缩写,这个标签带有title这个属性表示完整的内容;
<dl><dt><dd>:分别表示术语列表、术语标题、术语定义,一般用<dl>包裹后面两个标签;
<s>:不准确或者不相关内容;
<wbr>:建议换行。

另外有的维基页面有更多这种特殊的标签,限于篇幅这里写不下了,具体可以看这篇学习笔记,带有图片注解的。

文档元信息:你知道head里一共能写哪几种标签吗?
按照HTML规范<head>里面只能放置:<meta><title><base><style><link><script><noscript>
其中:
<title>是标题,HTML规范规定必须有标题;
<base>用于指定页面中链接的基URL,以前写JSP站点有用到;
<noscript>用于在浏览器禁用或不支持JS时候显示的内容;
<style>可以写页面内联的CSS;
<script>可用于加载引用URL的JS或是内联的JS;
<link>规定了外部文档与当前页面的关系,一般用于链接CSS样式表、网页图标,取决于rel属性;
<meta>表示文档元数据,这个比较复杂,涉及到客户端(浏览器、爬虫等都算客户单)行为,建议查阅MDN文档

下面列出几个常用的<meta>标签:
<meta charset="utf-8">指定页面编码方式;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">避免IE使用兼容模式;
<meta name="renderer" content="webkit">启用360浏览器的极速模式;
<meta name="keywords" content="">SEO用的关键字;
<meta name="description" content="">SEO用的网页描述;
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />参阅视口设置

链接:除了<a>标签,还有标签叫链接?
从超链接这方面来说,除了<a>用做链接外,还可以用任意标签添加click事件,以调用window.open(url)的方式实现打开新页面,或是以调用location.href=url的方式跳转到新页面;
从标签功能上来说,可能指的是<link>标签或是<area>,它用于引用其他文档,具体可以参考相关MDN文档

嵌入型元素:怎么link一个CSS要用href,而引入JS要用src呢?
可以参照知乎上的这个问题下的答案。
如果有读过张鑫旭的《CSS揭秘》,可以了解到类似于<img><script>这种带有src属性的标签是替换元素
替换元素只要资源加载成功,浏览器会直接把整个标签的内容变成加载的资源。HTML规范内也有说明,<script>标签如果指定了src,那么标签内的JS代码不会被执行;
HTML设计时即把CSS视为网页的附属资源,甚至存在可以切换的情况(使用alternate),因此CSS设计成link的方式加载。
(说了这么多,实际上本质还是一个历史设计遗留问题。)

HTML标签:标签总结
速查可以参考一篇简书文章或者MDN所有标签文档
追求严谨,可以查阅MDN的HTML元素参考HTML属性参考
这里可以举几个HTML标签的通用规范:
HTML属性不一定非得用引号包起来,规范有写,但是为了符合惯例和团队规约,一般是要写出来的;
空元素闭合不需要斜杠结尾,例如<img src="1.jpg"><hr>
所有标签都可以带有这些属性:classnameiddata-*title等,具体可以查阅上面的属性参考。

HTML语言:dtd到底是什么?
DTD又称文档类型定义,用于规范XML文件的。因为HTML也是一种XML,所以也可以使用DTD来约束;
因为DTD较复杂,难以使用,已经被XML Schema取代,两者比较
DTD语法较为复杂,规定了XML的元素、属性、嵌套方式、数据类型、数据验证等,甚至还规定了排列顺序。

ARIA:可访问性不止是给盲人用户的特性
参考大漠的一篇文章(推荐)以及MDN文档
ARIA是的用法包括2个属性:aria-*属性以及role属性,它可以为HTML元素提供额外的属性和描述,功能十分强大,不只是给残障用户准备的。
aria-*role支持多种值和组合,实现方式复杂,常与其他元素相关联,这里不作赘述。

CSS部分

媒体、分页、视口:除了属性和选择器,你还要知道这些带@的规则
选择器:为什么只有子元素选择器,没有父元素选择器
布局正常流:其实从毕升开始,你们就在用正常流
布局弹性盒:垂直居中为什么这么难?
文本:baseline到底是啥东西?
颜色与形状:CSS是如何绘制颜色与形状的?
动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
CSS属性:CSS总结

Javascript部分

类型:关于类型,有哪些你忽视的细节
对象:JavaScript是面向对象还是基于对象?
对象:JavaScript中,我们真的需要模拟类吗?
函数:this有什么用?应该怎么用?
函数:JavaScript里的闭包到底要怎么用?适合用在哪里?
事件循环与微任务:Promise里的代码为什么比setTimeout先执行?
语句:try里面放returnfinally还会执行吗?
语句:为什么12.toString会报错?
运算符与表达式:新加入的``运算符,好像有哪里不一样? 语句,程序与表达式:在script标签里写export为什么会抛错? 分号自动补全:到底要不要写分号呢?**

浏览器实现原理与原生API

浏览器的工作原理:你最熟悉的浏览器,是怎么写出来的?
DOM:如何用JS操作文档?
CSSOM:如何获取一个元素的准确位置?
事件:捕获模型和冒泡模型到底是怎么来的?
其它一些API:API总集合

前端综合应用

性能:前端性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,怎么保证基本质量?
搭建系统:大量的低价值需求如何应付?
架构与基础库:如何设计基础库?