目錄

一、HTML元素

1、行內元素、塊元素、行內塊元素

2、替換元素和非替換元素

二、HTML5新增特性

1、語義化標簽：提升頁面結構化與可讀性

2、原生多媒體支持：擺脫插件依賴

3、表單增強：提升交互與驗證能力

4、Canvas 與 WebGL：動態圖形繪制

5、本地存儲：替代 Cookie 的更優方案

6、其他重要特性

7、兼容性處理

三、使用技巧與優化

1、圖片優化技巧

2、表單優化技巧

3、頁面性能與結構化優化

4、可訪問性優化（A11y）

5、實用 API 與場景優化

四、高頻面試題精講
CSDN 原創主頁：不羈https://blog.csdn.net/2303_76492156?type=blog

---

一、HTML元素

1、行內元素、塊元素、行內塊元素

在 HTML 中，行內元素、塊元素（塊級元素）、行內塊元素的區分主要基于它們的顯示特性和布局行為，具體可從以下幾個核心維度進行劃分：

1. 布局方式（是否獨占一行）

• 塊元素：默認情況下會獨占一行，即其前后會自動換行，寬度默認填充其父元素的可用空間（100% 父元素寬度）。
  例如：<div>、<p>、<h1>-<h6>、<ul>、<li>?等。

• 行內元素：默認情況下不會獨占一行，會和其他行內元素并排顯示，寬度僅由自身內容決定（“包裹內容”），不會強制換行。
  例如：<span>、<a>、<strong>、<em>?等。

• 行內塊元素：兼具行內元素和塊元素的特點，不會獨占一行（可與其他行內 / 行內塊元素并排），但可以設置寬度、高度、內外邊距（類似塊元素的尺寸可控性）。
  例如：<img>、<input>、<button>?等（替換元素多為行內塊元素）。

2. 尺寸可控性（能否設置寬高）

• 塊元素：可以直接通過?width、height?設置寬度和高度，且默認寬度為父元素的 100%。

• 行內元素：默認無法通過?width、height?設置尺寸，其尺寸由內容本身決定（例如文字長度、圖片原始尺寸等）。

• 行內塊元素：可以通過?width、height?自由設置尺寸，行為類似塊元素，但布局上仍保持行內特性。

3. 內外邊距（margin/padding）的影響

• 塊元素：margin?和?padding?的上下、左右方向都能正常生效，且上下邊距會產生 “外邊距合并” 現象（相鄰塊元素的上下 margin 會重疊）。

• 行內元素：margin?和?padding?的左右方向生效，但上下方向不會影響整體布局（即不會推開上下元素，僅可能覆蓋其他內容）。

• 行內塊元素：margin?和?padding?的上下、左右方向都能正常生效，且不會產生塊元素的 “外邊距合并”。

核心區分標準

元素類型	獨占一行？	可設置寬高？	內外邊距全生效？	典型示例
塊元素	是	是	是（上下可能合并）	<div>、<p>、<ul>
行內元素	否	否	僅左右生效	<span>、<a>、<em>
行內塊元素	否	是	是（無合并）	<img>、<input>、<button>

此外，元素的類型可以通過 CSS 的?display?屬性修改（例如?display: block?可將行內元素轉為塊元素，display: inline-block?可轉為行內塊元素），這也是前端布局中靈活控制元素行為的常用方式。

下表羅列出了這三類元素中常見的標簽及其特點：

