HTML臣跣考知識點

本章先介紹一些HTML最基礎(chǔ)的考點誉简，很多大長面試官喜歡由淺入深地考察知識。而對于一些基礎(chǔ)問題的回答盟广，很多同學(xué)反而因組織不好語言而給面試官留下不好的印象闷串。本章節(jié)我們就帶大家一一整理和回顧。

1.1 DOCTYPE的作用

面試官：我們現(xiàn)在寫HTML代碼第一行通常是 !<DOCTYPE HTML>筋量，請介紹一下DOCTYPE的作用（基礎(chǔ)題）

DOCTYPE標(biāo)簽是一種標(biāo)準通用標(biāo)記語言的文檔類型聲明烹吵，且必須聲明在文檔的第一行，來告知瀏覽器用何種文檔標(biāo)準來解析這個網(wǎng)頁桨武，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標(biāo)準肋拔。

面試官：瀏覽器解析文檔有哪幾種解析模式呢？（拓展題）

文檔的解析模式目前主要有 *兩種（注意：還有一種“準標(biāo)準模式”只在IE8瀏覽器里呀酸，目前主流瀏覽器已無需考慮）：

怪異模式（quirks mode）：此種模式會模擬更舊的瀏覽器的行為凉蜂。如果沒有聲明DOCTYPE，瀏覽器默認會以這種模式解析文檔。
標(biāo)準模式（standards mode）：瀏覽器使用W3C的標(biāo)準解析渲染頁面跃惫。

面試官：如何快速檢查頁面的解析模式叮叹？（發(fā)散題）

HTML文檔對象有個 compatMode 屬性，用于記錄頁面的解析模式：

如果文檔處于“混雜模式”爆存，則該屬性值為 BackCompat
如果文檔處于“標(biāo)準模式”或者“準標(biāo)準模式(almost standards mode)”蛉顽，則該屬性為 CSS1Compat

const mode = document.compatMode; // 頁面的解析模式
if (mode === "BackCompat") {
  // 渲染模式為混雜模式
}

1.2 HTML的語義化

面試官：什么是HTML語義化，語義化的作用是什么先较？（基礎(chǔ)題）

語義化是指使用恰當(dāng)語義的html標(biāo)簽携冤，讓頁面具有良好的結(jié)構(gòu)與含義；比如<p>標(biāo)簽就代表段落闲勺，<article>代表正文內(nèi)容等等曾棕。
語義化的作用有兩點：

開發(fā)者友好：使用語義類標(biāo)簽增強代碼的可讀性，開發(fā)者也能夠清晰地看出網(wǎng)頁的結(jié)構(gòu)菜循，易維護翘地；
機器友好：帶有語義的標(biāo)簽適合搜索引擎的爬蟲爬取有效信息，能快速生成網(wǎng)頁骨架或文章提綱癌幕，SEO友好衙耕。

面試官：你平時有哪些語義化的建議或最佳實踐？（發(fā)散題）

根據(jù)語義化的優(yōu)點勺远，對于富文本內(nèi)容類的網(wǎng)站（如門戶橙喘、新聞網(wǎng)站），語義化利于SEO胶逢，對網(wǎng)站內(nèi)容的傳播有很大幫助厅瞎，此類網(wǎng)站應(yīng)該重視和實踐語義化標(biāo)準。而對于一些系統(tǒng)類網(wǎng)站的搭建初坠，語義化就沒有那沒重要了和簸，甚至刻意做語義化反而會影響開發(fā)者的效率，此類網(wǎng)站可以對頁面骨架做語義化某筐，至于模塊的交互組件和表單等則無需刻意做語義化比搭。

1.3 HTML5新增內(nèi)容考察

面試官：你知道HTML5有哪些新增的東西嗎冠跷？（基礎(chǔ)題）

HTML5新增的內(nèi)容確實不少南誊，面試官不會要求你全部記下來，我們可以挑重要的東西來回答：

