avatar

前端面試題目-HTML

Semantic HTML (語意化HTML)

Semantic HTML 是指使用能清楚描述內容意義的標籤，而不是僅為了排版或樣式而使用的標籤。

<!-- 非語意化 -->
<div id="header"></div>
<div id="nav"></div>
<div id="main"></div>
<div id="footer"></div>

<!-- 語意化 -->
<header></header>
<nav></nav>
<main></main>
<footer></footer>

  • 為甚麼要使用Semantic HTML?

    1. 可讀性高
    2. SEO友好
    3. 無障礙
    4. 好維護

  • 常見tag

    <header>、<main>、<footer>、<section>、<article>、<aside>、<nav>、 <h1>~<h6>、<p>、<blockquote>、<figure>、<figcaption>、<table>、<thead>、 <tbody>、<th>、<td>、<form>、<label>、<input>、<button>、<fieldset>

Doctype用途

doctype是「文件型別宣告」，主要作用是告訴瀏覽器，這份HTML檔案室依照哪個標準來寫的，以便瀏覽器選擇「正確的解析模式」來渲染畫面

<!DOCTYPE html>
  • 渲染差異
模式說明特點
標準模式按照最新的W3C/WHATWG標準解析最嚴謹，排版一致性高
怪異模式(Quirks Mode)為了兼容老舊網站(IE4~6)使用舊的box-sizing與不一致的排版規則
接近標準模式(Almost Standards Mode)介於兩者之間主要差在表格與圖片垂直對齊的渲染方式
Doctype 寫法模式
<!DOCTYPE html>標準模式（HTML5）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">標準模式
（漏寫 Doctype）怪異模式
  • HTML5不再依賴SGML因此無須DTD聲明。

HTML5 相比於 HTML4 有哪些優勢

面向HTML4HTML5
定位網頁排版標準網頁應用平台（Web App Platform）
規範基於 SGML不依附 SGML（語法更寬鬆）
目標結構化內容支援互動、多媒體、離線能力
模式嚴格模式 / 寬鬆模式單一標準模式
制定組織W3CWHATWG（長期維護版）

  • 語法上的改進

    • 不依賴SGML，因此不需要DTD聲明、大小寫不敏感、不強制屬性引號與結尾斜線。
    • 容錯能力增強：即使標籤未封閉也能自動修復（對瀏覽器更友善）。
    <!-- HTML4 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

  • 新增許多語意化標籤

  • 多媒體原生支援

    <video src="movie.mp4" controls></video>
<audio src="music.mp3" controls></audio>

  • API與功能增加

    類別功能範例
    存儲localStorage, sessionStorage用於離線資料保存
    畫布<canvas>2D/3D 繪圖與遊戲
    圖形<svg>, <canvas>可縮放向量圖與動態繪製
    通訊WebSocket, Fetch API即時通訊、雙向連線
    表單新增 input type（如 email, date, range）改善 UX
    地理定位navigator.geolocation定位使用者位置
    離線應用Application Cache / Service Worker離線支援（PWA 基礎）
    安全sandbox iframe, CORS強化安全策略

  • 性能與體驗優化

    • 新增 控制響應式佈局。
    • 更好地支援觸控事件（Touch Events）。
    • 改進的表單驗證（內建 required, pattern, placeholder 等）。

  • 簡化 DOM 結構

    • 移除不再使用的元素（如 <font>, <center>, <big>）。
    • 提倡使用 CSS 控制樣式而非 HTML 屬性（如 bgcolor）。

請描述 <script>、<script async> 和 <script defer> 的區別

寫法是否阻塞 HTML 解析是否保證執行順序下載時機執行時機
<script>阻塞保證立即下載下載完成後立刻執行（阻塞 DOM）
<script async>不阻塞不保順序與 DOM 同步下載一旦下載完成立即執行
<script defer>不阻塞保順序與 DOM 同步下載DOM 完成後才執行（DOMContentLoaded 前）

HTML5 的本地存儲類型有哪些？它們有什麼區別？

HTML5 提供了讓前端「在使用者瀏覽器中保存資料」的機制， 不需要後端資料庫，也不用每次都發請求。
主要用途：保存使用者設定、暫存資料、登入狀態、離線內容等。

  • localStorage

    // 儲存
localStorage.setItem("theme", "dark");
// 讀取
localStorage.getItem("theme");
// 刪除
localStorage.removeItem("theme");

    • 永久保存（直到手動清除）

    • 特點

      • 永久保存(除非使用者清除)
      • 約5MB
      • 同源(domain+protocol+port)
      • 不會隨HTTP請求傳送
      • 適合保存設定或偏好

  • sessionStorage

    // 儲存
