2026年常见web面试题及答案

2026年常见web面试题及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在Web开发中，以下哪种HTTP方法主要用于安全地提交表单数据？A.GETB.POSTC.PUTD.DELETE2.CSS中，如何实现一个元素的背景图片不重复平铺？A.background-repeat:repeat;B.background-repeat:no-repeat;C.background-repeat:inherit;D.background-repeat:circle;3.以下哪个是JavaScript中用于异步发送HTTP请求的API？A.fetch()B.XMLHttpRequest()C.jQuery.ajax()D.以上都是4.HTML5中，哪个标签用于定义内联框架，可以在页面中嵌入另一个HTML页面？A.<iframe>B.<embed>C.<frame>D.<object>5.在CSSGrid布局中，如何设置一个网格区域占据两列？A.grid-column:span2;B.grid-column:1/3;C.grid-column:2fr;D.grid-column:auto2;6.以下哪个是前端性能优化的常用方法？A.增加HTTP请求次数B.使用大量CSS3动画C.压缩图片文件D.频繁使用alert弹窗7.在Web安全中，XSS攻击的主要危害是？A.破坏服务器文件B.窃取用户CookieC.重置数据库密码D.以上都是8.React中，以下哪个钩子用于在组件挂载后执行副作用？A.useState()B.useEffect()C.useContext()D.useReducer()9.Websocket协议的主要特点是什么？A.同步请求响应模式B.基于HTTP协议C.全双工通信D.需要频繁刷新页面10.在SEO优化中，以下哪个标签对页面权重影响最大？A.<div>B.<span>C.<header>D.<footer>二、填空题（总共10题，每题2分，总分20分）1.CSS中，使用________属性可以设置元素的外边距。2.JavaScript中，________是用于存储键值对的内置对象。3.HTML5中，________标签用于定义文章内容。4.Web开发中，________协议用于传输加密的HTTP数据。5.CSSFlexbox布局中，________属性用于控制子项的伸缩比例。6.React中，________是用于管理组件内部状态的钩子。7.Web性能优化中，________是一种减少页面加载时间的策略。8.XSS攻击的防范措施之一是使用________对用户输入进行过滤。9.Websocket协议的URL格式通常以________开头。10.SEO优化中，________标签用于定义页面标题。三、判断题（总共10题，每题2分，总分20分）1.CSS中的ID选择器比类选择器的优先级高。（√）2.JavaScript中的闭包可以访问外部函数的变量。（√）3.HTML5的语义化标签有助于SEO优化。（√）4.Websocket协议需要建立两次TCP连接。（×）5.CSSGrid布局和Flexbox布局可以同时使用。（√）6.XSS攻击只能通过表单提交进行。（×）7.React中的函数组件不能使用类组件的特性。（×）8.Web性能优化中，CDN可以显著提升页面加载速度。（√）9.Websocket协议不支持跨域通信。（×）10.HTML5的<video>标签默认支持所有视频格式。（×）四、简答题（总共4题，每题4分，总分16分）1.简述GET和POST请求的区别。答：GET请求参数在URL中传递，无状态且不安全；POST请求参数在请求体中传递，有状态且更安全。2.解释CSS中的盒模型（BoxModel）及其组成部分。答：盒模型包括内容（Content）、边框（Border）、外边距（Margin）和内边距（Padding）。3.说明React中组件的生命周期方法及其作用。答：组件生命周期分为挂载（constructor、render、componentDidMount）、更新（componentDidUpdate）、卸载（componentWillUnmount）等阶段。4.简述Web安全中CSRF攻击的原理及防范措施。答：CSRF攻击利用用户已认证的会话，诱使其执行非预期操作；防范措施包括使用Token验证、限制请求来源等。五、应用题（总共4题，每题6分，总分24分）1.假设需要开发一个简单的待办事项列表Web应用，请写出核心的HTML结构和JavaScript代码实现添加和删除待办事项的功能。答：HTML结构：```html<inputtype="text"id="todoInput"placeholder="添加待办事项"><buttononclick="addTodo()">添加</button><ulid="todoList"></ul>```JavaScript代码：```javascriptlettodos=[];functionaddTodo(){constinput=document.getElementById('todoInput');consttodo=input.value.trim();if(todo){todos.push(todo);renderTodos();input.value='';}}functionrenderTodos(){constlist=document.getElementById('todoList');list.innerHTML='';todos.forEach((item,index)=>{constli=document.createElement('li');li.textContent=item;constdeleteBtn=document.createElement('button');deleteBtn.textContent='删除';deleteBtn.onclick=()=>removeTodo(index);li.appendChild(deleteBtn);list.appendChild(li);});}functionremoveTodo(index){todos.splice(index,1);renderTodos();}```2.请写出CSS代码实现一个响应式导航栏，在小屏幕设备上显示汉堡菜单图标，点击后展开菜单项。答：HTML结构：```html<divclass="navbar"><divclass="logo">Logo</div><buttonclass="menu-toggle">☰</button><ulclass="menu"><li>首页</li><li>关于</li><li>服务</li><li>联系</li></ul></div>```CSS代码：```css.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px;}.menu{list-style:none;display:flex;margin:0;padding:0;display:none;/默认隐藏菜单/}.menuli{padding:10px;}.menu-toggle{display:none;}@media(max-width:768px){.menu{flex-direction:column;width:100%;}.menu-toggle{display:block;}.menu-toggle:hover+.menu{display:flex;}}```3.假设需要实现一个简单的图片轮播效果，请写出HTML结构和JavaScript代码实现自动轮播和手动切换功能。答：HTML结构：```html<divclass="carousel"><divclass="slides"><imgsrc="img1.jpg"alt="图片1"><imgsrc="img2.jpg"alt="图片2"><imgsrc="img3.jpg"alt="图片3"></div><buttonclass="prev">❮</button><buttonclass="next">❯</button></div>```JavaScript代码：```javascriptletcurrentSlide=0;constslides=document.querySelectorAll('.slidesimg');consttotalSlides=slides.length;functionshowSlide(index){slides.forEach((slide,i)=>{slide.style.display=i===index?'block':'none';});}functionnextSlide(){currentSlide=(currentSlide+1)%totalSlides;showSlide(currentSlide);}functionprevSlide(){currentSlide=(currentSlide-1+totalSlides)%totalSlides;showSlide(currentSlide);}document.querySelector('.next').addEventListener('click',nextSlide);document.querySelector('.prev').addEventListener('click',prevSlide);setInterval(nextSlide,3000);//自动轮播showSlide(currentSlide);//初始化显示第一张```4.请写出JavaScript代码实现一个简单的表单验证，确保用户名不为空且密码长度至少为6位。答：HTML结构：```html<formid="loginForm"><inputtype="text"id="username"placeholder="用户名"><inputtype="password"id="password"placeholder="密码"><buttontype="submit">登录</button><pid="error"></p></form>```JavaScript代码：```javascriptdocument.getElementById('loginForm').addEventListener('submit',function(e){e.preventDefault();constusername=document.getElementById('username').value.trim();constpassword=document.getElementById('password').value.trim();consterror=document.getElementById('error');if(!username){error.textContent='用户名不能为空';return;}if(password.length<6){error.textContent='密码长度至少为6位';return;}error.textContent='';alert('登录成功');//实际应用中应替换为API请求});```【标准答案及解析】一、单选题1.B解析：POST方法用于安全提交表单数据，而GET方法参数在URL中传递，不适合敏感信息。2.B解析：background-repeat:no-repeat;用于禁止背景图片平铺，其他选项不符合要求。3.D解析：fetch()、XMLHttpRequest()和jQuery.ajax()都是异步HTTP请求的API。4.A解析：<iframe>标签用于嵌入HTML页面，其他选项不适用。5.A解析：grid-column:span2;表示该网格区域跨越两列。6.C解析：压缩图片文件可以减少加载时间，其他选项不利于性能。7.B解析：XSS攻击主要窃取用户Cookie，其他危害较次要。8.B解析：useEffect()用于组件挂载后执行副作用，其他选项不适用。9.C解析：Websocket支持全双工通信，实时性高。10.C解析：<header>标签对SEO权重影响较大，其他标签权重较低。二、填空题1.margin2.localStorage3.article4.HTTPS5.flex-grow