新的文檔解析順序：不再基于 *SGML蜜托；
全面支持CSS3：
加了一些語義化元素：<header>抄囚、<mainer>、<footer>橄务、<section>幔托、<nav>等
刪了一些樣式類元素：<font>、<big>、<center> 等
表單能力加強：<input>的新類型（date重挑、email嗓化、url等）、新屬性（autocomplete谬哀、autofocus等）
新的屬性：ping（用于a與area）刺覆、charset（用于meta）、async（用于script）等
定位能力：navigator.geolocation
多媒體支持：<video>（視頻）史煎、<audio>（音頻）等
2D/3D 制圖支持：支持svg谦屑、canvas繪圖和動畫等
新的緩存策略：Localstorage、SessionStorage篇梭、IndexedDB等
新的網(wǎng)絡(luò)協(xié)議：WebSocket
新的跨域通信方案：XHTMLHttpRequest2氢橙、PostMessage
......

拓展：什么是SGML

SGML 即Standard Globalized Markup Language 是用來定義標(biāo)準的標(biāo)記語言，簡單的說恬偷，就是定義文檔的元語言悍手。
HTML 是基于SGML 的超鏈接語言，可以用于創(chuàng)建Web頁面袍患。在DTD 內(nèi)部定義了標(biāo)簽的規(guī)則谓苟，DTD就是使用SGML 語言創(chuàng)建的。
HTML5不是基于SGML 語言的协怒，因此不需要DTD 涝焙，它是一種全新的標(biāo)記語言，有自己的解析規(guī)則孕暇，HTML5的語法規(guī)則與之前版本有很大的差別仑撞，可以稱的上是一種全新的語言

1.4 meta標(biāo)簽

面試官：介紹一下<meta>標(biāo)簽的用途（基礎(chǔ)題）

meta標(biāo)簽由name和content兩個屬性來定義，來描述一個HTML網(wǎng)頁文檔的元信息妖滔，例如作者隧哮、日期和時間、網(wǎng)頁描述座舍、關(guān)鍵詞沮翔、頁面刷新等，除了一些http標(biāo)準規(guī)定了一些name作為大家使用的共識曲秉，開發(fā)者也可以自定義name

面試官：移動端適配的viewpoint采蚀，能否手寫一下？（拓展題）

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

1.5 src和href的區(qū)別

面試官：介紹一下src和href的區(qū)別（基礎(chǔ)題）

src是指向外部資源的位置承二，指向的內(nèi)容會嵌入到文檔中當(dāng)前標(biāo)簽所在的位置榆鼠，在請求src資源時會將其指向的資源下載并應(yīng)用到文檔內(nèi)，如JS腳本亥鸠，img圖片和frame等元素妆够。當(dāng)瀏覽器解析到該元素時识啦，會暫停其他資源的下載和處理，直到將該資源加載神妹、編譯颓哮、執(zhí)行完畢，所以一般JS腳本會放在底部而不是頭部鸵荠。
href是指向網(wǎng)絡(luò)資源所在位置（的超鏈接）题翻，用來建立和當(dāng)前元素或文檔之間的連接，當(dāng)瀏覽器識別到它他指向的文件時腰鬼，就會并行下載資源嵌赠，不會停止對當(dāng)前文檔的處理

1.6 img標(biāo)簽的srcset

面試官：介紹一下<img>標(biāo)簽的srcset和sizes屬性的作用（基礎(chǔ)題）

可以設(shè)計響應(yīng)式圖片，我們可以使用兩個新的屬性srcset 和 sizes來提供更多額外的資源圖像和提示熄赡，幫助瀏覽器選擇正確的一個資源

srcset 定義了我們允許瀏覽器選擇的圖像集姜挺，以及每個圖像的大小
sizes 定義了一組媒體條件（例如屏幕寬度）并且指明當(dāng)某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇

所以彼硫，有了這些屬性炊豪，瀏覽器會：

查看設(shè)備寬度
檢查 sizes 列表中哪個媒體條件是第一個為真
查看給予該媒體查詢的槽大小
加載 srcset 列表中引用的最接近所選的槽大小的圖像
srcset提供了根據(jù)屏幕條件選取圖片的能力

