面試八股---HTML

面試八股

1、HTML

1.1 src和href的區別

src 用于替換當前元素，href 用于在當前文檔和引用資源之間確立聯系。

核心區別在于 href 關聯的資源（主要是 CSS）是用于描述頁面外觀的，瀏覽器可以先生成內容再應用樣式，因此可以并行下載不阻塞渲染。

而 src 嵌入的資源（腳本、圖片、iframe）是頁面內容或行為本身的一部分，其加載和執行/渲染直接影響頁面的結構和顯示，因此瀏覽器需要等待它們完成以確保頁面正確構建和顯示，這通常涉及到暫停解析或阻塞渲染直到資源可用。

1.2 html語義化的理解

HTML語義化強調根據內容的功能和意義選擇合適的標簽

（1）提升代碼可讀性和可維護性

語義化標簽使代碼更直觀，便于開發者快速理解頁面的結構和功能。
在團隊協作中，語義化代碼可以減少溝通成本，降低維護難度。

（2）優化搜索引擎優化（SEO）

搜索引擎爬蟲通過分析HTML標簽來理解頁面內容。例如，使用 <article> 標簽包裝文章內容，能讓搜索引擎明確知道這是文章，而不是廣告或導航部分。
語義化標簽幫助爬蟲更準確地抓取和索引頁面內容，從而提升網頁在搜索結果中的排名。

1.3 DOCTYPE(?檔類型) 的作?

<!DOCTYPE html>

告訴瀏覽器（解析器）應該以什么樣（html或xhtml）的文檔類型定義來解析文檔

<!doctype html> 的作用就是讓瀏覽器進入標準模式，使用最新的 HTML5 標準來解析渲染頁面；如果不寫，瀏覽器就會進入混雜模式，我們需要避免此類情況發生。

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

CSS1Compat：標準模式，默認模式，瀏覽器使用W3C的標準解析渲染頁面。在標準模式中，瀏覽器以其支持的最高標準呈現頁面。
BackCompat：怪異模式(混雜模式)，瀏覽器使用自己的怪異模式解析渲染頁面。在怪異模式中，頁面以一種比較寬松的向后兼容的方式顯示。

區分：網頁中的DTD，直接影響到使用的是嚴格模式還是混雜模式，可以說DTD的使用與這兩種方式的區別息息相關。有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式

1.4 script標簽中defer和async的區別

他們都是異步加載外部的JS腳本文件，它們都不會阻塞頁面的解析

屬性	下載方式	執行時機	執行順序	是否阻塞頁面解析
`defer`	異步下載	頁面解析完成后，DOMContentLoaded事件之前	按照腳本在文檔中的順序	不阻塞
`async`	異步下載	腳本下載完成后立即執行	取決于下載速度，無固定順序	不阻塞

總結：

**執行順序：**多個帶async屬性的標簽，不能保證加載的順序(取決于下載速度，無固定順序)；多個帶defer屬性的標簽，按照加載順序執行；
腳本是否并行執行：

async屬性：腳本下載和 HTML 解析同時進行，一旦下載好，不管 HTML 解析到哪了，都會阻斷并立刻執行腳本。

defer屬性:加載后續文檔的過程和 JS 腳本的加載(此時僅加載不執行)是并行進行的(異步)，JS 腳本需要等到文檔所有元素解析完成之后才執行，DOMContentLoaded 事件觸發執行之前。

1.5 常用的meta標簽

meta 標簽由 name 和 content 屬性定義，用來描述網頁文檔的屬性，比如網頁的作者，網頁描述，關鍵詞等

 <meta charset="UTF-8">

用來描述HTML文檔的編碼類型

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

keywords，頁面關鍵詞：

<meta name="description" content="頁面描述內容" />

description，頁面描述：

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

refresh，頁面重定向和刷新：

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

viewport，適配移動端，可以控制視口的大小和比例：

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

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

搜索引擎索引方式：

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

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

all：文件將被檢索，且頁面上的鏈接可以被查詢；
none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
index：文件將被檢索；
follow：頁面上的鏈接可以被查詢；
noindex：文件將不被檢索；
nofollow：頁面上的鏈接不可以被查詢。

1.6 HTML5有哪些更新

1. 語義化標簽

header：定義文檔的頁眉（頭部）；
nav：定義導航鏈接的部分；
footer：定義文檔或節的頁腳（底部）；
article：定義文章內容；
section：定義文檔中的節（section、區段）；
aside：定義其所處內容之外的內容（側邊）；

2. 媒體標簽

audio:音頻
- controls 控制面板
- autoplay 自動播放
- loop=‘true’ 循環播放
video視頻
- poster：指定視頻還沒有完全下載完畢，或者用戶還沒有點擊播放前顯示的封面。默認顯示當前視頻文件的第一針畫面，當然通過poster也可以自己指定。
- controls 控制面板
- width
- height
source標簽：兼容不同的瀏覽器，可以通過source來指定視頻源。

3. 表單

表單類型：email、number、url、range
**表單屬性：**placeholder、autofocus、required、pattern
表單屬性：
- oninput 每當input里的輸入框內容發生變化都會觸發此事件。
- oninvalid 當驗證不通過時觸發此事件。

4.進度條、度量器:

progress：meter屬性：用來顯示剩余容量或剩余庫存

meter屬性：用來顯示剩余容量或剩余庫存

5.DOM查詢操作：

document.querySelector()
document.querySelectorAll()

