HTML高频面试题及答案（实战版）.docx

HTML高频面试题及答案（实战版）

1.说说DOCTYPE的作用？HTML5的DOCTYPE和之前的有什么区别？

答案：

DOCTYPE的核心作用是告诉浏览器“用什么标准解析当前文档”，避免浏览器进入“怪异模式”（非标准解析）。比如没写DOCTYPE时，IE可能会用IE5的规则解析CSS，导致盒模型、布局错乱。

HTML5的DOCTYPE简化到只剩DOCTYPEhtml，不用像XHTML那样写冗长的DTD声明（比如旧版的!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN/TR/xhtml1/DTD/xhtml1-strict.dtd）。本质是HTML5不再基于SGML，所以不用引用外部DTD文件，写起来更简洁，浏览器也能快速识别。

2.html标签的lang属性有什么用？不设置会有问题吗？

答案：

lang属性用来定义页面的“语言类型”，比如lang=zh-CN代表中文（中国大陆），lang=en代表英文。主要作用有两个：

辅助无障碍工具：屏幕阅读器会根据lang切换语音（比如zh-CN读中文，en读英文），没设置的话可能默认用英文语音读中文，体验极差；

帮助有哪些信誉好的足球投注网站引擎：比如百度、谷歌会根据lang判断页面语言，优先推给对应语言的用户，没设置可能影响SEO收录。

实际开发中建议必设，尤其是多语言网站，不同页面要对应不同lang值（比如英文页设en）。

3.为什么推荐用HTML5语义标签（header/nav/main）而不是全用div？

答案：

全用div的话，代码就是“一堆没有意义的盒子”，主要问题在3个方面：

可读性差：同事看代码时，得猜“这个div是页头还是导航”，用header/nav一眼就懂，维护效率高；

无障碍差：屏幕阅读器无法识别div的作用，视障用户不知道当前浏览的是“页面标题区”还是“内容区”，但能识别语义标签；

SEO差：有哪些信誉好的足球投注网站引擎靠标签理解页面结构，main标签里的内容会被判定为“核心内容”，div则没有这个权重，用语义标签能提升页面排名。

注意：别滥用！比如不要把小按钮用section包，也不要嵌套混乱（比如main里套header，除非是页面内的小模块，一般main只放核心内容，页面级header放外面）。

4.meta标签的viewport是干嘛的？移动端开发必须加吗？

答案：

必须加！viewport是“视口设置”，专门解决移动端页面缩放错乱的问题。手机屏幕小（比如375px宽），但浏览器默认会把页面当成980px宽来渲染（模拟桌面），导致页面缩小、文字模糊，加了viewport就能让页面“适配手机屏幕宽度”。

常用配置：metaname=viewportcontent=width=device-width,initial-scale=1.0,user-scalable=no

width=device-width：让页面宽度等于手机屏幕宽度；

initial-scale=1.0：初始缩放比例1:1，不放大不缩小；

user-scalable=no：禁止用户手动缩放（可选，看需求，比如阅读类APP可以允许缩放）。

5.img标签的alt属性有什么用？能省略吗？

答案：

不能省！alt是“替代文本”，作用有3个：

图片加载失败时：用户能看到alt文字，知道这张图本该是什么（比如alt=首页轮播图-春季新品，比空白占位友好）；

无障碍：屏幕阅读器会读alt文字，视障用户能理解图片内容；

SEO：有哪些信誉好的足球投注网站引擎爬不到图片内容，靠alt判断图片主题（比如alt=北京故宫角楼雪景，比alt=图片1的收录效果好10倍）。

注意：alt不要写无关内容（比如堆关键词），要准确描述图片，比如产品图就写“iPhone15Pro黑色款正面图”。

6.HTML5语义标签在IE8及以下不识别，怎么解决？

答案：

IE8及以下会把header/nav这些语义标签当成“未知元素”，不解析样式（默认是行内元素，无法设置宽高），解决分两步：

用JS创建语义标签：IE8不支持原生语义标签，但可以通过document.createElement(header)手动创建，浏览器就会识别；

引入html5shiv库：自己写JS太麻烦，直接用成熟库，比如在head里加条件注释（只给IE8及以下加载）：

!--[ifltIE9]

scriptsrc=/npm/html5shiv@3.7.