摘要：前言鑒于平時業(yè)務(wù)代碼寫多了，筆者對前端的一些基礎(chǔ)知識都開始生疏。同理，對于而言，的標(biāo)簽也是具有容器含義的，譬如標(biāo)簽顧名思義就是尾部標(biāo)簽，存放內(nèi)容的結(jié)尾塊，標(biāo)簽表示頭部。

鑒于平時業(yè)務(wù)代碼寫多了，筆者對前端的一些基礎(chǔ)知識都開始生疏。有鑒于此，加上又到了一年一度的春招時間，在接下來的一段時間內(nèi)筆者將對整個前端體系的知識進(jìn)行一些梳理，同時會附帶上相關(guān)基礎(chǔ)知識中常見的面試題。在筆者復(fù)習(xí)的同時也希望能給準(zhǔn)備春招的前端同學(xué)們提供一點點資料，共勉。

如代碼所現(xiàn)，一般來講，一段基礎(chǔ)的HTML結(jié)構(gòu)主要由兩大部分組成

head

body

head主要存放的是頁面的相關(guān)信息，比如場景的title標(biāo)簽，meta信息標(biāo)簽、style樣式等。

body顧名思義就是身體主軀干的意思，頁面所呈現(xiàn)的素材內(nèi)容，就是存放在body里面，我們見到的頁面內(nèi)容，都來自body。

html5頭部的第一句是文檔聲明，該聲明的作用是告訴瀏覽器用什么文檔標(biāo)準(zhǔn)解析HTML文檔，DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。目前我們見到的大部分頁面都是HTML5標(biāo)準(zhǔn)文檔。
HTML5 不基于 SGML，因此不需要對DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）；

HTML4.01基于SGML, 所以需要對DTD進(jìn)行引用，其開頭的第一行是一個獨立的文檔聲明，才能告知瀏覽器文檔所使用的文檔類型。

(SGML：SGML是國際上定義電子文檔和內(nèi)容描述的標(biāo)準(zhǔn)，大家了解即可)

此段代碼表示的是HTML的視窗大小，在響應(yīng)式開發(fā)和移動開發(fā)中，這個代碼很重要，viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，上訴代碼就限定了網(wǎng)頁在不同端下的大小與縮放，具體的含義如下：

width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width

height:同width

intial-scale:頁面首次被顯示是可視區(qū)域的縮放級別，取值1.0則頁面按實際尺寸顯示，無任何縮放

maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級別，

maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上。

user-scalable:是否可對頁面進(jìn)行縮放，no 禁止縮放

大家看到這么多參數(shù)不用擔(dān)心，一般來講只需要了解即可，用到再查，無須死記硬背。

上文說到瀏覽器解析HTML有兼容模式與標(biāo)準(zhǔn)模式兩種模式，那它們是什么呢，有什么區(qū)別？

標(biāo)準(zhǔn)模式： 瀏覽器用瀏覽器支持得最高標(biāo)準(zhǔn)解析HTML和運(yùn)行JS

兼容模式：在未聲明DOCTYPE的情況下，為了保證頁面能正常工作，瀏覽器以寬松向后兼容的模式運(yùn)行該網(wǎng)站，防止老式站點無法工作。

對于大部分HTML標(biāo)簽而言，他們都是成對出現(xiàn)的，譬如

但是也有部分標(biāo)簽不是成對出現(xiàn)的，稱之為自閉合標(biāo)簽，譬如

我們可以看到他們后面自己帶了/結(jié)尾，但是在HTML5標(biāo)準(zhǔn)處理以后，更建議不寫/，如下

一個網(wǎng)頁，做出來之后不僅僅是給人看的，同時也要讓機(jī)器（爬蟲）能夠讀懂上面的信息。這個時候就涉及到標(biāo)簽的語義化。如果把每個HTML標(biāo)簽比作一個容器，那么你書寫的內(nèi)容就是你要存放到容器中的物品。舉個例子，在日常生活中，我們都知道鞋子就放在鞋柜里面，洗發(fā)水放在洗發(fā)水瓶里面，洗潔精放在洗潔精瓶子里面。我們根據(jù)瓶子就知道瓶子里面裝的是什么。

同理，對于HTML而言，HTML的標(biāo)簽也是具有容器含義的，譬如footer標(biāo)簽顧名思義就是尾部標(biāo)簽，存放內(nèi)容的結(jié)尾塊，header標(biāo)簽表示頭部。合理地使用HTML標(biāo)簽?zāi)茏寵C(jī)器更容易讀懂你的頁面信息。