大前端常見面試題：HTML常考知識點

千鋒Python唐小強發表於2020-09-25
前端面試題HTML

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

DOCTYPE的作用

面試官：我們現在寫HTML程式碼第一行通常是 !<DOCTYPE HTML>，請介紹一下DOCTYPE的作用（基礎題）

DOCTYPE標籤是一種標準通用標記語言的文件型別宣告，且必須宣告在文件的第一行，來告知瀏覽器用何種文件標準來解析這個網頁，不同的渲染模式會影響瀏覽器對CSS和JavaScript的解析標準。

面試官：瀏覽器解析文件有哪幾種解析模式呢？（擴充題）

文件的解析模式目前主要有  *兩種（注意：還有一種“準標準模式”只在IE8瀏覽器裡，目前主流瀏覽器已無需考慮）：

  1. 怪異模式（quirks mode）：此種模式會模擬更舊的瀏覽器的行為。如果沒有宣告DOCTYPE，瀏覽器預設會以這種模式解析文件。
  2. 標準模式（standards mode）：瀏覽器使用W3C的標準解析渲染頁面。

面試官：如何快速檢查頁面的解析模式？（發散題）

HTML文件物件有個 compatMode 屬性，用於記錄頁面的解析模式：

  • 如果文件處於“混雜模式”，則該屬性值為 BackCompat
  • 如果文件處於“標準模式”或者“準標準模式(almost standards mode)”，則該屬性為 CSS1Compat

const mode = 
document.compatMode; 
// 頁面的解析模式


if (mode === "BackCompat") {


  // 渲染模式為混雜模式


}


大前端常見面試題：HTML常考知識點

HTML的語義化

面試官：什麼是HTML語義化，語義化的作用是什麼？（基礎題）

語義化是指使用恰當語義的html標籤，讓頁面具有良好的結構與含義；比如<p>標籤就代表段落，<article>代表正文內容等等。
語義化的作用有兩點：

  • 開發者友好：使用語義類標籤增強程式碼的可讀性，開發者也能夠清晰地看出網頁的結構，易維護；
  • 機器友好：帶有語義的標籤適合搜尋引擎的爬蟲爬取有效資訊，能快速生成網頁骨架或文章提綱，SEO友好。

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

根據語義化的優點，對於富文字內容類的網站（如門戶、新聞網站），語義化利於SEO，對網站內容的傳播有很大幫助，此類網站應該重視和實踐語義化標準。而對於一些系統類網站的搭建，語義化就沒有那沒重要了，甚至刻意做語義化反而會影響開發者的效率，此類網站可以對頁面骨架做語義化，至於模組的互動元件和表單等則無需刻意做語義化。


HTML5新增內容考察

面試官：你知道HTML5有哪些新增的東西嗎？（基礎題）

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

  • 新的文件解析順序：不再基於 *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等
  • 新的網路協議：WebSocket
  • 新的跨域通訊方案：XHTMLHttpRequest2、PostMessage
    …

擴充：什麼是SGML

  • SGML 即Standard Globalized Markup Language 是用來定義標準的標記語言，簡單的說，就是定義文件的元語言。
  • HTML 是基於SGML 的超連結語言，可以用於建立Web頁面。在DTD 內部定義了標籤的規則，DTD就是使用SGML 語言建立的。
  • HTML5不是基於SGML 語言的，因此不需要DTD ，它是一種全新的標記語言，有自己的解析規則，HTML5的語法規則與之前版本有很大的差別，可以稱的上是一種全新的語言

meta標籤

面試官：介紹一下<meta>標籤的用途 （基礎題）

meta標籤由name和content兩個屬性來定義，來描述一個HTML網頁文件的元資訊，例如作者、日期和時間、網頁描述、關鍵詞、頁面重新整理等，除了一些http標準規定了一些name作為大家使用的共識，開發者也可以自定義name

面試官：移動端適配的viewpoint，能否手寫一下？（擴充題）


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

src和href的區別

面試官：介紹一下src和href的區別（基礎題）

  • src是指向外部資源的位置，指向的內容會嵌入到文件中當前標籤所在的位置，在請求src資源時會將其指向的資源 下載並應用到文件內，如JS指令碼，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，所以一般JS指令碼會放在底部而不是頭部。
  • href是指向網路資源所在位置（的超連結），用來建立和當前元素或文件之間的連線，當瀏覽器識別到它他指向的檔案時， 就會並行下載資源，不會停止對當前文件的處理

img標籤的srcset

面試官：介紹一下<img>標籤的srcset和sizes屬性的作用（基礎題）

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

  • srcset 定義了我們允許瀏覽器選擇的影像集，以及每個影像的大小
  • sizes 定義了一組媒體條件（例如螢幕寬度）並且指明當某些媒體條件為真時，什麼樣的圖片尺寸是最佳選擇

所以，有了這些屬性，瀏覽器會：

  • 檢視裝置寬度
  • 檢查 sizes 列表中哪個媒體條件是第一個為真
  • 檢視給予該媒體查詢的槽大小
  • 載入 srcset 列表中引用的最接近所選的槽大小的影像
  • srcset提供了根據螢幕條件選取圖片的能力

<
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"


/>

script標籤的defer和async

面試官：介紹一下<script>標籤的defer和async的作用（基礎題）

  • defer：瀏覽器指示指令碼在文件被解析後執行，<script>被非同步載入後並不會立刻執行，而是等待文件被解析完畢後執行
  • async：同樣是非同步載入指令碼，區別是指令碼載入完畢後立即執行，這導致async屬性下的指令碼是亂序的，對於<script>有先後依賴關係的情況，並不適用


前端資料儲存的方式

面試官：前端有哪幾種資料儲存方式？（基礎題）

主要的儲存方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它們的優缺點如下：

  • Cookie：在HTML5標準前本地儲存的主要方式優點是相容性好，請求頭自帶cookie方便可以和服務端進行互動缺點是大小 只有4k，請求頭攜帶cookie浪費流量， 每個domain限制20個cookie，JS無法直接操作，需要自行封裝
  • LocalStorage：以鍵值對為標準的資料儲存方式優點是操作方便， 永久性儲存（除非手動刪除）， 大小為5M缺點是相容IE8+
  • SessionStorage：與localStorage基本類似，區別是**sessionStorage當頁面關閉後會被清理優點是會話級隨存隨取，不佔用本地空間，操作方便缺點是不能在所有同源視窗共享，是會話級別的儲存方式，相容IE8+
  • IndexedDB：是被正式納入HTML5標準的資料庫儲存方案，它 是NoSQL資料庫，用鍵值對進行儲存，可以進行快速讀取操作優點是儲存量更大，非常適合web場景，同時支援JS進行操作，非常方便缺點是相容性IE8+
  • WebSQL：類似SQLite，是真正意義上的關係型資料庫，用sql進行操作優點是關係型資料庫，適合大型的離線web應用缺點是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, ")');

  tx.executeSql(
'DELETE FROM LOGS  WHERE id=1');

  msg = 
'<p>資料表已建立，且插入了兩條資料，然後又刪除了第一條。</p>';

  document.querySelector(
'#status').innerHTML =  msg;

});

WebSocket考點

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

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連線上進行全雙工通訊的協議。它允許服務端主動向客戶端推送資料。在 WebSocket API 中，瀏覽器和伺服器只需要完成一次握手，兩者之間就直接可以建立永續性的連線，並進行雙向資料傳輸。

在 WebSocket API 中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69923331/viewspace-2723995/，如需轉載，請註明出處，否則將追究法律責任。

相關文章