HTML、XML、XHTML 有什么區別
- HTML,超文本標記語言，被設計用來顯示數據，使用預定義標簽，是語法較為松散的、不嚴格的Web語言；
- XML,可擴展標記語言，主要用于存儲和傳輸數據，使用自定義標簽，語法嚴格（必須有閉合標簽，標簽大小寫敏感等）；
- XHTML,可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格.
怎樣理解 HTML 語義化
- 語義化就是選擇合適的標簽、使用合理的代碼結構，便于開發者閱讀，同時讓瀏覽器爬蟲和機器很好的解析；
- 語義化的好處：
- 有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標簽來確定上下文和各個關鍵字的權重。
- 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構
- 方便其他設備的解析（如屏幕閱讀器）
- 便于團隊開發和維護
怎樣理解內容與樣式分離的原則
- 內容和樣式的分離，就是指在網頁編碼的過程中，要將HTML和CSS兩大部分分開。寫HTML的時候先不管樣式，重點放在HTML的結構和語義化上，讓HTML能體現頁面結構和內容；然后進行 CSS 樣式的編寫，減少內容與樣式的耦合；
- 內容與樣式分離的好處：
- 瀏覽器加載網頁頁面速度變快。分離原則下，頁面樣式的代碼寫在了CSS當中，HTML體積變得更??；
- 代碼易于維護，修改網頁樣式時，更有效率。根據html標簽內ID或class的標記，到CSS里找到相應的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構和其他部分的樣式
有哪些常見的meta標簽
meta常用于定義頁面的說明、關鍵字、作者、最后修改日期和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它web服務
meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性
常見meta標簽：
- keywords(關鍵字)
<meta name="keywords" content="博客，前端"> - description(網站內容的描述)
<meta name="description" content="熱愛前端與編程"> - viewport(移動端的窗口)
<meta name="viewport" content="width=device-width, initial-scale=1"> - author(作者)
<meta name="author" content="author_name,123456789@qq.com"> - copyright(版權)
<meta name="copyright" content="xxx"> - renderer(雙核瀏覽器渲染方式)
<meta name="renderer" content="webkit"> //默認webkit內核
renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面 - 指定網頁字符集
<meta charset="utf-8"> - X-UA-Compatible(瀏覽器采取何種版本渲染當前頁面)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面 - cache-control(指定請求和響應遵循的緩存機制)
<meta http-equiv="cache-control" content="no-cache"> - expires(網頁到期時間)
<meta http-equiv="expires" content="Sunday 26 October 2016 01:00 GMT" /> - refresh(自動刷新并指向某頁面)
<meta http-equiv="refresh" content="2；URL=http://www.XXX.com/"> - Set-Cookie(cookie設定)
<meta http-equiv="Set-Cookie" content="User=xxx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT">
文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
- 文檔聲明用來告知瀏覽器當前文檔所使用的類型，讓瀏覽器解析器知道要用什么規范來解析文檔;
- 標準模式（standards mode）：瀏覽器根據標準規約來渲染頁面;
- 混雜模式（quirks mode）：瀏覽器采用更加寬松的、向后兼容的方式來渲染頁面?；祀s模式下，瀏覽器會模仿舊瀏覽器的行為，比如IE6，在此基礎上兼容新的標準特性。 混雜模式又稱兼容模式、怪異模式等；
-
<!doctype html>是html5標準網頁聲明,告訴瀏覽器用最新的HTML5標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式。
瀏覽器亂碼的原因是什么？如何解決
- 亂碼產生的根本原因是保存的編碼格式和瀏覽器解析時的解碼格式不匹配
- 在HTML的
<head>里添加<meta charset='xxx'>并且保存的時候仍選擇同樣的編碼方式；
常見的瀏覽器有哪些，什么內核
| 瀏覽器 | 內核 | 說明 |
|---|---|---|
| IE | Trident | 在IE4中被首次采用，并沿用到了IE11，win10的Edge瀏覽器內核為EdgeHTML |
| Firefox | Gecko | Netscape6開始采用的內核，后來的FireFox也采用了該內核，開源 |
| Opera | Presto -> Blink | Presto引擎的特點就是渲染速度的優化達到了極致，然而代價是犧牲了網頁的兼容性 |
| Safari | Webkit | KHTML的分支，從KDE的KHTML及KJS引擎衍生而來，開源 |
| Chrome | Webkit -> Blink | Blink是webkit的分支 |
列出常見的標簽，并簡單介紹這些標簽用在什么場景
| 標簽 | 應用 |
|---|---|
<html> |
是 HTML 頁面的根元素； |
<body> |
包含頁面的主體內容； |
<head> |
包含了文檔的元（meta）數據； |
<meta> |
提供了元數據.元數據也不顯示在頁面上，被瀏覽器解析； |
<link> |
定義了文檔與外部資源之間的關系。通常用于鏈接到樣式表； |
<style> |
定義了HTML文檔的樣式文件引用地址，在<style> 元素中可直接添加樣式來渲染 HTML 文檔； |
<script> |
用于加載腳本文件，如： JavaScript； |
<title> |
描述了文檔的標題； |
<h1>-<h6> |
定義了一級標題到六級標題，標題字體大小逐漸減弱； |
<p> |
定義一個段落； |
<a> |
定義超鏈接 |
<image> |
定義html圖像?？赏ㄟ^width和heigth屬性來指定圖像的大小； |
<div> |
定義塊級元素，它是可用于組合其他 HTML 元素的容器,沒有特定的含義 |
<span> |
是內聯元素，也沒有特定的含義，可用作文本的容器； |
<ol><li> |
有序列表，列表項目會使用數字進行標記； |
<ul><li> |
無序列表，列表項目會使用粗體圓點（典型的小黑圓圈）進行標記； |
<table> |
定義表格； |
<tr> |
定義表格的行； |
<td> |
定義表格每行的列； |
<th> |
定義表格的表頭； |
<tbody> |
定義表格的主體； |
<tfoot> |
定義表格的頁腳 ； |
<iframe> |
用于在當前頁面嵌入新頁面； |
<strong> |
定義重要的文本； |
<em> |
定義被強調的文本。 |
參考：
http://chenhaizhou.github.io/2015/12/09/html-sense.html
https://segmentfault.com/a/1190000004279791
http://harttle.com/2016/01/22/doctype.html
https://juejin.im/entry/57ff3cea0e3dd90057e5f25e
