技術標籤：備戰2021春招前端面試題javascripthtml

目錄

• • • 1. src和href的區別
    • 2. 對HTML語義化的理解
    • 3. DOCTYPE(⽂檔型別) 的作⽤
    • 4. script標籤中defer和async的區別
    • 5. 常⽤的meta標籤有哪些
    • 6. HTML5有哪些更新
    • • 1. 語義化標籤
      • 2. 媒體標籤
      • 3. 表單
      • 4. 進度條、度量器
      • 5.DOM查詢操作
      • 6. Web儲存
      • 7. 其他
    • 7. img的srcset屬性的作⽤是什麼？
    • 8. 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
    • 9. display的block、inline和inline-block的區別
    • 10. HTML5的離線儲存怎麼使用，它的工作原理是什麼
    • 11. 瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和載入的呢？
    • 12. title與h1的區別、b與strong的區別、i與em的區別？
    • 13. iframe 有那些優點和缺點？
    • 14. label 的作用是什麼？如何使用？
    • 15. Canvas 和 SVG 有什麼區別？
    • 16. head 標籤中必不少的是？

1. src和href的區別

src和href都是用來引用外部的資源，它們區別如下：

• src：表示對資源的引用，它指向的內容會嵌入到當前標籤所在的位置。src資源時會將其指向的資源下載並應⽤到⽂檔內，如在請求js指令碼，img圖⽚和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，知道將該資源載入、編譯、執⾏完畢，所以⼀般js指令碼會放在底部⽽不是頭部。
• href：表示超文字引用，它指向一些網路資源，建立和當前元素或本文件的連結關係。當瀏覽器識別到它他指向的⽂件時，就會並⾏下載資源，不會停⽌對當前⽂檔的處理。 常用在a、link等標籤上。
  

2. 對HTML語義化的理解

語義化是指根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）。通俗來講就是用正確的標籤做正確的事情。

語義化的優點主要有以下兩點：

• 對於機器友好，帶有語義的文字表現力豐富，更適合搜尋引擎的爬蟲爬取有效資訊，利於SEO。除此之外，語義類還支援讀屏軟體，根據文章可以自動生成目錄
• 對開發者友好，使用語義類標籤增強了可讀性，結構更加清晰，開發者也能清晰的看出網頁的結構，便於團隊的開發與維護。
  
  常見的語義化標籤：

<header></header>頭部

<nav></nav>導航欄

<section></section>區塊（有語義化的div）

<main></main>主要區域

<artical></artical>主要內容

<aside></aside>側邊欄

<footer></footer>底部

3. DOCTYPE(⽂檔型別) 的作⽤

DOCTYPE是HTML5中一種標準通用標記語言的文件型別宣告，它的目的是告訴瀏覽器（解析器）應該以什麼樣（html或xhtml）的文件型別定義來解析文件，不同的渲染模式會影響到瀏覽器對於 CSS 程式碼甚⾄ JavaScript 指令碼的解析。它必須宣告在HTML⽂檔的第⼀⾏。

瀏覽器渲染頁面的兩種模式（可通過document.compatMode獲取）：

• CSS1Compat：標準模式（Strick mode），預設模式，瀏覽器使用W3C的標準解析渲染頁面。在標準模式中，瀏覽器以其支援的最高標準呈現頁面。
• BackCompat：怪異模式(混雜模式)(Quick mode )，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬鬆的向後相容的方式顯示。
  

4. script標籤中defer和async的區別

如果沒有defer或async屬性，瀏覽器會立即載入並執行相應的指令碼。也就是說在渲染script標籤之後的文件之前，不等待後續載入的文件元素，讀到就開始載入和執行，這樣就會阻塞後續文件的載入。

下圖可以直觀的看出三者之間的區別:

其中藍色代表js指令碼網路載入時間，紅色代表js指令碼執行時間，綠色代表html解析。

defer 和 async屬性都是去非同步載入外部的JS指令碼檔案，它們都不會阻塞頁面的解析，其區別如下：

