有較長一段時間沒有寫博客。去年發生了些變故，期間閒得無聊胡亂地塗了幾篇，後來換工作一陣忙碌便沒了時間。原計劃要更新的內容是關於“樹洞”項目，也因爲換工作而擱置。不過，繼續博客的征程也不太準備從項目着手，懂行的可以散場了。
在之前的“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面試題會比較快，畢竟不用動腦子去想寫什麼。