它們選擇的對象可以是標簽，可以是類(需要加點)，可以是ID(需要加#)

6. Web存儲

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

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲

7. 其他

拖放：拖放是一種常見的特性，即抓取對象以后拖到另一個位置。設置元素可拖放：
畫布（canvas ）： canvas 元素使用 JavaScript 在網頁上繪制圖像。畫布是一個矩形區域，可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
SVG：SVG 指可伸縮矢量圖形，用于定義用于網絡的基于矢量的圖形，使用 XML 格式定義圖形，圖像在放大或改變尺寸的情況下其圖形質量不會有損失，它是萬維網聯盟的標準
地理定位：Geolocation（地理定位）用于定位用戶的位置。‘

1.7 img的srcset屬性的作?？

srcset屬性用于設置不同屏幕密度下，img 會自動加載不同的圖片。

1.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>；

1.9 對 web worker 的理解

JavaScript 是單線程的，這意味著所有任務都在主線程上執行。如果遇到計算密集型任務（如大數據處理、復雜算法等），主線程可能會被阻塞，導致頁面卡頓甚至無響應。為了解決這個問題，HTML5 引入了 Web Worker 技術，它允許在后臺線程中執行腳本，從而避免阻塞用戶界面12。簡單來說，Web Worker 為 JavaScript 創造了多線程環境，主線程可以創建 Worker 線程，將任務分配給 Worker 運行。Worker 線程在后臺運行，主線程和 Worker 線程互不干擾，直到 Worker 完成任務并將結果返回給主線程

1.10 HTML5的離線儲存怎么使用，它的工作原理是什么

Web 應用程序在沒有網絡連接的情況下繼續運行，從而提高用戶體驗和應用的可用性。

Service Worker 是 HTML5 引入的一種運行在瀏覽器后臺的腳本，可以攔截網絡請求并緩存資源，從而實現離線訪問。

攔截請求：Service Worker 可以攔截頁面的所有網絡請求。
緩存資源：使用 Cache API 將資源緩存到本地。
離線訪問：當用戶離線時，Service Worker 從緩存中返回資源。

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

strong標簽有語義，是起到加重語氣的效果，而b標簽是沒有的，b標簽只是一個簡單加粗標簽。
title屬性只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取有很大的影響
i內容展示為斜體，em表示強調的文本

1.12 iframe 有那些優點和缺點？

創建包含另外一個文檔的內聯框架（即行內框架）

優點：

用來加載速度較慢的內容（如廣告）
可以使腳本可以并行下載
可以實現跨子域通信

缺點：

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

1.13 label 的作用是什么？如何使用

label標簽來定義表單控件的關系：當用戶選擇label標簽時，瀏覽器會自動將焦點轉到和label標簽相關的表單控件上，還可以提供文本標簽。

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

1.14 Canvas和SVG的區別

（1）繪圖方式

Canvas
基于像素繪制，通過 JavaScript API 控制每個像素點的顏色和位置。適合需要頻繁重繪的場景，如動畫、游戲等。
SVG
基于矢量繪制，通過 XML 標簽描述圖形。例如，一個圓形可以通過 <circle> 標簽定義。適合需要清晰縮放的圖形，如圖標、圖表等。

（2）DOM 支持

Canvas
繪制后的圖形是靜態的像素圖，無法直接綁定事件或修改樣式。如果需要交互，必須通過 JavaScript 重新繪制。
SVG
每個 SVG 圖形元素都是 DOM 節點，可以直接綁定事件（如點擊、懸停），也可以通過 CSS 或 JavaScript 動態修改樣式。

（3）縮放與清晰度

Canvas
放大后可能失真，因為它是基于像素繪制的，類似于位圖。適合不需要頻繁縮放的動態場景58。
SVG
可以無限縮放而不失真，因為它是基于矢量的。適合需要高分辨率顯示的場景，如圖標、地圖等。

（4）性能表現

Canvas
在處理大量圖形或復雜動畫時性能更優，因為它是直接操作像素，避免了 DOM 操作的開銷。
SVG
在圖形較少且需要交互的場景中性能更優，但大量圖形或復雜動畫可能導致性能下降。

1.15 head 標簽有什么作用，其中什么標簽必不可少？

標簽用于定義文檔的頭部，它是所有頭部元素的容器。

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。

其中定義文檔的標題，它是 head 部分中唯一必需的元素。

1.16 瀏覽器亂碼的原因是什么？如何解決？

產生亂碼的原因：

核心問題在于編碼不統一。無論是網頁文件本身、HTML聲明、數據庫存儲，還是瀏覽器識別，只要其中任意兩個環節的編碼不一致（比如一個是GBK，另一個是UTF-8），就可能導致亂碼。

解決辦法：

統一編碼： 確保從編輯器、HTML聲明、數據庫到傳輸的整個流程都使用同一種編碼（推薦UTF-8）。
轉碼處理： 如果編碼不一致是客觀存在的，需要在程序層面進行編碼轉換。
手動調整： 如果瀏覽器顯示亂碼，可以手動在瀏覽器設置中切換編碼格式。

1.17 漸進增強和優雅降級之間的區別

1）漸進增強（progressive enhancement）：先確保網站在所有瀏覽器中都能提供最基本的內容和功能。再針對支持更高級功能的瀏覽器逐步添加增強的視覺效果和交互功能。

（2）優雅降級 graceful degradation：一開始就構建完整的功能，然后再針對低版本的瀏覽器進行兼容

漸進增強和優雅降級都是處理瀏覽器兼容性的有效策略，但它們的設計思路和側重點不同。漸進增強更注重“從基礎到增強”，適合需要長期維護和擴展的項目；而優雅降級更注重“從復雜到簡化”，適合目標用戶主要使用現代瀏覽器的情況。根據項目需求選擇合適的策略，可以更好地平衡用戶體驗和開發效率。