HTML 面试高频题及实战答案.docxVIP

HTML面试高频题及实战答案

一、基础概念题

什么是HTML语义化？实际开发中为什么要重视？

答案：语义化就是用合适的标签表达内容的含义，比如用article包裹文章主体、nav定义导航栏，而不是全靠div堆结构。核心原因有三点：一是提升可读性，不管是人还是机器（搜索引擎、屏幕阅读器）都能快速理解页面结构；二是优化SEO，搜索引擎能通过语义标签抓取关键内容；三是增强可维护性，后期改代码时能快速定位模块，比如看到footer就知道是页脚区域。

DOCTYPE的作用是什么？HTML5的DOCTYPE写法和之前有什么区别？

答案：DOCTYPE是文档类型声明，告诉浏览器当前HTML文档遵循哪个版本的规范，避免浏览器进入“怪异模式”（QuirksMode）——怪异模式下浏览器会用旧的非标准渲染规则，容易导致页面兼容性问题。HTML5的DOCTYPE写法更简洁：!DOCTYPEhtml，不需要指定DTD（文档类型定义）；而HTML4/XHTML需要明确引用DTD，比如!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//EN/TR/html4/loose.dtd。

HTML5新增了哪些常用的语义化标签？至少列举5个并说明用途。

答案：

header：页面或模块的头部，比如网站标题、导航栏容器；

footer：页脚，存放版权信息、联系方式、备案号等；

article：独立完整的内容块，比如一篇文章、一条新闻、一个商品详情；

section：逻辑分区，用于划分页面中的不同模块（比如“产品特点”“用户评价”区块），和div区别是section有明确语义，div无语义；

nav：导航链接容器，比如主导航、面包屑导航；

aside：侧边栏或辅助内容，比如文章的相关推荐、作者信息；

main：页面的核心内容，一个页面只能有一个main，排除重复的头部、底部、侧边栏。

二、元素与属性题

img标签的alt属性和title属性有什么区别？为什么不能省略alt？

答案：alt是图片加载失败时的替代文本，同时供屏幕阅读器读取（无障碍访问）；title是鼠标悬浮在图片上时显示的提示文本。不能省略alt的原因：一是无障碍需求，视觉障碍用户依赖屏幕阅读器通过alt了解图片内容；二是SEO优化，搜索引擎无法直接识别图片，alt中的关键词能帮助图片被检索到；如果图片纯装饰性（比如分割线），可以写alt=（空值），但不能不写。

表单元素中，get和post提交方式的核心区别是什么？实际开发中怎么选？

答案：核心区别集中在4点：

数据传输方式：get把数据拼在URL后面（可见），post把数据放在请求体中（不可见）；

数据大小限制：get受URL长度限制（一般几KB），post无明确限制（取决于服务器配置）；

安全性：get数据暴露在URL，不适合传敏感信息（密码、手机号），post相对安全；

缓存：get请求会被浏览器缓存，post不会。

选择原则：查询、搜索类操作（比如百度搜关键词）用get，因为可缓存、能分享URL；提交敏感信息（登录、注册）、上传文件、数据量大的操作（比如提交表单）用post。

display:none、visibility:hidden、opacity:0三者的区别？

答案：核心区别在“是否占据页面空间”和“交互性”：

display:none：元素完全消失，不占据任何空间，也无法触发点击事件；

visibility:hidden：元素不可见，但仍占据原来的页面空间，无法触发点击事件；

opacity:0：元素透明（视觉不可见），仍占据空间，可以触发点击事件（比如透明的按钮仍能被点击）。

举个例子：如果隐藏一个按钮，用display:none会让后面的元素往上移；用visibility:hidden后面的元素不动，但按钮点不了；用opacity:0后面的元素不动，且能点到透明的按钮。

三、兼容性与实践题

什么是HTML5的离线存储（ApplicationCache）？它的核心作用是什么？

答案：HTML5离线存储是让网页在无网络时仍能访问的技术，通过一个名为manifest的文本文件，列出需要缓存的资源（HTML、CSS、JS、图片等）。核心作用：一是提升访问速度，缓存的资源直接从本地读取，不用每次请求服务器；二是支持离线访问，比如新闻APP的离线阅读、表单草稿保存，用户断网后仍能操作已缓存的内容；三是减少服务器压力，重复访问时不用重复下载资源。

注意：现在更推荐用Serv