2026年网页设计师初级工职业技能鉴定考试题库

2026年网页设计师初级工职业技能鉴定考试题库一、单项选择题（共50题，每题1分）1.在HTML5中，用于定义页面主要内容的语义化标签是（）。A.<section>B.<main>C.<article>D.<div>【答案】B【解析】<main>标签规定文档的主要内容。<main>元素的内容应当是独一无二的。一个文档中只能出现一个<main>标签。<section>用于定义文档中的节，<article>用于定义独立的文章，<div>是通用容器。2.下列CSS属性中，用于控制文本溢出时显示省略号（...）的组合是，除了设置overflow为hidden和white-space为nowrap外，还需要设置（）。A.text-overflow:ellipsis;B.text-overflow:clip;C.text-overflow:fade;D.text-decoration:line-through;【答案】A【解析】text-overflow属性规定当文本溢出包含元素时发生的事情。ellipsis值表示显示省略符号来代表被修剪的文本。3.在网页设计中，RGB颜色值(255,0,0)表示的颜色是（）。A.绿色B.蓝色C.红色D.白色【答案】C【解析】RGB模式中，R代表Red（红色），G代表Green（绿色），B代表Blue（蓝色）。数值范围0-255，255表示最大亮度。因此(255,0,0)为纯红色。4.下列HTML标签中，哪个用于创建无序列表？（）A.<ol>B.<ul>C.<li>D.<dl>【答案】B【解析】<ul>标签定义无序列表，<ol>定义有序列表，<li>定义列表项，<dl>定义定义列表。5.CSS中，ID选择器的符号是（）。A..B.#C.C.D.@【答案】B【解析】在CSS中，#用于ID选择器（例如#header），.用于类选择器（例如.content），是通配符选择器。【解析】在CSS中，#用于ID选择器（例如#header），.用于类选择器（例如.content），是通配符选择器。6.若要让一个块级元素在水平方向上居中，通常使用的方法是（）。A.text-align:center;B.vertical-align:middle;C.margin:0auto;D.padding:0auto;【答案】C【解析】对于块级元素，设置左右外边距为auto（margin:0auto）可以实现水平居中。text-align:center用于文本或行内元素的水平居中。7.在JavaScript中，用于输出信息到浏览器控制台的方法是（）。A.console.log()B.document.write()C.alert()D.print()【答案】A【解析】console.log()是标准的控制台调试输出方法。document.write()直接写入文档流，alert()弹出警告框，print()打印页面。8.下列哪个单位是相对于根元素字体大小的CSS单位？（）A.emB.remC.pxD.pt【答案】B【解析】rem是相对于根元素（html）字体大小的单位。em是相对于父元素字体大小的单位。px是像素，pt是磅。9.HTML5中，用于播放视频文件的标签是（）。A.<video>B.<audio>C.<media>D.<movie>【答案】A【解析】<video>标签用于嵌入视频内容，<audio>用于嵌入音频内容。10.CSS3中，用于创建圆角边框的属性是（）。A.border-radiusB.border-styleC.border-imageD.box-shadow【答案】A【解析】border-radius属性用于设置元素的外边框圆角。11.在HTTP协议中，表示请求成功的状态码是（）。A.404B.500C.200D.301【答案】C【解析】200OK表示请求成功。404NotFound表示资源未找到，500InternalServerError表示服务器内部错误，301MovedPermanently表示永久重定向。12.下列哪个不是JavaScript的基本数据类型？（）A.StringB.NumberC.BooleanD.Array【答案】D【解析】JavaScript的基本数据类型（原始类型）包括Undefined、Null、Boolean、Number、String、Symbol、BigInt。Array属于引用类型（对象）。13.网页图片格式中，支持透明背景且无损压缩的格式是（）。A.JPEGB.PNGC.GIFD.BMP【答案】B【解析】PNG是一种无损压缩的位图图形格式，支持Alpha通道透明度。JPEG不支持透明，GIF支持索引透明（只有全透或不透），BMP通常不压缩且文件大。14.CSS的盒模型中，位于内容与边框之间的是（）。A.MarginB.PaddingC.BorderD.Outline【答案】B【解析】CSS盒模型从内到外依次为：Content（内容）、Padding（内边距）、Border（边框）、Margin（外边距）。15.在HTML表单中，用于创建密码输入框的type属性值是（）。A.textB.passwordC.hiddenD.submit【答案】B【解析】type="password"创建一个密码字段，输入的字符会被掩码。16.下列CSS选择器中，优先级最高的是（）。A.元素选择器B.类选择器C.ID选择器D.通配符选择器【答案】C【解析】CSS选择器优先级（权重）：ID选择器(100)>类选择器/属性选择器/伪类(10)>元素选择器/伪元素(1)>通配符选择器(0)。内联样式优先级更高(1000)。17.在Flexbox布局中，用于定义主轴对齐方式的属性是（）。A.align-itemsB.justify-contentC.flex-directionD.flex-wrap【答案】B【解析】justify-content属性定义了项目在主轴上的对齐方式。align-items定义项目在交叉轴上的对齐方式。18.JavaScript中，声明一个常量的关键字是（）。A.varB.letC.constD.final【答案】C【解析】const用于声明一个只读的常量，一旦声明，常量的值就不能改变。var和let用于声明变量。19.下列哪个标签用于在HTML页面中引入外部CSS文件？（）A.<link>B.<script>C.<style>D.<css>【答案】A【解析】<link>标签定义文档与外部资源的关系，最常用于连接样式表。例如：<linkrel="stylesheet"href="style.css">。20.为了优化SEO（搜索引擎优化），网页中最重要的标签是（）。A.<meta>B.<title>C.<header>D.<footer>【答案】B【解析】<title>标签定义文档的标题，对于SEO和用户体验至关重要，它出现在浏览器标签页和搜索结果中。21.CSS中，设置元素背景图片的属性是（）。A.background-colorB.background-imageC.background-repeatD.background-position【答案】B【解析】background-image属性设置元素的背景图像。22.在JavaScript中，解析JSON字符串的方法是（）。A.JSON.stringify()B.JSON.parse()C.JSON.toString()D.JSON.toObject()【答案】B【解析】JSON.parse()用于将JSON字符串转换为JavaScript对象。JSON.stringify()用于将JavaScript对象转换为JSON字符串。23.HTML5中，用于规定文档中字符编码的meta标签写法正确的是（）。A.<metacharset="UTF-8">B.<metaencoding="UTF-8">C.<metahttp-equiv="charset"content="UTF-8">D.<metaname="charset"value="UTF-8">【答案】A【解析】HTML5中推荐使用<metacharset="UTF-8">来声明字符编码。24.下列哪个属性用于设置HTML元素的唯一标识？（）A.classB.idC.nameD.title【答案】B【解析】id属性规定HTML元素的唯一的标识。class用于规定元素的一个或多个类名。25.在CSS中，隐藏元素但不占用页面空间的方法是（）。A.display:none;B.visibility:hidden;C.opacity:0;D.z-index:-1;【答案】A【解析】display:none;元素不会被显示，且不占用空间。visibility:hidden;元素不可见但仍占用空间。opacity:0;元素透明但仍占用空间。26.下列哪个事件在用户点击鼠标时触发？（）A.onmouseoverB.onmouseoutC.onclickD.onchange【答案】C【解析】onclick事件在元素上发生鼠标点击时触发。27.CSS3中，实现2D变换（如旋转、缩放、位移）的属性是（）。A.transitionB.animationC.transformD.filter【答案】C【解析】transform属性向元素应用2D或3D转换。transition用于过渡效果，animation用于动画。28.在HTML表格中，用于合并单元格的属性是（）。A.colspan和rowspanB.merge和joinC.width和heightD.cell和span【答案】A【解析】colspan属性规定单元格可横跨的列数，rowspan属性规定单元格可横跨的行数。29.JavaScript中，用于获取元素ID的方法是（）。A.getElementByClassName()B.getElementById()C.querySelector()D.getElementsByTagName()【答案】B【解析】document.getElementById()返回对拥有指定ID的第一个对象的引用。querySelector()也可以，但getElementById是传统且专门针对ID的方法。30.下列哪个CSS属性用于设置字体大小？（）A.font-styleB.font-variantC.font-weightD.font-size【答案】D【解析】font-size属性设置字体大小。font-style设置字体样式（如斜体），font-weight设置字体粗细。31.响应式网页设计的核心概念是（）。A.使用固定宽度布局B.使用媒体查询C.禁止缩放D.使用表格布局【答案】B【解析】响应式设计使用媒体查询针对不同屏幕尺寸（桌面、平板、手机）应用不同的CSS样式。32.在HTML5中，用于定义页面导航链接的语义化标签是（）。A.<nav>B.<header>C.<footer>D.<aside>【答案】A【解析】<nav>标签定义导航链接的部分。33.CSS中，::before和::after被称为（）。A.伪类B.伪元素C.子元素选择器D.属性选择器【答案】B【解析】::before和::after是伪元素，用于在被选元素的内容前面或后面插入内容。34.下列哪个不是合法的CSS长度单位？（）A.vwB.vhC.vminD.vm【答案】D【解析】vw（视口宽度）、vh（视口高度）、vmin（视口宽高中较小的一个）是合法单位。vm不是标准CSS单位。35.JavaScript中，数组的哪个方法用于在数组末尾添加元素？（）A.pop()B.shift()C.push()D.unshift()【答案】C【解析】push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。pop()删除并返回最后一个元素。36.在CSS中，绝对定位（absolute）是相对于（）进行定位的。A.浏览器窗口B.父元素C.最近的已定位祖先元素D.文档根元素【答案】C【解析】absolute定位的元素是相对于最近的已定位（position非static）祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（通常是body）。37.HTML5引入了CanvasAPI，它主要用于（）。A.数据库连接B.2D图形绘制C.音频播放D.视频录制【答案】B【解析】<canvas>标签用于通过脚本（通常是JavaScript）绘制图形。38.下列哪个HTTP方法通常用于向服务器提交数据以创建新资源？（）A.GETB.POSTC.PUTD.DELETE【答案】B【解析】GET用于请求数据，POST用于提交数据，PUT用于更新数据，DELETE用于删除数据。39.CSS中，text-decoration属性设置为none的作用是（）。A.删除线B.下划线C.上划线D.无装饰（通常用于去除链接下划线）【答案】D【解析】text-decoration:none;规定文本修饰没有线条，常用于去除<a>标签默认的下划线。40.在JavaScript中，判断一个变量是否为数组的比较准确的方法是（）。A.typeofarr==='array'B.arrinstanceofArrayC.Array.isArray(arr)D.arr.type==='array'【答案】C【解析】Array.isArray()是确定一个值是否为数组的最准确方法。typeof返回'object'，instanceArray在跨iframe或框架时可能有问题。41.网页设计中，"F型布局"通常指的是（）。A.页脚在顶部B.页面主要内容的视觉浏览模式C.表单的排列方式D.一种错误的布局【答案】B【解析】F型布局描述了用户浏览网页时的视觉热区图，通常呈现为F形状，强调顶部和左侧的重要性。42.CSS3中，设置元素透明度的属性是（）。A.opacityB.filter:alpha(opacity=...)C.visibilityD.display【答案】A【解析】opacity属性设置元素的不透明级别，值从0（完全透明）到1（完全不透明）。43.下列哪个标签用于创建HTML表单？（）A.<input>B.<form>C.<table>D.<fieldset>【答案】B【解析】<form>标签用于创建供用户输入的HTML表单。44.在CSS中，清除浮动的方法不包括（）。A.clear:both;B.overflow:hidden;C.伪元素清除法D.display:block;【答案】D【解析】display:block;仅改变显示类型，不具备清除浮动的功能。clear:both;是最基本的方法，overflow:hidden;触发BFC清除浮动，伪元素法（.clearfix::after）是现代标准做法。45.JavaScript中，null和undefined的关系是（）。A.null==undefined结果为trueB.null===undefined结果为trueC.null和undefined完全一样D.null是对象，undefined是数字【答案】A【解析】在JavaScript中，null==undefined返回true（值相等），但null===undefined返回false（类型不同）。46.下列哪个属性用于设置文本的首行缩进？（）A.text-indentB.letter-spacingC.word-spacingD.line-height【答案】A【解析】text-indent属性规定文本块中首行文本的缩进。47.在HTML5中，哪个属性用于<input>标签以实现输入必填验证？（）A.requiredB.validateC.mandatoryD.check【答案】A【解析】required属性规定必须在提交之前填写输入字段。48.CSS中，z-index属性只有在元素的position属性设置为（）时才有效。A.staticB.relative,absolute,fixedC.blockD.inline【答案】B【解析】z-index属性设置元素的堆叠顺序，仅当元素被定位（即position属性非static，如relative,absolute,fixed,sticky）时才生效。49.下列哪个工具常用于前端代码的版本控制？（）A.PhotoshopB.GitC.VSCodeD.Chrome【答案】B【解析】Git是目前世界上最先进的分布式版本控制系统。50.网页设计中，WCAG是指（）。A.WebContentAccessibilityGuidelinesB.WebComputerApplicationGraphicsC.WorldWideWebConsortiumD.WebColorAndGraphics【答案】A【解析】WCAG（Web内容无障碍指南）是制定Web内容无障碍标准的一系列指南。二、多项选择题（共20题，每题2分）1.下列哪些是HTML5新增的语义化标签？（）A.<header>B.<footer>C.<nav>D.<span>【答案】ABC【解析】<header>,<footer>,<nav>是HTML5新增的语义化标签。<span>在HTML4中就已存在。2.CSS中，关于盒模型的说法正确的有（）。A.标准盒模型中，width包含contentB.IE盒模型中，width包含content,padding,borderC.box-sizing属性可以切换盒模型D.margin不属于盒模型的一部分【答案】BC【解析】标准盒模型width仅包含content。IE（怪异）盒模型width包含content+padding+border。box-sizing:border-box切换到IE盒模型。margin是盒模型的一部分（最外层）。3.下列哪些是JavaScript的数据类型？（）A.ObjectB.FunctionC.UndefinedD.Symbol【答案】ABCD【解析】JavaScript包含Object、Function等引用类型，以及Undefined、Symbol等原始类型。4.常见的图片格式有哪些？（）A.JPGB.PNGC.SVGD.WEBP【答案】ABCD【解析】JPG/PNG/SVG/WEBP都是现代网页常用的图片格式。5.下列哪些CSS属性属于CSS3新增特性？（）A.box-shadowB.text-shadowC.border-radiusD.background-color【答案】ABC【解析】box-shadow,text-shadow,border-radius是CSS3新增的。background-color在CSS1/CSS2中就存在。6.在JavaScript中，下列关于事件循环的说法正确的是？（）A.JS是单线程的B.同步任务在主线程执行C.异步任务进入任务队列D.所有任务都同时执行【答案】ABC【解析】JavaScript是单线程语言。同步任务在主线程上排队执行，异步任务不进入主线程，而是进入"任务队列"，只有主线程空了，才会去读取任务队列。7.下列哪些方法可以改变函数内部this的指向？（）A.call()B.apply()C.bind()D.change()【答案】ABC【解析】call、apply、bind是Function原型上的方法，用于改变函数执行时的上下文。8.下列哪些是合法的CSS选择器？（）A..class>pB.div+pC.input[type="text"]D.:hover【答案】ABCD【解析】这些都是合法的CSS选择器，分别代表子选择器、相邻兄弟选择器、属性选择器、伪类选择器。9.网页性能优化的手段包括？（）A.压缩CSS和JS文件B.使用CDN加速C.优化图片大小D.减少HTTP请求【答案】ABCD【解析】压缩资源、CDN、图片优化、合并文件减少请求都是常见的前端性能优化手段。10.HTML表单中，input的type类型有哪些？（）A.emailB.dateC.rangeD.color【答案】ABCD【解析】HTML5为input新增了多种类型，包括email,date,range,color等。11.下列哪些浏览器内核是正确的？（）A.Trident(IE)B.Gecko(Firefox)C.Webkit(Safari,Chrome旧版)D.Blink(Chrome,Edge)【答案】ABCD【解析】Trident是IE内核，Gecko是Firefox内核，Webkit是Safari内核，Blink是Chrome和Edge（新版）内核。12.CSS中，实现元素水平垂直居中的方法有？（）A.Flexbox布局B.Grid布局C.绝对定位+transformD.绝对定位+margin负值【答案】ABCD【解析】现代布局Flex和Grid最方便；传统布局可以使用absolute+translate(-50%,-50%)或者absolute+margin计算。13.下列哪些是HTTP请求头？（）A.User-AgentB.Content-TypeC.AcceptD.Cookie【答案】ABCD【解析】这些都是常见的HTTP请求头字段。14.JavaScript中，数组的遍历方法有？（）A.for循环B.forEach()C.map()D.for...of【答案】ABCD【解析】for,forEach,map,for...of都可以用来遍历数组。15.下列哪些是CSS中的定位方式？（）A.staticB.relativeC.absoluteD.fixed【答案】ABCD【解析】CSSposition属性值包括static,relative,absolute,fixed,sticky。16.HTML5的本地存储方案包括？（）A.CookieB.localStorageC.sessionStorageD.IndexedDB【答案】BCD【解析】Cookie虽然用于存储，但不是HTML5特指的本地存储方案（它是旧有的）。HTML5引入了localStorage,sessionStorage和IndexedDB。17.下列哪些是前端开发常用的构建工具？（）A.WebpackB.ViteC.GulpD.npm【答案】ABC【解析】Webpack,Vite,Gulp是构建工具。npm是包管理器。18.关于HTML的DOCTYPE声明，说法正确的有？（）A.必须位于HTML文档的第一行B.告诉浏览器使用哪种HTML版本解析C.HTML5中可以省略D.大小写敏感【答案】AB【解析】DOCTYPE声明必须位于第一行，用于告知浏览器文档类型。虽然浏览器容错性强，不写也能显示，但标准写法不应省略。HTML5的<!DOCTYPEhtml>是不区分大小写的，但通常大写。19.CSS中，关于过渡的属性有？（）A.transition-propertyB.transition-durationC.transition-timing-functionD.transition-delay【答案】ABCD【解析】这四个属性分别对应过渡的属性名、持续时间、时间曲线、延迟时间。20.下列哪些标签属于行内元素？（）A.<span>B.<a>C.<img>D.<div>【答案】ABC【解析】<span>,<a>,<img>是行内元素（<img>是替换元素，表现类似行内块）。<div>是块级元素。三、判断题（共20题，每题1分）1.HTML标签必须成对出现，例如<p>必须对应</p>。（）【答案】错误【解析】部分标签是自闭合标签，如,<img>,<input>,<hr>等，不需要结束标签。2.CSS中的z-index值越大，元素在层级上越靠上。（）【答案】正确【解析】z-index设置堆叠顺序，值越高，层级越高。3.JavaScript可以在服务器端运行（如Node.js）。（）【答案】正确【解析】JavaScript不仅可以在浏览器运行，通过Node.js等环境也可以在服务器端运行。4.<a>标签的href属性留空（href=""），点击后会刷新当前页面。（）【答案】正确【解析】href=""指向当前页面URL，点击会导致页面跳转到自身，即刷新。5.在CSS中，注释的写法是//。（）【答案】错误【解析】CSS注释是/.../。//是JavaScript或CSS预处理（如Sass/Less）中的单行注释。【解析】CSS注释是/.../。//是JavaScript或CSS预处理（如Sass/Less）中的单行注释。6.rem单位是相对于父元素字体大小的。（）【答案】错误【解析】rem是相对于根元素字体大小的，em才是相对于父元素字体大小的。7.HTML5中，<table>标签不再用于网页布局。（）【答案】正确【解析】Web标准推荐使用CSS进行布局，表格仅用于展示表格数据。8.display:flex;会将父元素变为块级元素。（）【答案】正确【解析】在大多数浏览器实现中，display:flex的容器表现为block级别的盒子（类似display:block）。9.JavaScript是Java的脚本版本。（）【答案】错误【解析】JavaScript和Java在语言层面上没有关系，只是名字相似，设计理念不同。10.border-collapse:collapse;用于合并表格边框。（）【答案】正确【解析】该属性规定是否合并表格边框，collapse表示合并。11.所有的HTML元素都可以拥有子元素。（）【答案】错误【解析】空元素（Voidelements）如<img>,<input>不能有子元素。12.CSS的权重（优先级）是可以叠加的。（）【答案】正确【解析】复杂选择器的权重是各部分权重的叠加。13.语义化HTML有利于SEO和无障碍阅读。（）【答案】正确【解析】语义化标签让结构更清晰，搜索引擎更容易理解内容，屏幕阅读器也能更好地解析。14.在移动端开发中，通常使用click事件来处理点击交互。（）【答案】错误【解析】移动端通常推荐使用touchstart或tap事件，click事件在移动端有约300ms的延迟。15.伪类:hover只能用于链接标签。（）【答案】错误【解析】:hover可以应用于任何可交互的元素。16.background-position:centercenter;表示背景图在水平和垂直方向都居中。（）【答案】正确【解析】该设置将背景图定位在元素的中心点。17.JSON格式的数据必须使用双引号包裹键名。（）【答案】正确【解析】标准JSON格式要求键名必须使用双引号，不能使用单引号。18.GET请求比POST请求更安全。（）【答案】错误【解析】GET请求参数在URL中，会被保存在浏览器历史和服务器日志中，相对不安全。POST参数在Body中，相对安全。19.媒体查询@media是CSS3引入的。（）【答案】正确【解析】@media是CSS3新增的模块，用于响应式设计。20.opacity:0;和visibility:hidden;效果完全一样。（）【答案】错误【解析】opacity:0的元素不可见但占据空间且可响应事件；visibility:hidden的元素不可见且占据空间但不响应事件。四、填空题（共15题，每题2分）1.HTML文档的根元素是\_\_\_\_\_\_\_\_。【答案】html【解析】<html>标签是HTML文档的根元素。2.CSS中，\_\_\_\_\_\_\_\_属性用于设置文本的颜色。【答案】color【解析】color属性控制文本前景色。3.在JavaScript中，定义一个变量的关键字（ES6推荐）是\_\_\_\_\_\_\_\_。【答案】let【解析】let是ES6引入的声明变量的关键字，具有块级作用域。4.HTML中，\_\_\_\_\_\_\_\_标签用于定义文档中的段落。【答案】p【解析】<p>标签定义段落。5.CSS选择器#nav.item表示选中id为nav的元素内部class为item的\_\_\_\_\_\_\_\_元素。【答案】后代【解析】空格表示后代选择器。6.\_\_\_\_\_\_\_\_协议是超文本传输协议，用于在Web浏览器和服务器之间传输数据。【答案】HTTP【解析】HTTP（HyperTextTransferProtocol）。7.Flex布局中，\_\_\_\_\_\_\_\_属性用于设置主轴的方向（如水平或垂直）。【答案】flex-direction【解析】flex-direction决定主轴的方向。8.JavaScript中，\_\_\_\_\_\_\_\_函数用于将JSON对象转换为字符串。【答案】JSON.stringify【解析】JSON.stringify()用于序列化对象。9.CSS中，\_\_\_\_\_\_\_\_属性用于设置元素的背景颜色。【答案】background-color【解析】background-color设置背景色。10.HTML表单中，\_\_\_\_\_\_\_\_属性用于规定input元素的名称，用于后端获取数据。【答案】name【解析】name属性是表单提交时的键名。11.在CSS盒模型中，\_\_\_\_\_\_\_\_是位于内容和边框之间的区域。【答案】padding【解析】padding是内边距。12.网页的图标通常通过<link>标签在head中引入，其rel属性值为\_\_\_\_\_\_\_\_。【答案】icon【解析】<linkrel="icon"href="favicon.ico">。13.JavaScript中，\_\_\_\_\_\_\_\_对象是浏览器的窗口对象，是全局对象的顶层。【答案】window【解析】window对象表示浏览器窗口。14.CSS中，\_\_\_\_\_\_\_\_属性用于设置字体是否加粗。【答案】font-weight【解析】font-weight控制字体粗细。15.\_\_\_\_\_\_\_\_是一种基于对象的轻量级数据交换格式。【答案】JSON【解析】JSON(JavaScriptObjectNotation)。五、简答题（共5题，每题5分）1.请简述GET和POST请求的区别。【答案】(1)作用不同：GET用于获取资源，POST用于提交/处理数据。(2)参数位置不同：GET参数拼接在URL后面，POST参数放在RequestBody中。(3)安全性不同：GET参数可见于URL和浏览器历史，安全性较低；POST相对安全。(4)数据量限制不同：GET有URL长度限制（通常2KB-8KB），POST没有限制。(5)缓存机制不同：GET请求可以被浏览器缓存，POST默认不被缓存。2.请解释CSS中盒模型的组成部分，并说明标准盒模型与IE盒模型的区别。【答案】CSS盒模型由内到外包括：Content（内容）、Padding（内边距）、Border（边框）、Margin（外边距）。区别：(1)标准盒模型：width/height仅包含Content部分。元素总宽度=width+padding+border。(2)IE盒模型（怪异模式）：width/height包含Content、Padding和Border部分。元素总宽度=width。(3)通过CSS属性`box-sizing:content-box`（标准）或`box-sizing:border-box`（IE）可以切换。3.什么是语义化HTML？使用语义化标签有什么好处？【答案】语义化HTML是指使用恰当的HTML标签（如<header>,<nav>,<article>等）来描述内容的结构和含义，而不是仅仅使用<div>。好处：(1)代码可读性高，便于团队开发和维护。(2)有利于SEO（搜索引擎优化），搜索引擎爬虫能更好地理解页面结构。(3)有利于无障碍访问，屏幕阅读器能根据语义标签为视障用户提供更好的导航。(4)样式与结构分离，便于后期修改样式。4.简述JavaScript中null和undefined的区别。【答案】(1)含义不同：undefined表示变量已声明但未赋值；null表示一个空的对象指针，表示“无值”。(2)类型不同：typeofundefined返回'undefined'；typeofnull返回'object'。(3)转换数值不同：Number(undefined)转换为NaN；Number(null)转换为0。(4)使用场景：undefined通常由JS引擎自动产生；null通常由程序员主动赋值表示清空对象。5.请列举至少三种CSS隐藏元素的方法，并说明其区别。【答案】(1)display:none;元素从渲染树中消失，不占据空间，不响应事件。(2)visibility:hidden;元素不可见，但仍在渲染树中，占据空间，不响应事件。(3)opacity:0;元素完全透明，占据空间，且可以响应点击等事件。(4)position:absolute;left:-9999px;将元素移出屏幕可视区域，占据空间（视具体布局），不响应可视区域事件。六、实操应用题（共3题，每题10分）1.请使用HTML和CSS编写一个简单的导航栏，要求包含三个链接（首页、新闻、关于），并在鼠标悬停时改变背景颜色为#f00，文字颜色为#fff。使用Flexbox实现水平排列。【答案】HTML代码：```html<navclass="navbar"><ahref="#"class="nav-item">首页</a><ahref="#"class="nav-item">新闻</a><ahref="#"class="nav-item">关于</a></nav>```CSS代码：```css.navbar{display:flex;/使用Flexbox/display:flex;/使用Flexbox/background-color:#333;/导航栏背景/background-color:#333;/导航栏背景/}.nav-item{color:#fff;/默认文字颜色/color:#fff;/默认文字颜色/padding:15px20px;/内边距/padding:15px20px;/内边距/text-decoration:none;/去除下划线/text-decoration:none;/去除下划线/transition:background-color0.3s;/过渡效果/transition:background-color0.3s;/过渡效果/}.nav-item:hover{background-color:#f00;/悬停背景色/background-color:#f00;/悬停背景色/color:#fff;/悬停文字颜色/color:#fff;/悬停文字颜色/}```2.编写一段JavaScript代码，实现点击按钮时，获取id为"demo"的段落标签的内容，并将其内容修改为当前