2026年 - HTML面试题汇总

百五十
0 阅读13分钟

2026年最新版 - 涵盖HTML5核心特性、语义化、可访问性及现代Web标准

📋 目录

基础概念

1. HTML和HTML5有什么区别？

HTML 是超文本标记语言的统称，HTML5 是2014年发布的最新标准版本。

HTML5的主要新特性：

  • 新的语义化标签：<header>, <nav>, <article>, <section>, <footer>
  • 多媒体支持：<audio>, <video>, <canvas>, <svg>
  • 新的表单输入类型：email, date, range, color
  • 本地存储：localStorage, sessionStorage
  • 地理定位API、拖放API、Web Workers
  • 更简洁的文档声明：<!DOCTYPE html>
<!-- HTML5 文档结构 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2026 前端面试</title>
</head>
<body>
  <header>
    <nav>导航栏</nav>
  </header>
  <main>
    <article>文章内容</article>
  </main>
  <footer>页脚</footer>
</body>
</html>

2. 什么是HTML标签、元素和属性？

  • 标签(Tag)：用尖括号包裹的关键字，如 <p> 或 </p>
  • 元素(Element)：完整的结构，包括开始标签、内容和结束标签，如 <p>这是段落</p>
  • 属性(Attribute)：在开始标签中提供额外信息，格式为 name="value"
<!-- 标签 -->
<div> </div>

<!-- 元素 -->
<p>这是一个段落元素</p>

<!-- 属性 -->
<a href="https://example.com" target="_blank">链接</a>
<img src="image.jpg" alt="图片描述">

3. 块级元素和内联元素的区别？

块级元素(Block-level)：

  • 独占一行，宽度默认100%
  • 可以设置宽高、内外边距
  • 常见：<div>, <p>, <h1>-<h6>, <section>, <article>

内联元素(Inline)：

  • 不换行，宽度由内容决定
  • 不能设置宽高（可设置左右边距）
  • 常见：<span>, <a>, <strong>, <em>, <img>
<!-- 块级元素 -->
<div style="background: lightblue; width: 200px; height: 100px;">
  块级元素
</div>

<!-- 内联元素 -->
<span style="background: lightgreen;">内联元素1</span>
<span style="background: lightyellow;">内联元素2</span>

HTML5新特性

4. <dialog> 元素的作用和用法？（2026重点）

<dialog> 是HTML5提供的原生对话框元素，具有内置的可访问性和焦点管理。

核心方法：

  • showModal() - 显示模态对话框（带遮罩层）
  • show() - 显示非模态对话框
  • close() - 关闭对话框
<dialog id="myDialog">
  <h2>确认操作</h2>
  <p>您确定要删除这个项目吗？</p>
  <button id="confirmBtn">确认</button>
  <button id="cancelBtn">取消</button>
</dialog>

<button id="openBtn">打开对话框</button>

<script>
const dialog = document.getElementById('myDialog');
const openBtn = document.getElementById('openBtn');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');

openBtn.onclick = () => dialog.showModal();
confirmBtn.onclick = () => {
  console.log('已确认');
  dialog.close('confirmed');
};
cancelBtn.onclick = () => dialog.close('cancelled');

// 监听关闭事件
dialog.addEventListener('close', () => {
  console.log('对话框返回值:', dialog.returnValue);
});
</script>

5. <template> 标签的用途？

<template> 用于存储HTML模板，内容不会立即渲染，可通过JavaScript克隆和插入。

<template id="card-template">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-content"></p>
  </div>
</template>

<div id="container"></div>

<script>
const template = document.getElementById('card-template');
const container = document.getElementById('container');

// 克隆并使用模板
const clone = template.content.cloneNode(true);
clone.querySelector('.card-title').textContent = '标题';
clone.querySelector('.card-content').textContent = '内容';
container.appendChild(clone);
</script>

6. data-* 自定义属性的作用？

data-* 属性用于存储自定义数据，可通过JavaScript的 dataset 属性访问。

<div 
  id="user" 
  data-user-id="12345" 
  data-role="admin"
  data-created-at="2026-03-25">
  用户信息
</div>

<script>
const user = document.getElementById('user');

// 读取 data 属性
console.log(user.dataset.userId);      // "12345"
console.log(user.dataset.role);        // "admin"
console.log(user.dataset.createdAt);   // "2026-03-25"

