HTML、XML、XHTML 有什么區別
- HTML:超文本標記語言 (Hyper Text Markup Language)，用來描述網頁的一種語言。不是一種編程語言，而是一種標記語言 (markup language)，即一套標記標簽 (markup tag) ，用來描述網頁。
- XML：可擴展標記語言（EXtensible Markup Language），用來傳輸和存儲數據。 XML 很類似 HTML，是一種必須正確標記且格式良好的標記語言，它用于傳輸數據，而非顯示數據。XML標簽沒有被預定義，需要自行定義標簽。
- XHTML：可擴展超文本標簽語言（EXtensible HyperText Markup Language），基于XML，作用與HTML類似，但語法更嚴格。
三者區別
- 比較xhtml和html
很多頁面包含了“糟糕”的 HTML：編碼不規范，結構混亂臃腫；表現和結構混亂；不能使用更多的網絡設備，比如手機、PDA等，所以 ，W3C制定了XHTML，通過結合 XML 和 HTML 的長處，開發出了 XHTML。XHTML 是作為 XML 被重新設計的 HTML。有以下區別：
1、文檔結構
- XHTML DOCTYPE 是強制性的，即<!DOCTYPE ....> 是必須有
- <html> 中的 XML namespace 屬性是必須的
- <html>、<head>、<title> 以及 <body> 也是必須的
2、 元素語法
- XHTML 元素必須正確嵌套
- XHTML 元素必須始終關閉
- XHTML 元素必須小寫
- XHTML 文檔必須有一個根元素
3、 屬性語法
- XHTML 屬性必須使用小寫
- XHTML 屬性值必須用引號包圍
- XHTML 屬性最小化也是禁止的 <input checked="checked">是可以的，而<input checked>是不可以的
- xml和html區別：XML 用來描述數據，其標簽沒有被預定義，需要自行定義標簽，而 HTML 則用來顯示數據，標簽已定義好。
怎樣理解 HTML 語義化
HTML語義化是什么？
語義化HTML就是選擇合適的標簽、使用合理的代碼結構來編寫HTML的方式，使代碼更具可讀性，也使得瀏覽器的爬蟲和機器能對代碼更好的解析。-
為什么要語義話？
- 有利于SEO，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標簽來確定上下文和各個關鍵字的權重。
- 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構，清晰的頁面結構，使頁面可讀性更強。
- 方便其他設備的解析
- 便于團隊開發和維護
怎樣理解內容與樣式分離的原則
- 為何要分離
最初主流瀏覽器為了顯示更豐富的web文檔，不斷地將新的標簽和屬性添加到HTML標簽中。隨著頁面內容的豐富，瀏覽器性能的提高，內容和樣式的耦合使得HTML文件難以理解和維護。為了解決這個問題，萬維網聯盟在 HTML 4.0 之外提出層疊樣式表（CSS），使用CSS完成樣式與內容的分離。 - 怎么做到分離
- 寫 HTML 的時候先不管樣式, 重點放在HTML的結構和語義化上，讓 HTML 能體現頁面結構或者內容。之后再去寫樣式。
- 寫 JS 的時候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化。
- HTML 內不允許出現屬性樣式，盡量不要出現行內樣式。
- 分離的好處
- 數據的多樣顯示。通過不同的樣式表適應不同的設備，做到內容與設備無關
- 保持整個站點的視覺一致性變得非常簡單，修改樣式表就可以輕松改版;
- 由于結構清晰，數據的集成、更新和處理更加方便靈活；
- 更好地被搜索引擎收錄，基于內容與樣式分離的原則，html的語義化就是首要考慮的,網頁中語義化的標簽代碼就會更加適合搜索引擎。
有哪些常見的meta標簽
- meta是什么
metadata，中文名叫元數據，是用于描述數據的數據。它不會顯示在頁面上，但是機器卻可以識別。 - 作用
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
meta常用于定義頁面的說明，關鍵字，最后修改日期，和其它的元數據。這些元數據將服務于瀏覽器（如何布局或重載頁面），搜索引擎和其它網絡服務。
- 組成
meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性。- name屬性
name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。meta標簽中name屬性語法格式是：
- name屬性
<meta name="參數" content="具體的描述">。
其中name屬性共有以下幾種參數。
- keywords(關鍵字)
說明：用于告訴搜索引擎，你網頁的關鍵字。舉例：
<meta name="keywords" content="前端,饑人谷">
- description(網站內容的描述)
說明：用于告訴搜索引擎，你網站的主要內容。舉例：
<meta name="description" content="課程 PPT">
- viewport(移動端的窗口)
說明：這個屬性常用于設計移動端網頁。在用bootstrap等框架時候都有用過viewport。下次博客上具體寫該內容。舉例：
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- renderer(雙核瀏覽器渲染方式)
說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：
<meta name="renderer" content="webkit"> //默認webkit內核
<meta name="renderer" content="ie-comp"> //默認IE兼容模式
<meta name="renderer" content="ie-stand"> //默認IE標準模式
- robots(定義搜索引擎爬蟲的索引方式)
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。
舉例：
- http-equiv屬性
equiv的全稱是"equivalent"意思是相等，相當于。http-equiv可以理解為相當于HTTP的作用，比如說定義些HTTP參數。語法格式：
<meta http-equiv="參數" content="具體的描述">
- content-Type(設定網頁字符集)
說明：用于設定網頁字符集，便于瀏覽器解析與渲染頁面舉例：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦
<meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用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">
其中還有幾種用法
no-cache: 先發送請求，與服務器確認該資源是否被更改，如果未被更改，則使用緩存。
no-store: 不允許緩存，每次都要去服務器上，下載完整的響應。（安全措施）
public : 緩存所有響應，但并非必須。因為max-age也可以做到相同效果
private : 只為單個用戶緩存，因此不允許任何中繼進行緩存。（比如說CDN就不允許緩存private的響應）
maxage : 表示當前請求開始，該響應在多久內能被緩存和重用，而不去服務器重新請求。例如：max-age=60表示響應可以再緩存和重用 60 秒。
參考 HTTP緩存
- expires(網頁到期時間)
說明:用于設定網頁的到期時間，過期后網頁必須到服務器上重新傳輸。舉例：
<meta http-equiv="expires" content="Tuesday 22 May 2017 01:00 GMT" />
- refresh(自動刷新并指向某頁面)
說明：網頁將在設定的時間內，自動刷新并調向設定的網址。舉例:
<meta http-equiv="refresh" content="2；URL=https://jirengu.com/">
- Set-Cookie(cookie設定)
說明：如果網頁過期。那么這個網頁存在本地的cookies也會被自動刪除。
<meta http-equiv="Set-Cookie" content="name, date"> //格式
文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
- 文檔聲明的作用是告知瀏覽器頁面使用的HTML版本；
- 嚴格模式又叫標準模式，使頁面按照 HTML 與 CSS 的定義渲染。
混雜模式，又叫怪異模式，以比較寬松的向后兼容的方式呈現，模擬老式瀏覽器以兼容老的站點； - <!doctype html> 的作用就是讓瀏覽器進入標準模式，使用最新的 HTML5標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式，而這是我們要避免的。
瀏覽器亂碼的原因是什么？如何解決
亂碼產生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。
- 比如網頁源代碼是gbk的編碼，而內容中的中文字是utf-8編碼的，這樣瀏覽器打開即會出現html亂碼。反之網頁是編碼utf-8，內容是gbk也會出現亂碼。
- html網頁編碼是gbk，而程序從數據庫中調出呈現是utf-8編碼的內容也會造成編碼亂碼。
- 瀏覽器不能自動檢測網頁編碼，造成網頁亂碼。
解決方案：首先，在文件保存的時候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了，直接用utf-8去解碼。 同理，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">。
常見的瀏覽器有哪些，什么內核
- 常見的瀏覽器有IE、Mozilla Firefox、Google Chrome、Safari、opera、360，搜狗，遨游等瀏覽器。
- 所謂的“瀏覽器內核”指的是一個瀏覽器最核心的部分——“Rendering Engine”，叫做“渲染引擎”,也常稱其為“排版引擎”、“解釋引擎”。這個引擎的作用是幫助瀏覽器來渲染網頁的內容，將頁面內容和排版代碼轉換為用戶所見的視圖。
| 瀏覽器 | 內核 |
|---|---|
| IE、傲游、世界之窗瀏覽器 | IE內核 |
| Firefox | Mozilla |
| Safari | WebKit |
| Chrome | WebKit |
| OperaPresto | Presto |
| 搜狗、qq、傲游 | WebKit與IE雙核 |
列出常見的標簽，并簡單介紹這些標簽用在什么場景
- h1-h6 標題標簽
- p 段落標簽
- a 鏈接標簽
- href="#about" 跳轉到id為about的位置
- href="/demo" 跳轉至完整域名+demo
- img 圖片鏈接
- alt 圖片無法展示時，顯示內容，便于視力障礙人士使用
- div 塊標簽
- button 按鈕標簽
- strong 強調元素
- em 中層強調元素
- span 標記一段行內元素
- iframe 在當前頁面嵌入一個頁面
- ul 無序列表
- li ul的子標簽，ul下的直接元素必須是li
- ol 有序列表
- li ol的子元素
- dl 展示有標題和內容的自定義表格
- dt 定義項目
- dd 定義的描述
- table 用于展示表格，不要用來做布局
- thead、tbody、tfoot 一般不用寫
- tr 代表表格的一行
- th 代表表格第一行的列內容
- td 代表表格的一列
