有较长一段时间没有写博客。去年发生了些变故，期间闲得无聊胡乱地涂了几篇，后来换工作一阵忙碌便没了时间。原计划要更新的内容是关于“树洞”项目，也因为换工作而搁置。不过，继续博客的征程也不太准备从项目着手，懂行的可以散场了。
在之前的“Web瞎捣鼓”系列文章已经对前端的基础知识做过总结，从应用层上讲，前端也就那么回事。为什么还要再次提到这基础中的基础呢？这事儿得从面试说起。
先说说我之前的面试吧，面试官大多数时候问的是基础问题，说来惭愧，上了岁数有些东西的确记不太清楚。有些东西越细致越不嫌细致，相信许多程序员像我一样，会写不会说。话说回来，我还没遇上问这么基础的面试官，笔试倒是遇到过。对于有经验的从业者来说，笔试本身是一件烦人的事，试题中还有一些特没意义的题存在就更加烦人。之前我还不太理解，程序到底是笔写出来的还是键盘敲出来的，也没拿我当人啊？所以我的处理方式比较极端，现在我算是有些明白了。
早在两个月前公司有人离职，于是开始筹备招人顶上去，接连一个月收到不少简历。不过，看到这些简历实在有些“惨不忍睹”：不少人将项目的功能需求当做项目经验且对技术层只字不提，还有人将前端的日常工作写入项目成绩，更有甚者直接贴了一个项目地址。不得不吐槽一下，不管作为技术层还是产品层，有几个人关注项目的需求。至于成绩，哪怕是写收获也可以理解，前端日常对接有啥可嘚瑟。对于贴项目地址的我就彻底醉了，搞得不像是应聘技术而是销售，最搞不懂的里边还有管理系统地址。
提及此事，不免啰嗦了几句。正所谓，好的不愿来，差的不想要。这一来二去，一个多月硬是没招上人来。后来，项目紧急必须要上人，我想只要有工作经验再差也能保底。于是，我就从面试者中相对还算可以的人选中挑了两个人出来，再差写写官网应该没问题吧。有个词儿叫宁缺毋滥，用来描述接下来的事再确切不过。
实话实讲，挑选的面试者都是有项目经验的，所以我基本上不问那些基础中的基础。虽说问的也都较为基础，但也是实战中经常遇到的东西。从面试结果来看，进入待定的人选项目经验基本上都在三年以上，这是我没想到的。最后入职的两位在三年左右，然而从最后做项目来看，实在差强人意。我让两人负责了官网的一部分功能，其中一位问题立马出在CSS上，一个简单的Grid排列的数据列表，硬生生让他排成了一排。而另位则出在JavaScript上，后端返回的数据需要分割成数组，他愣是不会，更可气的是度娘也懒得问。
我很郁闷，我实在想不通，三年都干嘛去了？由此我明白了三个道理：第一，如果急需熟手不能要半路转行的，在别的行当越久越不能用；第二，不论事情多紧急，事急可以从权，但不能将就；第三，不论十年二十年经验，总有人在混年岁，不能靠我认为应该。
于是，我在接着写博客的时候，决定理一理这些基础中的基础，以便以后再面试也能分出个子丑寅卯来。之前的博客也只是顺手提了一笔，大部分笔墨用在闲扯。现在看来，哪怕是再简单，也要耗费些时间整理一下知识点。
HTML
HTML实属太简单，作为一个有经验的开发，单独拎出来讲的确没有太多的知识点。所以我换了个思路，刷面试题，从别人面试的问题来追溯源头。当然，我不会去挑那些特别无聊的问题，比如表单的属性有哪些。如果面试官问我这个，我只能给他国际通用手势。标签的属性能记住自然是好的，记不住但能在遇到相关功能的时候能够想起有那么个东东也很不错了。那么多标签那么多属性，都要记住，是面试官疯了，还是我没脑子？关于语法自行查看MDN（传送门）、HTML标准（传送门）。
出现频率最高就是HTML语义化。顾名思义，所用的标签名即所代表意义。这是开发者肉眼所能见到的，好处不言而喻：文档结构清晰代码可读性强，便于团队开发和维护；当某些时候网络速度极差的时候，CSS加载缓慢，对用网站用户体验也是极好的。这是肉眼所能看见的，另外是肉眼所不能见的机器阅读。良好的语义更适合搜索引擎爬取到有效信息利于SEO，除此之外，对于读屏幕软件之类也有很好的支持。
提到语义化不由得想到<template>标签，这很容易让人联想到vue组件里面经常会用到它，这是一个正经的HTML标签（传送门）。作用就是保存内容，在加载页面是不会呈现，运行时通过JavaScript实例化。
The <template> HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the <template> element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
为什么单独说这个标签？我之前听一个同事说，她到公司的时候写代码都是按语义化进行编码，结果有个前辈说她那个不规范。这是我听过最好笑的行业内部笑话，真实的存在，这只是笑话的一部分。后面会提到的SCSS，我那同事用了mixin写法，那个所谓的前辈说看不懂，让她改回去，无知者无畏。回到主题，由此可见，有人已经将全代码用<div>囊括不是什么新鲜事。连简单的跳转都用div+JS，舍不得用<a>,更别说其他。若不是像Form表单之流实在没办法用div，估计满屏压根儿看不到语义化。标准已经提供的功能且是如此，自定义标签可见一斑。
其余的就不再多做赘述，比如HTML5新增哪些标签废除了哪些标签，<b>和<strong>、<i>和<em>的区别等等。我认为比较重要的地方先在文章中提出，其余的加一个篇幅专供搜集各种面试题进行长期更新，先在这儿留一个入口（传送门）吧。当然，里面不会将一些太过基础的东西放进去，比如HTML标签属性，等同于文档就太过了。
CSS
在现代浏览器中CSS的兼容性已经足够好，不似IE时代，大量div布局其实也和IE有大关系。而今微软几乎也放弃了IE，新产品Edge采用chromium内核，并且win7系统搭载的IE版本的兼容性比早期的版本友善太多。更何况，微软已经在2019年1月15日宣布于2020年1月14日停止对win7进行安全更新支持。也就是说Edge作为了主角，它是会被推送更新的，而IE则退居到了幕后，这对前端无疑是个好消息。由于CSS3对各大厂浏览器的兼容做了规范的命名标准，前端开发上又有了各种前缀补全的插件，我们从此更加注重的是业务逻辑。
和HTML一样，CSS并不是什么复杂的玩意儿，要说不复杂也有复杂的时候。比如外边距折叠，两个盒子上一个使用margin-bottom，下一个盒子向上使用margin-top，结果边距达不到想要的间隙值。还有的时候使用了float，没有清除，导致后面的内容被遮盖。对于一个刚入行或者压根儿没有自己写过静态样式的人来说，出了问题便不知所措。对于以前做过小前端的同学给他们解决这个麻烦的时候也很迷茫，因为大家都在日常编码的时候不自觉地绕过了这些问题。关于这些问题，MDN上有详细的说明，看完之后面对现代浏览器，几乎没什么复杂的问题。并不是说只有新手值得看，在技术不断革新的现在，时而翻翻也是受益无穷。不久前，我见过有个从业有三四年的前端清除浮动还是在用以前的写法，在浮动元素下新建一个空div加上样式clear:both。:after已经兼容性很好了，还写这种废代码，实在不应该。
对于新人还喜欢干的一件事儿就是使用定位absolute，或许使用其他方式一样可以达到目的。举个例子，一个新闻标题栏，标题在左“更多”在右，有人就用绝对定位来控制“更多”。我做毕业设计的时候就这么干过，因为用不好浮动，最后用的绝对定位来解决。对于而今的浏览器已经不太在意这些细节，毕竟性能损伤细微无伤大雅。不过，往深处想，是不是还有其他方面，我们也没太在意。比如在nth-child支持不太友好的时候，我们要做一个新闻列表，列表以底线分割，最后一根线不需要。是不是有不少人用JS来处理的？其实不用，两个框加margin搞定，外框负责隐藏，内框负责用margin定位，margin-bottom值为负数。这里推荐一位大佬（传送门），对CSS的实际应用讲解非常不错，我就暂时不做搬运工了。
除了对CSS属性的理解及应用是一大难点外，有些概念也是理解上比较困难，比如基础盒子模型、视觉格式化模型、层叠上下文、块格式化上下文、可替换元素等等。除此之外，还有些难度的是伪类和伪元素，应用范围较广。它们大都只是概念理解上比较麻烦，应用层上其实没多大影响，只是在面试的过程中通常会涉及这些概念。另外，有些东西在之前的文章也有涉及，这里就不再做赘述。
最后值得一提布局模式：表格布局、定位布局、块布局、行内布局、网格布局、弹性盒子布局。这里的布局模式不等同于Web设计，它主要定义的是一种基于盒子与其兄弟和祖辈盒子的交互方式来确定盒子的位置和大小的算法。Web设计模式是将这些布局模式的混合使用，是在各种设备上呈现，这个单独用一篇文章来记录，留一个入口（传送门）。关于布局模式在现代浏览器十分常见：弹性盒子布局和网格布局。推荐阅读，阮一峰老师的相关文章：《CSS Grid 网格布局教程》、《Flex 布局教程：语法篇》、《Flex 布局教程：实例篇》。
从MDN的CSS属性看，里面有不少是实验性的。比如:has()，它可能会出现在下一个标准之中。它的出现可以减少一些不必要JS代码，想这样的还有很多，有些已经被浏览器实现，有兴趣的可以进入了解一下。
此外，如同HTML，这儿留下一个关于CSS面试题的整合入口（传送门）。
最后
原计划在这一篇文章将整个HTML和CSS所涉及的东西拉通到一起，展开后才发现涉及的东西一个篇幅完全不行，先把坑儿留下后面慢慢填。关于预编译样式，这个是工程化的产物，这不知道猴年马月才到这儿。HTML和CSS面试题会比较快，毕竟不用动脑子去想写什么。