// 设置 data 属性
user.dataset.status = 'active';
</script>

语义化标签

7. <section>, <article>, <div> 的区别？

  • <div>：无语义的通用容器，仅用于布局和样式
  • <section>：表示文档中的一个主题性分组
  • <article>：表示独立的、可复用的内容单元
<!-- 正确使用语义化标签 -->
<article>
  <header>
    <h1>2026年前端技术趋势</h1>
    <time datetime="2026-03-25">2026年3月25日</time>
  </header>
  
  <section>
    <h2>Web组件化</h2>
    <p>Web Components 成为主流...</p>
  </section>
  
  <section>
    <h2>AI辅助开发</h2>
    <p>AI工具深度集成到开发流程...</p>
  </section>
  
  <footer>
    <p>作者：张三</p>
  </footer>
</article>

<!-- 仅用于样式的容器 -->
<div class="card-wrapper">
  <div class="card">卡片内容</div>
</div>

8. 常用的语义化标签有哪些？

标签用途
<header>页面或区块的头部
<nav>导航链接区域
<main>文档主要内容（每页只能有一个）
<article>独立的文章内容
<section>文档中的节或区段
<aside>侧边栏或附加信息
<footer>页面或区块的底部
<figure> / <figcaption>图片及其说明
<time>时间或日期
<mark>高亮文本
<article>
  <header>
    <h1>文章标题</h1>
    <time datetime="2026-03-25">2026年3月25日</time>
  </header>
  
  <figure>
    <img src="chart.png" alt="数据图表">
    <figcaption>图1: 2026年技术趋势统计</figcaption>
  </figure>
  
  <p>文章正文内容...</p>
  
  <footer>
    <p>作者: <mark>李四</mark></p>
  </footer>
</article>

表单与输入

9. HTML5新增了哪些表单输入类型？

<!-- 邮箱验证 -->
<input type="email" placeholder="请输入邮箱" required>

<!-- 日期选择 -->
<input type="date" min="2026-01-01" max="2026-12-31">

<!-- 数字输入 -->
<input type="number" min="0" max="100" step="5">

<!-- 范围滑块 -->
<input type="range" min="0" max="100" value="50">

<!-- 颜色选择器 -->
<input type="color" value="#667eea">

<!-- URL验证 -->
<input type="url" placeholder="https://example.com">

<!-- 电话号码 -->
<input type="tel" pattern="[0-9]{11}">

<!-- 搜索框 -->
<input type="search" placeholder="搜索...">

10. <label> 标签的作用和最佳实践？

<label> 提升表单可访问性，点击标签可聚焦对应输入框。

<!-- 方式1: 使用 for 属性 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方式2: 嵌套方式 -->
<label>
  邮箱：
  <input type="email" name="email">
</label>

<!-- 复选框示例 -->
<label>
  <input type="checkbox" name="agree">
  我同意服务条款
</label>

11. <datalist> 的用途？

<datalist> 提供输入建议列表，结合自动完成功能。

<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

多媒体元素

12. 如何使用 <video> 和 <audio> 标签？

<!-- 视频播放器 -->
<video 
  width="640" 
  height="360" 
  controls 
  poster="thumbnail.jpg"
  preload="metadata">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track 
    kind="subtitles" 
    src="subtitles_zh.vtt" 
    srclang="zh" 
    label="中文字幕">
  您的浏览器不支持视频播放。
</video>

<!-- 音频播放器 -->
<audio controls loop>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频播放。
</audio>

常用属性：

  • controls - 显示播放控件
  • autoplay - 自动播放（需用户交互）
  • loop - 循环播放
  • muted - 静音
  • preload - 预加载策略（none, metadata, auto）

13. <canvas> 和 SVG 的区别？

特性CanvasSVG
类型位图（像素）矢量图
缩放会失真不失真
性能适合大量图形适合少量复杂图形
事件需手动计算支持DOM事件
操作方式JavaScript APIDOM操作
<!-- Canvas 示例 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#667eea';
ctx.fillRect(10, 10, 150, 80);
</script>

<!-- SVG 示例 -->
<svg width="200" height="100">
  <rect x="10" y="10" width="150" height="80" fill="#667eea"/>
  <circle cx="100" cy="50" r="30" fill="#764ba2"/>
</svg>

可访问性

14. 什么是ARIA？如何使用？（2026重点）

