HTML5 面试题及答案（实战版）.docxVIP

HTML5面试题及答案（实战版）

一、基础核心题（面试必问）

1.说说HTML5相比HTML4的核心改进？

答案：

最核心的是「语义化」和「原生能力增强」。首先语义化标签（headernavmainarticle等）替代了大量无意义的div，让页面结构更清晰，搜索引擎和屏幕阅读器能更好理解内容；其次新增了原生表单控件（inputtype=dateinputtype=range等），减少了JS插件依赖；还有原生支持音频视频（audiovideo），不用再依赖Flash；另外新增了Canvas、WebStorage、WebWorker等API，让前端能实现更复杂的功能（比如离线存储、多线程处理）。

2.HTML5的语义化标签有哪些？实际开发中怎么用？

答案：

常用语义标签：header（页面/区块头部，放标题、导航）、nav（导航栏，只包导航链接）、main（页面主要内容，唯一）、article（独立完整内容，比如文章、评论）、section（逻辑区块，包裹相关内容组）、aside（侧边栏、附属信息）、footer（页脚，版权、联系方式）。

实际开发中，比如写博客页面：header放网站标题+顶部导航，main里用article包单篇博客内容，aside放分类/热门文章，footer放版权信息。核心原则是「让标签含义匹配内容用途」，而不是为了用而用（比如不要把nav用来包普通文本）。

3.HTML5的form表单新增了哪些特性？

答案：

一是新增输入类型，比如date（日期选择器）、time（时间选择器）、email（邮箱验证）、tel（电话输入）、number（数字输入）、range（滑块）、search（搜索框），这些类型自带基础验证和原生UI，不用自己写JS；二是新增表单属性，比如required（必填）、placeholder（提示文本）、autofocus（自动聚焦）、pattern（正则验证）、min/max（数值范围）；三是新增datalist标签，能给输入框加下拉推荐列表（类似autocomplete）；还有表单验证API，比如checkValidity()方法可以手动触发验证。

二、进阶应用题（区分能力）

1.HTML5的本地存储有哪些？它们的区别是什么？实际怎么选？

答案：

主要有3种：localStorage、sessionStorage、indexedDB。

区别核心在「存储大小」「生命周期」「作用域」：

localStorage：存储大小约5MB，永久存储（除非手动删除或清缓存），同源页面共享（同一协议、域名、端口）；

sessionStorage：存储大小约5MB，会话级存储（页面关闭/浏览器关闭就消失），同源且同窗口/标签页共享（不同标签页即使同源也不互通）；

indexedDB：存储大小无明确限制（看浏览器和硬盘），永久存储，同源共享，支持结构化数据（键值对、对象、数组）和事务操作，适合存储大量数据。

实际选择：简单数据（比如用户偏好设置、登录状态标记）用localStorage；临时数据（比如表单临时输入、页面会话数据）用sessionStorage；大量结构化数据（比如离线应用的缓存数据、本地日志）用indexedDB。

注意：它们都受同源策略限制，不能跨域访问，且存储的是字符串类型（复杂数据要转JSON）。

2.Canvas和SVG的区别？分别适合什么场景？

答案：

核心区别是「渲染方式」：Canvas是「像素级渲染」（位图），SVG是「矢量图形渲染」。

具体差异：

Canvas：依赖JS绘制，画的是像素点，放大/缩小会模糊失真；适合绘制复杂动画、游戏画面、数据可视化（比如大量数据的折线图），因为像素操作效率高；但一旦绘制完成，修改需要重绘整个区域。

SVG：用XML标签定义图形（比如circlerect），矢量图放大不失真；适合绘制图标、Logo、流程图、简单动画（比如hover效果、路径动画），因为代码可维护性强，能直接操作DOM修改属性；但如果图形复杂（比如几千个节点），性能会比Canvas差。

场景选择：做图标、静态图形、简单交互的图形用SVG；做游戏、复杂动画、大数据可视化用Canvas。

3.HTML5的离线存储（ApplicationCache）是什么？怎么用？现在还推荐吗？

答案：

ApplicationCache（简称AppCache）是HTML5提供的离线缓存机制，能让网页在离线时（无网络）访问已缓存的资源（HTML、CSS、JS、图片等）。

使用方法：需要创建一个.appcache后缀的清单文件