HTML 面试全攻略（htmlcss面试题库）
HTML 是前端开发的基石，是每个开发者必须掌握的核心技能。本文整理了高频 HTML 面试题，并系统梳理了相关知识点，帮助你在面试中脱颖而出，同时为实际开发工作打下坚实基础。
一、HTML 基础概念
（一）DOCTYPE 声明
<!DOCTYPE> 声明位于文档最前面，告诉浏览器以何种文档标准解析页面。在 HTML5 中，该声明被简化为：
作用：确保浏览器以标准模式渲染页面，避免进入混杂模式导致样式和布局异常。
（二）语义化理解
语义化 HTML 是指使用恰当的标签表达内容的含义。例如：
优势：
- SEO 友好：搜索引擎更容易理解页面内容。
- 可访问性增强：辅助技术（如屏幕阅读器）能更好地解析页面。
- 代码可读性提升：便于开发和维护。
二、元素分类与特性
（一）替换元素 vs 非替换元素
类型 | 特点 | 示例 |
替换元素 | 内容由外部资源决定 | <img, <video> |
非替换元素 | 内容由 CSS 和 HTML 直接控制 | <div>, <span> |
解释：
- 替换元素：如 <img> 和 <video>，其内容由外部资源决定，CSS 只能控制其位置和尺寸。
- 非替换元素：如 <div> 和 <span>，其内容完全由 HTML 和 CSS 控制。
（二）行内与块级元素
转换方法：
注意事项：
- 行内元素默认不换行，块级元素默认独占一行。
- 通过 display属性可以灵活转换元素的显示类型。
三、HTML5 新特性
（一）重要新增特性
- 语义化标签：<header>、<footer>、<article> 等，提升页面结构化和可读性。
- 多媒体支持：<audio> 和 <video>，支持原生音频和视频播放。
- 表单增强：
- 新增输入类型（如 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 核心知识点，不仅能帮助你在面试中脱颖而出，更能为实际开发工作打下坚实基础。