ARIA (Accessible Rich Internet Applications) 是一套增强Web可访问性的属性规范。

核心ARIA属性：

<!-- role 属性 -->
<div role="navigation">
  <ul role="menubar">
    <li role="menuitem"><a href="#home">首页</a></li>
    <li role="menuitem"><a href="#about">关于</a></li>
  </ul>
</div>

<!-- aria-label 提供标签 -->
<button aria-label="关闭对话框">
  <span aria-hidden="true">×</span>
</button>

<!-- aria-labelledby 引用标签 -->
<h2 id="dialog-title">确认删除</h2>
<div role="dialog" aria-labelledby="dialog-title">
  <p>确定要删除这个项目吗？</p>
</div>

<!-- aria-describedby 提供描述 -->
<input 
  type="password" 
  aria-describedby="pwd-hint">
<span id="pwd-hint">密码至少8位，包含字母和数字</span>

<!-- aria-live 动态内容通知 -->
<div aria-live="polite" aria-atomic="true">
  <p>表单提交成功！</p>
</div>

<!-- aria-expanded 展开状态 -->
<button 
  aria-expanded="false" 
  aria-controls="menu">
  菜单
</button>
<ul id="menu" hidden>
  <li>选项1</li>
  <li>选项2</li>
</ul>

2026年ARIA最佳实践：

  1. 优先使用语义化HTML，ARIA作为补充
  2. aria-label 不会被浏览器翻译工具翻译
  3. 避免过度使用ARIA，保持简洁
  4. 使用 aria-live 通知屏幕阅读器动态内容变化

15. alt 属性为什么重要？

alt 属性为图片提供文本替代，对可访问性和SEO至关重要。

<!-- 内容图片 - 描述性alt -->
<img src="chart.png" alt="2026年前端框架使用率对比图">

<!-- 装饰图片 - 空alt -->
<img src="decoration.png" alt="">

<!-- 功能图片 - 描述功能 -->
<img src="search-icon.png" alt="搜索">

<!-- 复杂图片 - 结合longdesc -->
<img 
  src="complex-diagram.png" 
  alt="系统架构图"
  longdesc="architecture-description.html">

16. 如何提升表单的可访问性？

<form>
  <!-- 1. 使用label关联 -->
  <label for="email">邮箱地址：</label>
  <input 
    type="email" 
    id="email" 
    name="email"
    required
    aria-required="true"
    aria-describedby="email-hint">
  <span id="email-hint">我们不会分享您的邮箱</span>
  
  <!-- 2. 使用fieldset分组 -->
  <fieldset>
    <legend>联系方式</legend>
    <label>
      <input type="radio" name="contact" value="email">
      邮箱
    </label>
    <label>
      <input type="radio" name="contact" value="phone">
      电话
    </label>
  </fieldset>
  
  <!-- 3. 错误提示 -->
  <input 
    type="text" 
    aria-invalid="true"
    aria-errormessage="error-msg">
  <span id="error-msg" role="alert">
    此字段为必填项
  </span>
  
  <button type="submit">提交</button>
</form>

高级特性

17. defer 和 async 的区别？

控制外部脚本的加载和执行时机。

<!-- 正常加载：阻塞HTML解析 -->
<script src="script.js"></script>

<!-- async：异步加载，加载完立即执行 -->
<script src="analytics.js" async></script>

<!-- defer：异步加载，HTML解析完后按顺序执行 -->
<script src="main.js" defer></script>
<script src="utils.js" defer></script>
属性加载执行时机顺序
无阻塞立即按顺序
async异步加载完立即执行不保证
defer异步DOMContentLoaded前保证顺序

18. 图片懒加载和优先级控制？（2026重点）

<!-- 原生懒加载 -->
<img 
  src="image.jpg" 
  loading="lazy"
  alt="描述">

<!-- 预加载关键图片 -->
<link rel="preload" as="image" href="hero.jpg">

<!-- 控制加载优先级 -->
<img 
  src="important.jpg" 
  fetchpriority="high"
  alt="重要图片">

<img 
  src="decoration.jpg" 
  fetchpriority="low"
  loading="lazy"
  alt="装饰图片">

<!-- 响应式图片 -->
<picture>
  <source 
    media="(min-width: 800px)" 
    srcset="large.jpg">
  <source 
    media="(min-width: 400px)" 
    srcset="medium.jpg">
  <img 
    src="small.jpg" 
    alt="响应式图片"
    loading="lazy">