<img src="clock-demo-thumb-200.png"
     alt="Clock"
     srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
     sizes="(min-width: 600px) 200px, 50vw"
/>

1.7 script標(biāo)簽的defer和async

面試官：介紹一下<script>標(biāo)簽的defer和async的作用（基礎(chǔ)題）

defer：瀏覽器指示腳本在文檔被解析后執(zhí)行，<script>被異步加載后并不會立刻執(zhí)行拧篮，而是等待文檔被解析完畢后執(zhí)行
async：同樣是異步加載腳本词渤，區(qū)別是腳本加載完畢后立即執(zhí)行，這導(dǎo)致async屬性下的腳本是亂序的串绩，對于<script>有先后依賴關(guān)系的情況缺虐，并不適用

如下圖：藍色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時間礁凡，這倆都是針對腳本的高氮；綠色線代表 HTML 解析

圖片

1.8 前端數(shù)據(jù)存儲的方式

面試官：前端有哪幾種數(shù)據(jù)存儲方式？（基礎(chǔ)題）

主要的存儲方式有Cookie顷牌、LocalStorage剪芍、SessionStorage、IndexedDB窟蓝、WebSQL罪裹，它們的優(yōu)缺點如下：

Cookie：在HTML5標(biāo)準前本地儲存的主要方式
- 優(yōu)點是兼容性好，請求頭自帶cookie方便可以和服務(wù)端進行交互
- 缺點是大小只有4k运挫，請求頭攜帶cookie浪費流量状共，每個domain限制20個cookie，JS無法直接操作滑臊，需要自行封裝

LocalStorage：以鍵值對為標(biāo)準的數(shù)據(jù)存儲方式
- 優(yōu)點是操作方便口芍，永久性儲存（除非手動刪除）箍铲，大小為5M
- 缺點是兼容IE8+

SessionStorage：與localStorage基本類似雇卷，區(qū)別是**sessionStorage當(dāng)頁面關(guān)閉后會被清理
- 優(yōu)點是會話級隨存隨取，不占用本地空間，操作方便
- 缺點是不能在所有同源窗口中共享关划，是會話級別的儲存方式小染，兼容IE8+

IndexedDB：是被正式納入HTML5標(biāo)準的數(shù)據(jù)庫儲存方案，它是NoSQL數(shù)據(jù)庫贮折，用鍵值對進行儲存裤翩，可以進行快速讀取操作
- 優(yōu)點是存儲量更大，非常適合web場景调榄，同時支持JS進行操作踊赠，非常方便
- 缺點是兼容性IE8+

WebSQL：類似SQLite，是真正意義上的關(guān)系型數(shù)據(jù)庫每庆，用sql進行操作
- 優(yōu)點是關(guān)系型數(shù)據(jù)庫筐带，適合大型的離線web應(yīng)用
- 缺點是JS需要通過transaction操作sql，火狐瀏覽器不支持

拓展：如何操作webSql

// WebSql操作實例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;

// 建表 => 插入 => 刪除
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
  tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
  tx.executeSql('DELETE FROM LOGS  WHERE id=1');
  msg = '<p>數(shù)據(jù)表已創(chuàng)建缤灵，且插入了兩條數(shù)據(jù)伦籍，然后又刪除了第一條。</p>';
  document.querySelector('#status').innerHTML =  msg;
});

1.9 WebSocket考點

面試官：介紹一下webSocket的特點和作用（基礎(chǔ)題）

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議腮出。它允許服務(wù)端主動向客戶端推送數(shù)據(jù)帖鸦。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手胚嘲，兩者之間就直接可以創(chuàng)建持久性的連接作儿，并進行雙向數(shù)據(jù)傳輸。

在 WebSocket API 中馋劈，瀏覽器和服務(wù)器只需要做一個握手的動作立倍，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道侣滩。兩者之間就直接可以數(shù)據(jù)互相傳送

本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布口注！

HTML常考知識點