前端面试题及答案.docxVIP

前端面试题及答案

一、HTML基础

什么是HTML语义化标签？为什么要使用语义化标签？

答案：HTML语义化标签是指具有明确含义的标签，比如header（页面头部）、nav（导航栏）、article（正文内容）、footer（页脚）等。

使用原因：一是让代码结构更清晰，别人看代码时能快速理解各个部分的作用，方便团队协作；二是对搜索引擎友好，爬虫能通过语义标签更准确地抓取页面核心内容，提升SEO效果；三是利于无障碍阅读，屏幕阅读器能根据语义标签更好地解读页面内容，帮助残障用户使用。比如以前写页面用一堆div嵌套，现在用header+main+footer，结构一目了然。

说说input标签的常见type属性值，以及你在项目中怎么用这些类型？

答案：常见的type值有text（单行文本输入）、password（密码输入，输入内容会隐藏）、number（数字输入，自带上下增减按钮，还能限制输入范围）、tel（电话输入，在移动端会弹出数字键盘）、date（日期选择器，不用自己写日历组件）、checkbox（多选框，比如表单里的“兴趣爱好”选择）、radio（单选框，比如“性别”选择）、file（文件上传，可配合accept属性限制上传文件类型）。

项目里比如做登录页，用户名用type=text，密码用type=password；做个人信息页，手机号用type=tel，出生日期用type=date；做文件上传功能时，用type=file并加accept=.png,.jpg限制只传图片。另外，还会配合required、placeholder等属性一起用，比如required实现必填校验，placeholder提示用户输入内容。

二、CSS基础

解释一下CSS盒模型，标准盒模型和IE盒模型有什么区别？实际开发中怎么设置盒模型？

答案：CSS盒模型是指每个HTML元素都像一个盒子，由content（内容区）、padding（内边距）、border（边框）、margin（外边距）四部分组成。

区别：标准盒模型中，width和height只代表content的宽度和高度，元素实际占的宽度是width+padding+border+margin；而IE盒模型（怪异盒模型）中，width和height包含了content、padding和border，元素实际宽度就是width+margin。

实际开发中，通常用box-sizing:border-box将元素设置为IE盒模型，这样计算元素宽度时不用额外加padding和border，比如写一个宽200px的卡片，加10px内边距和2px边框后，元素实际宽度还是200px，不会超出预期，避免布局错乱。一般会在全局样式里写*{box-sizing:border-box;margin:0;padding:0;}统一设置。

怎么用Flex布局实现一个元素在父容器中水平垂直居中？

答案：给父容器设置display:flex，然后加justify-content:center（水平居中，控制主轴方向的对齐方式）和align-items:center（垂直居中，控制交叉轴方向的对齐方式）。

比如父容器是一个div，类名为parent，子元素是div.child，CSS代码就是：

.parent{

width:500px;

height:300px;

border:1pxsolid#000;

display:flex;

justify-content:center;/*水平居中*/

align-items:center;/*垂直居中*/

}

.child{

width:100px;

height:100px;

background:red;

}

这种方式比以前用定位（position:absolute+left:50%+top:50%+transform:translate(-50%,-50%)）更简单，而且兼容性也很好，现在项目里基本都用Flex实现居中。

CSS优先级怎么判断？如果多个选择器作用于同一个元素，哪个样式会生效？

答案：CSS优先级从高到低依次是：内联样式（写在元素style属性里的样式，权重1000）ID选择器（#id，权重100）类选择器（.class）、伪类选择器（:hover）、属性选择器（[type=text]）（权重10）标签选择器（div、p）、伪元素选择器（::before）（权重1）。

判断时