软考Web开发技术专项考试题库

软考Web开发技术专项考试题库一、单项选择题（每题2分，共20分）1.下列HTML标签中，最适合表示一篇可独立发布的博客文章的是？A.<section>B.<article>C.<aside>D.<header>答案B解析<article>表示独立、完整、可复用或分发的内容组合；<section>是普通分块，<aside>是与主体相关的侧边内容。2.在CSS中，设置box-sizing:border-box后，元素的width包含下列哪些部分？A.仅contentB.content+paddingC.content+padding+borderD.content+padding+border+margin答案C3.在严格模式（"usestrict"）下，以下代码中show()函数内this的值是？functionshow(){

console.log(this);

}

show();A.windowB.undefinedC.nullD.globalThis答案：B解析：非严格模式下，普通函数调用时的this默认为全局对象；严格模式下为undefined。4.HTTP状态码404表示？A.请求成功B.服务器内部错误C.请求的资源不存在D.请求无权限访问答案C5.以下哪种方式可以在浏览器端长期保存数据，且不会随HTTP请求自动发送到服务器？A.CookieB.localStorageC.SessionD.URL参数答案B6.在Flex布局中，使主轴沿垂直方向排列的属性值是？A.flex-direction:row;B.flex-direction:column;C.flex-wrap:wrap;D.align-items:center;答案B7.关于fetch('/api/data')，下列说法正确的是？A.返回一个Promise对象B.默认会自动携带所有CookieC.出现HTTP404时会直接进入catchD.只能发送GET请求答案A解析fetch返回Promise；HTTP404时Promise会resolve，但response.ok为false；fetch支持GET、POST、PUT等方法，同源请求默认携带与请求URL对应的Cookie，并不是“所有Cookie”。8.以下按钮中，点击后不会触发表单提交的是？A.<buttontype="submit">提交</button>B.<inputtype="submit"value="提交">C.<buttontype="button">提交</button>D.<inputtype="image"src="submit.png">答案C9.下列关于Cookie的说法，错误的是？A.Cookie常用于维持登录状态B.Cookie会随同域请求自动发送到服务器C.可由服务器通过Set-Cookie响应头设置，也可由JavaScript设置D.Cookie在浏览器关闭后一定会被删除答案D解析设置了Expires或Max-Age的Cookie属于持久性Cookie，浏览器关闭后仍可能保留。10.根据HTTP语义，PUT/api/users/1最适合用于？A.查询编号为1的用户B.完整更新编号为1的用户C.删除编号为1的用户D.创建一个新用户并返回编号答案B二、多项选择题（每题4分，共20分）1.下列属于HTML5新增特性或API的有？A.<canvas>B.WebSocketC.localStorageD.<marquee>答案A、B、C解析<marquee>是已废弃的非标准标签，不属于HTML5新增特性。2.下列哪些技术可以用于Web服务端开发？A.Node.jsB.PHPC.JSP/ServletD.Vue.js答案A、B、C解析Vue.js是运行在浏览器端的前端框架。3.下列哪些是防御XSS攻击的有效手段？A.对用户输入进行过滤和转义B.在输出到HTML时进行编码C.使用内容安全策略（CSP）D.使用HTTPS加密传输答案A、B、C解析HTTPS解决传输加密问题，不能直接防御XSS。4.关于var、let、const，下列说法正确的有？A.let和const具有块级作用域B.var有变量提升；let、const在声明前访问会进入暂时性死区C.顶层声明的var会成为全局对象属性，let不会D.const声明的对象，其属性不能被修改答案A、B、C解析const只保证变量绑定不能被重新赋值，对象内部属性仍然可以修改。5.下列哪些方案可以解决浏览器跨域问题？A.在响应头中添加Access-Control-Allow-OriginB.JSONPC.通过nginx做反向代理D.将后端接口由POST改为GET答案A、B、C解析改变请求方法不改变“协议、域名、端口”，无法解决跨域。三、判断题（每题2分，共20分）1.HTTP是无状态协议，但可以通过Cookie、Session等机制为请求附加状态。答案正确2.在CSS中，position:absolute;会使元素脱离文档流，不再占据原来的布局空间。答案正确3.JavaScript中==和===的作用完全一样。答案错误解析==会进行类型转换后再比较；===要求类型和值均相等。4.在HTML中，<div>和<span>都是无语义标签，应当尽量使用语义化标签代替。答案正确5.localStorage的可用存储空间通常比Cookie大。答案正确6.document.getElementById('app')返回的是一个HTMLCollection，需要通过下标访问元素。答案错误解析getElementById返回单个元素；返回HTMLCollection的是getElementsByClassName、getElementsByTagName等。7.WebSocket协议在建立连接时，需要先通过HTTPUpgrade请求完成握手。答案正确8.为防止SQL注入，可以使用字符串拼接的方式，将用户输入直接嵌入SQL语句。答案错误解析应使用参数化查询或预处理语句，避免将用户输入直接拼接为SQL。9.带有HttpOnly属性的Cookie无法通过document.cookie读取。答案正确10.SVG是一种基于XML的矢量图片格式，适合网页中的图标和线条图形。答案正确四、简答题（每题5分，共20分）1.简述浏览器从输入URL到页面显示的主要过程。答案(1)DNS解析域名，获得服务器IP地址；(2)与服务器建立TCP连接，HTTPS连接还需进行TLS握手；(3)浏览器发出HTTP请求，服务器返回HTML响应；(4)浏览器解析HTML构建DOM树，解析CSS构建CSSOM，并执行JavaScript；(5)根据DOM与CSSOM构建渲染树，计算布局、绘制并显示页面。2.简述GET和POST在HTTP语义上的主要区别。•GET用于获取资源，POST主要用于提交数据或创建资源；•GET参数一般放在URL查询字符串中，POST参数一般放在请求体中；•GET是幂等且可缓存的，POST不保证幂等，一般不会被浏览器主动缓存；•GET请求不应改变服务器状态，POST请求可能改变服务器状态；•POST比GET能承载更大的数据量。3.什么是同源策略？列举至少三种跨域解决方案。答案“同源”指协议、域名、端口完全相同。同源策略是浏览器的重要安全规则，限制不同源的文档或脚本之间互相读取、操作资源。常用跨域方案：CORS、JSONP、nginx反向代理、postMessage、WebSocket。4.什么是事件委托？它有哪些优点？答案事件委托利用事件冒泡，将多个子元素的事件监听器统一挂到公共祖先元素上，在祖先元素中通过event.target判断实际触发元素。优点：减少事件监听器数量，降低内存占用；对动态新增的子元素无需重新绑定事件。五、编程与综合应用题（每题10分，共20分）1.用JavaScript实现一个防抖函数debounce(fn,delay)，并说明一个适用场景。functiondebounce(fn,delay){

lettimer=null;

returnfunction(...args){

clearTimeout(timer);

timer=setTimeout(()=>{

fn.apply(this,args);

},delay);

};

}适用场景：搜索框输入联想、窗口resize/滚动事件、按钮频繁点击防重等。解析：防抖的核心思想是“事件在短时间内被连续触发时，只在最后一次触发后等待delay时间再执行”。每次触发都清除上一次定时器，从而避免高频调用。2.已知后端接口GET/api/users返回JSON数组，例如：[

{"id":1,"name":"张三"},

{"id":2,"name":"李四"}

]请用原生JavaScript（fetch）将该数组渲染到id="user-list"的<ul>元素中，要求包含错误处理和防止XSS。答案：asyncfunctionloadUsers(){

constul=document.getElementById('user-list');

ul.textContent='加载中...';

try{

constres=awaitfetch('/api/users');

if(!res.ok){

thrownewError('HTTP'+res.status);

}

constusers=awaitres.json();

ul.innerHTML=users

.map((user)=>`<li>${escapeHtml()}</li>`)

.join('');

}catch(err){

ul.innerHTML=`<li>加载失败：${escapeHtml(err.message)}</li>`;

}

}

functionescapeHtml(str){

returnString(str)

.replaceAll('&','&'