一.HTML、XML、XHTML 有什么區別
什么是 HTML？
- HTML 指的是超文本標記語言 (Hyper Text Markup Language)
- HTML 不是一種編程語言，而是一種標記語言 (markup language)
- 標記語言是一套標記標簽 (markup tag)
- HTML 使用標記標簽來描述網頁
什么是 XML?
- XML 指可擴展標記語言（EXtensible Markup Language）
- XML 是一種標記語言，很類似 HTML
- XML 的設計宗旨是傳輸數據，而非顯示數據
- XML 標簽沒有被預定義。您需要自行定義標簽。
- XML 被設計為具有自我描述性。
- XML 是 W3C 的推薦標準
什么是XHTML ？
- XHTML 指可擴展超文本標簽語言（EXtensible HyperText Markup Language）。
- XHTML 的目標是取代 HTML。
- XHTML 與 HTML 4.01 幾乎是相同的。
- XHTML 是更嚴格更純凈的 HTML 版本。
- XHTML 是作為一種 XML 應用被重新定義的 HTML。
- XHTML 是一個 W3C 標準。
XML 與 HTML 的主要差異
XML 不是 HTML 的替代。
XML 和 HTML 為不同的目的而設計：
- XML 被設計為傳輸和存儲數據，其焦點是數據的內容。
- HTML 被設計用來顯示數據，其焦點是數據的外觀。
- HTML 旨在顯示信息，而 XML 旨在傳輸信息。
二.怎樣理解 HTML 語義化
1、什么是HTML語義化？
語義化，顧名思義，就是你寫的HTML結構，是用相對應的語義的英文字母（標簽）標記的。因為HTML本身就是標記語言，不僅對自己來說，容易閱讀，書寫。別人看你的代碼和結構也容易理解，甚至對一些不是做網頁開發的人來說，也容易閱讀。根據內容的結構化（內容語義化），選擇合適的標簽（代碼語義化）便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
2、為什么要語義化？
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關聯起來。
三.怎樣理解內容與樣式分離的原則
什么是表現和內容分離:
表現和內容分離是網頁布局一直倡導的原則，也是當下非常流行的名詞之一，可能很多開發人員雖然已經在很好的利用表現和內容分離原則進行網頁布局，但是并沒有對它有過多的注意，下面就結合代碼實例簡單介紹一下什么是表現和內容分離。
代碼實例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣式內容混合</title>
</head>
<body>
<div style="width:200px;">
<font color="red">好好學習</font>
</div>
</body>
</html>
以上代碼的表現和內容分離原則做的并不好，因為對文本控制的樣式和網頁結構都混合在一起。這樣不但不利于網頁的修改，而且還讓網頁內容不能夠很好的展現于搜索引擎之下，不利于SEO。
以上代碼修改如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>樣式分離</title>
<style type="text/css">
div
{
width:200px;
color:red;
}
</style>
</head>
<body>
<div>好好學習</div>
</body>
</html>
以上代碼實現了內容和表現分離的布局。由上面兩個代碼可以得出，所謂”內容“，就是網頁的骨架，如果排版網頁的結構，而”表現“就是對”內容“的潤色，比如div的寬度或者高度，字體的顏色大小等等。這樣網頁的內容就赤裸裸的展現在搜索引擎面前，也利于網站的優化。
CSS技術的最大優點是，它能夠幫助你將Web文檔的內容結構（標記）和版面設計（樣式）分離開來。作為CSS技術的突出優點，文檔結構與文檔樣式的分離可以確保網頁都能平穩退化，具備CSS支持的瀏覽器可以呈現美輪美奐的網頁，不支持或禁用了CSS的瀏覽器同樣可以把網頁內容按照正確的結構顯示出來。
四.有哪些常見的meta標簽
| 常見meta標簽 | 標簽描述 |
|---|---|
| <meta charset="utf-8"> | <聲明文檔使用的字符編碼> |
| <meta http-equiv="description" content="網頁描述"> | <頁面描述> |
| <meta http-equiv="keywords" content="關鍵字1,關鍵字2,..."> | <關鍵字，搜所引擎 SEO> |
| <meta name="renderer" content="webkit"> | <若頁面需默認用極速核，增加標簽：> |
| <meta name="renderer" content="ie-comp"> | <若頁面需默認用ie兼容內核，增加標簽：> |
五.文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
HTML中<!DOCTYPE html>標簽的作用是什么呢？<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。它是html5標準網頁聲明,全稱為Document Type HyperText Mark-up Language，意思為文檔種類為超文本標記性語言或超文本鏈接標示語言，現在是這個簡潔形式，支持html5標準的主流瀏覽器都認識這個聲明。表示網頁采用html5，<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
由于歷史的原因，瀏覽器對頁面的渲染方式是不一樣的。在W3C標準出來之前，瀏覽器對頁面的渲染沒有同一的標準，產生了差異，quirks mod（混雜模式或者兼容模式），但在W3C標準出臺之后，瀏覽器對頁面的渲染有了同一的標準（嚴格模式或標準模式）。但是為了保證以前就得頁面仍然正常顯示，有的瀏覽器就保存了這兩種渲染模式（標準兼容模式）。那么究竟采用哪一種方式進行渲染，就要看DOCTYPE生命中的DTD。
六.瀏覽器亂碼的原因是什么？如何解決
亂碼造成原因：
1.比如網頁源代碼是gbk的編碼，而內容中的中文字是utf-8編碼的，這樣瀏覽器打開即會出現html亂碼。反之網頁是編碼utf-8，內容是gbk也會出現亂碼。
2.html網頁編碼是gbk，而程序從數據庫中調出呈現是utf-8編碼的內容也會造成編碼亂碼。
3.瀏覽器不能自動檢測網頁編碼，造成網頁亂碼。
4.網頁沒有設置meta charset編碼造成。導致瀏覽器不能識別你網頁默認編碼類型。
解決方法：
1.使用軟件進行HTML網頁內容的編輯和開發，盡量不要直接使用記事本進行編輯HTML代碼。
2.如果網頁設置編碼是gbk的，而數據庫儲存數據編碼格式是UTF-8的，這個時候程序查詢數據庫數據顯示數據前進鄉程序轉碼即可。
3.如果瀏覽器瀏覽時候出現網頁亂碼，在瀏覽器中找到轉換編碼的菜單。
在IE9瀏覽器中需要轉碼的網頁空白出右鍵鼠標，即可選擇“編碼”。
谷歌瀏覽器中瀏覽需要轉碼的網頁時，點擊右上角“三橫”圖標選擇“工具”-->“編碼”即可選擇切換網頁編碼達到讓瀏覽器瀏覽此網頁不是亂碼。
4.如果自己開發網頁，必須網頁加入meta charset編碼標簽。
七.常見的瀏覽器有哪些，什么內核？
| 瀏覽器 | 內核 |
|---|---|
| Internet Explorer | Trident（又稱為MSHTML） |
| Mozilla Firefox | Gecko |
| Safari, Google Chrome | WebKit |
| Opera | Presto |
- Trident ：[?tra?dnt]
IE瀏覽器(遨游、世界之窗、騰訊TT…都是IE)Trident內核最慢
IE 以Trident 作為內核引擎 - Gecko：[?gek??]
- 開放源代碼、以C++編寫的網頁排版引擎，是跨平臺的
FireFox是基于 Gecko 開發; - presto：[?prest??]
目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的兼容性。由Opera Software開發的瀏覽器排版引擎，Opera（歐朋瀏覽器），但由于市場選擇問題，主要應用在手機平臺–Opera mini - Webkit：
蘋果公司自己的內核，google的chrome也使用webkit作為內核。
是一個開源的瀏覽器引擎，同時WebKit 也是蘋果Mac OS X 系統引擎框架版本的名稱，它擁有清晰的源碼結構、極快的渲染速度，包含的 WebCore 排版引擎和 JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來。
許多網站都是按照IE來架設的，很多網站不兼容Webkit內核，比如登錄界面、網銀等網頁均不可使用Webkit內核的瀏覽器。
Safari([s??fɑri]), Google Chrome, 傲游3, 獵豹瀏覽器, 百度瀏覽器 opera瀏覽器 基于 Webkit 開發。
注：2013年2月Opera宣布轉向WebKit引擎
注：2013年4月Opera宣布放棄WEBKIT，跟隨GOOGLE的新開發的blink引擎
八.列出常見的標簽，并簡單介紹這些標簽用在什么場景
（一）基本文檔結構標簽：
1.：注釋標簽用來在源文檔中插入注釋。注釋會被瀏覽器忽略。您可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。
2.<!DOCTYPE>：<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
3.<html>：此元素可告知瀏覽器其自身是一個 HTML 文檔。
4.<head>：<head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。
5.<base>： 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接。
6.<meta>：<meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。包含在<head>標簽中。
7.<title>：<title> 元素可定義文檔的標題。
8.<body>：body 元素定義文檔的主體。body 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）
（二）文本、字體、字號、線條、行控制、超鏈接、圖像相關標簽：
9.<b>：呈現粗體文本效果。
10.<i>：顯示斜體文本效果。
11.<br ：可插入一個簡單的換行符。
12.<font>：<font> 規定文本的字體、字體尺寸、字體顏色。
13.<h1> -- <h6>：<h1> - <h6> 標簽可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。
14.<center>：對其所包括的文本進行水平居中。
15.<a>：超連接
a) <a> 標簽可定義錨。錨 (anchor) 有兩種用法：
i. 通過使用 href 屬性，創建指向另外一個文檔的鏈接（或超鏈接）
ii. 通過使用 name 或 id 屬性，創建一個文檔內部的書簽（也就是說，可以創建指向文檔片段的鏈接）
b) <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。
16.<img>：img 元素向網頁中嵌入一幅圖像。
17.<p>：<p> 標簽定義段落。
18.<pre>：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。常見應用就是用來表示計算機的源代碼。
19.<u>：<u> 標簽可定義下劃線文本。
20.<label>：<label> 標簽為 input 元素定義標注（標記）。
21.<strong>...</strong>粗體字(強調)
22.<em>...</em>斜體字(強調)
23.<BLINK> 閃爍的文字
24.<BIG> 顯示大字體
25.<CITE>...<CITE> 用于引經據典的文字
26.<CODE>...</CODE> 用于列出一段程序代碼
（三）表單元素相關標簽：
27.<form>：<form> 標簽用于為用戶輸入創建 HTML 表單。
28.<input>：<input> 標簽用于搜集用戶信息。根據不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復選框、掩碼后的文本控件、單選按鈕、按鈕等等。
29.<select>：select 元素可創建單選或多選菜單。
30.<option>：option 元素定義下拉列表中的一個選項（一個條目）。option 元素位于 select 元素內部。
31.<textarea>：<textarea> 標簽定義多行的文本輸入控件。可以通過 cols 和 rows 屬性來規定 textarea 的尺寸。
32.<button>：<button> 標簽定義一個按鈕。
33.<fieldset>：fieldset 元素可將表單內的相關元素分組。
34.<legend>：legend 元素為 fieldset 元素定義標題（caption）。
35.補充：
a) 客戶端向服務端發送數據可以有兩種方式：1. 使用表單<form>提交；2. 使用超鏈接傳參數<a href=”xxx.jsp?username=james&age=22………”>多個參數全部用&號連接起來。
b) <form action=”指定表單數據提交的處理地址” method=”post/get”>
如：<form action=”……/login.jsp?username=james&age=22”> …. </form>
Method屬性指定提交方式：post方式數據以暗文形式提交，即在瀏覽器地址欄上看不到提交的數據；get方式提交的數據在瀏覽器地址欄上可以看到，所以對敏感數據的提交都會選擇post。
（四）表格相關標簽：
36.<table>：<table> 標簽定義 HTML 表格。
37.<thead>：<thead> 標簽定義表格的表頭。thead 元素應該與 tbody 和 tfoot 元素結合起來使用。
38.<tbody>：<tbody> 標簽表格主體（正文）。tbody 元素應該與 thead 和 tfoot 元素結合起來使用。
39.<tfoot>：<tfoot> 標簽定義表格的頁腳（腳注或表注）。
40.<th>：定義表格內的表頭單元格。
41.<tr>：<tr> 標簽定義 HTML 表格中的行。<td>是列。
42.<td>：<td> 標簽定義 HTML 表格中的標準單元格。
43.<caption>：caption 元素定義表格標題。caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題。通常這個標題會被居中于表格之上。
（五）容器相關標簽：DIV + CSS → JavaScript
44.<div>：標簽可以把文檔分割為獨立的、不同的部分。<div> 是一個塊級元素。這意味著它的內容自動地開始一個新行。
45.<span>：<span> 標簽被用來組合文檔中的行內元素。
（六）框架相關標簽
46.<frameset>: frameset 元素可定義一個框架集。它被用來組織多個窗口（框架）。每個框架存有獨立的文檔。在其最簡單的應用中，frameset 元素僅僅會規定在框架集中存在多少列或多少行。您必須使用 cols 或 rows 屬性。
i. <frameset cols="20%,">左右分割,將左邊框架分割大小為20%右邊框架的大小瀏覽器會自動調整
ii. <frameset rows="20%,">上下分割,將上面框架分割大小為20%下面框架的大小瀏覽器會自動調整
iii. <frameset cols="20%,*,20%">分割左中右三個框架
47.<frame>: <frame> 標簽定義 frameset 中的一個特定的窗口（框架）。
48.<iframe>：iframe 元素會創建包含另外一個文檔的內聯框架（即行內框架）。
（七）序號、列表標簽：
49.<ul>：<ul> 標簽定義無序列表。
50.<ol>：<ol> 標簽定義有序列表。
51.<li>：<li> 標簽定義列表項目。<li> 標簽可用在有序列表 (<ol>) 和無序列表 (<ul>) 中。
52.<dl>：<dl> 標簽定義了定義列表。
53.<dt>：<dt> 標簽定義了定義列表中的項目。
54.<dd>: <dd>標簽定義了定義列表中項目的描述。
（八）引入外部文件
55.<link>：<link> 標簽定義文檔與外部資源的關系。<link> 標簽最常見的用途是鏈接樣式表。
56.<style>：<style> 標簽用于為 HTML 文檔定義樣式信息。
57.<script>：<script> 標簽用于定義客戶端腳本，比如 JavaScript。以通過 src 屬性指向外部腳本文件。