類別	常見元素	特點
行內元素	常見的行內元素： < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />、等，其中 < span > 標簽是最典型的行內元素。 有的地方也將行內元素稱為內聯元素。	① 相鄰行內元素在一行上，一行可以顯示多個。 ② 高、寬直接設置是無效的。 ③ 默認寬度就是它本身內容的寬度。 ④ 行內元素只能容納文本或其他行內元素。
塊元素	常見的塊級元素： < h1 >~< h6 >、< p >、< div >、< ul >、< ol >、< li >、< dd >、< dt >、< dl >等，其中 < div > 標簽是最典型的塊元素。	① 比較霸道，自己獨占一行。 ② 高度，寬度、外邊距以及內邊距都可以控制。 ③ 寬度默認是容器（父級寬度）的100%。 ④ 是一個容器及盒子，里面可以放行內或者塊級元素。 ?
行內塊元素	在行內元素中有幾個特殊的標簽 < img />、< input />、< td >，它們同時具有塊元素和行內元素的特點。 有些資料稱它們為行內塊元素。	① 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。 ② 默認寬度就是它本身內容的寬度（行內元素特點）。 ③ 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點） ?

行內元素需要注意的點：

1. 鏈接里面不能再放鏈接
2. 特殊情況鏈接 < a > 里面可以放塊級元素，但是給 < a > 轉換一下塊級模式最安全

塊元素需要注意的點：

1. 文字類的元素內不能使用塊級元素
2. < p > 標簽主要用于存放文字，因此 < p > 里面不能放塊級元素，特別是不能放< div >。同理， < h1 >~< h6 >等都是文字類塊級標簽，里面也不能放其他塊級元素

2、替換元素和非替換元素

HTML 中的替換元素（replaced elements）和非替換元素（non-replaced elements）主要根據內容的來源和表現方式來區分，核心區別在于元素內容的生成方式：

1. 替換元素（Replaced Elements）

   • 內容不由元素本身的 HTML 決定，而是由外部資源（如圖片文件、視頻文件等）或元素屬性定義
   • 瀏覽器會根據元素的屬性（如?src、value）來加載并顯示外部內容
   • 元素的尺寸通常由外部資源本身或 CSS 決定，而非內容
   • 常見示例：
     • <img>：內容由?src?屬性指定的圖片文件決定
     • <video>/<audio>：內容由?src?指定的媒體文件決定
     • <input>：內容由用戶輸入或?value?屬性決定
     • <select>：內容由選項列表和選中狀態決定

2. 非替換元素（Non-replaced Elements）

   • 內容完全由元素內部的 HTML 代碼和文本決定
   • 瀏覽器直接渲染元素包含的內容，不需要依賴外部資源
   • 元素尺寸通常由內容、CSS 樣式共同決定
   • 常見示例：
     • <div>/<span>：內容就是標簽內的文本或子元素
     • <p>/<h1>-<h6>：內容為標簽內的文本
     • <ul>/<li>：內容由列表項及其文本組成
     • <a>：內容為鏈接文本或嵌套元素

簡單來說，替換元素的內容 "外包" 給了外部資源，而非替換元素的內容是 "自給自足" 的。這種區分會影響 CSS 布局和渲染行為，例如替換元素默認具有?inline-block?特性，而非替換元素則根據其類型（行內 / 塊級）表現出不同特性。

---

二、HTML5新增特性

HTML5 作為 HTML 的重要版本更新，新增了許多具有革命性的特性，是前端面試中的高頻考點。以下從核心特性、實際應用及面試重點等方面進行系統總結：

1、語義化標簽：提升頁面結構化與可讀性

核心標簽：<header>（頁頭）、<footer>（頁腳）、<article>（獨立文章內容）、<section>（文檔區塊）、<nav>（導航）、<aside>（側邊欄）、<main>（主要內容區）等。

面試重點：

• 語義化的意義：讓代碼結構更清晰，便于開發者維護；幫助搜索引擎（SEO）和輔助技術（如屏幕閱讀器）理解頁面內容，提升可訪問性。

• 與非語義化標簽（如?<div class="header">）的對比：語義化標簽無需額外類名即可表達含義，減少冗余代碼。

2、原生多媒體支持：擺脫插件依賴

核心標簽：

• <video>：支持視頻播放，可指定?src（視頻源）、controls（顯示控制欄）、autoplay（自動播放）、loop（循環）等屬性。

