HTML、XML暴氏、XHTML 有什么區(qū)別
定義
- HTML延塑，超文本標(biāo)記語言，是語法較為松散的答渔、不嚴(yán)格的Web語言关带；
- XML，可擴(kuò)展標(biāo)記語言沼撕，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)參考宋雏；
設(shè)計(jì)宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)务豺。
需自行定義標(biāo)簽磨总。- XHTML，可擴(kuò)展超文本標(biāo)記語言笼沥，基于XML蚪燕，作用與HTML類似娶牌，但語法更嚴(yán)格，包含了所有與XML語法結(jié)合的HTML 4.01元素（參考w3school）馆纳。
XML與HTML主要差異：HTML 旨在顯示信息诗良，而 XML 旨在傳輸信息。
XHTML與HTML 類似厕诡，但語法更嚴(yán)格累榜，如下：
- XHTML 元素必須被正確地嵌套。
- XHTML 元素必須被關(guān)閉灵嫌。
- 標(biāo)簽名必須用小寫字母。
- XHTML 文檔必須擁有根元素
<html>
<head> ... </head>
<body> ... </body>
</html>
怎樣理解 HTML 語義化 怎樣理解內(nèi)容與樣式分離的原則
HTML語義化
WHAT：根據(jù)內(nèi)容的的結(jié)構(gòu)化含義葛作，選用合適的標(biāo)簽寿羞。
WHY
有利于SEO:搜索引擎的爬蟲是讀不懂無語義的span和div的，因此語義化標(biāo)簽?zāi)苁古老x抓取更多的有效信息赂蠢。
有助于爬蟲抓取更多的有效信息（爬蟲是依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重）
語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)
方便其他設(shè)備的解析(如屏幕閱讀器绪穆、盲人閱讀器、移動(dòng)設(shè)備)
便于團(tuán)隊(duì)開發(fā)和維護(hù)
內(nèi)容與樣式分離原則
HTML負(fù)責(zé)內(nèi)容與結(jié)構(gòu)虱岂，CSS負(fù)責(zé)樣式玖院，JS負(fù)責(zé)行為，各司其職第岖。即HTML內(nèi)不出現(xiàn)行內(nèi)樣式难菌，JS也不去直接操作樣式（可通過給元素添加刪除class來控制樣式變化）。
有哪些常見的meta標(biāo)簽
-
http-equiv（模擬HTTP的響應(yīng)消息頭）
<meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80"> <meta http-equiv="Content-Language" content="zh-CN"> <meta http-equiv="Refresh" content="n;url=http://yourlink"> <meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> <meta http-equiv="windows-Target" content="_top"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> name & content（網(wǎng)頁的描述信息）
<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么? < !doctype html> 的作用?
文檔聲明位于文檔中的最前面的位置蔑滓，用于告知瀏覽器文檔使用哪種 HTML 或XHTML 規(guī)范郊酒。
常見的DOCTYPE聲明：
HTML 5
<!DOCTYPE html>HTML 4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
嚴(yán)格模式和混雜模式區(qū)別
- 嚴(yán)格模式：包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）键袱。不允許框架集（Framesets）燎窘。
- 混雜模式：包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）蹄咖。不允許框架集（Framesets）褐健。
<!DOCTYPE html>用于告知瀏覽器用HTML5的語法來解析文檔。
瀏覽器亂碼的原因是什么澜汤？如何解決
代碼在編輯器中保存時(shí)使用的編碼方式蚜迅，與瀏覽器在解析時(shí)使用的解碼方式不一致。
html 的 <head>里添加<meta charset="編碼方式">保持與編輯器中設(shè)置的編碼方式一致即可解決银亲。
（常見的字符編碼方式資料參考）
常見的瀏覽器有哪些慢叨，什么內(nèi)核
- IE
IE 使用 Trident ，閉源务蝠，只有微軟的 IE 在使用拍谐，只能用于Windows平臺(tái)。存在與W3C標(biāo)準(zhǔn)脫節(jié)、大量Bug未修復(fù)的問題轩拨。- Firefox
Firefox 使用 Gecko 践瓷，就是以前的 Netscape 使用的 Mozilla 引擎，Netscape 倒了以后亡蓉，成立了Mozilla基金會(huì)晕翠，將這個(gè)引擎完全重寫，開源砍濒。此外Gecko也是一個(gè)跨平臺(tái)內(nèi)核淋肾，可以在Windows、BSD爸邢、Linux和Mac OS X中使用樊卓。- Safari
Safari 使用的是蘋果公司根據(jù) KHTML 修改來的 WebKit），閉源杠河。 WebKit本身主要是由兩個(gè)引擎構(gòu)成的碌尔，一個(gè)正是渲染引擎“WebCore”，另一個(gè)則是javascript解釋引擎“JSCore”券敌，它們均是從KDE的渲染引擎KHTML及javascript解釋引擎KJS衍生而來唾戚。- Chrome
谷歌Chrome/Chromium瀏覽器從08年創(chuàng)始至今一直使用蘋果公司的WebKit作為瀏覽器內(nèi)核原型，是WebKit的一個(gè)分支待诅，我們可以稱之為Chromium引擎叹坦。在13年發(fā)布的Chrome 28.0.1469.0版本開始，Chrome放棄Chromium引擎轉(zhuǎn)而使用最新的Blink引擎（基于WebKit2——蘋果公司于2010年推出的新的WebKit引擎）咱士，Blink對(duì)比上一代的引擎精簡了代碼立由、改善了DOM框架，也提升了安全性序厉。
列出常見的標(biāo)簽锐膜，并簡單介紹這些標(biāo)簽用在什么場景
- 換行
<br/>
- 橫線
<hr/>
- 文本突出
<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>>
- 標(biāo)題1~6
<h1>h1</h1>
- 段落
<p>This is a paragragh.</p>
- 塊
<div>Text</div>
- 圖片（自閉合標(biāo)簽在HTML 5標(biāo)準(zhǔn)中可不加“/”，XHTML必須加）
- 有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- 無序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
-
標(biāo)題：內(nèi)容
<dl> <dt>商品名稱:</dt> <dd>青花瓷</dd> <dt>特征:</dt> <dd>白色</dd> <dd>圓口</dd> <dt>商品介紹</dt> <dd>這是一個(gè)年代久遠(yuǎn)的瓷器弛房，很貴道盏，易碎</dd> </dl> 超鏈接
<a target="_blank" >百度</a>
<a href="mailto:xxx@qq.com">聯(lián)系我們</a>
<a href="#">聯(lián)系我們</a>
- 按鈕
<button>按鈕</button>
-
table
<table cellpadding="4" cellspacing="10" border="1" width="100%"> <thead> <caption>Kaisla's Table</caption> <colgroup> <col span="2" align="left"> <col align="right"> </colgroup> <th>A</th> <th>B</th> <th>C</th> </thead> <tbody> <tr> <td align="right">00</td> <td valign="bottom">01</td> <td>02</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </tbody> <tfoot> <td>20</td> <td>21</td> <td>22</td> </tfoot> </table>