</picture>

19. Web Components 是什么？

Web Components 允许创建可复用的自定义元素。

<!-- 定义自定义元素 -->
<script>
class UserCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    
    shadow.innerHTML = `
      <style>
        .card {
          border: 1px solid #ddd;
          padding: 16px;
          border-radius: 8px;
        }
      </style>
      <div class="card">
        <h3>${this.getAttribute('name')}</h3>
        <p>${this.getAttribute('role')}</p>
      </div>
    `;
  }
}

customElements.define('user-card', UserCard);
</script>

<!-- 使用自定义元素 -->
<user-card name="张三" role="前端工程师"></user-card>
<user-card name="李四" role="后端工程师"></user-card>

20. <meta> 标签的重要用途？

<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">
  
  <!-- 视口设置（移动端必备） -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO相关 -->
  <meta name="description" content="2026前端面试题汇总">
  <meta name="keywords" content="HTML,CSS,JavaScript,面试">
  <meta name="author" content="张三">
  
  <!-- 社交媒体分享 -->
  <meta property="og:title" content="前端面试题">
  <meta property="og:description" content="最全面的前端面试题库">
  <meta property="og:image" content="https://example.com/share.jpg">
  
  <!-- 浏览器兼容 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <!-- 主题颜色 -->
  <meta name="theme-color" content="#667eea">
  
  <!-- 禁止缩放 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

性能优化

21. 如何优化HTML性能？

<!-- 1. 资源预加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="prefetch" href="next-page.html">
<link rel="dns-prefetch" href="https://api.example.com">

<!-- 2. 关键CSS内联 -->
<style>
  /* 首屏关键样式 */
  .hero { background: #667eea; }
</style>

<!-- 3. 非关键CSS异步加载 -->
<link 
  rel="stylesheet" 
  href="non-critical.css" 
  media="print" 
  onload="this.media='all'">

<!-- 4. 脚本优化 -->
<script src="main.js" defer></script>
<script src="analytics.js" async></script>

<!-- 5. 图片优化 -->
<img 
  src="image.jpg" 
  loading="lazy"
  decoding="async"
  alt="描述">

22. rel 属性的常用值？

<!-- 样式表 -->
<link rel="stylesheet" href="styles.css">

<!-- 图标 -->
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon" href="icon.png">

<!-- 预加载 -->
<link rel="preload" href="font.woff2" as="font">
<link rel="prefetch" href="next-page.html">
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://api.example.com">

<!-- 规范链接 -->
<link rel="canonical" href="https://example.com/page">

<!-- 外部链接 -->
<a href="https://external.com" rel="noopener noreferrer">外部链接</a>

常见面试题

23. HTML5的离线存储有哪些？

// 1. localStorage - 永久存储
localStorage.setItem('user', JSON.stringify({ name: '张三' }));
const user = JSON.parse(localStorage.getItem('user'));

// 2. sessionStorage - 会话存储
sessionStorage.setItem('token', 'abc123');

// 3. IndexedDB - 大量结构化数据
const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  // 数据库操作
};

24. 如何实现页面间通信？

// 1. localStorage + storage事件
// 页面A
localStorage.setItem('message', 'Hello');

// 页面B
window.addEventListener('storage', (e) => {
  if (e.key === 'message') {
    console.log('收到消息:', e.newValue);
  }
});

// 2. BroadcastChannel API
const channel = new BroadcastChannel('my_channel');
channel.postMessage('Hello from page A');
channel.onmessage = (e) => {
  console.log('收到消息:', e.data);
};

// 3. postMessage
window.opener.postMessage('Hello', '*');

25. 如何优化首屏加载速度？

  1. 关键资源优化

    • 内联首屏关键CSS
    • 使用 preload 预加载关键资源
    • 延迟加载非关键资源

  2. 图片优化

    • 使用 WebP 格式
    • 实现懒加载
    • 使用适当尺寸的图片

  3. 脚本优化

    • 使用 defer 或 async
    • 代码分割
    • Tree shaking

  4. HTML优化

    • 减少DOM层级
    • 避免内联大量样式和脚本
    • 使用语义化标签

进阶深入

26. Shadow DOM 的工作原理？与普通DOM有什么区别？

