HTML5面试题及答案.docx

HTML5面试题及答案

一、基础概念题

说说你对HTML5的理解，它和之前的HTML版本有什么核心区别？

答案：HTML5不只是HTML的新版本，更像一套“网页开发标准体系”，包含了新的语义标签、表单元素、多媒体API、本地存储等功能。核心区别有三点：一是新增语义化标签（比如header、nav），让页面结构更清晰，不再全靠div嵌套；二是原生支持多媒体（audio/video），不用再依赖Flash；三是提供了本地存储、Canvas等API，能实现更丰富的交互（比如离线应用、绘图），而且设计目标更侧重跨平台，适配移动设备更友好。

HTML5的DOCTYPE声明和之前版本有什么不同？为什么必须写DOCTYPE？

答案：HTML5的DOCTYPE特别简单，就一句!DOCTYPEhtml，不用像HTML4那样写复杂的DTD（文档类型定义）路径。必须写DOCTYPE是因为浏览器需要根据它来判断文档类型，确定用“标准模式”还是“怪异模式”渲染页面。如果不写，浏览器会进入怪异模式，可能导致CSS布局错乱（比如盒模型计算方式不一样），兼容性问题会特别多。

HTML5里的lang属性有什么用？比如htmllang=zh-CN和htmllang=en的区别？

答案：lang属性主要是告诉浏览器、有哪些信誉好的足球投注网站引擎、屏幕阅读器等“当前页面的语言”。作用有两个：一是SEO优化，有哪些信誉好的足球投注网站引擎能精准识别语言，比如中文页面用zh-CN，能让中文用户更容易搜到；二是无障碍支持，屏幕阅读器会根据lang属性切换语言发音（比如zh-CN读中文，en读英文），提升视障用户体验。实际开发中，中文网站就写zh-CN，英文网站写en，不能瞎写。

二、核心特性题

列举3个HTML5新增的语义化标签，并说明它们的使用场景，为什么要用语义化标签？

答案：常用的有header、nav、main、article、footer这些。比如header用在页面顶部（放logo、标题），nav用在导航栏（放菜单链接），article用在独立内容块（比如新闻正文、博客文章）。用语义化标签的原因：一是结构更易读，团队协作时看标签就知道对应模块，不用看class名猜；二是对机器友好，有哪些信誉好的足球投注网站引擎能更快抓取关键内容（比如article里的正文），屏幕阅读器也能精准定位；三是减少冗余代码，不用给div加一堆意义不明的class（比如之前写，现在直接用）。

HTML5新增的表单元素和属性有哪些？举例说明它们的实际用途。

答案：元素方面，有inputtype=email（专门输入邮箱，会自动校验格式）、inputtype=tel（移动端唤起数字键盘，方便输手机号）、inputtype=date（原生日期选择器，不用自己写JS插件）。属性方面，有placeholder（输入框提示文字，比如“请输入手机号”）、required（提交时校验必填，不用额外写JS判断）、autofocus（页面加载后自动聚焦到该输入框，比如登录页的用户名输入框）。这些特性能减少前端代码量，还能提升用户体验，比如date类型不用自己适配不同浏览器的日期选择器。

用HTML5的audio/video标签嵌入多媒体时，需要注意哪些兼容性问题？怎么解决？

答案：主要是格式兼容性，比如Chrome支持MP4、WebM，Firefox支持WebM但对MP4支持有限，IE只认MP4。解决方法有两个：一是用source标签提供多种格式，让浏览器自动选择支持的，比如：

videocontrols

sourcesrc=video.mp4type=video/mp4

sourcesrc=video.webmtype=video/webm

您的浏览器不支持视频播放

/video

二是加“降级提示”，比如上面代码里的文字，万一浏览器都不支持，用户能知道原因。另外，autoplay属性在很多浏览器里有限制（比如需要用户先交互），不能依赖它实现自动播放，最好加个播放按钮。

三、实际应用题

本地存储中，localStorage和sessionStorage有什么区别？实际开发中分别用在什么场景？

答案：区别主要在“生命周期”和“共享范围”。localStorage只要不手动删除（代码删或用户清缓存），就一直存在，即使关闭浏览器再打开也还在；sessionStorage只在当前会话有效，关闭标签页或浏览器就没了。共享范围上，localStorage在同一域名下的所有页面都能共享（比如A页面存的，B页面能取到）；sessionStorage