一矾缓、HTML、XML稻爬、XHTML 有什么區(qū)別

（一）定義：

• html即是超文本標記語言嗜闻，是最早寫網頁的語言，但是由于時間早桅锄，規(guī)范不是很好琉雳，大小寫混寫且編碼不規(guī)范样眠；
• xhtml即是升級版的html，對html進行了規(guī)范翠肘，編碼更加嚴謹純潔檐束，也是一種過渡語言，html向xml過渡的語言束倍；
• xml即是可擴展標記語言被丧，是一種跨平臺語言，編碼更自由肌幽，可以自由創(chuàng)建標簽晚碾。
• 網頁編碼從html>>xhtml>>xml這個過程發(fā)展。

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

• XML 不是 HTML 的替代喂急。
• XML 和 HTML 為不同的目的而設計：
• XML 被設計為傳輸和存儲數(shù)據(jù)格嘁，其焦點是數(shù)據(jù)的內容。
• HTML 被設計用來顯示數(shù)據(jù)廊移，其焦點是數(shù)據(jù)的外觀糕簿。
• HTML 旨在顯示信息，而 XML 旨在傳輸信息狡孔。
• html最終會發(fā)展到xml懂诗，xhtml是html想xml發(fā)展的一個過渡，xhtml的特性也適合xml苗膝；

2.html：

• 對大小寫不敏感殃恒；
• 標簽不必成對出現(xiàn)；

3.xhtml：

• 對大小寫敏感辱揭，必須是小寫的离唐；
• 標簽必須成對出現(xiàn)，有開始標簽就必須有結束標簽问窃；
• 屬性值必須在引號之內亥鬓；
• 不支持屬性最小化：
  eg：

正確：<input checked='checked'>

  錯誤：<input checked>

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

  ---

  (水平分割線)

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

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

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

語義化的HTML結構首先要強調HTML結構
　　HTML結構是頁面的骨架偿短，一個頁面就好像一幢房子，HTML結構就是鋼精鋼筋混泥土的墻馋没，一幢房子如果沒有鋼精鋼筋混泥土的墻那就是一堆費磚頭昔逗，不能住人，不能辦公篷朵。css是裝飾材料勾怒，是原木地板，是大理石声旺，是油漆笔链，是用來裝飾房子的，CSS的強大就不用多說了腮猖，css如果沒有html結構那就是一堆木板鉴扫，一同油漆，沒有了實際使用價值澈缺。

2坪创、為什么要語義化？

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

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

• 盡可能少的使用無語義的標簽div和span杭措；
• 在語義不明顯時费什，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距手素，對兼容特殊終端有利鸳址；
• 不要使用純樣式標簽瘩蚪，如：b、font稿黍、u等疹瘦，改用css設置。
• 需要強調的文本巡球，可以包含在strong或者em標簽中（瀏覽器預設樣式言沐，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b）酣栈，em是斜體（不用i）险胰；
• 使用表格時，標題要用caption矿筝，表頭用thead起便，主體部分用tbody包圍，尾部用tfoot包圍窖维。表頭和一般單元格要區(qū)分開缨睡，表頭用th，單元格用td陈辱；
• 表單域要用fieldset標簽包起來奖年，并用legend標簽說明表單的用途；
• 每個input標簽對應的說明文本都需要使用label標簽沛贪，并且通過為input設置id屬性陋守，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯(lián)起來。

4利赋、HTML5新增了哪些語義標簽
在HTML 5出來之前水评，我們用div來表示頁面章節(jié)，但是這些div都沒有實際意義媚送。（即使我們用css樣式的id和class形容這塊內容的意義）中燥。這些標簽只是我們提供給瀏覽器的指令，只是定義一個網頁的某些部分塘偎。但現(xiàn)在疗涉，那些之前沒“意義”的標簽因為因為html5的出現(xiàn)消失了，這就是我們平時說的“語義”吟秩。
如下圖的一個布局咱扣，沒有使用到div：

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

在 Web 開發(fā)中涵防，所謂內容與樣式分離闹伪，就是讓內容的歸 HTML, 樣式歸 CSS, 不要混著用。
這樣做的意義即優(yōu)缺點

CSS與HTML分離的優(yōu)點:

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

CSS與HTML分離的缺點:

• CSS網站制作的設計元素通常放在1個外部文件中仰禽，或幾個文件氮墨，有可能相當復雜，甚至比較龐大吐葵。
• 雖然說DIV+CSS解決了大部分瀏覽器兼容問題规揪，但是也有在部分瀏覽器中使用出現(xiàn)異常，比如火狐瀏覽器温峭，在IE中顯示正常的頁面猛铅，到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題凤藏，但是可以說在目前來看奸忽，DIV+CSS還沒有實現(xiàn)所有瀏覽器的統(tǒng)一兼容。
• DIV+CSS對搜索引擎優(yōu)化與否,取決于網頁設計的專業(yè)水平,而不是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" />
• 隱藏狀態(tài)欄/設置狀態(tài)欄顏色
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
• 添加到主屏后的標題
  <meta name="apple-mobile-web-app-title" content="標題">
• 忽略數(shù)字自動識別為電話號碼
  <meta content="telephone=no" name="format-detection" />
• 忽略識別郵箱
  <meta content="email=no" name="format-detection" />
• 優(yōu)先使用 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）馍驯，聲明的作用為了告訴瀏覽器該文件的類型阁危。讓瀏覽器解析器知道應該用哪個規(guī)范來解析文檔。<!DOCTYPE>聲明必須在 HTML 文檔的第一行汰瘫，這并不是一個 HTML 標簽狂打。
2.嚴格模式與混雜模式如何區(qū)分？它們有何意義混弥？
嚴格模式：又稱標準模式趴乡，是指瀏覽器按照 W3C 標準解析代碼。
混雜模式：又稱怪異模式或兼容模式蝗拿，是指瀏覽器用自己的方式解析代碼晾捏。
如何區(qū)分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網頁中的 DTD 直接相關哀托。具體如何區(qū)分
3.<!DOCTYPE html>作用：
聲明文檔的解析類型惦辛，避免瀏覽器的怪異模式。

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

1、比如網頁源代碼是gbk的編碼俗或，而內容中的中文字是utf-8編碼的市怎，這樣瀏覽器打開即會出現(xiàn)html亂碼。反之網頁是編碼utf-8辛慰，內容是gbk也會出現(xiàn)亂碼区匠。
2、html網頁編碼是gbk帅腌，而程序從數(shù)據(jù)庫中調出呈現(xiàn)是utf-8編碼的內容也會造成編碼亂碼驰弄。
3、瀏覽器不能自動檢測網頁編碼速客，造成網頁亂碼戚篙。

總結：

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

解決方法：

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

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

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