一、HTML、XML、XHTML 有什么區別

（一）定義：

• html即是超文本標記語言，是最早寫網頁的語言，但是由于時間早，規范不是很好，大小寫混寫且編碼不規范；
• xhtml即是升級版的html，對html進行了規范，編碼更加嚴謹純潔，也是一種過渡語言，html向xml過渡的語言；
• xml即是可擴展標記語言，是一種跨平臺語言，編碼更自由，可以自由創建標簽。
• 網頁編碼從html>>xhtml>>xml這個過程發展。

（二）區別：
1. XML 與 HTML 的主要差異：

• XML 不是 HTML 的替代。
• XML 和 HTML 為不同的目的而設計：
• XML 被設計為傳輸和存儲數據，其焦點是數據的內容。
• HTML 被設計用來顯示數據，其焦點是數據的外觀。
• HTML 旨在顯示信息，而 XML 旨在傳輸信息。
• html最終會發展到xml，xhtml是html想xml發展的一個過渡，xhtml的特性也適合xml；

2.html：

• 對大小寫不敏感；
• 標簽不必成對出現；

3.xhtml：

• 對大小寫敏感，必須是小寫的；
• 標簽必須成對出現，有開始標簽就必須有結束標簽；
• 屬性值必須在引號之內；
• 不支持屬性最小化：
  eg：

正確：<input checked='checked'>

  錯誤：<input checked>

• name屬性不贊成使用，以后會被淘汰；
• 空元素也要結束標簽：如：
  ,

  ---

  (水平分割線)

二、怎樣理解 HTML 語義化（貌似是一個面試題）

1、什么是HTML語義化？
<基本上都是圍繞著幾個主要的標簽，像標題（H1~H6）、列表（li）、強調（strong em）等等>
根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

這里有一個很好的解釋，讓我們能夠清楚的知道語義化扮演了什么么樣的角色：

語義化的HTML結構首先要強調HTML結構
　　HTML結構是頁面的骨架，一個頁面就好像一幢房子，HTML結構就是鋼精鋼筋混泥土的墻，一幢房子如果沒有鋼精鋼筋混泥土的墻那就是一堆費磚頭，不能住人，不能辦公。css是裝飾材料，是原木地板，是大理石，是油漆，是用來裝飾房子的，CSS的強大就不用多說了，css如果沒有html結構那就是一堆木板，一同油漆，沒有了實際使用價值。

2、為什么要語義化？

• 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
• 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用；
• 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
• 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
• 便于團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

3、寫HTML代碼時應注意什么？

• 盡可能少的使用無語義的標簽div和span；
• 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
• 不要使用純樣式標簽，如：b、font、u等，改用css設置。
• 需要強調的文本，可以包含在strong或者em標簽中（瀏覽器預設樣式，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）；
• 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
• 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途；
• 每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

4、HTML5新增了哪些語義標簽
在HTML 5出來之前，我們用div來表示頁面章節，但是這些div都沒有實際意義。（即使我們用css樣式的id和class形容這塊內容的意義）。這些標簽只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分。但現在，那些之前沒“意義”的標簽因為因為html5的出現消失了，這就是我們平時說的“語義”。
如下圖的一個布局，沒有使用到div：

三、怎樣理解內容與樣式分離的原則

在 Web 開發中，所謂內容與樣式分離，就是讓內容的歸 HTML, 樣式歸 CSS, 不要混著用。
這樣做的意義即優缺點

CSS與HTML分離的優點:

• 使頁面載入得更快
  由于將大部分頁面代碼寫在了css當中，使得頁面體積容量變得更小。相對于表格嵌套的方式的逐層加載速度快。
• 修改設計時更有效率
  在修改頁面的時候更加容易省時。根據區域內容標記，到css里找到相應的id，使得修改頁面的時候更加方便，也不會破壞頁面其他部分的布局樣式。而表格布局則更不省事。
• 保持視覺的一致性
  DIV+CSS最重要的優勢之一：保持視覺的一致性；以往表格嵌套的制作方法，會使得頁面與頁面，或者區域與區域之間的顯示效果會有偏差。
