1.什么是HTML技扼？
HTML是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言
- HTML指的是超文本標(biāo)記語(yǔ)言（Hyper Text Markup Language）-
- HTML不是一種編程語(yǔ)言庸推，而是一種標(biāo)記語(yǔ)言（markup language）
- 標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽（markup tag）
- HTML使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
2.HTML茫虽、XML元咙、XHTML之間的區(qū)別
- HTML：超文本標(biāo)記語(yǔ)言示启，語(yǔ)法松散浑槽、不嚴(yán)格的標(biāo)記語(yǔ)言
- XML：可擴(kuò)展標(biāo)記語(yǔ)言蒋失，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)
- XHTML：可擴(kuò)展超文本標(biāo)記語(yǔ)言，基于XML桐玻，作用與HTML類似篙挽，語(yǔ)法更嚴(yán)謹(jǐn)更純凈的HTML版本
HTML與XHTML的區(qū)別：
- XHTML 元素必須被正確地嵌套
- XHTML 元素必須被關(guān)閉
- XHTML 標(biāo)簽名必須使用小寫(xiě)字母
- XHTML 文檔必須擁有根元素
3.HTML語(yǔ)義化
1. 什么是語(yǔ)義化
語(yǔ)義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（標(biāo)簽語(yǔ)義化）镊靴，便于開(kāi)發(fā)者閱讀和寫(xiě)出更規(guī)范的代碼的同時(shí)铣卡，讓瀏覽器的爬蟲(chóng)和機(jī)器更好的解析链韭。
2. 為什么要語(yǔ)義化？
有利于SEO
和搜索引擎建立良好的溝通煮落，有助于爬蟲(chóng)抓取更多的有效信息敞峭，爬蟲(chóng)是依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重清晰的頁(yè)面結(jié)構(gòu)
語(yǔ)義化的HTML在沒(méi)有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)和代碼結(jié)構(gòu)，增強(qiáng)頁(yè)面的可讀性便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)
在團(tuán)隊(duì)中大家遵循同一個(gè)標(biāo)準(zhǔn)蝉仇，使用規(guī)范的代碼旋讹，方便開(kāi)發(fā)和維護(hù)，提高開(kāi)發(fā)效率方便其他設(shè)備的解析
4. 怎樣理解內(nèi)容與樣式分離的原則
HTML——結(jié)構(gòu)
寫(xiě)HTML的時(shí)候先不管樣式轿衔，重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上沉迹，讓HTML能體現(xiàn)頁(yè)面結(jié)構(gòu)和內(nèi)容
CSS——表現(xiàn)
寫(xiě)完HTML的結(jié)構(gòu)和內(nèi)容后，再進(jìn)行CSS樣式的編寫(xiě)害驹，減少HTML與CSS契合度（即內(nèi)容與樣式分離）
JavaScrip——行為
寫(xiě)JS的時(shí)候鞭呕，盡量不要用JS去直接操作樣式，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化（即行為分離）
樣式結(jié)構(gòu)分離優(yōu)點(diǎn)：
- 瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快裙秋。分離原則下琅拌，頁(yè)面樣式的代碼寫(xiě)在了CSS當(dāng)中，頁(yè)面體積容量變得更小
- 修改網(wǎng)頁(yè)樣式時(shí)摘刑，更有效率进宝、更省時(shí)間。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記枷恕，到CSS里找到相應(yīng)的ID或class党晋，可以快速替換指定位置的樣式，不會(huì)破壞頁(yè)面架構(gòu)和其他部分的樣式
- 可以確保網(wǎng)頁(yè)都能平穩(wěn)退化徐块。具備CSS支持的瀏覽器固然可以把網(wǎng)頁(yè)呈現(xiàn)的美輪美奐未玻，不支持或禁用了CSS功能的瀏覽器同樣可以把網(wǎng)頁(yè)的內(nèi)容按照正確的內(nèi)容結(jié)構(gòu)顯示出來(lái)
5.有哪些常見(jiàn)的meta標(biāo)簽
1.meta標(biāo)簽定義和用法
- <meta>元素可提供有關(guān)頁(yè)面的元信息（meta-information），比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞
- <meta>標(biāo)簽位于文檔的頭部胡控，不包含任何內(nèi)容扳剿；<meta>標(biāo)簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對(duì)
2.常見(jiàn)meta標(biāo)簽用法
<meta charset="utf-8">
告訴瀏覽器頁(yè)面的編碼方式
<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)頁(yè)關(guān)鍵字
<meta name="description" content="最有愛(ài)的前端學(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)頁(yè)在指定的時(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)頁(yè)過(guò)期，存盤(pán)的cookie將被刪除橙困。需要注意的也是必須使用GMT時(shí)間格式
6. 文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
1. Doctype作用是什么瞧掺？
- <!DOCTYPE>聲明叫做文件類型定義（DTD）,聲明的作用是為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個(gè)規(guī)范來(lái)解析文檔凡傅。
- <!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)頁(yè)中的DTD直接相關(guān)
- 如果文檔包含嚴(yán)格的 DOCTYPE 亚隅，那么它一般以嚴(yán)格模式呈現(xiàn)。（嚴(yán)格 DTD ——嚴(yán)格模式）
- 包含過(guò)渡 DTD 和 URI 的 DOCTYPE 庶溶，也以嚴(yán)格模式呈現(xiàn)，但有過(guò)渡 DTD 而沒(méi)有 URI （統(tǒng)一資源標(biāo)識(shí)符懂鸵，就是聲明最后的地址）會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)偏螺。（有 URI 的過(guò)渡 DTD ——嚴(yán)格模式；沒(méi)有 URI 的過(guò)渡 DTD ——混雜模式）
- DOCTYPE 不存在或形式不正確會(huì)導(dǎo)致文檔以混雜模式呈現(xiàn)匆光。（DTD不存在或者格式不正確——混雜模式）
- HTML5 沒(méi)有 DTD 套像，因此也就沒(méi)有嚴(yán)格模式與混雜模式的區(qū)別，HTML5 有相對(duì)寬松的語(yǔ)法终息，實(shí)現(xiàn)時(shí)夺巩，已經(jīng)盡可能大的實(shí)現(xiàn)了向后兼容。（__ HTML5 沒(méi)有嚴(yán)格和混雜之分__）
意義：嚴(yán)格模式與混雜模式存在的意義與其來(lái)源密切相關(guān)周崭，如果說(shuō)只存在嚴(yán)格模式柳譬，那么許多舊網(wǎng)站必然受到影響，如果只存在混雜模式续镇，那么會(huì)回到當(dāng)時(shí)瀏覽器大戰(zhàn)時(shí)的混亂美澳，每個(gè)瀏覽器都有自己的解析模式。
7.瀏覽器亂碼的原因是什么摸航？如何解決
-
幾種編碼方式
ASCII
計(jì)算機(jī)發(fā)明之后需要使用0和1來(lái)表示字符制跟，于是美國(guó)人在50年代發(fā)明了 ASCII (美國(guó)標(biāo)準(zhǔn)信息交換代碼,American Standard Code for Information Interchange) 碼。它由128個(gè)字符組成酱虎，包括大小寫(xiě)字母雨膨、數(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是美國(guó)發(fā)明針對(duì)英語(yǔ)設(shè)計(jì)的社露，但歐洲人在用的時(shí)候出現(xiàn)了問(wèn)題。對(duì)于一些特殊的拉丁字符琼娘，比如法文德文里某些字符峭弟，ASCII字符集就不包括附鸽。于是歐洲人發(fā)明了一種8位字符集是ISO 8859-1Latin 1，也簡(jiǎn)稱為ISOLatin-1瞒瘸。它對(duì)ASCII做了個(gè)擴(kuò)充坷备，對(duì)于0-127之間的字符還使用ASCII里的字符不變， 把位于128-255之間的字符表示拉丁字母表中特殊語(yǔ)言字符情臭。
UNICODE
后來(lái)計(jì)算機(jī)不斷發(fā)展擴(kuò)展到亞洲非洲省撑，如何用計(jì)算機(jī)使用的二進(jìn)制表示這些語(yǔ)言又成了問(wèn)題。ISOLatin-1的8位字符集只能表示256個(gè)字符俯在，而僅漢語(yǔ)就有80000以上個(gè)字符竟秫。如何把地球上絕大多數(shù)語(yǔ)言用一種編碼方式表示出來(lái)呢？ 于是發(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纽谒。
前面說(shuō)了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。老外才沒(méi)那么傻挨决，對(duì)于老外這種日常純粹是用英文字符的人來(lái)說(shuō)明明之前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沒(méi)錯(cuò)盖高，但我就用1個(gè)字節(jié)1110011表示慎陵，而你中文日是26085號(hào)也沒(méi)錯(cuò)，但是你不能在使用2個(gè)表示喻奥，而是用2個(gè)甚至6個(gè)字節(jié)表示席纽。（為了英文的特權(quán)，犧牲其他語(yǔ)言的存儲(chǔ)空間的便利）撞蚕，這個(gè)編碼方式就是UTF-8润梯。
UTF-8
UTF-8（8-bit Unicode Transformation Format）是一種針對(duì)Unicode的可變長(zhǎng)度字符編碼，又稱萬(wàn)國(guó)碼。UTF-8用1到6個(gè)字節(jié)編碼UNICODE字符纺铭。用在網(wǎng)頁(yè)上可以同一頁(yè)面顯示中文簡(jiǎn)體繁體及其它語(yǔ)言（如英文寇钉，日文，韓文）舶赔。
那GBK又是如何產(chǎn)生的呢扫倡？
GBK
這時(shí)候中國(guó)人不干了，為啥你制定了全球大一統(tǒng)的規(guī)則竟纳，卻為了自己的便利又破壞規(guī)則撵溃，連這點(diǎn)小便宜都不放過(guò)(典型的美國(guó)人作風(fēng))？ 明明用2個(gè)字節(jié)就能表示中文一個(gè)漢字锥累，現(xiàn)在UTF-8編碼中文竟然需要2個(gè)甚至4個(gè)字節(jié)來(lái)表示征懈。于是中國(guó)制定一套自己的規(guī)則，于是用2個(gè)字節(jié)來(lái)表示一個(gè)漢字揩悄，總共可以覆蓋2萬(wàn)多個(gè)文字。 對(duì)于英文鬼悠，好吧讓一步删性，還保留和你UTF-8同樣的方式使用一個(gè)字節(jié)來(lái)表示。
下圖是把當(dāng)前文章分別保存為 gbk 何 utf-8兩種編碼格式下文件大小的對(duì)比焕窝，表明用 gbk 確實(shí)省空間
記椎磐Α：UNICODE只是給字符一個(gè)代號(hào)，而GBK和UTF-8使用不同的規(guī)則來(lái)表示同一個(gè)代號(hào)它掂。
2.網(wǎng)頁(yè)亂碼如何產(chǎn)生的呢巴帮？
下面這個(gè)流程是我們寫(xiě)入文件到展示文件的簡(jiǎn)單描述：
我們使用編輯器編寫(xiě) HTML 文件
保存編寫(xiě)的HTML文件
使用瀏覽器打開(kāi)HTML文件
HTML文件在瀏覽器展示
亂碼產(chǎn)生的根源就在與第2步驟和第4步。
在第2步保持文件時(shí)會(huì)把我們寫(xiě)入的文字使用編輯器默認(rèn)的編碼方式進(jìn)行保存虐秋。如果大家使用的是vscode編輯器榕茧，默認(rèn)的編碼方式是utf-8。
首先血崭，在文件保存的時(shí)候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式，那么一定要在html 的
<head>里添加<meta charset="utf-8">功氨，這句話的意思是告訴瀏覽器在打開(kāi)這個(gè)頁(yè)面的時(shí)候不要去猜了序苏，直接用utf-8去解碼。 同理捷凄，如果你的文件保存為gbk格式忱详，一定在文件里添加<meta charset="gbk">。
3.總結(jié)&解決亂碼方法：
亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時(shí)的解碼格式不匹配導(dǎo)致的跺涤。
亂碼一般是英文以外的字符才會(huì)出現(xiàn)匈睁。
為啥純粹的英文不會(huì)出現(xiàn)亂碼問(wèn)題，即使編碼方式和解碼方式不一致桶错？那是因?yàn)榍懊嬷v過(guò)了 utf-8航唆、gbk對(duì)英文都是采用1個(gè)字節(jié)的編碼方式，并且使用了相同的碼字院刁。
解決方法：
首先糯钙，在文件保存的時(shí)候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式退腥，那么一定要在html 的 <head>里添加<meta charset="utf-8">任岸，這句話的意思是告訴瀏覽器在打開(kāi)這個(gè)頁(yè)面的時(shí)候不要去猜了，直接用utf-8去解碼狡刘。 同理享潜，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">嗅蔬。
8.常見(jiàn)的瀏覽器有哪些剑按，什么內(nèi)核
| 瀏覽器 | 內(nèi)核 |
|---|---|
| IE | Trident |
| Firefox | Gecko |
| Chrome | Webkit |
| Safari | Webkit |
| Opera | Presto |
| 新Chrome | Blink |
9.列出常見(jiàn)的標(biāo)簽，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
常見(jiàn)標(biāo)簽 場(chǎng)景
| 瀏覽器 | 內(nèi)核 |
|---|---|
| h1 h2 h3 h4 h5 | 標(biāo)題：大標(biāo)題 澜术、二級(jí)標(biāo)題艺蝴、..... |
| p | 表示大段文字:ps標(biāo)題和段落不能互相包裹 |
| a | 鏈接 target="_blank" 在新頁(yè)面打開(kāi); target ="_self" 在當(dāng)前頁(yè)打開(kāi); href="#id"跳到對(duì)應(yīng)的id |
| img | 圖片 ：只閉合標(biāo)簽，最后不需要加 / ; alt="圖片描述"： 搜索引擎優(yōu)化 |
| ul li | 無(wú)序列表 ：用于表示并列內(nèi)容鸟废，可以嵌套 |
| ul ol | 有序列表：用于表示有步驟或編號(hào)的并列內(nèi)容吴趴，可以嵌套 |
| dl dt dd | 用于一系列"標(biāo)題，內(nèi)容...." 的場(chǎng)景 |
| button | 按鈕 |
| em strong span | em用于強(qiáng)調(diào)一下侮攀， strong很重要锣枝，強(qiáng)調(diào)性更強(qiáng), span用于包裹文字，方便添加樣式 |
| iframe | 用于嵌入頁(yè)面 |
| table | 用于展示表格兰英，不要用來(lái)做布局 |
