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

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

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

head

body

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

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

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

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

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

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

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

height:同width

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

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

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

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

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

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

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

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

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

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

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

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

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