HTML、XML、XHTML的區別
定義
HTML(HyperText Markup Language)
超文本標記語言，是語法較為松散的、不嚴格的web語言；
XML（EXtensible Markup Language）
可擴展標記語言，主要用于儲存數據和結構，而非現實數據；
XHTML（EXtensible Markup Language）
可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更為嚴格
XML與HTML、XHTML的區別
- XML被設計為傳輸和儲存數據，其焦點是數據的內容，旨在傳輸數據。
- HTML、XHTML被設計用來顯示數據，其焦點是數據的外觀，旨在顯示信息。
HTML與XHTML的區別
- HTML語法較為松散，存在即使代碼沒有遵守HTML規則但還可以工作的很好的情況。
- XHTML是更為嚴格的HTML版本：
- XHTML元素必須被正確的嵌套。
- XHTML元素必須關閉。
- 標簽名必須用小寫字母。
- XHTML文檔必須有根元素。
怎樣理解 HTML 語義化
HTML語義化是一種編寫HTML的方式。
HTML語義化的好處
1. 更少的HTML代碼。
2. 更清晰的DOM結構，有利于書寫css和js
3. 便于團隊開發和維護。
4. 對搜索引擎友好。
5. 去除樣式或者丟失樣式的時候有清晰的結構。
怎樣理解內容與樣式分離的原則
- 寫 HTML 的時候先不管樣式, 重點放在HTML的結構和語義化上，讓 HTML 能體現頁面結構或者內容。之后再去寫樣式。
- 寫 JS 的時候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
- HTML 內不允許出現屬性樣式，盡量不要出現行內樣式
這樣做的好處是方面代碼的后期維護調整和代碼閱讀
有哪些常見的meta標簽
1. <meta charset='xxx'>
<meta charset='xxx'>
告訴瀏覽器，我這個頁面的代碼是用的xxx編碼方式。（用xxx來解碼）
2. <meta http-equiv='參數' content='參數變量值'>
<meta http-equiv='參數' content='參數變量值'>
瀏覽器讀到這些代碼時，可以得到一些頁面信息，更好的顯示網頁內容。
meta http-equiv='expires' content='時間' ：【expires期限】，告訴瀏覽器到了某個時間就重新傳輸一次頁面。
meta http-equic='refresh' content='數字;url=一個網址' ：【refresh刷新】，告訴瀏覽器在【數字】秒后跳轉到【一個網址】
meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' :強制瀏覽器按照特定的版本標準進行渲染。但不支持IE7及以下版本。如果是ie瀏覽器就用最新的ie渲染，如果是雙核瀏覽器就用chrome內核。
3. <meta name='參數' content='具體的參數值'>
主要用于描述網頁，更便于搜索機器人讀取代碼。
meta name='viewport' content='width=xxx等等' ：讓移動端能夠以更合理的比例顯示網頁
meta name='keywords' content='xxxx' ：告訴搜索引擎，當前頁面的關鍵字
meta name='dscription' content='xxx' ：告訴搜索引擎，當前頁面的主要內容是xxx
文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
1. 文檔聲明的作用
文檔聲明是為了告訴瀏覽器，你的 HTML 文檔是用的什么版本的 HTML 來寫的，這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔。
2. 嚴格模式和混雜模式
嚴格模式：是指瀏覽器按照 W3C 標準解析代碼。
** 混雜模式：**是指瀏覽器用自己的方式解析代碼。
3. <!doctype html> 的作用
<!doctype html> 的作用就是讓瀏覽器進入標準模式，使用最新的 HTML5標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式，而這是我們要避免的。
瀏覽器亂碼的原因是什么？如何解決
當瀏覽器解析HTML頁面時的編碼與實際頁面編碼不一致時就會產生亂碼，主要有兩種情況：
1.頁面沒有設置chartset
如果頁面沒有設置chartset，那么瀏覽器解析時就會自動選擇一種編碼，若選擇的編碼與頁面實際編碼不一致時就會產生亂碼。此時，在頁面中添加meta信息將頁面chartset設置為合適的編碼就可以了。
2. 頁面設置了chartset，但與實際使用的編碼不一致
這種情況也會導致編碼錯位的情況，這時只要修改相應的chartset值就可以了。
常見的瀏覽器有哪些，什么內核
IE內核 Trident
谷歌內核 WebKit / Blink
火狐內核 Gecko
Safarri內核 WebKit
歐朋內核 Presto
列出常見的標簽，并簡單介紹這些標簽用在什么場景
* <a> 用于超鏈接。<a href="">some text</a>
* <article> 用于一篇文章。<article>a self-contained article</article>
* <aside> 用于頁面的側邊欄。<aside>some content</aside>
* <blockquote> 用于大段的引用內容。<blockquote>some big texts</blockquote>
* <body> 頁面上顯示的所有內容都被包含在<body></body>里
* <br> 用于顯示一個換行
* <button> 用于顯示一個按鈕
* <code> 用于一包裹一段代碼內容
* <dd> 用于一個dl列表的某個dt名詞的描述
* <del> 用于刪除一些不需要的文字
* <div> 用于包裹住一些其他的標簽，制造一個容器
* <dl> 用于制作一個名詞和對應解釋的列表
* <dt> 用于一個dl列表的某個dt名詞
* <em> 用于強調一些文本內容
* <figcaption> 用于一張圖表的說明文字
* <figure> 用于一張圖表
* <footer> 用于包裹頁面的底部內容
* <form> 用于制作一個表單
* <h1>-<h6> 用于標記標題，從h1到h6重要性依次遞減
* <head> 用于包裹頁面的元數據，如<meta>, <link>, <title>等
* <header> 用于包裹頁面的頭部內容
* <hr> 用于制造出一條分隔線
* <html> 整個 HTML 文檔的根元素，包裹住其他所有的元素
* <iframe> 用于嵌入另一個小頁面到一個頁面中
* <img> 用于顯示一張圖片
* <input> 用于顯示一個表格輸入控件
* <label> 用于給一個表格輸入控件打上一個標簽，說明輸入控件的作用
* <li> 用于<ul>和<ol>標簽，代表一個列表項
* <link> 用于鏈接外部CSS文件
* <mark> 用于高亮顯示某些文本
* <meta> 用于下達一些元數據指令，或者對頁面進行說明
* <nav> 用于包裹住一個導航條的內容
* <ol> 用于制作一個有序列表
* <p> 用于顯示一個段落
* <q> 用于一小段引用文字
* <script> 用于一段JavaScript腳本代碼，或者引入一個外部JavaScript腳本文件
* <section> 用于包裹一部分有邏輯關第的頁面內容
* <select> 用于制作一個下拉列表選框
* <span> 用于包裹住一小段文字，作為一個容器
* <strong> 用于著重強調重要的文本內容
* <style> 用于給頁面元素加上樣式
* <sub> 用于下標文本
* <sup> 用于上標文本
* <table> 用于制作一個表格
* <tbody> 用于表格里的主體部分
* <td> 用于表格里的某一個單元格
* <textarea> 用于制作一大塊文本輸入框
* <tfoot> 用于表格里的底部
* <th> 用于表格里的表頭的單元格
* <thead> 用于表格里的表頭
* <time> 用于頁面內容中的時間
* <title> 用于顯示整個頁面的標題（顯示在瀏覽器的tab上）
* <tr> 用于標記表格里的一行
* <ul> 用于制作一個無序列表
