HTML簡介、語義化標籤
1.1.1、Doctype作用？標準模式與相容模式各有什麼區別?
1）<!DOCTYPE>宣告位於位於HTML文件中的第一行，處於 標籤之前。告知瀏覽器的解析器用什麼文件標準解析這個文件。DOCTYPE不存在或格式不正確會導致文件以相容模式呈現。
2）標準模式的排版 和JS運作模式都是以該瀏覽器支援的最高標準執行。
在相容模式中，頁面以寬鬆的向後相容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

1.1.2、HTML5 為什麼只需要寫 ？
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式
來執行）；而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。

1.1.3、如果我不放入<! DOCTYPE html> ，HTML5還會工作麼？
不會，瀏覽器將不能識別他是HTML文件，同時HTML5的標籤將不能正常工作

1.1. 4、doctype（文件型別）的作用是什麼？你知道多少種文件型別？
此標籤可告知瀏覽器文件使用哪種HTML或XHTML規範。該標籤可宣告三種DTD型別，分別表示嚴格版本、過渡版本以及基於框架的HTML文件。
1、HTML 4.01規定了三種文件型別：Strict、Transitional以及Frameset。
2、XHTML 1.0規定了三種XML文件型別：Strict、Transitional以及Frameset。
Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或者相容模式）用於呈現為傳統瀏覽器而設計的網頁。
1.1. 5、瀏覽器標準模式和怪異模式之間的區別是什麼？
W3C標準推出以後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的相容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。IE盒子模型和標準W3C盒子模型：ie的width包括：padding\border。標準的width不包括：padding\border
在js中如何判斷當前瀏覽器正在以何種方式解析？
document物件有個屬性compatMode,它有兩個值：BackCompat對應quirks mode，CSS1Compat對應strict mode。

1.1.6、什麼是HTML5？
H5=HTML5，指的是HTML超文字標記語言（HTML）的第五次重大修改，HTML的第五代。它的主要目標是提供所有內容而不需要任何的像flash，silverlight等的額外外掛，這些內容來自動畫，視訊，富GUI等。HTML5是全球資訊網聯盟（W3C）和網路超文字應用技術工作組（WHATWG）之間合作輸出的。
HTML5具有的特點：
（1）、語義化的標籤：好處是網站載入更快；該標籤舉例：header、nav、article等。
（2）、增加了音訊、視訊標籤：好處是取代falsh；該標籤舉例：audio、video。
（3）、canvas標籤：好處在瀏覽器上繪製圖形或動畫，取代flash。
（4）、支援手機和平板的響應式佈局。
HTML5的缺點：低版本瀏覽器支援性不好，比如IE9以下的瀏覽器不支援HTML5。

1.1.7、使用XHTML的侷限有哪些？
XHTML 與HTML的區別為：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
侷限：
所有的 XHTML 元素都必須被正確地巢狀，XHTML 必須擁有良好的結構，所有的標籤必須小寫，並且所有的 XHTML 元素必須被關閉。所有的 XHTML 文件必須擁有 DOCTYPE 宣告，並且 html、head、title 和 body 元素必須存在。雖然程式碼更加的優雅，但缺少容錯性，不利於快速開發。

1.1.8、如果把HTML5看作做一個開放平臺，那它的構建模組有哪些？

1.1.9、HTML 和 XHTML 有什麼區別？
XHTML全名是“可擴充套件超文字置標語言”（eXtensible HyperText Markup Language），要說它和HTML（HyperText Markup Language）的區別就要從開始說起。
當初基於HTML衍生出XML，因為XML擁有更加嚴謹的語法以及更好的語義環境，所以當年W3C的老大們紛紛認為HTML沒用了，用XML更好。但是當時的環境直接讓WEB躍進到XML實在有些不現實，畢竟當時還有許多書寫不嚴謹的網頁，而且應用於網頁環境顯然HTML更加有優勢。於是討論的結果是XML是未來的趨勢，但是需要一個過程慢慢摸索實現的途徑，所以就有了XHTML，這是一個作為HTML到XML過渡過程的一個產物。
XHTML是在HTML的基礎上向XML過渡的東西，和HTML最大的區別就在於它更嚴謹而且語義化更強。比如XHTML規定所有標記都必須小寫，因為XML需要區分大小寫，而HTML不這麼要求；XHTML要求標籤必須閉合，不允許開放標籤存在比如“

第一段

