自從1997年HTML4正式誕生至今，前端工程師經(jīng)歷了從美工到切圖仔再到頁(yè)面仔的轉(zhuǎn)變。不得不說(shuō)，自從HTML5誕生以來(lái)，各種框架如雨后春筍。而早前的網(wǎng)頁(yè)三劍客（Dreamwear，F(xiàn)lash，F(xiàn)irewoks）則被各中工具所取代，現(xiàn)在的前端則具體到（HTML+CSS+JavaScirpt）三個(gè)方面。隨著時(shí)間的推移，越來(lái)越多的前端開(kāi)發(fā)框架也逐漸被前端人所接受。
-
HTML是什么？與XML，XHTML有什么區(qū)別呢？
在維基百科中說(shuō)：HTML是超文本標(biāo)記語(yǔ)言（英語(yǔ)：HyperText Markup Language，簡(jiǎn)稱(chēng)：HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。HTML是一種基礎(chǔ)技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設(shè)計(jì)令人賞心悅目的網(wǎng)頁(yè)、網(wǎng)頁(yè)應(yīng)用程序以及移動(dòng)應(yīng)用程序的用戶(hù)界面。
??XML是相比較與HTML是一種可擴(kuò)展標(biāo)記語(yǔ)言，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)參考；在語(yǔ)義上也比HTML所有所嚴(yán)肅規(guī)范。
-
怎么理解HTML的語(yǔ)義化？
其次從繼承關(guān)系上講，HTML是一種基于標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言（SGML）的應(yīng)用，是一種非常靈活的置標(biāo)語(yǔ)言，而XHTML則基于可擴(kuò)展標(biāo)記語(yǔ)言（XML）,它的語(yǔ)義也相比較于HTML，XML最為嚴(yán)謹(jǐn)規(guī)范。
??而隨著HTML5的誕生以來(lái)，語(yǔ)義化的HTML被人們要求越來(lái)越熟知。語(yǔ)義化HTML是一種編寫(xiě)HTML的方式，選擇合適的標(biāo)簽、使用合理的代碼結(jié)構(gòu)，便于開(kāi)發(fā)者閱讀，同時(shí)讓瀏覽器的爬蟲(chóng)和機(jī)器很好地解析，也方便其他開(kāi)發(fā)者共同維護(hù)代碼的可提升性。從側(cè)面也可以看出語(yǔ)義化的要求也成為企業(yè)納入人才的基本標(biāo)準(zhǔn)。
-
怎樣理解內(nèi)容與樣式分離的原則?
首先我們淺顯的把前端工程師所做的工作分為:HTML+CSS+JavaScript。一個(gè)網(wǎng)站的形成我們把它比作是一幢大樓,HTML決定了大樓的架構(gòu),大樓的高度,占地面積之類(lèi)等等,而CSS是大樓的外表,是選擇是玻璃外墻還是粉色菜式,最后JavaScirpt則是大樓的內(nèi)部功能,例如,我可以通過(guò)我走路參過(guò)隔壁的樓層,理論上各司其職,HTML,CSS,JS老死不相往來(lái),但是從一定程度上來(lái)說(shuō)JS也可以決定一部分CSS的功能。而一旦JS過(guò)多的插手CSS領(lǐng)域，或者CSS過(guò)多的參與JS的相關(guān)工作對(duì)于代碼后期的維護(hù)或者修改都有可能造成很大的損失。最后從專(zhuān)業(yè)的角度來(lái)看，軟件的設(shè)計(jì)包括一個(gè)網(wǎng)站，要盡可能的遵循"高內(nèi)聚低耦合"的設(shè)計(jì)理念。
高內(nèi)聚是指模塊內(nèi)部要高度聚合，低耦合是說(shuō)模塊與模塊之間的藕合度要盡量低。前者是說(shuō)模塊內(nèi)部的關(guān)系，后者是說(shuō)模塊與模塊間的關(guān)系。
-
有哪些常見(jiàn)的meta標(biāo)簽？
<meta>標(biāo)簽位于網(wǎng)站head首部中，并不會(huì)顯示在實(shí)際的頁(yè)面當(dāng)中。主要功能是用于提高搜索引擎的優(yōu)化，提高網(wǎng)站SEO權(quán)重。從SEO的角度來(lái)分析<meta>標(biāo)簽一般不要超過(guò)4個(gè)。越是簡(jiǎn)明扼要的內(nèi)容越是能提高SEO的權(quán)重。
常見(jiàn)的meta有以下幾種：（排名不分先后）
<meta name="keywords" name="關(guān)鍵詞">
<meta name="Description" name="描述網(wǎng)頁(yè)的主要內(nèi)容">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,intial-scale=1,maxinum=scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
??前2種顧名思義較為理解，第三種則是用于實(shí)現(xiàn)網(wǎng)頁(yè)的字符編碼格式，第四種則是實(shí)現(xiàn)移動(dòng)端的正常顯示，第五種則多用于網(wǎng)站的兼容。
-
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
<html ch="en"></html> <html xml:lang="en-EN" lang="en-EN">
文檔聲明必須是HTML文檔的第一行、且頂格顯示，對(duì)大小寫(xiě)不敏感HTML文檔通常以類(lèi)型聲明開(kāi)始，該聲明將幫助瀏覽器確定其嘗試解析和顯示的HTML文檔類(lèi)型。
??以早期的HTML頭文件說(shuō)起，分為HTML Strict DTD（請(qǐng)求比較嚴(yán)格的HTML類(lèi)型）HTML Transitional DTD（相對(duì)嚴(yán)格但是不規(guī)范）Frameset DTD（框架標(biāo)準(zhǔn)）最后則是我們現(xiàn)在絕大多數(shù)使用的<!DOCTYPE html>(H5的標(biāo)準(zhǔn))。 ** 越是嚴(yán)格的要求在一定程度上則越是限制了內(nèi)容的活動(dòng)性！** 隨著HTML5格式化的標(biāo)準(zhǔn)大眾的瀏覽器所接受，而上面所提到的<!DOCTYPE html>是為了告訴不同的瀏覽器要以同樣的方式渲染HTML5界面。
-
瀏覽器亂碼的原因是什么？
導(dǎo)致亂碼的主要原因是開(kāi)發(fā)者書(shū)寫(xiě)的編碼格式和瀏覽器的解碼格式不相同所導(dǎo)致。也有可能是沒(méi)有在meta所做聲明。所以我們找到編碼和解碼的格式是否相同是解決亂碼的關(guān)鍵。當(dāng)然也不排除有下面這種情況的發(fā)生：
-
常見(jiàn)的瀏覽器有哪些，什么內(nèi)核?
一、Trident內(nèi)核代表產(chǎn)品Internet Explorer，又稱(chēng)其為IE內(nèi)核。
Trident（又稱(chēng)為MSHTML），是微軟開(kāi)發(fā)的一種排版引擎。使用Trident渲染引擎的瀏覽器包括：IE、傲游、世界之窗瀏覽器、Avant、騰訊TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
二、Gecko內(nèi)核代表作品Mozilla FirefoxGecko是一套開(kāi)放源代碼的、以C++編寫(xiě)的網(wǎng)頁(yè)排版引擎。
Gecko是最流行的排版引擎之一，僅次于Trident。使用它的最著名瀏覽器有Firefox、Netscape6至9。
三、WebKit內(nèi)核代表作品Safari、Chromewebkit
是一個(gè)開(kāi)源項(xiàng)目，包含了來(lái)自KDE項(xiàng)目和蘋(píng)果公司的一些組件，主要用于Mac OS系統(tǒng)，它的特點(diǎn)在于源碼結(jié)構(gòu)清晰、渲染速度極快。缺點(diǎn)是對(duì)網(wǎng)頁(yè)代碼的兼容性不高，導(dǎo)致一些編寫(xiě)不標(biāo)準(zhǔn)的網(wǎng)頁(yè)無(wú)法正常顯示。主要代表作品有Safari和Google的瀏覽器Chrome。
四、Presto內(nèi)核代表作品OperaPresto
是由Opera Software開(kāi)發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。它取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動(dòng)態(tài)功能，例如網(wǎng)頁(yè)或其部分可隨著DOM及Script語(yǔ)法的事件而重新排版。
-
列出常見(jiàn)的標(biāo)簽，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景？
<img/>圖片標(biāo)簽：?jiǎn)螛?biāo)簽，主要用于圖片引入.有相對(duì)路徑和絕對(duì)路徑兩者方式。 <hr/>標(biāo)簽：?jiǎn)螛?biāo)簽，頁(yè)面顯示一條線。 <br/>換行標(biāo)簽：?jiǎn)螛?biāo)簽.主要用于換行，其中“/”可以省略 <a>超鏈接標(biāo)簽</a>：超鏈接標(biāo)簽。內(nèi)容有“href=“引入網(wǎng)頁(yè)” <p>段落標(biāo)簽</p>：主要用于段落的開(kāi)始。 <ul><li>無(wú)序列表標(biāo)簽</li></ul>：用戶(hù)創(chuàng)建無(wú)需列表，li可以嵌套u(yù)l <ol><li>有序列表標(biāo)簽</li></ol>:有序列表標(biāo)簽，用于創(chuàng)建有序列表。 <title>頭部標(biāo)簽</title>:用于顯示網(wǎng)站頭部標(biāo)題 <body>網(wǎng)站主題</body>:用戶(hù)顯示網(wǎng)站主題內(nèi)容，管理大部分標(biāo)簽 <table>表格標(biāo)簽</table>：用于顯示一個(gè)表格，在HTML5被拋棄。 <input>表單標(biāo)簽</input>: 用于創(chuàng)建表單元素。 <h1>~<h6>用于顯示大小不同標(biāo)題。
最后：文章內(nèi)容部分來(lái)自網(wǎng)絡(luò)，作者在理解的基礎(chǔ)之上鍛煉了資源收集的能力，如有發(fā)現(xiàn)內(nèi)容有所出入請(qǐng)?jiān)谙旅嬖u(píng)論區(qū)及時(shí)聯(lián)系作者。
如你想了解更多關(guān)于HTML相關(guān)知識(shí)請(qǐng)移步至：
<a >參考：bootstrap規(guī)范規(guī)范</a>
<a > 聊一聊編碼與亂碼</a>
<a > Web browser engine</a>