• <audio>：支持音頻播放，屬性與?<video>?類似（如?src、controls）。

面試重點：

• 兼容性處理：不同瀏覽器支持的視頻格式（如 MP4、WebM）不同，可通過?<source>?標簽提供多格式源。
  示例：

  <video controls><source src="video.mp4" type="video/mp4"><source src="video.webm" type="video/webm">您的瀏覽器不支持視頻播放
  </video>
  

• 優勢：無需依賴 Flash 等插件，降低加載成本，提升跨平臺兼容性。

3、表單增強：提升交互與驗證能力

核心新增特性：

1. 新增輸入類型：email（郵箱驗證）、tel（電話）、date（日期選擇器）、number（數字輸入）、range（滑塊）、search（搜索框）等，瀏覽器會自動提供對應交互（如日期 picker）和基礎驗證。

2. 表單驗證屬性：

   • required：必填項，提交時未填寫則提示。

   • pattern：通過正則表達式自定義驗證規則（如?pattern="[A-Za-z0-9]{6,}"?限制密碼格式）。

   • placeholder：輸入框提示文本。

   • autocomplete：控制自動填充（on/off）。

3. 表單元素：<datalist>（為輸入框提供預設選項）、<output>（顯示計算結果）。

面試重點：

• 原生驗證的優勢：減少 JavaScript 代碼量，提升用戶體驗（即時反饋），但需注意結合自定義驗證（如復雜邏輯）。

• 示例：

  <input type="email" required placeholder="請輸入郵箱">
  <input type="password" pattern="[A-Za-z0-9]{6,}" title="密碼需6位以上字母或數字">
  

4、Canvas 與 WebGL：動態圖形繪制

• Canvas：通過 JavaScript 繪制 2D 圖形（如矩形、路徑、文本、圖像），適用于圖表、小游戲、簽名板等場景。
  核心用法：通過?<canvas>?標簽創建畫布，再用?getContext('2d')?獲取上下文進行繪制。

• WebGL：基于 Canvas 提供 3D 圖形繪制能力，利用 GPU 加速，適用于 3D 游戲、數據可視化等。
  面試重點：

• Canvas 與 SVG 的區別：Canvas 是像素級繪制（位圖，放大失真），依賴 JavaScript 動態更新；SVG 是矢量圖形（放大不失真），可直接通過標簽定義，支持事件綁定。

5、本地存儲：替代 Cookie 的更優方案

核心方案：

• localStorage：持久化存儲，數據永久保存（除非手動刪除），容量約 5-10MB，同源頁面共享。

• sessionStorage：會話級存儲，數據僅在當前標簽頁有效，關閉頁面后刪除，容量約 5MB。

面試重點：

• 與 Cookie 的對比：

  特性	Cookie	localStorage	sessionStorage
  容量	約 4KB	5-10MB	5MB
  有效期	可設置過期時間	永久（除非手動刪除）	會話期間（頁面關閉失效）
  通信	每次請求攜帶到服務器	僅本地存儲，不發請求	僅本地存儲，不發請求

• 使用場景：localStorage 適合存儲長期數據（如用戶偏好設置），sessionStorage 適合存儲臨時數據（如表單臨時內容）。

6、其他重要特性

1. 地理位置 API（Geolocation）：通過?navigator.geolocation?獲取用戶位置信息（需用戶授權），適用于地圖服務、本地推薦等場景。

2. 拖放 API：通過?draggable?屬性和?drag/drop?事件實現元素拖放功能，簡化交互開發。

3. Web Worker：允許在后臺線程運行 JavaScript，避免復雜計算阻塞主線程（頁面卡頓），實現多線程并發。

4. 歷史管理 API（History）：通過?history.pushState()?等方法操作瀏覽器歷史記錄，實現單頁應用（SPA）的無刷新路由。

7、兼容性處理

