1.什么是HTML？
HTML是用來描述網(wǎng)頁的一種語言
- HTML指的是超文本標(biāo)記語言（Hyper Text Markup Language）-
- HTML不是一種編程語言，而是一種標(biāo)記語言（markup language）
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽（markup tag）
- HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
2.HTML、XML、XHTML之間的區(qū)別
- HTML：超文本標(biāo)記語言，語法松散、不嚴(yán)格的標(biāo)記語言
- XML：可擴(kuò)展標(biāo)記語言，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)
- XHTML：可擴(kuò)展超文本標(biāo)記語言，基于XML，作用與HTML類似，語法更嚴(yán)謹(jǐn)更純凈的HTML版本
HTML與XHTML的區(qū)別：
- XHTML 元素必須被正確地嵌套
- XHTML 元素必須被關(guān)閉
- XHTML 標(biāo)簽名必須使用小寫字母
- XHTML 文檔必須擁有根元素
3.HTML語義化
1. 什么是語義化
語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（標(biāo)簽語義化），便于開發(fā)者閱讀和寫出更規(guī)范的代碼的同時(shí)，讓瀏覽器的爬蟲和機(jī)器更好的解析。
2. 為什么要語義化？
有利于SEO
和搜索引擎建立良好的溝通，有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重清晰的頁面結(jié)構(gòu)
語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)和代碼結(jié)構(gòu)，增強(qiáng)頁面的可讀性便于團(tuán)隊(duì)開發(fā)和維護(hù)
在團(tuán)隊(duì)中大家遵循同一個(gè)標(biāo)準(zhǔn)，使用規(guī)范的代碼，方便開發(fā)和維護(hù)，提高開發(fā)效率方便其他設(shè)備的解析
4. 怎樣理解內(nèi)容與樣式分離的原則
HTML——結(jié)構(gòu)
寫HTML的時(shí)候先不管樣式，重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)和內(nèi)容
CSS——表現(xiàn)
寫完HTML的結(jié)構(gòu)和內(nèi)容后，再進(jìn)行CSS樣式的編寫，減少HTML與CSS契合度（即內(nèi)容與樣式分離）
JavaScrip——行為
寫JS的時(shí)候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）
樣式結(jié)構(gòu)分離優(yōu)點(diǎn)：
- 瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，頁面樣式的代碼寫在了CSS當(dāng)中，頁面體積容量變得更小
- 修改網(wǎng)頁樣式時(shí)，更有效率、更省時(shí)間。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記，到CSS里找到相應(yīng)的ID或class，可以快速替換指定位置的樣式，不會(huì)破壞頁面架構(gòu)和其他部分的樣式
- 可以確保網(wǎng)頁都能平穩(wěn)退化。具備CSS支持的瀏覽器固然可以把網(wǎng)頁呈現(xiàn)的美輪美奐，不支持或禁用了CSS功能的瀏覽器同樣可以把網(wǎng)頁的內(nèi)容按照正確的內(nèi)容結(jié)構(gòu)顯示出來
5.有哪些常見的meta標(biāo)簽
1.meta標(biāo)簽定義和用法
- <meta>元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞
- <meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容；<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對
2.常見meta標(biāo)簽用法
<meta charset="utf-8">
告訴瀏覽器頁面的編碼方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
雙核瀏覽器時(shí)，指定使用哪種內(nèi)核進(jìn)行解析
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用于移動(dòng)端的展示合理
<meta name="keywords" content="前端 饑人谷">
搜索引擎優(yōu)化，網(wǎng)頁關(guān)鍵字
<meta name="description" content="最有愛的前端學(xué)習(xí)社區(qū)">
搜索引擎優(yōu)化,網(wǎng)站描述信息
<meta name="author" content="你的姓名">
搜索引擎優(yōu)化,站點(diǎn)的作者
<meta http-equiv="Content-Type" content="text/html";charset=utf-8">
指定字符集
<meta http-equiv="refresh" content="n;url=">
定時(shí)讓網(wǎng)頁在指定的時(shí)間n內(nèi)跳轉(zhuǎn)
<meta http-equiv="pragma" content="no-cache">
禁用緩存
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
cookie設(shè)定，如果網(wǎng)頁過期，存盤的cookie將被刪除。需要注意的也是必須使用GMT時(shí)間格式
6. 文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
1. Doctype作用是什么？
- <!DOCTYPE>聲明叫做文件類型定義（DTD）,聲明的作用是為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個(gè)規(guī)范來解析文檔。
- <!DOCTYPE>聲明必須在HTML文檔的第一行，這并不是一個(gè)HTML標(biāo)簽。
2.嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義？
嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照W3C標(biāo)準(zhǔn)解析代碼
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼
如何區(qū)分：瀏覽器解析時(shí)到底使用嚴(yán)格模式還是混雜模式，與網(wǎng)頁中的DTD直接相關(guān)
- 如果文檔包含嚴(yán)格的 DOCTYPE ，那么它一般以嚴(yán)格模式呈現(xiàn)。（嚴(yán)格 DTD ——嚴(yán)格模式）
- 包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴(yán)格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標(biāo)識(shí)符，就是聲明最后的地址）會(huì)導(dǎo)致頁面以混雜模式呈現(xiàn)。（有 URI 的過渡 DTD ——嚴(yán)格模式；沒有 URI 的過渡 DTD ——混雜模式）
- DOCTYPE 不存在或形式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)。（DTD不存在或者格式不正確——混雜模式）
- HTML5 沒有 DTD ，因此也就沒有嚴(yán)格模式與混雜模式的區(qū)別，HTML5 有相對寬松的語法，實(shí)現(xiàn)時(shí)，已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容。（__ HTML5 沒有嚴(yán)格和混雜之分__）
意義：嚴(yán)格模式與混雜模式存在的意義與其來源密切相關(guān)，如果說只存在嚴(yán)格模式，那么許多舊網(wǎng)站必然受到影響，如果只存在混雜模式，那么會(huì)回到當(dāng)時(shí)瀏覽器大戰(zhàn)時(shí)的混亂，每個(gè)瀏覽器都有自己的解析模式。
7.瀏覽器亂碼的原因是什么？如何解決
-
幾種編碼方式
ASCII
計(jì)算機(jī)發(fā)明之后需要使用0和1來表示字符，于是美國人在50年代發(fā)明了 ASCII (美國標(biāo)準(zhǔn)信息交換代碼,American Standard Code for Information Interchange) 碼。它由128個(gè)字符組成，包括大小寫字母、數(shù)字0-9、標(biāo)點(diǎn)符號(hào)、非打印字符（換行符、制表符等4個(gè)）以及控制字符（退格、響鈴等）組成，每個(gè)字符占7位（1字節(jié)是8位）。比如 'a'的 ASCII碼10進(jìn)制是97，二進(jìn)制是 01100001。
ISOLatin-1
可以認(rèn)為ASCII是美國發(fā)明針對英語設(shè)計(jì)的，但歐洲人在用的時(shí)候出現(xiàn)了問題。對于一些特殊的拉丁字符，比如法文德文里某些字符，ASCII字符集就不包括。于是歐洲人發(fā)明了一種8位字符集是ISO 8859-1Latin 1，也簡稱為ISOLatin-1。它對ASCII做了個(gè)擴(kuò)充，對于0-127之間的字符還使用ASCII里的字符不變， 把位于128-255之間的字符表示拉丁字母表中特殊語言字符。
UNICODE
后來計(jì)算機(jī)不斷發(fā)展擴(kuò)展到亞洲非洲，如何用計(jì)算機(jī)使用的二進(jìn)制表示這些語言又成了問題。ISOLatin-1的8位字符集只能表示256個(gè)字符，而僅漢語就有80000以上個(gè)字符。如何把地球上絕大多數(shù)語言用一種編碼方式表示出來呢？ 于是發(fā)明了UNICODE編碼，只用2個(gè)字節(jié)(16位)就可以編碼地球上幾乎所有地區(qū)的文字。
但是，UNICODE只是理論上的編碼方式，相當(dāng)于給世界上每個(gè)文字打了個(gè)編號(hào)，但這編號(hào)具體如何在計(jì)算機(jī)里面存儲(chǔ)，可以有多種實(shí)現(xiàn)方式。比如utf-8和gbk。
前面說了UNICODE只是給每個(gè)文字打了個(gè)編號(hào)，為啥不把這個(gè)編號(hào)直接轉(zhuǎn)化成二進(jìn)制存儲(chǔ)在計(jì)算機(jī)里面呢？ 比如英文字母s的編號(hào)是115, 用二進(jìn)制表示是00000000 1110011, 中文日的編號(hào)是26085 (16進(jìn)制是65e5) ，二進(jìn)制是11001011 1100101。老外才沒那么傻，對于老外這種日常純粹是用英文字符的人來說明明之前1個(gè)字節(jié)就能存儲(chǔ)一個(gè)字母，現(xiàn)在為了全球大一統(tǒng)非要存儲(chǔ)為2個(gè)字節(jié)，相當(dāng)于一個(gè)之前一個(gè)1M的文檔，現(xiàn)在變?yōu)?M。于是老外耍了賴，英文字母s是115沒錯(cuò)，但我就用1個(gè)字節(jié)1110011表示，而你中文日是26085號(hào)也沒錯(cuò)，但是你不能在使用2個(gè)表示，而是用2個(gè)甚至6個(gè)字節(jié)表示。（為了英文的特權(quán)，犧牲其他語言的存儲(chǔ)空間的便利），這個(gè)編碼方式就是UTF-8。
UTF-8
UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼。UTF-8用1到6個(gè)字節(jié)編碼UNICODE字符。用在網(wǎng)頁上可以同一頁面顯示中文簡體繁體及其它語言（如英文，日文，韓文）。
那GBK又是如何產(chǎn)生的呢？
GBK
這時(shí)候中國人不干了，為啥你制定了全球大一統(tǒng)的規(guī)則，卻為了自己的便利又破壞規(guī)則，連這點(diǎn)小便宜都不放過(典型的美國人作風(fēng))？ 明明用2個(gè)字節(jié)就能表示中文一個(gè)漢字，現(xiàn)在UTF-8編碼中文竟然需要2個(gè)甚至4個(gè)字節(jié)來表示。于是中國制定一套自己的規(guī)則，于是用2個(gè)字節(jié)來表示一個(gè)漢字，總共可以覆蓋2萬多個(gè)文字。 對于英文，好吧讓一步，還保留和你UTF-8同樣的方式使用一個(gè)字節(jié)來表示。
下圖是把當(dāng)前文章分別保存為 gbk 何 utf-8兩種編碼格式下文件大小的對比，表明用 gbk 確實(shí)省空間
記?。篣NICODE只是給字符一個(gè)代號(hào)，而GBK和UTF-8使用不同的規(guī)則來表示同一個(gè)代號(hào)。
2.網(wǎng)頁亂碼如何產(chǎn)生的呢？
下面這個(gè)流程是我們寫入文件到展示文件的簡單描述：
我們使用編輯器編寫 HTML 文件
保存編寫的HTML文件
使用瀏覽器打開HTML文件
HTML文件在瀏覽器展示
亂碼產(chǎn)生的根源就在與第2步驟和第4步。
在第2步保持文件時(shí)會(huì)把我們寫入的文字使用編輯器默認(rèn)的編碼方式進(jìn)行保存。如果大家使用的是vscode編輯器，默認(rèn)的編碼方式是utf-8。
首先，在文件保存的時(shí)候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式，那么一定要在html 的
<head>里添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個(gè)頁面的時(shí)候不要去猜了，直接用utf-8去解碼。 同理，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">。
3.總結(jié)&解決亂碼方法：
亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的。
亂碼一般是英文以外的字符才會(huì)出現(xiàn)。
為啥純粹的英文不會(huì)出現(xiàn)亂碼問題，即使編碼方式和解碼方式不一致？那是因?yàn)榍懊嬷v過了 utf-8、gbk對英文都是采用1個(gè)字節(jié)的編碼方式，并且使用了相同的碼字。
解決方法：
首先，在文件保存的時(shí)候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個(gè)頁面的時(shí)候不要去猜了，直接用utf-8去解碼。 同理，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">。
8.常見的瀏覽器有哪些，什么內(nèi)核
| 瀏覽器 | 內(nèi)核 |
|---|---|
| IE | Trident |
| Firefox | Gecko |
| Chrome | Webkit |
| Safari | Webkit |
| Opera | Presto |
| 新Chrome | Blink |
9.列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景
常見標(biāo)簽 場景
| 瀏覽器 | 內(nèi)核 |
|---|---|
| h1 h2 h3 h4 h5 | 標(biāo)題：大標(biāo)題 、二級(jí)標(biāo)題、..... |
| p | 表示大段文字:ps標(biāo)題和段落不能互相包裹 |
| a | 鏈接 target="_blank" 在新頁面打開; target ="_self" 在當(dāng)前頁打開; href="#id"跳到對應(yīng)的id |
| img | 圖片 ：只閉合標(biāo)簽，最后不需要加 / ; alt="圖片描述"： 搜索引擎優(yōu)化 |
| ul li | 無序列表 ：用于表示并列內(nèi)容，可以嵌套 |
| ul ol | 有序列表：用于表示有步驟或編號(hào)的并列內(nèi)容，可以嵌套 |
| dl dt dd | 用于一系列"標(biāo)題，內(nèi)容...." 的場景 |
| button | 按鈕 |
| em strong span | em用于強(qiáng)調(diào)一下， strong很重要，強(qiáng)調(diào)性更強(qiáng), span用于包裹文字，方便添加樣式 |
| iframe | 用于嵌入頁面 |
| table | 用于展示表格，不要用來做布局 |