Shadow DOM 是 Web Components 的核心技术之一，提供了样式和DOM的封装隔离。

<!-- 创建Shadow DOM -->
<div id="host"></div>
<script>
const host = document.getElementById('host');
// mode: 'open' 外部可通过 host.shadowRoot 访问
// mode: 'closed' 外部无法访问（更强封装）
const shadow = host.attachShadow({ mode: 'open' });

shadow.innerHTML = `
  <style>
    /* 这些样式只作用于Shadow DOM内部 */
    p { color: red; font-size: 20px; }
    :host { display: block; border: 1px solid #ccc; }
    :host(.highlight) { background: yellow; }
    ::slotted(span) { font-weight: bold; }
  </style>
  <p>Shadow DOM 内部内容</p>
  <slot></slot> <!-- 投射外部内容 -->
`;
</script>

<!-- 使用slot投射内容 -->
<my-card>
  <span slot="title">标题</span>
  <p>正文内容会投射到默认slot</p>
</my-card>

Shadow DOM vs 普通DOM：

特性普通DOMShadow DOM
CSS作用域全局，可能冲突封装隔离，互不影响
选择器穿透任意选择外部无法直接选择内部元素
事件冒泡正常冒泡事件重定向到host元素
JS访问document.querySelector需通过 shadowRoot
使用场景普通页面开发组件库、微前端、第三方嵌入
// Declarative Shadow DOM（2026 声明式 Shadow DOM）
// 无需JS即可创建Shadow DOM，对SSR友好
`<template shadowrootmode="open">
  <style>p { color: blue; }</style>
  <p>声明式Shadow DOM</p>
</template>`