• 舊版瀏覽器（如 IE9 及以下）不支持 HTML5 新標簽和 API，需通過工具兼容：

  • 引入?html5shiv.js?讓 IE 識別語義化標簽。

  • 使用?respond.js?支持 CSS3 Media Query。

  • 對本地存儲等 API 進行特性檢測（如?if (window.localStorage)），提供降級方案。

面試總結要點

1. 語義化標簽的意義及常見標簽。

2. 表單增強的具體表現（輸入類型、驗證屬性）。

3. 本地存儲與 Cookie 的區別。

4. Canvas 的基本用法及與 SVG 的差異。

5. 多媒體標簽的使用及兼容性處理。

掌握這些內容，既能清晰回答面試問題，也能在實際開發中合理運用 HTML5 特性提升頁面質量。

---

三、使用技巧與優化

1、圖片優化技巧

圖片是頁面加載性能的關鍵影響因素，優化方案需兼顧加載速度、用戶體驗和可訪問性：

• 基礎屬性規范：

  • 必加alt屬性：為圖片提供文本描述，當圖片加載失敗時顯示，同時提升 SEO 和屏幕閱讀器的可訪問性（如<img src="pic.jpg" alt="海邊日落全景圖">）。

  • 明確width和height：提前指定圖片尺寸，避免加載時因尺寸不確定導致的布局抖動（重排），減少瀏覽器回流消耗。

• 加載策略優化：

  • 延遲加載：對非首屏圖片使用loading="lazy"屬性（<img src="img.jpg" loading="lazy">），使圖片在進入視口時才加載，減少初始加載時間。

  • 響應式圖片：通過srcset和sizes屬性適配不同設備分辨率，避免小屏幕加載過大圖片（如<img src="small.jpg" srcset="medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, 800px">）。

• 格式選擇：優先使用現代圖片格式（WebP、AVIF），在保持畫質的同時大幅減小體積，通過<picture>標簽兼容舊瀏覽器（如：

  <picture><source srcset="img.avif" type="image/avif"><source srcset="img.webp" type="image/webp"><img src="img.jpg" alt=" fallback">
  </picture>
  

  ）。

2、表單優化技巧

表單是用戶交互的核心，優化需提升易用性和數據準確性：

• 利用 HTML5 表單特性：

  • 新增輸入類型：使用type="email"、type="tel"、type="date"等，觸發瀏覽器原生驗證和適配鍵盤（如日期選擇器）。

  • 驗證屬性：通過required（必填）、pattern（正則匹配，如pattern="\d{6}"驗證 6 位數字）、min/max（數值范圍）實現前端驗證，減少無效請求。

• 用戶體驗增強：

  • placeholder：提示輸入格式（如<input type="email" placeholder="請輸入xxx@example.com">），但需注意不能替代label（影響可訪問性）。

  • autocomplete：合理設置on/off或具體值（如autocomplete="email"），幫助用戶快速填充信息。

3、頁面性能與結構化優化

• 語義化標簽的性能隱含：

  • 使用<header>、<footer>、<main>、<article>等語義標簽，減少不必要的div嵌套，使 DOM 結構更簡潔，提升瀏覽器解析效率。

  • 語義化提升 SEO，間接減少因內容識別不足導致的重復優化成本。

• 資源加載控制：

  • 合理使用<link rel="preload">預加載關鍵資源（如字體、核心 CSS），避免渲染阻塞；rel="prefetch"預加載未來可能用到的資源（如后續頁面圖片）。

  • 腳本加載：通過async（異步加載，加載完成后立即執行）或defer（異步加載，DOM 解析完成后執行）避免<script>阻塞 HTML 解析（如<script src="app.js" defer></script>）。

• 減少無效代碼：

  • 移除冗余標簽（如空<div>）、注釋和空格，減小 HTML 文件體積。

  • 避免嵌套過深（如超過 10 層），減少瀏覽器渲染時的回流 / 重繪計算量。

4、可訪問性優化（A11y）

