在前端面试中，HTML作为三大核心技术之一，是面试官考察的基础重点。本文整理了高频出现的HTML面试题及专业解析，帮助你查漏补缺，从容应对面试。
🎯 1. DOCTYPE的作用是什么？
DOCTYPE是文档类型声明，它的核心作用是告诉浏览器当前HTML文档使用的是哪个版本的HTML规范，让浏览器能够按照对应的标准来解析页面内容，避免出现怪异模式（Quirks Mode）导致的页面渲染异常。
比如HTML5的声明为<!DOCTYPE html>，它非常简洁，不需要指定具体的DTD（文档类型定义），因为HTML5没有基于SGML（标准通用标记语言）。
🎯 2. HTML5新增了哪些语义化标签？为什么要使用语义化标签？
新增的语义化标签
HTML5新增了一批具有明确语义的标签，常见的有：
<header>：页面或区块的头部，通常包含标题、导航栏等<nav>：导航链接区域<main>：页面的主要内容区域，一个页面只能有一个<main><article>：独立的内容块，比如文章、帖子、评论等<section>：页面中的一个主题区块，通常包含标题和相关内容<aside>：侧边栏内容，比如相关推荐、作者信息等<footer>：页面或区块的底部，通常包含版权、联系方式等
使用语义化标签的优势
- 提升可访问性：屏幕阅读器等辅助设备能更好地理解页面结构，帮助残障人士浏览内容
- 利于SEO：搜索引擎可以更清晰地识别页面内容的逻辑和重点，提升页面的搜索排名
- 增强代码可读性：开发者能通过标签快速理解页面结构，便于团队协作和后期维护
- 减少CSS依赖：语义化标签本身带有一定的默认样式和结构含义，能减少额外的CSS代码
🎯 3. src和href的区别是什么？
- src（source）：表示资源的引用，它会将指定的资源嵌入到当前文档中，浏览器在解析到src属性时，会暂停当前文档的解析，先加载并执行该资源（比如JS脚本、图片等），资源加载完成后才会继续解析文档。常见于
<script>、<img>、<iframe>标签。 示例：<script src="index.js"></script>、<img src="photo.jpg"> - href（hypertext reference）：表示超文本引用，它用于建立当前文档与目标资源之间的链接关系，浏览器在解析到href属性时，不会暂停当前文档的解析，而是并行下载目标资源。常见于
<a>、<link>标签。 示例：<a href="https://www.csdn.net" rel="external nofollow" >CSDN</a>、<link href="style.css" rel="external nofollow" rel="stylesheet">
🎯 4. 什么是HTML的盒模型？有哪几种？
HTML的盒模型是浏览器渲染页面元素时的一种布局模型，每个元素都会被渲染成一个矩形的盒子，包含四个部分：内容区（content）、内边距（padding）、边框（border）、外边距（margin）。
常见的盒模型有两种：
- 标准盒模型（W3C盒模型）：元素的总宽度 = content宽度 + padding + border + margin；元素的总高度 = content高度 + padding + border + margin。在CSS中可以通过
box-sizing: content-box设置（浏览器默认值）。 - 怪异盒模型（IE盒模型）：元素的总宽度 = content宽度（包含padding和border） + margin；元素的总高度 = content高度（包含padding和border） + margin。在CSS中可以通过
box-sizing: border-box设置，这种盒模型更符合直观的布局思维，常用于响应式设计。
🎯 5. 如何理解HTML的语义化？
HTML语义化是指使用具有明确含义的HTML标签来构建页面结构，让标签本身的含义和它所包裹的内容相匹配，而不是仅仅使用<div>、<span>等无语义标签来布局。
比如，用<h1>-<h6>来表示标题层级，用<p>来表示段落，用<ul>、<ol>来表示列表，而不是全部用<div>来代替。
语义化的核心是让页面的结构更清晰，不仅方便开发者阅读和维护代码，也让浏览器和搜索引擎更好地理解页面内容，提升页面的可访问性和SEO效果。
🎯 6. HTML5新增了哪些表单控件和属性？
新增的表单控件
<input type="email">：专门用于输入邮箱地址，提交时浏览器会自动验证格式<input type="url">：用于输入网址，浏览器会验证格式<input type="number">：用于输入数字，支持设置最小值、最大值和步长<input type="date">、<input type="time">、<input type="datetime-local">：日期和时间选择控件<input type="range">：滑块控件，用于选择一定范围内的数值<input type="search">：搜索输入框，部分浏览器会自带清除按钮<datalist>：为输入框提供下拉选项列表，通过list属性与<input>关联
新增的表单属性
required：标记表单控件为必填项，提交时若未填写会提示错误placeholder：为输入框提供提示文本，聚焦时会消失autocomplete：设置是否开启自动完成功能，可选值为on或offpattern：通过正则表达式验证输入内容的格式min、max、step：为数字、日期等类型的输入框设置范围和步长multiple：允许在文件上传或邮箱输入框中输入多个值
🎯 7. script标签中defer和async的区别是什么？
<script>标签中的defer和async属性都是用于异步加载JS脚本，避免脚本加载阻塞页面解析，它们的区别主要在于执行时机：
- async：脚本会在下载完成后立即执行，执行顺序不确定，可能会打乱脚本之间的依赖关系，适合独立的、不依赖其他脚本的文件。
- defer：脚本会在页面解析完成后，
DOMContentLoaded事件触发前执行，执行顺序与脚本在页面中的顺序一致，适合有依赖关系的脚本文件。
如果不设置这两个属性，浏览器会在解析到<script>标签时，暂停页面解析，先下载并执行脚本，执行完成后再继续解析页面。
🎯 8. 什么是渐进式增强和优雅降级？
- 渐进式增强：先构建页面的核心功能，确保在所有浏览器（包括低版本浏览器）都能正常使用核心内容和功能，然后再为高版本浏览器添加额外的样式、交互和功能，提升用户体验。比如先使用基础的HTML结构和CSS样式，再通过JS和CSS3为现代浏览器添加动画、响应式布局等特性。
- 优雅降级：先为高版本浏览器构建完整的功能和体验，然后再针对低版本浏览器进行兼容性处理，确保核心功能能正常使用，放弃一些非必要的特性。比如先实现使用CSS3动画的页面，再为不支持CSS3的浏览器添加静态样式作为降级方案。
这两种都是处理浏览器兼容性的策略，渐进式增强更注重核心功能的可用性，优雅降级更注重现代浏览器的用户体验。
🎯 9. 如何优化HTML页面的加载性能？
- 减少HTTP请求：合并CSS和JS文件，使用CSS Sprites合并小图标，减少页面中的图片、脚本等资源的请求次数
- 压缩HTML代码：去除代码中的空格、注释、换行符等冗余内容，缩小文件体积
- 使用懒加载：对图片、视频等非首屏资源使用懒加载，只有当元素进入视口时才加载
- 优化图片：选择合适的图片格式（如WebP格式比JPEG、PNG更小），压缩图片体积，使用响应式图片（
srcset属性） - 合理使用缓存：通过HTTP缓存策略（如Cache-Control、ETag等）让浏览器缓存静态资源，减少重复请求
- 避免阻塞渲染：将CSS文件放在
<head>标签中，让浏览器尽早开始渲染页面；将JS文件放在<body>底部，或使用defer、async属性异步加载脚本 - 使用CDN加速：将静态资源托管到CDN（内容分发网络），让用户从距离最近的服务器获取资源，提升加载速度
🎯 10. 什么是Canvas和SVG？它们的区别是什么？
Canvas
Canvas是HTML5新增的绘图元素，它提供了一个基于像素的绘图区域，通过JavaScript来绘制图形、动画等。Canvas的绘图是基于像素的，绘制完成后，浏览器不会记录绘制的图形对象，只能通过重绘来修改内容，适合绘制复杂的动画、游戏画面、数据可视化图表等。
SVG
SVG是可缩放矢量图形，它使用XML格式来定义图形，图形是由点、线、面等矢量元素组成的，不会因为缩放而失真。SVG的图形是可交互的，每个元素都是DOM节点，可以通过CSS和JavaScript来操作，适合绘制图标、logo、地图等需要保持清晰度的图形。
核心区别
- 渲染方式：Canvas是基于像素的位图渲染，SVG是基于矢量的图形渲染
- 可操作性：Canvas绘制的内容不能直接作为DOM节点操作，SVG的每个元素都是DOM节点，可直接操作
- 性能：Canvas在绘制大量复杂图形时性能更高，SVG在元素过多时性能会下降
- 缩放性：Canvas缩放会失真，SVG可无损缩放
📝 写在最后
HTML是前端开发的基础，掌握好这些高频面试题，不仅能帮助你通过面试，更能为后续的前端开发工作打下坚实的基础。面试前建议结合实际项目，深入理解每个知识点的应用场景，做到知其然更知其所以然。
祝大家面试顺利，拿到心仪的offer！💪
