Web前端面试高频题库及答案.docxVIP

Web前端面试高频题库及答案

一、HTML基础

1.什么是HTML语义化标签？实际开发中怎么用？

答案：语义化标签是指有明确含义的HTML标签（如header、nav、main、section、footer），而非单纯用div+class。

实际用法：做官网时，页面顶部导航栏用nav包裹，头部Logo+标题用header，正文内容放在main里，侧边栏用aside，底部版权信息用footer；写文章页面时，段落用p，标题用h1-h6（一个页面只一个h1），列表用ul/ol，避免全用divclass=header这种无意义结构。

好处：利于SEO（搜索引擎能识别内容结构）、方便无障碍阅读（屏幕阅读器可识别标签含义）、团队维护时能快速看懂页面结构。

2.img标签的alt和title属性有什么区别？

答案：alt是“替代文本”，当图片加载失败（如路径错、网络差）时，页面会显示alt的内容；同时是SEO关键，搜索引擎通过alt识别图片内容。

title是“提示文本”，当鼠标hover到图片上时，会弹出title的文字提示。

实际开发中：alt必须写（尤其产品图、内容图），比如商品图alt=2024夏季纯棉T恤白色M码；title可选，一般在需要补充图片说明时加，比如图标按钮hover提示“返回顶部”。

二、CSS核心

1.说说CSS盒模型，标准盒模型和IE盒模型的区别？

答案：盒模型是元素在页面中占据空间的结构，由“内容区（content）、内边距（padding）、边框（border）、外边距（margin）”四部分组成。

区别：

标准盒模型（默认）：元素的width/height只等于“内容区宽度/高度”，padding和border会额外增加元素的总宽度/高度。比如width:200px的元素，加padding:10px+border:2px，实际总宽度是200+102+22=224px。

IE盒模型（怪异模式）：元素的width/height包含“内容区+padding+border”，padding和border不会增加总宽度/高度。比如同样width:200px，加padding:10px+border:2px，实际总宽度还是200px，内容区会被压缩成200-102-22=176px。

控制方式：用box-sizing属性，box-sizing:content-box是标准盒模型（默认），box-sizing:border-box是IE盒模型（实际开发常用，比如写表单、卡片时，不用算padding和border的影响）。

2.Flex布局怎么用？常用属性有哪些？

答案：Flex是“弹性布局”，给父容器加display:flex后，子元素就变成弹性项，能快速实现水平/垂直居中、均匀分布等布局，比浮动更灵活。

常用父容器属性：

justify-content：控制子元素水平方向对齐，比如flex-start（左对齐）、flex-end（右对齐）、center（水平居中）、space-between（两端对齐，子元素间距相等）、space-around（子元素两侧间距相等）；

align-items：控制子元素垂直方向对齐，比如center（垂直居中）、flex-start（上对齐）、flex-end（下对齐）、stretch（子元素高度拉伸到和父容器一致，子元素没设高度时生效）；

flex-direction：控制主轴方向，row（默认，水平从左到右）、column（垂直从上到下）；

常用子元素属性：

flex:1：子元素占满剩余空间（比如两栏布局，侧边栏固定宽度200px，主内容区加flex:1，就能自适应剩余宽度）；

align-self：单独控制某个子元素的垂直对齐（比如父容器align-items:flex-start，某个子元素加align-self:center，就能单独居中）。

实际例子：做搜索栏时，左边图标固定宽度，中间输入框flex:1，右边按钮固定宽度，父容器加display:flex;align-items:center，就能快速对齐。

3.什么是BFC？怎么触发BFC？能解决什么问题？

答案：BFC是“块级格式化上下文”，可以理解为一个独立的“容器”，容器内的元素布局不会影响容器外的元素，容器外的也不会影响内部。

触发方式（常用）：

父元素加overflow:hidden（注意：如果子元素有定位超出父容器，会被裁剪，需谨慎用）；

父元素加display:flex或display:grid；

父元素加position