• 多個帶async屬性的標籤，不能保證載入的順序；多個帶defer屬性的標籤，按照載入順序執行。
• async屬性，表示後續文件的載入和渲染與js指令碼的載入和執行是並行進行的，即非同步執行；有了defer屬性，載入後續文件的過程和js指令碼的載入(此時僅載入不執行)是並行進行的(非同步)，js指令碼的執行需要等到文件所有元素解析完成之後，DOMContentLoaded事件觸發執行之前。
  

5. 常⽤的meta標籤有哪些

meta標籤由name和content屬性定義，用來描述一個網頁文件的屬性，比如網頁的作者，網頁描述，關鍵詞等，除了HTTP標準固定了一些name作為大家使用的共識，開發者還可以自定義name。

常用的meta標籤：
（1）charset，用來描述HTML文件的編碼型別

<meta charset="UTF-8" >

（2） keywords，頁面關鍵詞

<meta name="keywords" content="關鍵詞" />

（3）description，頁面描述

<meta name="description" content="想要描述的內容" />

（4）refresh，頁面重定向和重新整理

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，適配移動端，開發人員可以控制視口的大小和比例

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

其中，content 引數有以下幾種：

• width viewport ：寬度(數值/device-width)
• height viewport ：高度(數值/device-height)
• initial-scale ：初始縮放比例
• maximum-scale ：最大縮放比例
• minimum-scale ：最小縮放比例
• user-scalable ：是否允許使用者縮放(yes/no）

（6）搜尋引擎索引方式

<meta name="robots" content="index,follow" />

其中，content 引數有以下幾種：

• all：檔案將被檢索，且頁面上的連結可以被查詢；
• none：檔案將不被檢索，且頁面上的連結不可以被查詢；
• index：檔案將被檢索；
• follow：頁面上的連結可以被查詢；
• noindex：檔案將不被檢索；
• nofollow：頁面上的連結不可以被查詢。
  

6. HTML5有哪些更新

1. 語義化標籤

• header：定義文件的頁首 頭部
• nav：定義導航連結的部分
• footer：定義文件或節的頁尾 底部
• article：定義文章。
• section：定義文件中的節（section、區段）
• aside：定義其所處內容之外的內容 側邊
  

2. 媒體標籤

（1） audio：音訊

<audio src='' controls autoplay loop='true'></audio>

屬性：

• controls 控制面板
• autoplay 自動播放
• loop=‘true’ 迴圈播放

（2）video視訊

<video src='' poster='imgs/aa.jpg' controls></video>

屬性：

• poster：指定視訊還沒有完全下載完畢，或者使用者還沒有點選播放前顯示的封面。預設顯示當前視訊檔案的第一針畫面，當然通過poster也可以自己指定。
• controls 控制面板
• width
• height

（3）source標籤
因為瀏覽器對視訊格式支援程度不一樣，為了能夠相容不同的瀏覽器，可以通過source來指定視訊源。

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

3. 表單

表單型別：

• email ：能夠驗證當前輸入的郵箱地址是否合法
• url ： 驗證URL
• number ： 只能輸入數字，其他輸入不了，而且自帶上下增大減小箭頭，max屬性可以設定為最大值，min可以設定為最小值，value為預設值。
• search ： 輸入框後面會給提供一個小叉，可以刪除輸入的內容，更加人性化。
• range ： 可以提供給一個範圍，其中可以設定max和min以及value，其中value屬性可以設定為預設值
• color ： 提供了一個顏色拾取器
• time ： 時分秒
• data ： 日期選擇年月日
• datatime ： 時間和日期(目前只有Safari支援)
• datatime-local ：日期時間控制元件
• week ：周控制元件
• month：月控制元件

表單屬性：

• placeholder ：提示資訊
• autofocus ：自動獲取焦點
• autocomplete=“on” 或者 autocomplete=“off” 使用這個屬性需要有兩個前提：
  • 必須表單提交過
  • 必須有name屬性。
• required：要求輸入框不能為空，必須有值才能夠提交。
• pattern=" " 裡面寫入想要的正則模式，例如手機號patte="^(+86)?\d{10}$"
• multiple：可以選擇多個檔案或者多個郵箱
• form=" form表單的ID"

表單事件：

• oninput 每當input裡的輸入框內容發生變化都會觸發此事件。
• oninvalid 當驗證不通過時觸發此事件。
  

4. 進度條、度量器

• progress標籤：用來表示任務的進度（IE、Safari不支援），max用來表示人物的進度，value表示已完成多少
• meter屬性：用來顯示剩餘容量或剩餘庫存（IE、Safari不支援）
  • high/low：規定被視作高/低的範圍
  • max/min：規定最大/小值
  • value：規定當前度量值

設定規則：min < low < high < max

5.DOM查詢操作

• document.querySelector()
• document.querySelectorAll()

它們選擇的物件可以是標籤，可以是類(需要加點)，可以是ID(需要加#)

6. Web儲存

HTML5 提供了兩種在客戶端儲存資料的新方法：

• localStorage - 沒有時間限制的資料儲存
• sessionStorage - 針對一個 session 的資料儲存
  

7. 其他

• 拖放：拖放是一種常見的特性，即抓取物件以後拖到另一個位置。

設定元素可拖放：

<img draggable="true" />

• 畫布（canvas ）： canvas 元素使用 JavaScript 在網頁上繪製圖像。畫布是一個矩形區域，您可以控制其每一畫素。canvas 擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。

<canvas id="myCanvas" width="200" height="100"></canvas>

• SVG：SVG 指可伸縮向量圖形，用於定義用於網路的基於向量的圖形，使用 XML 格式定義圖形，影象在放大或改變尺寸的情況下其圖形質量不會有損失，它是全球資訊網聯盟的標準
• 地理定位：Geolocation（地理定位）用於定位使用者的位置。

總結：
（1）新增語義化標籤：nav、header、footer、aside、section、article
（2）音訊、視訊標籤：audio、video
（3）資料儲存：localStorage、sessionStorage
（4）canvas（畫布）、Geolocation（地理定位）、websocket（通訊協議）
（5）input標籤新增屬性：placeholder、autocomplete、autofocus、required
（6）history API：go、forward、back、pushstate

7. img的srcset屬性的作⽤是什麼？

響應式頁面中經常用到根據螢幕密度設定不同的圖片。這個時候肯定會用到image標籤的srcset屬性。srcset屬性用於設定不同螢幕密度下，image會自動載入不同的圖片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的程式碼，就能實現在螢幕密度為1x的情況下載入image-128.png, 螢幕密度為2x時載入image-256.png。

按照上面的實現，不同的螢幕密度都要設定圖片地址，目前的螢幕密度有1x,2x,3x,4x四種，如果每一個圖片都設定4張圖片的話，很慢發。所以就有了新的srcset標準。程式碼如下：

1. <img src="image-128.png"
2. srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
3. sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定圖片的地址和對應的圖片質量。sizes用來設定圖片的尺寸零界點。
對於srcset裡面出現了一個w單位，可以理解成圖片質量。如果可視區域小於這個質量的值，就可以使用。瀏覽器會自動選擇一個最小的可用圖片。

sizes語法如下：

sizes="[media query] [length], [media query] [length] ... "

上面例子中的sizes就是指預設顯示128px, 如果視區寬度大於360px, 則顯示340px。

8. 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

• 行內元素有：a b span img input select strong
• 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
• 常見的空元素（標籤內沒有內容的 HTML 標籤被稱為空元素。空元素是在開始標籤中關閉的。）:<br> <hr> <img> <input> <link> <meta>
  

9. display的block、inline和inline-block的區別

（1）block： 會獨佔一行，多個元素會另起一行，可以width、height、margin和padding屬性。
（2）inline：元素不會獨佔一行，設定width、height屬性無效。但可以設定水平方向的margin和padding屬性，不可以設定垂直方向的padding和margin。
（3）inline-block： 將物件設定為inline物件，但物件的內容作為block物件呈現，之後的內聯物件會被排列在同一行內。

對於行內元素和塊級元素，其特點如下：
（1）行內元素

• 設定寬高無效
• 對margin設定左右方向有效，而上下無效，padding設定都無效
• 不會自動換行

（2）塊級元素

• 可以設定寬高
• 設定margin和padding都有效
• 可以自動換行
• 多個塊狀，預設排列從上到下
  

10. HTML5的離線儲存怎麼使用，它的工作原理是什麼

離線儲存指的是：在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。

原理： HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示

使用方法：
（1）建立一個和 html 同名的 manifest 檔案，然後在頁面頭部像下面一樣加入一個 manifest 的屬性。

<html lang="en" manifest="index.manifest">

（2）在如下 cache.manifest 檔案的編寫離線儲存的資源。

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

• CACHE: 表示需要離線儲存的資源列表，由於包含 manifest 檔案的頁面將被自動離線儲存，所以不需要把頁面自身也列出來。
• NETWORK: 表示在它下面列出來的資源只有在線上的情況下才能訪問，他們不會被離線儲存，所以在離線情況下無法使用這些資源。不過，如果在 CACHE 和 NETWORK 中有一個相同的資源，那麼這個資源還是會被離線儲存，也就是說 CACHE 的優先順序更高。
• FALLBACK: 表示如果訪問第一個資源失敗，那麼就使用第二個資源來替換他，比如上面這個檔案表示的就是如果訪問根目錄下任何一個資源失敗了，那麼就去訪問 offline.html 。

（3）在離線狀態時，操作 window.applicationCache 進行離線快取的操作。

如何更新快取：
（1）更新 manifest 檔案
（2）通過 javascript 操作
（3）清除瀏覽器快取

注意事項：
（1）瀏覽器對快取資料的容量限制可能不太一樣（某些瀏覽器設定的限制是每個站點 5MB）。
（2）如果 manifest 檔案，或者內部列舉的某一個檔案不能正常下載，整個更新過程都將失敗，瀏覽器繼續全部使用老的快取。
（3）引用 manifest 的 html 必須與 manifest 檔案同源，在同一個域下。
（4）FALLBACK 中的資源必須和 manifest 檔案同源。
（5）當一個資源被快取後，該瀏覽器直接請求這個絕對路徑也會訪問快取中的資源。
（6）站點中的其他頁面即使沒有設定 manifest 屬性，請求的資源如果在快取中也從快取中訪問。
（7）當 manifest 檔案發生改變時，資源請求本身也會觸發更新。

11. 瀏覽器是怎麼對 HTML5 的離線儲存資源進行管理和載入的呢？

• 線上的情況下，瀏覽器發現 html 頭部有 manifest 屬性，它會請求 manifest 檔案，如果是第一次訪問 app ，那麼瀏覽器就會根據 manifest 檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過 app 並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的 manifest 檔案與舊的 manifest 檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
• 離線的情況下，瀏覽器就直接使用離線儲存的資源。
  

12. title與h1的區別、b與strong的區別、i與em的區別？

• strong標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：會重讀，而是展示強調內容。而 b是展示強調內容****
• title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響
• i內容展示為斜體，em表示強調的文字
  

13. iframe 有那些優點和缺點？

iframe 元素會建立包含另外一個文件的內聯框架（即行內框架）。

優點：

• 用來載入速度較慢的內容（如廣告）
• 可以使指令碼可以並行下載
• 可以實現跨子域通訊

缺點：

• iframe 會阻塞主頁面的 onload 事件
• 無法被一些搜尋引擎索識別
• 會產生很多頁面，不容易管理
  

14. label 的作用是什麼？如何使用？

label標籤來定義表單控制元件的關係：當用戶選擇label標籤時，瀏覽器會自動將焦點轉到和label標籤相關的表單控制元件上。

• 使用方法1：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

• 使用方法2：

<label>Date:<input type="text"/></label>

15. Canvas 和 SVG 有什麼區別？

• Canvas 是一種通過 JavaScript 來繪製 2D 圖形的方法。Canvas 是逐畫素來進行渲染的，因此當我們對 Canvas 進行縮放時，會出現鋸齒或者失真的情況。
• SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基於 XML，這意味著 SVG DOM 中的每個元素都是可用的。我們可以為某個元素附加 JavaScript 事件監聽函式。並且 SVG 儲存的是圖形的繪製方法，因此當 SVG 圖形縮放時並不會失真。
  

16. head 標籤中必不少的是？

其中