⚡ HTML面试综述：为什么基础如此重要？

在当前的前端开发招聘市场中，尽管Vue、React等框架占据了主流视野，但HTML面试依然是考察候选人基础扎实程度的第一道关卡。面试官往往通过HTML相关的细节问题，来判断求职者是否具备编写高质量、可访问性良好且易于维护的代码的能力。一个优秀的前端工程师必须深刻理解HTML的本质，而不仅仅是记住几个标签。

本次整理的HTML面试指南，涵盖了从基础标签语义到高级性能优化的全方位内容，旨在帮助求职者构建完整的知识体系，应对各种可能的面试场景。

⚙️ HTML核心考点深度解析

语义化标签 (Semantic HTML)

语义化是HTML面试中的高频考点。它指的是使用具有明确含义的标签来构建页面结构，而非滥用div。

  • ⚡ header：定义文档或节的页眉。
  • ⚡ nav：定义导航链接的部分。
  • ⚡ article：定义独立的完整内容块。
  • ⚡ aside：定义页面主内容之外的辅助内容。
  • ⚡ footer：定义文档或节的页脚。

面试加分点：语义化有助于SEO优化，提升屏幕阅读器对残障人士的友好度，并提高代码的可读性和可维护性。

DOCTYPE与字符编码

每个HTML5文档的开头必须是：<!DOCTYPE html>。它告诉浏览器使用标准的HTML5模式进行渲染，避免怪异模式（Quirks Mode）导致的布局兼容性问题。

同时，必须设置字符编码：<meta charset="UTF-8">。这确保了中文字符、特殊符号等能够正确显示，避免乱码问题。在HTML面试中，这也是考察候选人对页面初始化重视程度的细节题。

块级元素与行内元素

理解元素盒模型是前端基础中的基础。

  • ⚡ 块级元素 (Block)：如div, p, h1-h6, ul, ol等。默认独占一行，可设置宽高。
  • ⚡ 行内元素 (Inline)：如span, a, strong, em等。默认不独占一行，宽高由内容决定，设置width/height无效。
  • ⚡ 行内块元素 (Inline-block)：如img, input。既在一行内显示，又可设置宽高。

面试官常问：如何修改行内元素的宽高？答案是通过CSS设置 display: inline-block 或 display: block。

🚀 HTML5新特性与多媒体支持

HTML5是前端技术的重大飞跃，引入了许多原生API，减少了对Flash和JavaScript库的依赖。以下是面试中必须掌握的HTML5核心特性：

语义化增强
多媒体与图形
表单增强
本地存储

新增语义化标签

除了之前提到的header、footer等，HTML5还引入了更多具有明确含义的标签：

  • ⚡ section：定义文档中的一个章节或部分。
  • ⚡ figure & figcaption：用于包裹图像、图表、代码片段及其标题。
  • ⚡ details & summary：创建可折叠的详细信息组件。
  • ⚡ mark：高亮文本。

这些标签不仅提升了代码的可读性，还极大地改善了Web应用的无障碍访问能力（Accessibility）。

多媒体与图形

HTML5原生支持音视频播放和图形绘制，无需第三方插件。

<video controls width="640" height="360"> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签。 </video> <canvas id="myCanvas" width="200" height="100"></canvas>

Canvas 元素用于通过JavaScript绘制2D图形，常用于游戏开发、数据可视化等场景。它与SVG不同，Canvas是基于像素的位图，而SVG是基于矢量的。

表单输入类型增强

HTML5为input元素增加了多种新的type属性，极大地简化了前端验证逻辑：

类型 说明 示例
email 自动验证邮箱格式 <input type="email">
url 自动验证URL格式 <input type="url">
number 只允许输入数字 <input type="number" min="0" max="100">
date 日期选择器 <input type="date">
range 滑块控件 <input type="range" min="0" max="10" step="1">
search 搜索框 <input type="search">

此外，placeholder、required、pattern等属性也提供了更丰富的用户交互体验。

