全國(guó)計(jì)算機(jī)等級(jí)考試二級(jí)2025年網(wǎng)頁(yè)設(shè)計(jì)試卷考試時(shí)間：______分鐘總分：______分姓名：______第一部分選擇題（共50題，每題1分，共50分）1.下列哪個(gè)HTML5元素用于定義文檔的標(biāo)題？A.`<header>`B.`<section>`C.`<h1>`D.`<article>`2.在HTML中，`<a>`標(biāo)簽的哪個(gè)屬性用于指定鏈接的目標(biāo)頁(yè)面？A.`type`B.`href`C.`name`D.`title`3.下列哪個(gè)CSS屬性用于設(shè)置元素的垂直外邊距？A.`margin-top`B.`padding`C.`border-width`D.`outline`4.CSS選擇器`.class`表示選擇具有哪個(gè)屬性的元素？A.id為"class"B.class為"class"C.name為"class"D.title為"class"5.`position:relative;`屬性會(huì)讓元素相對(duì)于其什么位置進(jìn)行定位？A.頁(yè)面視口B.文檔流中的正常位置C.父元素D.子元素6.CSS的盒模型中，哪個(gè)部分是元素內(nèi)容與邊框之間的空間？A.MarginB.BorderC.PaddingD.Content7.下列哪個(gè)CSS屬性用于改變文本的字體大??？A.`text-align`B.`font-size`C.`line-height`D.`letter-spacing`8.CSS中，`display:inline;`屬性會(huì)使得元素如何顯示？A.獨(dú)占一行B.不換行，與其他元素在同一行C.作為塊級(jí)元素D.作為內(nèi)聯(lián)塊元素9.下列哪個(gè)CSS選擇器具有最高的優(yōu)先級(jí)？A.類選擇器`.class`B.ID選擇器`#id`C.元素選擇器`div`D.屬性選擇器`[attribute]`10.CSS中，`float:left;`屬性會(huì)使得元素向哪個(gè)方向浮動(dòng)？A.右B.左C.上D.下11.下列哪個(gè)HTML5標(biāo)簽用于定義頁(yè)面的頁(yè)腳部分？A.`<footer>`B.`<header>`C.`<nav>`D.`<aside>`12.在HTML表單中，用于收集用戶電子郵件地址的輸入類型是？A.`text`B.`password`C.`email`D.`number`13.CSS中，`flex:1;`的含義是？A.元素寬度為1pxB.元素高度為1pxC.元素在Flex容器中應(yīng)占可用空間的比例為1（與其他flex子項(xiàng)平均分配）D.元素寬度為父容器寬度的1倍14.下列哪個(gè)CSS屬性用于設(shè)置元素的外邊距？A.`padding`B.`border`C.`margin`D.`spacing`15.CSSGrid布局中，`grid-template-columns:1fr2fr1fr;`表示定義了幾個(gè)列？A.1個(gè)B.2個(gè)C.3個(gè)D.4個(gè)16.下列哪個(gè)HTML屬性用于為元素添加描述性信息？A.`style`B.`title`C.`class`D.`id`17.CSS中，`visibility:hidden;`與`display:none;`的主要區(qū)別是？A.`visibility:hidden;`不會(huì)影響文檔流，而`display:none;`會(huì)B.`visibility:hidden;`會(huì)影響文檔流，而`display:none;`不會(huì)C.兩者沒有區(qū)別D.`visibility:hidden;`只能用于圖片，而`display:none;`用于所有元素18.下列哪個(gè)CSS屬性用于設(shè)置元素的內(nèi)邊距？A.`margin`B.`border`C.`padding`D.`spacing`19.在HTML中，`<ul>`標(biāo)簽通常用于創(chuàng)建什么？A.有序列表B.無(wú)序列表C.描述列表D.定義列表20.CSS中，`z-index`屬性用于控制哪個(gè)方面的特性？A.元素的透明度B.元素的可見性C.元素在三維空間中的堆疊順序D.元素的動(dòng)畫效果21.下列哪個(gè)HTML5元素用于定義頁(yè)面的主要內(nèi)容區(qū)域？A.`<header>`B.`<footer>`C.`<article>`D.`<main>`22.CSS選擇器`div#id.class`表示選擇哪個(gè)元素？A.id為"id"，class為"class"的div元素B.class為"class"，id為"id"的div元素C.id為"id"，class為"class"的任何元素D.div元素，其id為"id"，class為"class"23.下列哪個(gè)CSS屬性用于設(shè)置元素的最大寬度？A.`max-width`B.`min-width`C.`max-height`D.`min-height`24.HTML中，`<img>`標(biāo)簽的哪個(gè)屬性用于指定圖片的來源？A.`src`B.`alt`C.`width`D.`height`25.CSS中，`position:absolute;`屬性會(huì)讓元素相對(duì)于哪個(gè)位置進(jìn)行定位？A.頁(yè)面視口B.文檔流中的正常位置C.父元素D.子元素26.下列哪個(gè)HTML5元素用于定義導(dǎo)航鏈接的區(qū)域？A.`<nav>`B.`<header>`C.`<section>`D.`<aside>`27.CSS中，`font-family`屬性用于設(shè)置什么？A.元素的背景顏色B.元素的文本顏色C.元素的字體D.元素的邊框樣式28.下列哪個(gè)CSS布局技術(shù)最適合創(chuàng)建復(fù)雜的網(wǎng)格結(jié)構(gòu)布局？A.FlexboxB.FloatC.PositioningD.CSSGrid29.在HTML表單中，`<inputtype="checkbox">`表示什么？A.單行文本輸入框B.密碼輸入框C.復(fù)選框D.下拉列表框30.CSS中，`text-align:center;`屬性用于設(shè)置什么？A.元素的水平對(duì)齊方式B.元素的垂直對(duì)齊方式C.文本的水平對(duì)齊方式D.文本的垂直對(duì)齊方式31.下列哪個(gè)HTML屬性用于指定元素的樣式信息？A.`style`B.`class`C.`id`D.`title`32.CSS中，`flex-grow`屬性用于設(shè)置Flex項(xiàng)在空間不足時(shí)如何擴(kuò)展？A.不擴(kuò)展B.等比例擴(kuò)展C.按指定比例擴(kuò)展D.立即擴(kuò)展到填滿容器33.下列哪個(gè)CSS屬性用于設(shè)置元素的背景顏色？A.`background-color`B.`background-image`C.`background-position`D.`background-repeat`34.在HTML中，`<p>`標(biāo)簽通常用于定義什么？A.標(biāo)題B.段落C.列表項(xiàng)D.表單輸入35.CSS中，`grid-template-rows:auto100px;`表示定義了幾個(gè)行？A.1個(gè)B.2個(gè)C.3個(gè)D.4個(gè)36.下列哪個(gè)HTML5元素用于定義獨(dú)立的文章內(nèi)容？A.`<article>`B.`<section>`C.`<aside>`D.`<nav>`37.CSS選擇器`*`表示選擇什么？A.所有元素B.特定類名的元素C.特定ID的元素D.特定類型的元素38.下列哪個(gè)CSS屬性用于設(shè)置元素的不透明度？A.`opacity`B.`visibility`C.`transparent`D.`alpha`39.HTML中，`<table>`,`<tr>`,`<th>`,`<td>`標(biāo)簽分別用于定義什么？A.表格，行，表頭單元格，數(shù)據(jù)單元格B.表格，表格，表頭單元格，數(shù)據(jù)單元格C.表格，行，表格，數(shù)據(jù)單元格D.表格，行，表頭，表格40.CSS中，`clear:both;`屬性用于什么目的？A.清除元素的上外邊距B.清除元素的下滑動(dòng)條C.清除浮動(dòng)，允許后續(xù)元素不被浮動(dòng)元素影響（通常清除左右兩側(cè)浮動(dòng)）D.清除元素的內(nèi)邊距41.下列哪個(gè)HTML屬性用于指定圖像的替代文本？A.`src`B.`alt`C.`title`D.`desc`42.CSS中，`flex-shrink`屬性用于設(shè)置Flex項(xiàng)在空間不足時(shí)如何收縮？A.不收縮B.等比例收縮C.按指定比例收縮D.立即收縮到最小43.下列哪個(gè)CSS屬性用于設(shè)置元素的外邊框樣式？A.`border-style`B.`border-color`C.`border-width`D.`border`44.在HTML中，`<blockquote>`標(biāo)簽通常用于什么？A.引用塊級(jí)內(nèi)容B.創(chuàng)建水平線C.插入圖片D.定義標(biāo)題45.CSS中，`@media`規(guī)則用于實(shí)現(xiàn)什么功能？A.設(shè)置動(dòng)畫效果B.重置瀏覽器默認(rèn)樣式C.媒體查詢，根據(jù)不同設(shè)備或條件應(yīng)用不同的樣式D.定義變量46.下列哪個(gè)HTML5元素用于定義頁(yè)面中的側(cè)邊欄內(nèi)容？A.`<aside>`B.`<nav>`C.`<article>`D.`<main>`47.CSS選擇器`input[type="text"]`表示選擇哪種類型的輸入元素？A.所有`<input>`元素B.所有`<input>`元素C.類型為`text`的`<input>`元素D.ID為`text`的`<input>`元素48.下列哪個(gè)不是CSS盒模型的組成部分？A.ContentB.MarginC.PaddingD.Element49.HTML中，`<aname="anchor">`與`<ahref="#anchor">`配合使用可以實(shí)現(xiàn)什么功能？A.創(chuàng)建超鏈接B.創(chuàng)建錨點(diǎn)，用于頁(yè)面內(nèi)跳轉(zhuǎn)C.插入圖片D.定義表格行50.CSS中，`inherit`關(guān)鍵字用于什么目的？A.設(shè)置為默認(rèn)值B.重置為瀏覽器默認(rèn)樣式C.繼承父元素的該屬性值D.顯式地不設(shè)置該屬性第二部分操作題（共2題，每題50分，共100分）操作題一：根據(jù)以下要求，編寫HTML和CSS代碼。1.創(chuàng)建一個(gè)HTML頁(yè)面，包含`<html>`,`<head>`,`<body>`標(biāo)簽。2.在`<head>`標(biāo)簽中，設(shè)置頁(yè)面標(biāo)題為“我的個(gè)人網(wǎng)頁(yè)”。3.在`<body>`標(biāo)簽中：*創(chuàng)建一個(gè)`<header>`元素，包含一個(gè)`<h1>`標(biāo)題“歡迎來到我的網(wǎng)頁(yè)”，和一個(gè)包含“關(guān)于我”、“技能”、“聯(lián)系”三個(gè)鏈接的導(dǎo)航欄（使用`<nav>`元素和`<a>`標(biāo)簽）。*創(chuàng)建一個(gè)`<main>`元素，包含一個(gè)`<section>`元素，該`<section>`包含一個(gè)二級(jí)標(biāo)題`<h2>`“關(guān)于我”，以及一段描述性文字。*創(chuàng)建一個(gè)`<footer>`元素，包含版權(quán)信息（例如：`©2025`）。樣式要求：*整體頁(yè)面布局使用Flexbox。*`header`高度為100px，背景色為淺藍(lán)色。*`nav`內(nèi)部鏈接（`a`標(biāo)簽）水平居中，間隔20px，默認(rèn)顏色為黑色，懸停（hover）時(shí)顏色變?yōu)榧t色。*`main`元素占據(jù)除`header`和`footer`外的剩余空間。*`section`元素有圓角（radius:10px），內(nèi)邊距（padding:20px），背景色為淺灰色。*`footer`高度為50px，背景色為深灰色，文字顏色為白色，水平居中。操作題二：假設(shè)有以下HTML代碼片段：```html<divclass="container"><divclass="boxbox-1">內(nèi)容A</div><divclass="boxbox-2">內(nèi)容B</div><divclass="boxbox-3">內(nèi)容C</div></div>```以及相應(yīng)的CSS代碼片段：```css.container{display:flex;flex-wrap:wrap;margin:-10px;}.box{flex:11200px;/*flex-grow,flex-shrink,flex-basis*/padding:10px;margin:10px;border:1pxsolid#ccc;box-sizing:border-box;}.box-1{background-color:#ffcccc;}.box-2{background-color:#ccffcc;}```要求：修改上述CSS代碼，達(dá)到以下效果：1.`.container`容器內(nèi)部的`.box`元素（內(nèi)容A、B、C）應(yīng)水平排列，每行最多放置兩個(gè)`.box`。2.將`.box-1`的背景顏色改為淺黃色，并將它的`flex-basis`設(shè)置為`150px`。3.將`.box-2`的`flex-grow`設(shè)置為`2`，使其在空間充足時(shí)占據(jù)更多空間。4.將`.box-3`的`flex-shrink`設(shè)置為`0`，使其在空間不足時(shí)不會(huì)收縮。試卷答案第一部分選擇題（共50題，每題1分，共50分）1.C解析：`<h1>`到`<h6>`標(biāo)簽用于定義標(biāo)題，`<h1>`是最高級(jí)別。`<header>`通常包含頁(yè)眉內(nèi)容，`<section>`和`<article>`定義語(yǔ)義區(qū)塊，`<aside>`定義側(cè)邊欄。2.B解析：`<a>`標(biāo)簽的`href`屬性（HypertextReference）指定鏈接的目標(biāo)URL。3.C解析：`margin`屬性有四個(gè)方向值，`margin-top`特指頂部外邊距。`padding`是內(nèi)邊距，`border-width`是邊框?qū)挾?，`outline`是輪廓線。4.B解析：CSS類選擇器以`.`開頭，用于選擇類名為指定值的元素。5.C解析：`position:relative;`將元素相對(duì)于其正常文檔流位置進(jìn)行定位，偏移量由`top`,`right`,`bottom`,`left`屬性決定。6.D解析：CSS盒模型包括`Content`（內(nèi)容）、`Padding`（內(nèi)邊距）、`Border`（邊框）、`Margin`（外邊距）。`Padding`是內(nèi)容與邊框之間的空間。7.B解析：`font-size`屬性用于設(shè)置字體大小。`text-align`是文本對(duì)齊，`line-height`是行高，`letter-spacing`是字符間距。8.B解析：`display:inline;`使元素inline-block顯示，不獨(dú)占一行，參與行內(nèi)布局，但可以設(shè)置寬高。9.B解析：CSS選擇器優(yōu)先級(jí)：ID>行內(nèi)樣式>類>元素>通配符。ID選擇器優(yōu)先級(jí)最高。10.B解析：`float:left;`使元素向左浮動(dòng)。11.A解析：`<footer>`標(biāo)簽用于定義頁(yè)面或區(qū)域的頁(yè)腳。12.C解析：`<inputtype="email">`用于創(chuàng)建電子郵件輸入字段，瀏覽器會(huì)進(jìn)行基本格式驗(yàn)證。13.C解析：`flex`屬性是簡(jiǎn)寫，`flex-grow`、`flex-shrink`、`flex-basis`的簡(jiǎn)寫，`flex:1;`表示`flex-grow:1`，在容器空間不足時(shí)，該元素會(huì)按比例擴(kuò)展以填充空間。14.C解析：`margin`屬性用于設(shè)置元素的外邊距。15.C解析：`grid-template-columns:1fr2fr1fr;`定義了三列，分別占可用空間的比例為1、2、1。16.B解析：`title`屬性為元素提供額外的信息，通常在鼠標(biāo)懸停時(shí)顯示為工具提示。17.A解析：`visibility:hidden;`只改變?cè)氐目梢娦裕桓淖兤湓谖臋n流中的占位，元素仍占據(jù)空間。`display:none;`則完全從文檔流中移除元素，不占據(jù)空間。18.C解析：`padding`屬性用于設(shè)置元素的內(nèi)邊距。19.B解析：`<ul>`(UnorderedList)用于創(chuàng)建無(wú)序列表，列表項(xiàng)由`<li>`標(biāo)簽定義。20.C解析：`z-index`屬性指定元素在垂直堆疊順序中的層級(jí)，數(shù)值越大越靠前。21.D解析：`<main>`標(biāo)簽表示文檔中或頁(yè)面中的主要內(nèi)容，應(yīng)該是獨(dú)特的、可以獨(dú)立于頁(yè)面其他部分被復(fù)用的內(nèi)容。22.A解析：CSS選擇器從右到左解析，`#id`優(yōu)先級(jí)最高，其次是`.class`，最后是元素選擇器。`div#id.class`選擇ID為"id"，類名為"class"的div元素。23.A解析：`max-width`屬性用于設(shè)置元素的最大寬度。24.A解析：`<img>`標(biāo)簽的`src`屬性（Source）指定圖像文件的路徑。25.A解析：`position:absolute;`使元素相對(duì)于其最近的已定位父元素（非static）或初始包含塊（如視口）進(jìn)行定位。26.A解析：`<nav>`標(biāo)簽用于定義頁(yè)面內(nèi)的導(dǎo)航鏈接區(qū)域。27.C解析：`font-family`屬性用于指定元素的字體。28.D解析：CSSGrid是專門為二維布局設(shè)計(jì)的，最適合創(chuàng)建復(fù)雜的網(wǎng)格結(jié)構(gòu)。29.C解析：`<inputtype="checkbox">`創(chuàng)建一個(gè)復(fù)選框。30.C解析：`text-align`屬性用于設(shè)置行內(nèi)內(nèi)容或塊級(jí)元素內(nèi)的文本水平對(duì)齊方式。31.A解析：`style`屬性直接在HTML元素上添加內(nèi)聯(lián)CSS樣式。32.C解析：`flex-grow`屬性指定Flex項(xiàng)在父元素有剩余空間時(shí)，可以按此比例擴(kuò)展其`flex-basis`大小。33.A解析：`background-color`屬性用于設(shè)置元素的背景顏色。34.B解析：`<p>`(Paragraph)標(biāo)簽用于定義段落。35.B解析：`grid-template-rows`屬性定義Grid布局的行大小，`auto`和具體值（如`100px`）組合表示定義了多行。36.A解析：`<article>`標(biāo)簽表示頁(yè)面中獨(dú)立的內(nèi)容，可以是博客帖子、新聞評(píng)論、論壇帖子等。37.A解析：CSS選擇器`*`是通配符選擇器，匹配頁(yè)面上的所有元素。38.A解析：`opacity`屬性用于設(shè)置元素的透明度（0-1，0完全透明，1完全不透明）。39.A解析：`<table>`是表格，`<tr>`是表格行，`<th>`是表頭單元格，`<td>`是數(shù)據(jù)單元格。40.C解析：`clear:both;`通常用于清除左右兩側(cè)的浮動(dòng)，防止后續(xù)元素被浮動(dòng)元素覆蓋。41.B解析：`alt`屬性（AlternativeText）為圖像提供替代文本，在圖像無(wú)法顯示時(shí)顯示，對(duì)SEO和可訪問性重要。42.C解析：`flex-shrink`屬性指定Flex項(xiàng)在父元素空間不足時(shí)，可以按此比例收縮其`flex-basis`大小。43.D解析：`border`屬性是簡(jiǎn)寫，可以同時(shí)設(shè)置邊框?qū)挾取邮胶皖伾?。單?dú)設(shè)置樣式用`border-style`。44.A解析：`<blockquote>`標(biāo)簽用于表示塊級(jí)引用，通常用于較長(zhǎng)的引用。45.C解析：`@media`規(guī)則是媒體查詢，用于根據(jù)不同的媒體特性（如屏幕寬度、設(shè)備類型）應(yīng)用不同的CSS樣式。46.A解析：`<aside>`標(biāo)簽表示頁(yè)面?zhèn)冗厵趦?nèi)容，通常與主要內(nèi)容相關(guān)但可以獨(dú)立存在。47.C解析：屬性選擇器`[attribute]`選擇具有指定屬性的元素，`[type="text"]`選擇類型為"text"的`<input>`元素。48.D解析：CSS盒模型組成部分包括：Content（內(nèi)容）、Padding（內(nèi)邊距）、Border（邊框）、Margin（外邊距）。"Element"不是盒模型的組成部分。49.B解析：`<aname="anchor">`創(chuàng)建一個(gè)錨點(diǎn)，`<ahref="#anchor">`創(chuàng)建指向該錨點(diǎn)的超鏈接，實(shí)現(xiàn)頁(yè)面內(nèi)部跳轉(zhuǎn)。50.C解析：`inherit`關(guān)鍵字表示繼承父元素該屬性的值。第二部分操作題（共2題，每題50分，共100分）操作題一：HTML代碼：```html<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>我的個(gè)人網(wǎng)頁(yè)</title><style>*{margin:0;padding:0;box-sizing:border-box;}body{display:flex;flex-direction:column;min-height:100vh;}header{height:100px;background-color:#add8e6;display:flex;flex-direction:column;justify-content:center;}h1{text-align:center;}nav{display:flex;justify-content:center;gap:20px;padding:10px0;}nava{text-decoration:none;color:black;}nava:hover{color:red;}main{flex:1;}section{padding:20px;background-color:#f0f0f0;border-radius:10px;margin:10px;}h2{margin-bottom:10px;}footer{height:50px;background-color:#444;color:white;text-align:center;line-height:50px;}</style></head><body><header><h1>歡迎來到我的網(wǎng)頁(yè)</h1><nav><ahref="#">關(guān)于我</a><ahref="