HTML面试题必备清单，再也不怕丢失！

每次面试都得看一遍面试题，每次准备的都放在了 Word 上，但是都误删丢失了，所以记录在这个地方吧。html面试题问题：什么是语义化标签？为什么要使用语义化标签？答案：语义化标签是指使用具有明确含义的 HTML 标签来描述页面内容，如header、nav、main、article、section、footer等。关键知识点：语义化标签能提升代码可读性和可维护性，有利于 SEO（搜索引擎能更准确理解页面结构），同时增强无障碍访问能力，方便屏幕阅读器解析。问题：HTML5 新增了哪些常用标签？答案：HTML5 新增了结构标签（header、nav、main、article、section、aside、footer）、媒体标签（audio、video、source）、图形标签（canvas、svg）以及表单增强标签（datalist、output、progress、meter）等。关键知识点：HTML5 还引入了新的语义化标签、多媒体支持、本地存储（localStorage、sessionStorage）、WebSocket、Canvas 绘图等能力，并移除了部分纯表现层标签如font、center。问题：HTML5 中表单新增了哪些输入类型？答案：HTML5 新增了email、url、number、range、date、time、datetime-local、month、week、color、search、tel等输入类型。关键知识点：这些类型在支持它们的浏览器中会自动提供输入校验和对应的键盘类型，减少前端 JS 校验工作量，但服务端仍需做最终校验。问题：什么是 SEO？HTML 中哪些因素影响 SEO？答案：SEO（Search Engine Optimization）即搜索引擎优化，指通过技术手段提升网站在搜索引擎结果中的排名。影响 SEO 的 HTML 因素包括：标题标签title、元描述meta name=description、语义化标签结构、img的 alt 属性、URL 结构、页面加载速度等。关键知识点：合理使用语义化标签和层级清晰的标题结构（h1-h6）有助于搜索引擎理解页面主题；alt 属性不仅利于 SEO，也提升无障碍体验。问题：meta标签有哪些常见用途？答案：meta 标签用于定义页面的元信息，常见用途包括：设置字符集（charset）、视口（viewport）、页面描述（description）、关键词（keywords）、作者（author）以及 SEO 相关配置。关键知识点：viewport元标签对移动端适配至关重要；description会显示在搜索结果摘要中，影响点击率。问题：img标签的 alt 属性有什么作用？答案：alt 属性为图片提供替代文本，当图片无法加载时显示该文本，同时供屏幕阅读器朗读，帮助视障用户理解图片内容。关键知识点：alt 文本应简洁描述图片内容或功能；纯装饰性图片可设置空 alt（alt=）以被辅助技术忽略；alt 也是 SEO 的重要信号。问题：什么是本地存储？localStorage 和 sessionStorage 有什么区别？答案：本地存储是 HTML5 提供的在浏览器端持久化数据的机制。localStorage 的数据长期保存，关闭浏览器后依然存在；sessionStorage 的数据在页面会话结束时被清除。关键知识点：两者都以键值对形式存储字符串数据，容量约 5MB；存储敏感信息需谨慎，因为数据以明文保存在浏览器中。问题：iframe标签的作用是什么？使用它有哪些注意事项？答案：iframe用于在页面中嵌入另一个 HTML 文档，常用于嵌入第三方内容如地图、视频、广告等。关键知识点：使用 iframe 需注意：设置合适的宽高；通过 sandbox 属性限制其权限；避免嵌套过多影响性能；注意跨域安全策略（CSP、X-Frame-Options）。问题：什么是 DOCTYPE？它的作用是什么？答案：DOCTYPE（文档类型声明）位于 HTML 文档最顶部，用于告知浏览器使用哪种 HTML 标准来解析页面。HTML5 的声明为!DOCTYPE html。关键知识点：缺少 DOCTYPE 会导致浏览器进入怪异模式（Quirks Mode），盒模型和布局表现可能与标准模式不一致，因此必须声明。