HTML 是前端开发的基石，是每个开发者必须掌握的核心技能。本文整理了高频 HTML 面试题，并系统梳理了相关知识点，帮助你在面试中脱颖而出，同时为实际开发工作打下坚实基础。

一、HTML 基础概念

（一）DOCTYPE 声明

<!DOCTYPE> 声明位于文档最前面，告诉浏览器以何种文档标准解析页面。在 HTML5 中，该声明被简化为：

作用：确保浏览器以标准模式渲染页面，避免进入混杂模式导致样式和布局异常。

（二）语义化理解

语义化 HTML 是指使用恰当的标签表达内容的含义。例如：

优势：

1. SEO 友好：搜索引擎更容易理解页面内容。
2. 可访问性增强：辅助技术（如屏幕阅读器）能更好地解析页面。
3. 代码可读性提升：便于开发和维护。

二、元素分类与特性

（一）替换元素 vs 非替换元素

解释：

• 替换元素：如 <img> 和 <video>，其内容由外部资源决定，CSS 只能控制其位置和尺寸。
• 非替换元素：如 <div> 和 <span>，其内容完全由 HTML 和 CSS 控制。

（二）行内与块级元素

转换方法：

注意事项：

• 行内元素默认不换行，块级元素默认独占一行。
• 通过 display属性可以灵活转换元素的显示类型。

三、HTML5 新特性

（一）重要新增特性

1. 语义化标签：<header>、<footer>、<article> 等，提升页面结构化和可读性。
2. 多媒体支持：<audio> 和 <video>，支持原生音频和视频播放。
3. 表单增强：

• 新增输入类型（如 email、date）。
• 提供表单验证（如 required、pattern）。

4. Canvas/WebGL 绘图：支持动态图形绘制。

5. 本地存储：localStorage和 sessionStorage，提供更灵活的存储方案。

（二）兼容性处理

使用 html5shiv 解决 IE9 以下版本兼容问题：

原理：html5shiv 通过 JavaScript 动态创建 HTML5 元素，使其在旧版浏览器中也能正常显示。

四、实用技巧与优化

（一）图片优化方案

优化点：

• alt`属性：提供图片描述，提升 SEO 和可访问性。
• loading="lazy"：延迟加载图片，提升页面加载速度。
• width 和 height：提前指定图片尺寸，避免布局抖动。

（二）页面可见性 API

应用场景：

• 暂停自动播放的视频或轮播图，节省带宽和电量。
• 减少服务器负担，避免在页面隐藏时进行不必要的数据请求。
• 提升用户体验，确保用户返回页面时看到最新的内容。

五、高频面试题精讲

（一）src与 href 区别

• src：嵌入资源，会阻塞解析（如 <script src）。
• href：建立关联，并行加载（如 <link href>）。

src 用于嵌入资源，如 <img> 和 <script>，浏览器会立即加载并解析这些资源，可能会阻塞页面渲染。而 href用于建立关联，如 <link>和 <a>，浏览器会并行加载这些资源，不会阻塞页面解析。

（二）iframe 优缺点

优点：

• 隔离样式和脚本，避免冲突。
• 并行下载子页面，提升加载速度。

缺点：

• SEO 不友好，搜索引擎难以抓取 `iframe` 内容。
• 性能开销大，每个 `iframe` 都是一个独立的文档环境。

（三）表单文件上传

注意事项：

• 必须设置 enctype="multipart/form-data"，否则文件无法上传。
• 使用 FormData可以通过 JavaScript 动态构建表单数据并发送。

六、进阶知识点

（一）微格式应用

作用：通过特定的类名（如h-card、p-name）为内容添加语义注解，便于机器解析和数据交换。

应用场景：

• 增强个人或组织的联系信息。
• 提升 SEO 和可访问性。

（二）严格模式与混杂模式

• 严格模式：标准渲染（有 DOCTYPE）。
• 混杂模式：向后兼容（无 DOCTYPE 或错误 DOCTYPE）。

DOCTYPE 声明决定了浏览器的渲染模式。标准模式（严格模式）严格按照 W3C 标准解析页面，而混杂模式则兼容旧版浏览器的行为。建议始终使用标准模式，以确保页面的兼容性和一致性。

七、实战问题解析

（一）图片点击热区

解释：

<map> 和 <area>元素用于定义图片的可点击区域，适用于创建复杂的交互式图片。

（二）解决图片下方空隙

原理：

图片默认是行内元素，会受到行内布局的影响，导致下方出现空隙。通过设置 display: block`或调整 vertical-align，可以消除这种空隙。

结语

掌握这些 HTML 核心知识点，不仅能帮助你在面试中脱颖而出，更能为实际开发工作打下坚实基础。