HTML 中高级面试题（50+ 全面版）

HTML中高级面试题精华摘要本文整理了55道HTML中高级面试题，涵盖核心知识点：语义化与DOM：标签语义化（如<section>与<div>区别）、块级/行内元素特性、全局属性（如alt与title差异）表单与多媒体：HTML5新增表单类型（email/date）、校验方式、<canvas>与<svg>应用场景性能优化：减少回流重绘、图片懒

DeppBing

607人浏览 · 2025-09-22 14:24:59

DeppBing · 2025-09-22 14:24:59 发布

✅ 整理涵盖了 55 道 HTML 中高级面试题覆盖了：

语义化 / DOM 基础
表单 / 多媒体
渲染机制 / 性能优化
HTML5 API
安全（XSS/CSRF/CSP/同源策略）
SEO / 可访问性
SSR / CSR / SPA SEO
Web Components 进阶

问题	答案	考察点
为什么要使用语义化标签？	代码更清晰；利于 SEO；提升可访问性；团队协作更高效	语义化
`<section>` 和 `<div>` 的区别？	`<section>` 表示语义化章节；`<div>` 无语义，仅用于布局	语义化
常见的块级元素与行内元素？	块级：`div p h1 section`；行内：`span a strong em`	元素分类
行内元素与块级元素的区别？	块级元素独占一行，可包含块级/行内；行内元素不独占一行	盒模型基础
HTML 中的全局属性有哪些？	`id`、`class`、`title`、`style`、`lang`、`dir`、`data-*`、`hidden`、`draggable`、`tabindex`	全局属性
`<img>` 中 `alt` 与 `title` 区别？	`alt`：替代文本，用于 SEO/无障碍；`title`：鼠标悬浮提示	属性差异
`meta` 标签的常见作用？	指定编码、设置 viewport、SEO 描述、关键词、爬虫控制（robots）	页面信息
DOCTYPE 的作用？	告诉浏览器采用标准模式渲染，避免触发怪异模式	渲染模式
HTML 与 XHTML 区别？	XHTML 基于 XML，更严格：标签必须闭合、大小写敏感、属性必须有值	标准差异
HTML5 新增哪些表单类型？	`email`、`url`、`number`、`date`、`color`、`range`	表单优化
表单校验有哪些方式？	HTML5 原生校验（`required`、`pattern`）；JS 自定义校验	表单交互
`<form>` 中 `method="get"` 与 `post` 区别？	GET 拼接 URL，不安全，适合查询；POST 请求体传输，安全，适合提交	HTTP 基础
`<label>` 标签的作用？	点击 label 可聚焦对应输入框，提升可用性与无障碍	表单可用性
HTML5 多媒体标签有哪些？	`<audio>`、`<video>`，支持 `controls`、`autoplay`、`loop`	多媒体支持
`<canvas>` 与 `<svg>` 的区别？	canvas 像素绘制，适合动态图形；svg 矢量绘制，适合静态图形	图形技术
`<iframe>` 的优缺点？	优点：嵌套第三方内容，隔离作用域；缺点：SEO 差、加载慢、安全问题多	框架应用
HTML 页面性能优化手段？	减少 DOM 层级；图片懒加载；CDN 缓存；资源压缩；避免 iframe	性能优化
图片优化有哪些方式？	使用合适格式（webp/svg）；懒加载；雪碧图；响应式图片 `srcset`	图片优化
JS 加载方式有哪些？	默认阻塞；`defer`（延迟执行，顺序保证）；`async`（异步执行，顺序不保证）	脚本加载
浏览器渲染流程？	解析 HTML→DOM 树；解析 CSS→CSSOM；合并 Render Tree；布局；绘制；合成	渲染机制
回流与重绘的区别？	回流：布局变化，性能开销大；重绘：样式变化，无布局变更	浏览器性能
如何减少回流重绘？	使用 `class` 批量修改样式；避免频繁操作 DOM；使用 `documentFragment`	性能优化
浏览器解析 HTML 时遇到 JS 会怎样？	默认阻塞解析；加 `async/defer` 才能避免阻塞	渲染阻塞
DOMContentLoaded 与 load 事件区别？	DOMContentLoaded：DOM 解析完成触发；load：所有资源（含图片/脚本）加载完成触发	生命周期
HTML5 有哪些新特性？	新语义标签、表单增强、多媒体、Canvas/SVG、本地存储、WebSocket、Web Worker	HTML5 核心
localStorage、sessionStorage、cookie 区别？	localStorage：持久存储；sessionStorage：会话存储；cookie：4KB，随请求发送	存储机制
IndexedDB 与 WebSQL 区别？	IndexedDB：对象存储，异步 API，推荐使用；WebSQL 已废弃	本地数据库
HTML5 如何实现离线应用？	Service Worker + Cache API（替代已废弃 AppCache）	PWA 技术
Web Worker 的作用？	在后台线程执行 JS，避免阻塞主线程	多线程
Shared Worker 与 Web Worker 区别？	Web Worker 独立，不能跨标签共享；Shared Worker 可跨多个页面共享	多线程
XSS 攻击是什么？如何防御？	注入恶意脚本；防御：转义输出、CSP、安全模板引擎	安全
CSRF 攻击是什么？如何防御？	伪造请求利用用户登录态；防御：CSRF Token、SameSite Cookie	安全
什么是 CSP？	Content Security Policy：限制资源加载来源，降低 XSS 风险	安全策略
什么是同源策略？	协议、域名、端口相同才允许访问；限制跨域操作	浏览器安全
如何解决跨域问题？	CORS；JSONP；postMessage；代理转发	跨域通信
HTML 跨页面通信方式？	localStorage + storage 事件；postMessage；Service Worker 消息机制	通信机制
SSR 与 CSR 的区别？	SSR：服务端渲染，首屏快，SEO 友好；CSR：客户端渲染，交互流畅，但首屏慢	渲染模式
SPA 应用如何做 SEO？	预渲染（Prerender）、SSR（Next.js/Nuxt.js）、静态导出	前端工程化
什么是渐进式增强与优雅降级？	渐进增强：保证基础功能，逐步增强体验；优雅降级：优先高级功能，再兼容旧环境	渐进增强
Web Components 包含哪些技术？	Custom Elements、Shadow DOM、HTML Template、ES Modules	组件化
Shadow DOM 有什么作用？	提供样式与结构的封装，避免污染全局	样式隔离
如何实现自定义 HTML 标签？	使用 Web Components + `customElements.define('my-tag', class extends HTMLElement {...})`	组件开发
`<template>` 标签的作用？	定义一段不会被渲染的 HTML，可用于组件模板	模板机制
HTML 如何支持国际化（i18n）？	使用 `lang` 属性；配合 `<meta charset="utf-8">`；可结合 i18n 库	国际化
如何提升可访问性（A11y）？	使用语义化标签；图片 `alt`；`aria-*` 属性；保证键盘可操作性	Accessibility
`<noscript>` 标签的作用？	提供在浏览器禁用 JS 时的替代内容	兼容性
`<progress>` 与 `<meter>` 区别？	progress 表示进度（如下载进度）；meter 表示已知范围内的值（如评分）	表单增强
`<picture>` 与 `srcset` 的作用？	响应式图片加载，根据分辨率/媒体查询加载不同资源	响应式设计
prefetch、preload、dns-prefetch 区别？	preload：强制加载关键资源；prefetch：提前加载可能用到的资源；dns-prefetch：提前解析域名	性能优化
HTML 页面中如何防止恶意拖拽？	使用 `draggable="false"` 或阻止拖拽事件	安全与交互
浏览器如何解析 `<script type="module">`？	默认异步加载，作用域隔离，支持 `import/export`	ES Modules
HTML5 WebSocket 的作用？	建立全双工通信，适合实时应用（聊天、股票推送）	实时通信