第二段”這樣的寫法在XHTML裡是錯誤的，但是HTML允許它的存在）。目前XHTML的最新版本是XHTML1.1，不過常用的仍是XHTML1.0，XHTML1.1規則太過嚴格，很多網站受不鳥（剛才提到的兩個錯誤，在XHTML1.0裡還是可以容忍，但是到了XHTML1.1就直接送你一個錯誤頁面）。下一代的XHTML標準是XHTML2.0，在03年開始制定，新出來的規範拋棄了大量HTML的屬性和標記，而且允許使用XML的名稱空間，而且開始允許擴充套件。總之說的很牛逼，不過HTML5興起之後XHTML2.0的工作就被停止了，2006年W3C關閉了XHTML2.0的工作組，轉向HTML5規範的制定，未來HTML5普及以後估計XHTML就要成為歷史了。

1.1.10、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器相容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關於影象，位置，儲存，多工等功能的增加。
繪畫 canvas;
用於媒介回放的 video 和 audio 元素;
本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失;
sessionStorage 的資料在瀏覽器關閉後自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控制元件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
支援HTML5新標籤：
IE8/IE7/IE6支援通過document.createElement方法產生的標籤，
可以利用這一特性讓這些瀏覽器支援HTML5新標籤，
瀏覽器支援新標籤後，還需要新增標籤預設的樣式。
當然也可以直接使用成熟的框架、比如html5shim;

1.1.11、如果頁面使用 application/xhtml+xml’會有什麼問題嗎
一些老的瀏覽器不支援,實際上,任何最新的瀏覽器都將支援application/xhtml+xml媒體型別。大多數瀏覽器也接受以application/xml傳送的XHTML文件.

1.1.12、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
首先：CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，如div的display預設值為“block”，則為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：

1.1.13、頁面匯入樣式時，使用link和@import有什麼區別？
（1）link屬於XHTML標籤，除了載入CSS外，還能用於定義RSS, 定義rel連線屬性等作用；而@import是CSS提供的，
只能用於載入CSS;
（2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標籤，無相容問題;

1.1. 14、介紹一下你對瀏覽器核心的理解？
主要分成兩部分：
渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：負責取得網頁的內容（HTML、XML、影象等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然後會輸出至顯示器或印表機。瀏覽器的核心的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要核心。
JS引擎： 則解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，核心就傾向於只指渲染引擎。

1.1.15、常見的瀏覽器核心有哪些？
Trident核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto核心：Opera7及以上。 [Opera核心原為：Presto，現為：Blink;]
Webkit核心：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

1.1.16、如果網頁內容需要支援多語言，你會怎麼做
1）採用統一編碼UTF-8方式編碼
對提供了多語言版本的網站來說，Unicode字符集應該是最理想的選擇。它是一種雙位元組編碼機制的字符集，不管是東方文字還是西方文字，在Unicode中一律用兩個位元組來表示
2）語言書寫習慣&導航結構
3）資料庫驅動型網站 實現對不同語言資料資訊的收集和檢索。
1，在資料庫級別支撐多語言：為每種語言建立獨立的資料庫，不同語言的使用者把持不同的資料庫。
2，在表級別支撐多語言：為每種語言建立獨立的表，不同語言的使用者把持不同的表，但是它們在同一個資料庫中。
3，在欄位級別支撐多語言：在同一個表中為每種語言建立獨立的欄位，不同語言的使用者把持不同的欄位，它們在同一個表中。
4）搜尋引擎&市場推廣
多語言網站實現計劃 ：
1、靜態：就是為每種語言分辨準備一套頁面檔案，要麼通過檔案字尾名來區分不同語言，要麼通過子目錄來區分不同語言。一旦使用者選擇了需要的語言後，主動跳轉到相應的頁面，首頁以下其他連結也是按照同樣方法處理。從保護的角度來看，通過子目錄比通過檔案字尾名來區分不同語言版本顯得要簡略明瞭。
2、動態：站點內所有頁面檔案都是動態頁面檔案（PHP，ASP等）而不是靜態頁面檔案，在需要輸出語言文字的處所同一採用語言變數來表現，這些語言變數可以根據使用者選擇不同的語言賦予不同的值，從而能夠實現在不同的語言環境下輸出不同的文字。

1.1.17、簡述一下你對HTML語義化的理解？
用正確的標籤做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜尋引擎解析;
即使在沒有樣式CSS情況下也以一種文件格式顯示，並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。