sessionStorage.setItem("token", "12345");
// 讀取
sessionStorage.getItem("token");
    • 頁面關閉後消失
    • 約5MB
    • 同一個分頁或標籤頁有效
    • 不會隨請求傳送
    • 適合暫存表單輸入或當前操作狀態

  • cookie

    document.cookie = "username=SIC; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
    • 特點
      • 可設定過期時間
      • 約4KB
      • 會隨HTTP請求發送給伺服器
      • 適合保存登入狀態、身分驗證資訊
      • 效能低、容易被濫用、傳輸成本高
特性cookielocalStoragesessionStorageIndexedDB
是否 HTML5 新增否是是是
儲存方式鍵值對（string）鍵值對（string）鍵值對（string）結構化物件
容量限制約 4KB約 5MB約 5MB可達數百 MB
有效期可設定或會話期永久保存分頁關閉即刪除永久保存
是否隨請求傳送是否否否
範圍同源（domain + path）同源同分頁同源同源
適用場景驗證、登入狀態偏好設定、快取資料暫存輸入、臨時狀態離線應用、大量資料

  • 補充

    • localStorage與sessionStorage只能存字串，要存物件需要序列化。
    • 他們的操作是synchronous
    • 不同瀏覽器儲存大小上限有差異

請說明 <meta> 標籤的用途與常見屬性

放在 <head>的文件中繼資料

  • 編碼 / 相容性 / 顯示
<!--字元編碼-->
<meta charset="utf-8">
<!--視窗縮放(行動裝置必要)-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--可選:沉浸/瀏海全屏-->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<!--深色/淺色主題宣告-->
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#0ea5e9" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b7285" media="(prefers-color-scheme: dark)">
<!-- 關閉 iOS Safari 自動把數字變電話連結 -->
<meta name="format-detection" content="telephone=no">
  • SEO與爬蟲
<meta name="description" content="頁面一句話摘要（~150字元內）">
<meta name="robots" content="index, follow">
<!-- 也可細分特定爬蟲 -->
<meta name="googlebot" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1">
  • keywords幾乎不被主流搜尋引擎採用
  • 社群分享(Open Graph/Twitter)
<!-- Open Graph (FB、LINE 等) -->
<meta property="og:type" content="website">
<meta property="og:title" content="頁面標題">
<meta property="og:description" content="頁面摘要">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og.jpg">
<meta property="og:image:alt" content="圖片替代文字">

<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="頁面標題">
<meta name="twitter:description" content="頁面摘要">
<meta name="twitter:image" content="https://example.com/og.jpg">
<!--圖片建議 1200×630（或 1.91:1），要可公開存取-->

  • 安全 / 隱私（盡量用「HTTP 標頭」）

    • CSP(內容安全策略)
    <!-- 可用 <meta>，但**最好**用 HTTP 標頭，且某些指令（如 frame-ancestors）meta 版無效 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https: data:; script-src 'self' 'unsafe-inline' https://cdn.example.com">
    • Referrer-Policy
    <meta name="referrer" content="strict-origin-when-cross-origin">

HTML5 新增了哪些表單功能？

  • 新增的 <input> 型別
類型功能範例
email限制輸入格式為 Email<input type="email">
url限制輸入為 URL 格式<input type="url">
number只能輸入數字，可用上下鍵調整<input type="number" min="0" max="10">
range可拖曳滑桿設定數值<input type="range" min="0" max="100">
color顯示顏色選擇器<input type="color">
date日期選擇器<input type="date">
time時間選擇器<input type="time">
datetime-local日期＋時間（無時區）<input type="datetime-local">
month年月選擇器<input type="month">
week週數選擇器<input type="week">
tel電話輸入（行動端會出現數字鍵盤）<input type="tel">
search搜尋框（部分瀏覽器有清除按鈕）<input type="search">
  • 新增的表單屬性
屬性說明範例
placeholder顯示提示文字<input placeholder="輸入姓名">
required必填驗證<input required>
pattern自訂正則驗證規則<input pattern="[A-Za-z0-9]{6,12}">
min / max最小／最大值限制<input type="number" min="1" max="100">
step輸入步進值<input type="number" step="5">
autofocus頁面載入時自動聚焦<input autofocus>
autocomplete是否啟用自動完成<input autocomplete="off">
multiple可選多個檔案或值<input type="file" multiple>
form指定所屬表單（可跨表單放置）<input form="loginForm">
list + <datalist>自動完成建議<input list="cities"> + <datalist id="cities"><option value="台北"><option value="高雄"></datalist>

  • 新增的表單驗證與事件

    • 瀏覽器內建驗證（不需 JS），若輸入不符型別（如 email 輸入錯誤），瀏覽器自動阻止提交。
    • 可用 .checkValidity()、.reportValidity() 觸發驗證。
    const form = document.querySelector("form");