本地存储 (LocalStorage & SessionStorage)

相比传统的Cookie，HTML5提供的Web Storage API具有更大的存储空间和更高的性能。

  • ⚡ localStorage：数据永久存储，除非手动删除，否则关闭浏览器后依然存在。容量通常为5MB。
  • ⚡ sessionStorage：数据仅在当前会话期间有效，关闭标签页后数据清除。
// 存储数据 localStorage.setItem('username', 'JohnDoe'); // 读取数据 let user = localStorage.getItem('username'); // 删除数据 localStorage.removeItem('username'); // 清空所有数据 localStorage.clear();

注意：Web Storage只能存储字符串，存储对象时需要先使用JSON.stringify()序列化，读取时使用JSON.parse()反序列化。

📈 HTML页面性能优化策略

在HTML面试中，性能优化是区分初级与高级前端工程师的关键指标。以下是从HTML层面可以实施的优化策略：

① 减少HTTP请求

合并CSS和JavaScript文件，使用CSS Sprites合并小图标，使用Base64编码小图片。减少页面加载时的网络往返次数，从而加快页面渲染速度。

② 利用缓存

合理设置HTTP头部的Cache-Control和Expires，确保静态资源（如CSS、JS、图片）能够被浏览器缓存，避免重复下载。对于HTML页面，通常设置较短的缓存时间或no-cache。

③ 压缩资源

使用Gzip或Brotli压缩HTML、CSS和JavaScript文件，可以显著减小传输体积，提升加载速度。

④ 异步加载脚本

使用 <script async> 或 <script defer> 属性加载JavaScript文件，避免脚本阻塞HTML解析。对于非关键脚本，可以使用动态创建script元素的方式延迟加载。

❓ 网友最关心的10个HTML面试问题

Q1: div和span有什么区别？

div是块级元素，默认独占一行，用于布局结构；span是行内元素，不独占一行，用于包裹行内文本或小片段，通常与CSS配合使用进行样式修饰。

Q2: HTML5的离线存储如何实现？

HTML5提供了Application Cache API（已废弃，不推荐使用）和Service Worker API。现代开发中，推荐使用Service Worker实现更强大的离线缓存策略。

Q3: 什么是响应式设计？如何在HTML中实现？

响应式设计使网页能适应不同屏幕尺寸。主要通过 ```html 标签设置视口，结合CSS Media Queries媒体查询，根据不同设备宽度应用不同的样式规则。

Q4: img标签的alt属性有什么作用？

alt属性提供图片的替代文本。当图片无法加载时显示文字，同时对于屏幕阅读器等辅助技术，alt属性描述了图片内容，对SEO和无障碍访问至关重要。

Q5: 如何优化页面加载速度？

除了前述的性能优化策略，还包括：延迟加载图片（lazy loading），使用WebP等现代图片格式，减少DOM节点数量，避免重排重绘等。

Q6: script标签中defer和async的区别？

async：异步下载，下载完成后立即执行，执行顺序不确定，适用于不依赖其他脚本的独立脚本（如统计代码）。defer：异步下载，按顺序执行，等待HTML解析完成后执行，适用于依赖DOM或相互依赖的脚本。

Q7: 什么是Web Accessibility (无障碍访问)？

确保残障人士（如视障、听障）也能使用Web应用。通过语义化标签、alt属性、aria属性、键盘导航支持等手段实现。

Q8: data- 属性的作用是什么？

自定义数据属性，允许在标准HTML元素上存储私有数据。例如 <div data-user-id="123">，可通过JavaScript的dataset属性访问，常用于存储动态数据。

Q9: 如何防止XSS攻击？

对用户输入进行转义（如将<转为<），使用Content Security Policy (CSP)头，避免使用innerHTML，使用HTTPS等。

Q10: HTML5有哪些新的API？

包括Geolocation（地理定位）、Web Workers（多线程）、WebSocket（实时通信）、Drag and Drop（拖放）、History API（历史管理）等。