1.1.18、請說出三種減少頁面載入時間的方法。（載入時間指感知的時間或者實際載入時間）
1.優化圖片
2.影象格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合並css，如margin-top,margin-left…）
4.網址後加斜槓（如www.campr.com/目錄，會判斷這個“目錄是什麼檔案型別，或者是目錄。）
5.標明高度和寬度（如果瀏覽器沒有找到這兩個引數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。當瀏覽器知道了高度和寬度引數後，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然後繼續載入後面的內容。從而載入時間快了，瀏覽體驗也更好了。）
6.減少http請求（合併檔案，合併圖片）。

1.1. 19、請談一下你對網頁標準和標準制定機構重要性的理解。

w3c存在的意義就是讓瀏覽器相容性問題儘量小，首先是他們對瀏覽器開發者的約束，然後是對開發者的約束。

1.1.20、使用 data- 屬性的好處是什麼

data-* 屬性用於儲存頁面或應用程式的私有自定義資料。data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。儲存的（自定義）資料能夠被頁面的 JavaScript 中利用，以建立更好的使用者體驗（不進行 Ajax 呼叫或伺服器端資料庫查詢）。
data-* 屬性包括兩部分：
屬性名不應該包含任何大寫字母，並且在字首 “data-” 之後必須有至少一個字元
屬性值可以是任意字串

1.1.21、H5為什麼這麼火？H5是哪一年產生的？H5會火多久？

（1）、因為H5的後臺很硬，是谷歌（google）和蘋果（Apple）兩大巨頭公司，谷歌和蘋果大力倡導H5的發展，也是H5的忠實的支持者和實踐者（IOS+Android系統佔據手機市場92.36%），H5的產生主要目的也是幹掉flash，因為flash是adobe公司的，adobe不是W3C組織的成員之一，蘋果和谷歌等全球資訊網聯盟也不希望在自己的產品中使用載入量過大的flash。
（2）、H5是2014年9月份W3C（全球資訊網聯盟，主要有蘋果和谷歌公司）組織釋出的。
（3）、刷臉時代（這裡專指網站使用者體驗更加美觀的時代）+移動端時代（手機+平板），會促使H5會在未來的有更加美好的發展前景，只要有網站，H5就會很火，UI也就很火，H5的發展會讓UI更加提高使用者的滿意度，H5的火爆時代，會促進UI更好發展。
(4)、微信的發展，O2O的促使H5更火。在這裡不得不談微信，如果沒有微信，或許今天我們不會這樣來討論H5，微信無意中養成了使用者掃碼的習慣，並通過公眾號的內容生產及分發，以及微信本身已有的龐大的使用者群體及社交屬性，使基於網頁的內容可以快速傳播，真正帶來了APP即瀏覽器的時代，取消了輸入內容網址的麻煩。以微信為代表的超級社交APP，解決了網頁內容瀏覽及分發的通路。
H5或許會沒落，但會迎來H6、H7…，只會變得越來越好，所以沒必要擔心H5會不會死，當下重在實踐與積累，至少現在，Html5的影響力，會超出你我的想象，也就意味著H5的好閨蜜UI會一直火下去。

1.1.22、div是什麼？在div出現之前做網站用什麼佈局？
div是網站佈局的盒子標籤，div出現是table佈局，因為table佈局巢狀很多，網站載入慢，佈局層級不清晰。

1.1.23、html是什麼？css是什麼？js是什麼？
（1）、html是超文字標記語言，他是做網站時候用的一些文字標記標籤，比如div、span等。
（2）、 css是層疊樣式表，是做網站的時候給標籤來美化網站的樣式，比如說background（背景）、color（字型顏色）、height（高度）、width（寬度）等。
（3）、js=javascript是網站中寫前後臺互動效果、網頁動畫效果的一種開發語言，比如滑鼠點選事件（click）、前後臺數據請求（ajax）等。

1.1.24、什麼是靜態網頁？什麼叫做動態網頁？
（1）、靜態網頁：沒有資料互動的網頁，沒有資料庫參與，沒有伺服器端資料的載入。比如靜態網頁就是隻有html+css+JavaScript做成的網站。
（2）、動態網頁：有後臺數據參與的網頁，網頁中的資料是從資料庫取的，需要有後臺邏輯的支援。比如動態網頁就是jsp頁面（後臺語言是java）、asp頁面（後臺語言是asp.net）。

QQ技術交流群:815302226