2026年考公计算机专业Web开发试题(含答案)

2026年考公计算机专业Web开发试题(含答案)单项选择题（每题2分，共30分）1.在HTML中，用于创建超链接的标签是（）A.<a>B.<link>C.<img>D.<href>答案：A。<a>标签用于创建超链接，<link>标签通常用于引入外部资源，<img>用于插入图片，href是<a>标签的一个属性。2.以下哪种CSS选择器可以选中所有的段落元素（）A.#pB..pC.pD.pD.p答案：C。p是元素选择器，可选中所有的段落元素；#p是ID选择器，用于选中ID为p的元素；.p是类选择器，用于选中类名为p的元素；是通配符选择器，没有p这种合法选择器。答案：C。p是元素选择器，可选中所有的段落元素；#p是ID选择器，用于选中ID为p的元素；.p是类选择器，用于选中类名为p的元素；是通配符选择器，没有p这种合法选择器。3.在JavaScript中，以下哪个方法可以用于在控制台输出信息（）A.print()B.console.log()C.alert()D.document.write()答案：B。console.log()用于在控制台输出信息；print()一般用于打印页面；alert()会弹出一个警告框显示信息；document.write()会将内容写入HTML文档。4.在SQL中，用于从表中删除数据的语句是（）A.DELETEB.DROPC.UPDATED.ALTER答案：A。DELETE语句用于从表中删除数据；DROP用于删除数据库、表等对象；UPDATE用于更新表中的数据；ALTER用于修改表的结构。5.以下哪个HTML5元素用于定义页面的侧边栏（）A.<section>B.<article>C.<aside>D.<nav>答案：C。<aside>元素用于定义与页面主要内容间接相关的部分，常用于侧边栏；<section>表示文档中的一个区域；<article>表示独立的自包含内容；<nav>表示导航链接部分。6.在CSS中，以下哪个属性用于设置元素的背景颜色（）A.background-imageB.background-colorC.background-repeatD.background-position答案：B。background-color用于设置元素的背景颜色；background-image用于设置背景图像；background-repeat用于控制背景图像的重复方式；background-position用于设置背景图像的位置。7.在JavaScript中，以下哪种方式可以创建一个数组（）A.vararr=newArray();B.vararr=[];C.以上两种都可以D.vararr=array();答案：C。在JavaScript中，可以使用newArray()构造函数或者方括号[]来创建数组；array()不是合法的创建数组的方式。8.在SQL中，用于对结果集进行排序的关键字是（）A.GROUPBYB.HAVINGC.ORDERBYD.WHERE答案：C。ORDERBY用于对结果集进行排序；GROUPBY用于将结果集分组；HAVING用于在分组后筛选；WHERE用于在查询时筛选行。9.以下哪个是HTML中表单提交按钮的标签（）A.<inputtype="button">B.<inputtype="submit">C.<button>D.<inputtype="reset">答案：B。<inputtype="submit">用于创建表单提交按钮；<inputtype="button">是普通按钮，需要通过JavaScript实现功能；<button>标签也可创建按钮，但需要指定type为submit才是提交按钮；<inputtype="reset">是重置按钮。10.在CSS中，以下哪个值可以使元素隐藏但仍占据页面空间（）A.display:none;B.visibility:hidden;C.opacity:0;D.position:absolute;答案：B。visibility:hidden;会使元素隐藏但仍占据页面空间；display:none;会使元素隐藏且不占据空间；opacity:0;只是让元素完全透明，但仍可交互且占据空间；position:absolute;用于设置元素的绝对定位。11.在JavaScript中，以下哪个事件会在网页加载完成后触发（）A.onclickB.onloadC.onchangeD.onmouseover答案：B。onload事件会在网页或图片等资源加载完成后触发；onclick是点击事件；onchange是文本框等内容改变事件；onmouseover是鼠标悬停事件。12.在SQL中，用于限制查询结果返回行数的关键字是（）A.LIMITB.TOPC.ROWNUMD.以上都是（不同数据库不同用法）答案：D。在MySQL中用LIMIT限制返回行数；在SQLServer中可以用TOP；在Oracle中用ROWNUM。13.以下哪个HTML标签用于定义无序列表（）A.<ol>B.<ul>C.<li>D.<dl>答案：B。<ul>用于定义无序列表；<ol>是有序列表；<li>是列表项；<dl>是定义列表。14.在CSS中，以下哪个属性用于设置元素的内边距（）A.marginB.paddingC.borderD.outline答案：B。padding用于设置元素的内边距；margin是外边距；border是边框；outline是轮廓。15.在JavaScript中，以下哪个方法用于将数组转换为字符串（）A.toString()B.join()C.以上两种都可以D.split()答案：C。toString()和join()都可以将数组转换为字符串，toString()默认用逗号分隔元素，join()可以指定分隔符；split()是将字符串转换为数组。多项选择题（每题3分，共30分）1.以下属于HTML5新增表单元素的有（）A.<datalist>B.<keygen>C.<output>D.<progress>答案：ABCD。<datalist>提供输入建议，<keygen>用于生成密钥对，<output>用于显示计算结果，<progress>用于显示进度条，都是HTML5新增的表单元素。2.在CSS中，以下哪些属性可以用于设置文本样式（）A.font-sizeB.font-familyC.text-alignD.color答案：ABCD。font-size用于设置字体大小，font-family用于设置字体族，text-align用于设置文本对齐方式，color用于设置文本颜色。3.在JavaScript中，以下哪些是基本数据类型（）A.numberB.stringC.objectD.boolean答案：ABD。JavaScript的基本数据类型有number（数字）、string（字符串）、boolean（布尔值）、null、undefined、symbol；object是引用数据类型。4.在SQL中，以下哪些语句属于DML（数据操作语言）（）A.INSERTB.UPDATEC.DELETED.SELECT答案：ABCD。INSERT（插入）、UPDATE（更新）、DELETE（删除）、SELECT（查询）都属于DML语句。5.以下哪些是响应式Web设计中常用的技术（）A.媒体查询B.弹性布局C.视口单位D.浮动布局答案：ABC。媒体查询可以根据不同的设备屏幕尺寸应用不同的CSS规则，弹性布局（如Flexbox和Grid）能更好地适应不同屏幕，视口单位（如vw、vh）可以根据视口大小调整元素尺寸；浮动布局主要用于传统的页面排版，不是响应式设计常用的核心技术。6.在JavaScript中，以下关于函数的说法正确的有（）A.函数可以有参数B.函数可以有返回值C.函数可以嵌套定义D.函数定义后必须马上调用答案：ABC。函数可以有参数传递数据，也可以有返回值返回计算结果，还可以在函数内部嵌套定义其他函数；函数定义后不一定要马上调用，可以在需要的时候再调用。7.在SQL中，以下哪些可以作为表的主键（）A.一个字段B.多个字段组合C.可以为空的字段D.具有唯一性的字段答案：ABD。表的主键可以是一个字段，也可以是多个字段组合；主键的值必须唯一且不能为空。8.以下哪些是HTML中的块级元素（）A.<div>B.<p>C.<span>D.<h1>答案：ABD。<div>、<p>、<h1>是块级元素，会独占一行；<span>是行内元素，不会独占一行。9.在CSS中，以下关于盒模型的说法正确的有（）A.盒模型由内容区、内边距、边框和外边距组成B.width和height属性设置的是内容区的宽度和高度C.内边距和边框会影响元素的实际占用空间D.外边距不会影响元素的实际占用空间答案：ABC。盒模型由内容区、内边距、边框和外边距组成；width和height通常设置的是内容区的尺寸；内边距和边框会增加元素的实际占用空间；外边距会影响元素与其他元素之间的距离，也会影响元素在页面中的布局空间。10.在JavaScript中，以下哪些方法可以用于操作数组（）A.push()B.pop()C.shift()D.unshift()答案：ABCD。push()用于在数组末尾添加元素，pop()用于移除数组末尾的元素，shift()用于移除数组开头的元素，unshift()用于在数组开头添加元素。简答题（每题10分，共20分）1.简述HTTP请求的常见方法及其用途。答案：GET：用于从服务器获取资源。通常用于请求静态页面、图片、数据等。例如，在浏览器中输入网址访问网页就是使用GET请求。GET请求会将参数附加在URL后面，因此不适合传递敏感信息，且参数长度有限制。POST：用于向服务器提交数据，通常用于表单提交等场景。POST请求将数据放在请求体中，不会像GET请求那样将数据暴露在URL中，适合传递大量数据和敏感信息。PUT：用于向服务器上传资源，通常用于更新服务器上的资源。如果资源不存在，则创建该资源；如果存在，则替换该资源。DELETE：用于请求服务器删除指定的资源。HEAD：与GET类似，但只请求资源的头部信息，不返回资源的主体内容。常用于检查资源的可用性、获取文件大小等。2.请说明数据库中事务的特性（ACID）及其含义。答案：原子性（Atomicity）：事务是一个不可分割的操作单元，事务中的所有操作要么全部执行成功，要么全部执行失败。如果其中一个操作失败，整个事务将回滚到初始状态，就像什么都没发生一样。一致性（Consistency）：事务执行前后，数据库的状态必须保持一致。也就是说，事务的执行不能破坏数据库的完整性约束，如主键约束、唯一约束等。例如，在转账操作中，转账前后两个账户的总金额应该保持不变。隔离性（Isolation）：多个事务并发执行时，一个事务的执行不应该影响其他事务的执行。每个事务都应该感觉不到其他事务的存在，就像它在单独执行一样。根据隔离级别的不同，事务之间的隔离程度也有所不同。持久性（Durability）：一旦事务提交成功，它对数据库所做的更改就会永久保存，即使在系统崩溃或发生其他故障的情况下，这些更改也不会丢失。通常通过数据库的日志和恢复机制来保证持久性。编程题（每题10分，共20分）1.请使用HTML、CSS和JavaScript实现一个简单的计算器，包含加、减、乘、除四种运算。```html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>SimpleCalculator</title><style>body{font-family:Arial,sans-serif;}.calculator{width:300px;border:1pxsolid#ccc;padding:10px;border-radius:5px;}input{width:100%;margin-bottom:10px;padding:5px;}button{width:50px;height:50px;margin:5px;}</style></head><body><divclass="calculator"><inputtype="text"id="result"readonly><div><buttononclick="appendNumber('1')">1</button><buttononclick="appendNumber('2')">2</button><buttononclick="appendNumber('3')">3</button><buttononclick="appendOperator('+')">+</button></div><div><buttononclick="appendNumber('4')">4</button><buttononclick="appendNumber('5')">5</button><buttononclick="appendNumber('6')">6</button><buttononclick="appendOperator('-')">-</button></div><div><buttononclick="appendNumber('7')">7</button><buttononclick="appendNumber('8')">8</button><buttononclick="appendNumber('9')">9</button><buttononclick="appendOperator('')"></button><buttononclick="appendOperator('')"></button></div><div><buttononclick="appendNumber('0')">0</button><buttononclick="clearResult()">C</button><buttononclick="calculate()">=</button><buttononclick="appendOperator('/')">/</button></div></div><script>letcurrentInput='';letoperator='';letfirstNumber='';functionappendNumber(num){currentInput+=num;document.getElementById('result').value=currentInput;}functionappendOperator(op){if(currentInput!==''){firstNumber=currentInput;operator=op;currentInput='';}}functionclearResult(){currentInput='';operator='';firstNumber='';document.getElementById('result').value='';}functioncalculate(){if(firstNumber!==''&¤tInput!==''&&operator!==''){letnum1=parseFloat(firstNumber);letnum2=parseFloat(currentInput);letresult;switch(operator){case'+':result=num1+num2;