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