• 標簽關聯：使用<label for="inputId">綁定表單元素，使點擊標簽可聚焦輸入框，提升鼠標和屏幕閱讀器體驗。

• ARIA 屬性：對非語義元素添加角色和狀態描述（如<div role="button" aria-pressed="false">模擬按鈕），幫助輔助技術理解頁面結構。

• 多媒體可訪問性：為<video>添加字幕（<track kind="subtitles" src="subs.vtt">），為<audio>提供文字轉錄內容。

5、實用 API 與場景優化

• 頁面可見性 API：監聽visibilitychange事件，在頁面隱藏時暫停視頻播放、動畫或數據請求，節省資源（如：

  document.addEventListener('visibilitychange', () => {const video = document.querySelector('video');if (document.hidden) {video.pause();} else {video.play();}
  });
  

  ）。

• 避免布局抖動：除了圖片指定尺寸，還需減少動態修改width、height等觸發重排的樣式，優先使用transform和opacity（僅觸發重繪或合成，性能更優）。

---

四、高頻面試題精講

• DOCTYPE 聲明相關

  • 問題：什么是<!DOCTYPE>及其作用？是否需要在 HTML5 中使用？

  • 答案：<!DOCTYPE>是 HTML 文件開頭的文檔類型聲明，用于告訴瀏覽器該文檔遵循的 HTML 或 XHTML 規范版本。其核心作用是觸發瀏覽器的標準模式，確保頁面按照現代標準渲染，避免舊瀏覽器的怪異模式帶來的兼容性問題。在 HTML5 中必須使用，HTML5 的聲明簡化為，不區分大小寫，無需版本號或 DTD 引用。

• 語義化相關

  • 問題：說說對 HTML 語義化的理解。

  • 答案：HTML 語義化是指使用具有明確含義的 HTML 標簽來清晰表達頁面結構和內容，而不僅僅是依賴<div>和等通用容器。例如用<header>表示頭部，<footer>表示底部等。語義化有助于搜索引擎更好地理解頁面內容，提升 SEO 效果；能讓輔助技術（如屏幕閱讀器）更好地解析頁面，增強可訪問性；還可使代碼更具可讀性，方便開發和維護。

• HTML5 新特性相關

  • 問題：簡述 HTML5 新特性。

  • 答案：HTML5 有諸多新特性，包括引入語義元素，如<article>、<section>、<nav>等，可更好地描述網頁結構；新增多媒體元素<audio>和<video>，支持原生音頻和視頻播放；表單增強，增加了如 email、date 等新的輸入類型，還提供了表單驗證功能；有 Canvas 元素用于繪制動態圖形；引入了本地存儲 localStorage 和 sessionStorage；具備地理位置 API 可獲取用戶位置信息；還有 WebSocket API，能實現網頁和服務器之間的實時通信等。

• 元素相關

  • 問題：title 與 h1 的區別、b 與 strong 的區別、i 與 em 的區別？

  • 答案：title 屬性用于為元素提供額外的提示信息，鼠標懸停時會顯示。h1 是標題標簽，用于定義頁面的主要標題，對頁面結構和 SEO 很重要。b 標簽只是單純地將文本設置為粗體，沒有語義含義。strong 標簽表示文本具有重要性，會被搜索引擎等重視，有語義層面的意義。i 標簽通常用于將文本設置為斜體，無特定語義。em 標簽表示強調，有語義，屏幕閱讀器等輔助設備會對其內容特殊處理。

• src 與 href 區別

  • 問題：src 與 href 的區別是什么？

  • 答案：src?用于嵌入資源，如?<img>?和?<script>，瀏覽器會立即加載并解析這些資源，可能會阻塞頁面渲染。而?href?用于建立關聯，如?<link>?和?<a>，瀏覽器會并行加載這些資源，不會阻塞頁面解析。

---

E? ? ? ? ? ? ? N? ? ? ? ? ? ? D