HTML 面试全攻略HTML 是前端开发的基石，是每个开发者必须掌握的核心技能。本文整理了高频 HTML 面试题，并系统

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

一、HTML 基础概念

（一）DOCTYPE 声明

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

<!DOCTYPE html>

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

（二）语义化理解

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

<!-- 非语义化 -->
<div class="header"></div>

<!-- 语义化 -->
<header></header>

优势：

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

二、元素分类与特性

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

类型	特点	示例
替换元素	内容由外部资源决定	`<img>`, `<video>`
非替换元素	内容由 CSS 和 HTML 直接控制	`<div>`, `<span>`

解释：

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

（二）行内与块级元素

// 常见行内元素
const inlineElements = ['span', 'a', 'img', 'strong'];

// 常见块级元素 
const blockElements = ['div', 'p', 'h1-h6', 'ul'];

转换方法：

.inline-to-block {
  display: block;
}
.block-to-inline {
  display: inline;
}

注意事项：

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

三、HTML5 新特性

（一）重要新增特性

语义化标签：<header>、<footer>、<article> 等，提升页面结构化和可读性。
多媒体支持：<audio> 和 <video>，支持原生音频和视频播放。
表单增强：
```
<input type="email" required placeholder="请输入邮箱">
```
- 新增输入类型（如 email、date）。
- 提供表单验证（如 required、pattern）。
Canvas/WebGL 绘图：支持动态图形绘制。
本地存储：localStorage 和 sessionStorage，提供更灵活的存储方案。

（二）兼容性处理

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

<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

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

四、实用技巧与优化

（一）图片优化方案

<img src="image.jpg" alt="描述文本" 
     loading="lazy" 
     width="300" height="200">

优化点：

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

（二）页面可见性 API

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('页面隐藏，暂停资源加载');
    // 暂停视频/动画
  } else {
    console.log('页面可见，恢复资源加载');
    // 恢复播放
  }
});

应用场景：

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

五、高频面试题精讲

（一）`src` 与 `href` 区别

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

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

（二）`iframe` 优缺点

优点：

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

缺点：

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

（三）表单文件上传

<form enctype="multipart/form-data">
  <input type="file" name="file">
</form>

注意事项：

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

六、进阶知识点

（一）微格式应用

<div class="h-card">
  <span class="p-name">张三</span>
  <a class="u-email" href="mailto:zhang@example.com">联系我</a>
</div>

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

应用场景：

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

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

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

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

七、实战问题解析

（一）图片点击热区

<img src="map.jpg" usemap="#image-map">

<map name="image-map">
  <area shape="rect" coords="0,0,100,100" href="#">
</map>

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

（二）解决图片下方空隙

img {
  vertical-align: middle;
  display: block; /* 或 */
}

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

结语

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

HTML 面试全攻略