• 更好地被搜索引擎收錄
  由于將大部分的HTML代碼和內容樣式寫入了CSS文件中，這就使得網頁中代碼更加適合搜索引擎。
• 對瀏覽者和瀏覽器更具親和力
  對瀏覽者和瀏覽器更具親和力，由于CSS富含豐富的樣式，使頁面更加靈活性，更加的美觀，它可以根據不同的瀏覽器，而達到顯示效果的統一和不變形。

CSS與HTML分離的缺點:

• CSS網站制作的設計元素通常放在1個外部文件中，或幾個文件，有可能相當復雜，甚至比較龐大。
• 雖然說DIV+CSS解決了大部分瀏覽器兼容問題，但是也有在部分瀏覽器中使用出現異常，比如火狐瀏覽器，在IE中顯示正常的頁面，到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題，但是可以說在目前來看，DIV+CSS還沒有實現所有瀏覽器的統一兼容。
• DIV+CSS對搜索引擎優化與否,取決于網頁設計的專業水平,而不是DIV+CSS本身。

四、有哪些常見的meta標簽

1、什么是meta標簽：
通常所說的META標簽，是在HTML網頁源代碼中一個重要的html標簽。META標簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。
具體的參考<meta>標簽

2.常見meta標簽及作用：

• 聲明文檔使用的字符編碼
  ' <mata charset="utf-8"> '

• 頁面關鍵詞
  ' <meta name="keywords" content="your tags" /> '
• 頁面描述
  ' <meta name="description" content="150 words" /> '
• 搜索引擎索引方式
  '<meta name="robots" content="index,follow" />

• 頁面重定向和刷新
  <meta http-equiv="refresh" content="0;url=" />
• 其他
  <meta name="author" content="author name" />
  <meta name="google" content="index,follow" />
  <meta name="googlebot" content="index,follow" />
  <meta name="verify" content="index,follow" />
• 移動設備
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
  
• WebApp全屏模式
  <meta name="apple-mobile-web-app-capable" content="yes" />
• 隱藏狀態欄/設置狀態欄顏色
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
• 添加到主屏后的標題
  <meta name="apple-mobile-web-app-title" content="標題">
• 忽略數字自動識別為電話號碼
  <meta content="telephone=no" name="format-detection" />
• 忽略識別郵箱
  <meta content="email=no" name="format-detection" />
• 優先使用 IE 最新版本和 Chrome
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  
  <meta http-equiv="X-UA-Compatible" content="IE=6" >
  <meta http-equiv="X-UA-Compatible" content="IE=7" >
  <meta http-equiv="X-UA-Compatible" content="IE=8" >
• 禁止瀏覽器從本地計算機的緩存中訪問頁面內容
  <meta http-equiv="Pragma" content="no-cache">

五、文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?

1.Doctype作用是什么？
<!DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應該用哪個規范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行，這并不是一個 HTML 標簽。
2.嚴格模式與混雜模式如何區分？它們有何意義？
嚴格模式：又稱標準模式，是指瀏覽器按照 W3C 標準解析代碼。
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。
如何區分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網頁中的 DTD 直接相關。具體如何區分
3.<!DOCTYPE html>作用：
聲明文檔的解析類型，避免瀏覽器的怪異模式。

六、瀏覽器亂碼的原因是什么？如何解決

1、比如網頁源代碼是gbk的編碼，而內容中的中文字是utf-8編碼的，這樣瀏覽器打開即會出現html亂碼。反之網頁是編碼utf-8，內容是gbk也會出現亂碼。
2、html網頁編碼是gbk，而程序從數據庫中調出呈現是utf-8編碼的內容也會造成編碼亂碼。
3、瀏覽器不能自動檢測網頁編碼，造成網頁亂碼。

總結：

1. 亂碼產生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
2. 亂碼一般是英文以外的字符才會出現。(來源)

解決方法：

• 設置<meta charset>標簽聲明文檔使用的字符編碼
• 設置正確的字符編碼
• 設置瀏覽器顯示正確的編碼
  具體方法

七、常見的瀏覽器有哪些，什么內核

八、列出常見的標簽，并簡單介紹這些標簽用在什么場景