2026年web常见面试题及答案

2026年web常见面试题及答案考试时长：120分钟满分：100分一、单选题（总共10题，每题2分，总分20分）1.在HTML5中，用于定义文章或博客文章分区的元素是？A.<section>B.<article>C.<div>D.<span>2.以下哪个CSS选择器具有最高的优先级？A.类选择器（.class）B.ID选择器（#id）C.标签选择器（tag）D.属性选择器（[attribute]）3.JavaScript中，以下哪个方法用于向数组末尾添加一个或多个元素？A.push()B.pop()C.shift()D.unshift()4.React中，用于管理组件内部状态的钩子是？A.useEffect()B.useState()C.useContext()D.useReducer()5.在Web开发中，用于加密HTTP请求的协议是？A.HTTPB.HTTPSC.FTPD.SMTP6.CSS中，如何实现元素的垂直居中？A.display:flex;align-items:center;B.position:absolute;top:50%;C.margin:0auto;D.text-align:center;7.以下哪个HTTP状态码表示“请求成功”？A.404B.500C.200D.3028.在JavaScript中，以下哪个操作符用于比较两个值是否严格相等？A.==B.===C.!=D.!==9.Websocket协议的主要用途是？A.文件传输B.实时通信C.邮件发送D.远程登录10.CSSGrid布局中，用于定义列宽的属性是？A.grid-template-columnsB.grid-template-rowsC.grid-gapD.grid-area二、填空题（总共10题，每题2分，总分20分）1.HTML中，用于定义页面标题的标签是________。2.CSS中，通过________属性可以设置元素的透明度。3.JavaScript中，用于阻止事件默认行为的函数是________。4.React中，用于传递数据给子组件的钩子是________。5.HTTP请求中，表示“获取资源”的方法是________。6.CSS中，通过________属性可以设置元素的外边距。7.JavaScript中，用于声明变量的关键字有________和________。8.Websocket协议的端口通常是________。9.CSS中，通过________属性可以设置元素的字体大小。10.React中，用于处理副作用的钩子是________。三、判断题（总共10题，每题2分，总分20分）1.HTML5中，<header>标签用于定义页面的页眉部分。（正确）2.CSS中，`inherit`值表示继承父元素的样式。（正确）3.JavaScript中，函数可以作为参数传递给其他函数。（正确）4.React中，类组件和函数组件都可以使用useState钩子。（错误）5.HTTPS协议使用SSL/TLS加密数据传输。（正确）6.CSS中，`flex`布局只能用于一行元素。（错误）7.HTTP状态码401表示“未授权访问”。（正确）8.JavaScript中，`==`和`===`的区别在于前者会进行类型转换。（正确）9.Websocket协议支持双向通信。（正确）10.CSSGrid布局中，默认情况下所有列宽相等。（错误）四、简答题（总共4题，每题4分，总分16分）1.简述HTML5中语义化标签的作用。答：语义化标签（如<header>、<nav>、<article>等）可以提高网页的可读性和可维护性，帮助搜索引擎理解页面结构，并提升无障碍访问体验。2.CSS中，如何实现响应式布局？答：通过媒体查询（@media）、弹性布局（flexbox）、网格布局（grid）和百分比宽度等手段实现。例如：```css@media(max-width:600px){.container{flex-direction:column;}}```3.JavaScript中，事件冒泡和事件捕获的区别是什么？答：事件冒泡是指事件从子元素向上传播至父元素；事件捕获相反，从父元素向下传播至子元素。默认行为为冒泡。4.React中，什么是组件生命周期？答：组件生命周期分为挂载（constructor、render、componentDidMount）、更新（componentDidUpdate）、卸载（componentWillUnmount）等阶段，类组件通过生命周期方法实现，函数组件通过钩子函数（如useEffect）管理。五、应用题（总共4题，每题6分，总分24分）1.请写出HTML代码，实现一个包含标题、段落和图片的简单页面结构。答：```html<!DOCTYPEhtml><html><head><title>示例页面</title></head><body><header><h1>页面标题</h1></header><p>这是一个段落。</p><imgsrc="example.jpg"alt="示例图片"></body></html>```2.CSS中，如何设置一个元素的背景颜色为渐变，并使其在鼠标悬停时变为另一种颜色？答：```css.element{background:linear-gradient(toright,#ff7e5f,#feb47b);transition:background0.3s;}.element:hover{background:linear-gradient(toright,#feb47b,#ff7e5f);}```3.JavaScript中，编写一个函数，接收一个数组，返回数组中所有偶数的平方和。答：```javascriptfunctionsumOfEvenSquares(arr){returnarr.filter(num=>num%2===0).reduce((sum,num)=>sum+numnum,0);}```4.React中，编写一个函数组件，使用useState钩子管理计数器状态，并提供增加和减少按钮。答：```jsxfunctionCounter(){const[count,setCount]=useState(0);return(<div><p>计数：{count}</p><buttononClick={()=>setCount(count-1)}>减少</button><buttononClick={()=>setCount(count+1)}>增加</button></div>);}```【标准答案及解析】一、单选题1.A解析：HTML5中<section>用于定义文章分区，<article>用于独立内容，<div>和<span>为通用标签。2.B解析：ID选择器优先级最高（1000），其次是类选择器（10）、标签选择器（1），属性选择器最低（1）。3.A解析：push()用于添加元素，pop()删除末尾元素，shift()删除开头元素，unshift()添加开头元素。4.B解析：useState用于声明组件内部状态，useEffect处理副作用，useContext获取上下文，useReducer管理复杂状态。5.B解析：HTTPS通过SSL/TLS加密传输，HTTP为明文传输。6.A解析：flexbox通过flex-direction和align-items实现垂直居中。7.C解析：200表示成功，404表示未找到，500表示服务器错误，302表示重定向。8.B解析：===严格比较值和类型，==会自动类型转换。9.B解析：Websocket用于实时双向通信，如聊天、实时数据推送。10.A解析：grid-template-columns定义列宽，grid-template-rows定义行高。二、填空题1.<title>2.opacity3.event.preventDefault()4.context5.GET6.margin7.let,const8.809.font-size10.useEffect三、判断题1.正确2.正确3.正确4.错误（类组件需使用生命周期，函数组件用钩子）5.正确6.错误（flex可多行）7.正确8.正确9.正确10.错误（默认均分）四、简答题1.语义化标签通过明确元素用途（如<header>、<nav>）提升代码可读性，帮助搜索引擎抓取，并改善无障碍访问（如屏幕阅读器）。2.响应式布局通过媒体查询（@media）根据屏幕尺寸调整样式，结合flexbox或grid实现弹性布局，使用百分比或vw/vh单位确保自适应。3.事件冒泡是事件从子元素向父元素传播，可被捕获或阻止；事件捕获相反，从父元素向下传播，默认不启用。4.组件生命周期分为挂载（constructor→render→componentDidMount）、更新（componentDidUpdate）、卸载（componentWillUnmount），类组件通过方法实现，函数组件用useEffect等钩子。五、应用题1.HTML代码解析：-<header>包含标题，体现页面结构-<p>为