if (!form.checkValidity()) {
  form.reportValidity();
}

  • 新增事件

    • invalid：驗證失敗時觸發
    • input：即時輸入時觸發（可用於動態提示）

HTML5 的 Application Cache / Service Worker

  • 傳統網站如果沒網路就會出現「無法連線到伺服器」，但現代使用者希望「即使離線也能打開部分內容、圖片或頁面」。

  • HTML5 為了這個目的，一開始推出了Application Cache (AppCache)後來發現問題很多，因此用 Service Worker 完全取代它。

  • Application Cache(已淘汰)，HTML5 最早期的離線方案，讓瀏覽器能快取整個網站的資源清單。

    • 使用方式

      • 在 HTML 標籤中指定 manifest 檔案：
      <html manifest="app.manifest">
      • app.manifest 檔內容
      CACHE MANIFEST
# 版本號
# v1.0

CACHE:
index.html
style.css
main.js
images/logo.png

NETWORK:
api/

    • 運作方式

      • 第一次連線 → 下載 manifest 內所有檔案
      • 之後離線時，會直接使用本地快取
      • 若 manifest 改變，才會更新整個快取

    • 缺點（這是它被淘汰的主因）

    問題說明
    更新困難一個檔案改變，就得重新下載全部
    管理混亂很容易被「鎖死舊版本」，使用者看到舊頁面
    控制太死板不能動態選擇要快取的內容
    無法離線請求 API只會快取靜態資源
    已被棄用2020 以後瀏覽器全面停用

  • Service Worker

    • 一段在背景執行的JavaScript，可以攔截request、管理快取、實現離線瀏覽、背景同步
    • 特性
    功能說明
    離線快取（Cache API）可動態控制哪些資源要快取
    攔截請求（fetch 事件）可判斷要走快取還是網路
    背景同步（Background Sync）使用者恢復網路後自動重新上傳資料
    推播通知（Push Notification）實現 Web 推播系統
    多頁共享同一域名下所有頁面可共用同一 Service Worker

DOM 與 Virtual DOM 的差別

DOM（Document Object Model）是瀏覽器將 HTML 文件解析後建立的「樹狀結構模型」。

  • HTML → 經瀏覽器解析 → 變成一棵可以被 JavaScript 操作的 樹（DOM Tree）。

    <div id="app">
  <p>Hello</p>
</div>
    # 瀏覽器內部
Document
└── div#app
    └── p
        └── "Hello"

  • 用js操作DOM每次都會觸發Reflow、Repaint，操作成本很高

Virtual DOM 是一種在記憶體中以 JavaScript 物件 形式存在的 虛擬 DOM 樹。 它不直接操作瀏覽器 DOM，而是先在記憶體中計算出要改變的部分，最後再一次性更新真實 DOM。

  • 操作Virtual DOM的時候，當狀態改變會先生成一個新的Virtual DOM，接著比較新舊的差異，把有變動的節點同步到真實DOM上。 如此一來可以減少實體DOM操作次數、提升渲染效能、保持UI狀態一致(可預測更新)。

  • 比較表

項目真實 DOM虛擬 DOM
所在位置瀏覽器中記憶體中（JavaScript 物件）
操作成本高（需重排與重繪）低（批次比對後一次更新）
更新方式直接操作節點透過 Diff 算法計算差異
效能頻繁更新會變慢適合高頻率 UI 更新
框架應用傳統原生 JS、jQueryReact、Vue、Preact 等
優點即時反映變化結構可控、狀態可預測
缺點操作頻繁會造成效能問題需額外計算（Diff 有開銷）
  • 補充

    • Virtual DOM不一定比較快，少量的操作下DOM會比較快速，但大量的狀態更新Virtual DOM可以透過 批次更新優化效能。

    • 為什麼框架不直接操作 DOM？

      • DOM 是瀏覽器 API，操作成本高；
      • Virtual DOM 讓 UI 更新流程更可預測；
      • 可以跨平台（React Native、SSR）。

DOMContentLoaded 與 load 事件的差別？

事件觸發時機說明
DOMContentLoadedHTML 結構解析完成（不含圖片/樣式）最早可以執行 DOM 操作
load所有資源載入完（含圖片、CSS）通常用於分析或動畫初始化

HTML5 的 Drag & Drop API 是怎麼運作的？