// 自定义元素 + Shadow DOM 完整示例
class MyCounter extends HTMLElement {
  #count = 0;

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
    this.shadowRoot.querySelector('button')
      .addEventListener('click', () => {
        this.#count++;
        this.render();
        this.dispatchEvent(new CustomEvent('change', {
          detail: { count: this.#count }
        }));
      });
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        button { padding: 8px 16px; cursor: pointer; }
        span { margin: 0 12px; font-size: 18px; }
      </style>
      <button>+1</button>
      <span>${this.#count}</span>
    `;
  }
}
customElements.define('my-counter', MyCounter);

27. Service Worker 与 PWA 的核心概念？

Service Worker 是运行在浏览器后台的独立线程，拦截网络请求，实现离线缓存、推送通知、后台同步等功能。

// 1. 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js', {
    scope: '/'
  }).then(reg => {
    console.log('SW 注册成功，scope:', reg.scope);
  });
}

// 2. sw.js - 安装阶段（预缓存关键资源）
const CACHE_NAME = 'app-v2';
const PRECACHE_URLS = ['/', '/index.html', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(PRECACHE_URLS))
      .then(() => self.skipWaiting()) // 立即激活
  );
});

// 3. 激活阶段（清理旧缓存）
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys.filter(key => key !== CACHE_NAME)
            .map(key => caches.delete(key))
      )
    ).then(() => self.clients.claim()) // 接管所有页面
  );
});

// 4. 拦截请求（Cache First 策略）
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => {
      return cached || fetch(event.request).then(response => {
        const clone = response.clone();
        caches.open(CACHE_NAME)
          .then(cache => cache.put(event.request, clone));
        return response;
      });
    })
  );
});

常见缓存策略：

  • Cache First - 优先缓存，适合静态资源（CSS/JS/图片）
  • Network First - 优先网络，适合API请求、动态内容
  • Stale While Revalidate - 先返回缓存，后台更新，适合不频繁变化的数据
  • Network Only - 仅网络，适合非GET请求
  • Cache Only - 仅缓存，适合离线页面

PWA关键文件 - manifest.json：

{
  "name": "My App",
  "short_name": "App",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4285f4",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

28. 内容安全策略（CSP）是什么？如何配置？

CSP是一种安全机制，通过限制页面可以加载的资源来源，防御XSS和数据注入攻击。

<!-- 通过HTTP响应头设置（推荐） -->
<!-- Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src *; -->

<!-- 或通过meta标签（有限制，不支持frame-ancestors等） -->
<meta http-equiv="Content-Security-Policy"
  content="default-src 'self';
           script-src 'self' https://cdn.example.com;
           style-src 'self' 'unsafe-inline';
           img-src * data:;
           font-src 'self' https://fonts.googleapis.com;
           connect-src 'self' https://api.example.com;
           frame-ancestors 'none';">

常用指令：

指令说明
default-src所有资源的默认来源
script-srcJavaScript 来源
style-srcCSS 来源
img-src图片来源
connect-srcAJAX/WebSocket 连接来源
frame-ancestors控制谁能嵌入本页面（替代X-Frame-Options）
report-uriCSP违规报告发送地址
'self'          - 同源
'none'          - 禁止所有
'unsafe-inline' - 允许内联（不推荐）
'unsafe-eval'   - 允许eval（不推荐）
'nonce-xxx'     - 指定nonce值的脚本才能执行
'strict-dynamic' - 信任已授权脚本加载的子脚本

29. Speculation Rules API 是什么？（2026新特性）

Speculation Rules API 允许开发者声明式地告诉浏览器预渲染或预获取页面，大幅提升导航速度。

<!-- 替代旧的 <link rel="prefetch"> 和 <link rel="prerender"> -->
<script type="speculationrules">
{
  "prerender": [
    {
      "urls": ["/about", "/products", "/contact"]
    }
  ],
  "prefetch": [
    {
      "urls": ["/api/data.json"]
    }
  ]
}
</script>

<!-- 基于文档规则的预渲染（更灵活） -->
<script type="speculationrules">
{
  "prerender": [
    {
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "selector_matches": ".no-prerender" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

eagerness 等级：

  • immediate - 立即预渲染
  • eager - 尽快预渲染
  • moderate - 鼠标hover后预渲染（推荐）
  • conservative - 鼠标按下时才预渲染

30. Popover API 和 <dialog> 有什么区别？

<!-- Popover API（2024+ 原生支持） -->
<button popovertarget="menu">打开菜单</button>
<div id="menu" popover>
  <p>这是一个弹出内容</p>
  <button popovertarget="menu" popovertargetaction="hide">关闭</button>
</div>

<!-- dialog 元素 -->
<button onclick="document.getElementById('modal').showModal()">打开弹窗</button>
<dialog id="modal">
  <form method="dialog">
    <h2>确认操作</h2>
    <p>你确定要删除吗？</p>
    <button value="cancel">取消</button>
    <button value="confirm">确认</button>
  </form>
</dialog>
特性popover<dialog>
用途轻量弹出（提示、菜单、下拉）模态/非模态对话框
模态支持❌ 仅非模态✅ showModal() 支持模态
背景遮罩❌✅ ::backdrop 伪元素
焦点陷阱❌✅ 模态时自动焦点陷阱
点击外部关闭✅ 自动（light dismiss）❌ 需手动实现
ESC关闭✅✅ 模态时自动
层叠上下文Top LayerTop Layer（showModal）

31. 什么是 View Transitions API？

View Transitions API 提供了页面切换或DOM状态变化时的过渡动画能力，无需复杂的JS动画库。

// 同文档 View Transition（SPA）
document.startViewTransition(() => {
  // 更新DOM
  updateContent(newData);
});

// 自定义过渡动画
document.startViewTransition(async () => {
  await loadNewPage();
});

/* 定义过渡动画 */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* 为特定元素命名过渡 */
.hero-image {
  view-transition-name: hero;
}

/* 英雄动画 - 元素在两个状态间平滑过渡 */
::view-transition-group(hero) {
  animation-duration: 0.5s;
}

@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

<!-- 跨文档 View Transition（MPA，2026+） -->
<!-- 在两个页面的CSS中都添加 -->
<style>
@view-transition {
  navigation: auto;
}
</style>

总结

2026年HTML面试重点：

  1. ✅ 语义化标签 - 正确使用 <article>, <section> 等
  2. ✅ 可访问性(ARIA) - 理解并应用ARIA属性
  3. ✅ 新特性 - <dialog>, <template>, Web Components
  4. ✅ 性能优化 - 懒加载、预加载、资源优先级
  5. ✅ 表单增强 - 新输入类型、验证、<datalist>
  6. ✅ 多媒体 - <video>, <audio>, <canvas>, SVG

学习建议：

  • 实践语义化HTML，提升代码可读性
  • 重视可访问性，使用ARIA增强用户体验
  • 掌握性能优化技巧，提升页面加载速度
  • 了解最新Web标准和浏览器API
avatar
文章
阅读
粉丝