Web 网页设计技术考试题及答案

Web网页设计技术考试题及答案一、单项选择题（本大题共20小题，每小题2分，共40分）在每小题列出的四个备选项中只有一个是符合题目要求的，请将正确选项代码填写在括号内。错选、多选或未选均不得分。1.下列HTML5新增标签中，用于定义页面中独立的、完整的，可以独立被外部引用的内容区块的是（）A.<div>B.<article>C.<section>D.<aside>2.标准W3C盒模型中，某元素设置样式为width:180px;padding:15px;border:5pxsolid#333;margin:10px;，该元素的内容区域宽度为（）A.180pxB.210pxC.220pxD.240px3.下列CSS优先级排序正确的是（）A.内联样式>!important>ID选择器>类选择器>元素选择器B.!important>内联样式>ID选择器>类选择器>元素选择器C.!important>ID选择器>内联样式>类选择器>元素选择器D.!important>内联样式>类选择器>ID选择器>元素选择器4.下列CSS单位中，始终相对于HTML根元素字体大小计算的相对单位是（）A.emB.remC.vwD.%5.Flex布局中，用于设置项目在交叉轴对齐方式的属性是（）A.justify-contentB.align-itemsC.align-contentD.flex-grow6.关于CSS中position属性的描述，下列说法正确的是（）A.position:relative的元素脱离正常文档流，不占据原有空间B.position:absolute的元素始终相对于body元素进行定位C.position:fixed的元素脱离正常文档流，相对于浏览器视口定位D.position:static的元素可以通过top、left属性调整位置7.HTML5表单中，用于输入邮箱地址的input类型是（）A.urlB.textC.emailD.tel8.下列选项中，不属于JavaScript基本数据类型的是（）A.StringB.NumberC.ObjectD.Undefined9.JavaScript中，获取页面中id为header的元素，下列写法正确的是（）A.document.getElementsByClassName("header")B.document.querySelector("#header")C.document.getElementsByTagName("header")D.document.querySelector(".header")10.下列关于JavaScript事件冒泡的描述，正确的是（）A.事件捕获先于事件冒泡发生B.事件冒泡是从顶层文档对象向触发事件的目标节点传播C.事件冒泡无法被阻止D.所有浏览器默认事件都处于捕获阶段11.下列关于闭包的描述，错误的是（）A.闭包是指有权访问另一个函数作用域中变量的函数B.闭包会导致函数内的变量无法被垃圾回收，可能引发内存泄漏C.闭包只能读取函数内部变量，不能修改这些变量D.闭包可以用来封装私有变量，实现模块化开发12.下列本地存储技术中，存储数据大小最大、关闭浏览器后数据不消失的是（）A.CookieB.sessionStorageC.localStorageD.Session13.HTTP协议中，用于向服务器提交数据，数据放在请求体中的方法是（）A.GETB.POSTC.HEADD.OPTIONS14.浏览器产生跨域问题的根本原因是（）A.服务器IP地址不同B.浏览器的同源策略C.请求方法不同D.服务器端口不同15.下列CSS媒体查询语句中，正确适配宽度小于768px移动端设备的写法是（）A.@media(min-width:768px){...}B.@media(max-width:768px){...}C.@mediascreen(min-width:768px){...}D.@mediascreenand(width<768px){...}16.下列不属于前端网页性能优化手段的是（）A.压缩CSS、JavaScript代码B.使用CSS精灵图减少HTTP请求C.增大图片尺寸提高清晰度D.使用CDN分发静态资源17.在SEO优化中，下列做法正确的是（）A.为所有图片添加alt属性描述内容B.堆砌关键词提高排名C.使用隐藏文本设置关键词D.完全使用JavaScript生成页面内容18.Grid布局中，用于定义行数和行高的属性是（）A.grid-template-columnsB.grid-template-rowsC.grid-gapD.grid-area19.当需要设置元素左右水平居中，该元素是块级元素且设置了固定宽度，下列写法正确的是（）A.margin:0autoB.text-align:centerC.align:centerD.padding:0auto20.下列关于HTML语义化的描述，错误的是（）A.语义化让页面结构更清晰，便于开发维护B.语义化有利于搜索引擎爬取，提升SEO效果C.语义化要求必须全部使用HTML5新增标签，不能使用divD.语义化方便无障碍设备（如屏幕阅读器）解析网页内容二、多项选择题（本大题共10小题，每小题3分，共30分）每小题列出的备选项中至少有两个是符合题目要求的，请将其正确选项代码填写在括号内，多选、少选、错选、不选均不得分。1.下列选项中，属于HTML块级元素的有（）A.<div>B.<p>C.<h2>D.<span>E.<ul>2.下列CSS定位属性值中，会使元素脱离正常文档流，不占据原有页面空间的有（）A.position:staticB.position:relativeC.position:absoluteD.position:fixedE.position:sticky3.下列选项中，属于JavaScript异步编程实现方式的有（）A.回调函数B.PromiseC.GeneratorD.async/awaitE.setTimeout4.下列技术方案中，能够解决浏览器跨域问题的有（）A.JSONPB.CORSC.反向代理D.防抖节流E.本地存储5.响应式网页设计中，常用的实现技术有（）A.媒体查询B.弹性栅格布局C.弹性图片D.固定像素布局E.rem相对单位6.网页设计中，属于站内SEO优化的操作有（）A.优化title、meta描述标签B.语义化HTML结构C.提升网页加载速度D.增加优质外链E.图片添加alt属性7.下列关于box-sizing属性的描述，正确的有（）A.box-sizing:content-box是标准W3C盒模型B.box-sizing:border-box的宽度包含content、padding、borderC.移动端开发中常使用box-sizing:border-box简化布局计算D.box-sizing属性不能继承E.通配符选择器设置*{box-sizing:border-box;}是常用的全局布局重置写法8.下列关于display:none和visibility:hidden的区别，描述正确的有（）A.display:none隐藏元素后不占据页面空间B.visibility:hidden隐藏元素后仍然占据原有空间C.display:none会触发重排，visibility:hidden只会触发重绘D.visibility:hidden隐藏的元素，其子元素设置visibility:visible可以正常显示E.两种隐藏方式都不会触发任何重排重绘9.下列关于Cookie、localStorage、sessionStorage的区别，描述正确的有（）A.Cookie每次都会携带在HTTP请求头中，会额外占用带宽B.localStorage和sessionStorage不会自动发送给服务器，仅在本地存储C.sessionStorage存储的数据在关闭浏览器后会被清除D.localStorage存储的数据除非主动删除，否则永久保存E.三者的最大存储容量都相同，都是4KB左右10.减少网页HTTP请求数量的性能优化方法有（）A.合并多个CSS、JavaScript文件B.使用CSS精灵图合并多张小图标C.采用图片懒加载技术D.使用base64编码嵌入小图片E.开启Gzip压缩三、判断题（本大题共10小题，每小题1分，共10分）正确的在括号内打√，错误的打×。1.HTML5中，<div>是无语义标签，任何情况下都不推荐使用。（）2.若父元素设置了overflow:hidden，子元素设置position:absolute，子元素一定会被父元素裁剪。（）3.JavaScript中，null的类型检测结果是object。（）4.同源策略要求协议、域名、端口三者必须全部相同，否则就会触发跨域限制。（）5.display:none和visibility:hidden的效果完全一致，都只是隐藏元素。（）6.响应式网页设计可以适配不同尺寸的设备，一套代码即可适配多端场景。（）7.CSS中，margin重叠问题只发生在垂直方向，水平方向不会发生margin重叠。（）8.事件委托的原理是事件冒泡，作用是减少事件绑定数量，提升页面性能。（）9.GET请求比POST请求更安全，GET请求不能提交大数据。（）10.SEO优化中，title标签的内容权重高于页面普通文本，所以需要准确填写页面标题。（）四、简答题（本大题共3小题，每小题6分，共18分）1.请简述什么是HTML语义化，以及语义化开发的优势。2.请简述什么是跨域问题，列举3种以上常见的跨域解决方案。3.请简述网页性能优化中，为什么要优化首屏加载速度，列举三种常用的首屏优化方法。五、综合应用题（本大题共1小题，共22分）需求：需要设计一个三栏响应式布局，左侧侧边栏宽度固定200px，右侧侧边栏宽度固定150px，中间内容区域自适应占满剩余宽度，要求：（1）写出两种不同的布局实现方案的核心HTML结构和CSS代码；（12分）（2）说明两种方案各自的优缺点；（6分）（3）说明如何适配移动端，在宽度小于768px时三栏改为垂直排列，各部分宽度100%；（4分）参考答案一、单项选择题（每小题2分，共40分）1.B2.A3.B4.B5.B6.C7.C8.C9.B10.A11.C12.C13.B14.B15.B16.C17.A18.B19.A20.C二、多项选择题（每小题3分，共30分）1.ABCE2.CD3.ABCDE4.ABC5.ABCE6.ABCE7.ABCE8.ABCD9.ABCD10.ABD三、判断题（每小题1分，共10分）1.×2.×3.√4.√5.×6.√7.√8.√9.×10.√四、简答题（每小题6分，共18分）1.参考答案：HTML语义化是指根据页面内容的业务语义，选择对应含义的HTML标签构建页面结构，让标签本身能够表达内容的逻辑含义，而非仅通过div、span等无语义标签实现样式展示。（2分）语义化开发的核心优势包括：（1）结构清晰可维护：语义化标签让页面层级和内容逻辑一目了然，降低开发团队的协作维护成本，提升代码可读性；（1分）（2）SEO友好：搜索引擎爬虫可以通过语义标签快速识别页面的核心内容和结构权重，更高效地爬取网页信息，提升网页在搜索引擎中的排名；（1分）（3）无障碍访问支持：屏幕阅读器、盲人阅读器等无障碍设备可以根据语义标签正确解析内容结构，为残障用户提供正常的访问体验；（1分）（4）兼容性更好：在CSS加载失败的极端场景下，语义化结构仍然可以清晰呈现页面的内容层级，保证用户可以正常阅读内容。（1分）2.参考答案：跨域问题是浏览器为了保证用户信息安全，实施同源策略产生的访问限制：当请求的目标资源和当前页面的协议、域名、端口任意一个不一致时，浏览器会禁止JavaScript代码跨域访问目标资源，包括接口请求、DOM操作、Cookie读取等操作，这个限制带来的问题就是跨域问题，其根本原因是浏览器的同源安全策略。（2分）常见的跨域解决方案：（1）JSONP：利用script、img等标签不受同源策略限制的特性，通过动态创建script标签，以回调函数的形式传递跨域数据，缺点是仅支持GET请求；（1分）（2）CORS：全称跨域资源共享，是W3C标准的跨域解决方案，通过服务器配置Access-Control-Allow-Origin等响应头，允许指定源的跨域请求，支持所有HTTP请求方法，是目前后端主导的主流跨域方案；（1分）（3）反向代理：通过Nginx等服务器配置代理规则，将跨域请求转发到目标服务器，前端请求同源地址，由服务器转发请求，规避浏览器的同源策略限制，常用于开发环境和生产环境的跨域处理；（1分）（4）postMessage：HTML5新增的API，专门用于不同源窗口、iframe之间的跨域通信，适合嵌入式页面的跨域交互场景。（1分，任意答对3种即可得满分）3.参考答案：首屏加载速度是指用户打开网页后，首屏可见区域内容完全渲染完成的时间。首屏是用户进入网页后第一时间接触的内容，用户对网页的第一体验完全由首屏加载速度决定，优化首屏加载速度可以有效降低用户跳出率，提升用户留存，同时搜索引擎也会将首屏加载速度作为排名参考指标，因此首屏优化是网页性能优化的核心目标。（2分）常见的首屏优化方法：（1）非首屏资源懒加载：将非首屏的图片、组件等资源延迟加载，减少首屏加载的资源体积和请求数量，加快首屏渲染速度；（1分）（2）代码分割与按需加载：将JavaScript代码按路由或模块拆分打包，只加载首屏需要的代码，非首屏代码在用户触发后再加载，减少首屏的JS体积；（1分）（3）内联首屏关键CSS：将首屏渲染用到的核心CSS代码直接内联到HTML文件中，避免首屏渲染等待外部CSS文件加载，减少渲染阻塞，同时减少首屏的回流重绘；（1分）（4）静态资源CDN分发：将首屏用到的图片、CSS、JS等静态资源部署到离用户地理位置更近的CDN节点，降低网络传输延迟，提升资源加载速度。（1分，任意答对三种即可得满分）五、综合应用题（共22分）参考答案：（1）两种实现方案的核心代码：方案一：Flex布局实现HTML结构：```html<divclass="container"><asideclass="left">左侧侧边栏</aside><mainclass="center">中间内容区</main><asideclass="right">右侧侧边栏</aside></div>```（2分）CSS核心代码：```css.container{display:flex;width:100%;}.left{width:200px;flex-shrink:0;/*禁止收缩，保持固定宽度*/}.center{flex:1;/*自适应占满剩余空间*/}.right{width:150px;flex-shrink:0;/*禁止收缩，保持固定宽度*/}```（4分，核心属性正确即可得分）方案二：Grid布局实现HTML结构：```html<divclass="container"><asideclass="left">左侧侧边栏</aside