2024年3月12日发(作者：)

一、单选题（共20题，40分）

1、以下标记中，没有对应的结束标记的是（ ）（2分）

A、

B、

C、

D、 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2、以下标记符中，用于设置页面标题的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、<title> </p><p style="text-indent: 2em;font-size:18px;">B、<caption> </p><p style="text-indent: 2em;font-size:18px;">C、<head> </p><p style="text-indent: 2em;font-size:18px;">D、<html> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3、html的注释符号是什么？（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、// </p><p style="text-indent: 2em;font-size:18px;">B、’ </p><p style="text-indent: 2em;font-size:18px;">C、/* */ </p><p style="text-indent: 2em;font-size:18px;">D、<!-- --> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4、在HTML中，关于下列代码说法错误的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;"><a href="" target="_blank">首页</a> </p><p style="text-indent: 2em;font-size:18px;">A、此标签用来创建一个超链接 </p><p style="text-indent: 2em;font-size:18px;">B、目标窗口在当前窗口中打开 </p><p style="text-indent: 2em;font-size:18px;">C、超链接的额连接地址是 </p><p style="text-indent: 2em;font-size:18px;">D、超链接文字是“首页” </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">5、<a href=URL target=_parent>..</a>,表示（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、打开一个空窗口的超链接代码 </p><p style="text-indent: 2em;font-size:18px;">B、在父窗口打开超链接的代码 </p><p style="text-indent: 2em;font-size:18px;">C、新开一个窗口的超链接代码 </p><p style="text-indent: 2em;font-size:18px;">D、在本窗口中打开一个超链接的代码 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">6、下面关于文件路径的说法错误的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、“../”是返回当前目录的上一级目录 </p><p style="text-indent: 2em;font-size:18px;">B、“../”是返回当前目录的下一级目录 </p><p style="text-indent: 2em;font-size:18px;">C、访问下一级目录直接输入相应的目录名即可 </p><p style="text-indent: 2em;font-size:18px;">D、文件路径指文件存储的位置 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">7、如何在新窗口打开链接？（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、<a href="url" new> xxx</a> </p><p style="text-indent: 2em;font-size:18px;">B、<a href="url" target="_blank">xxx</a> </p><p style="text-indent: 2em;font-size:18px;">C、<a href="url" target="new">xxx</a> </p><p style="text-indent: 2em;font-size:18px;">D、<a href="url" target="_new">xxx</a> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">8、在以下的 HTML 中，哪个是正确引用外部样式表的方法？（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、<style src=""> </p><p style="text-indent: 2em;font-size:18px;">B、<link rel="stylesheet" type="text/css" href=""> </p><p style="text-indent: 2em;font-size:18px;">C、<stylesheet></stylesheet> </p><p style="text-indent: 2em;font-size:18px;">D、<style href =""> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">9、分析以下代码样式效果，判断文字的颜色 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">A、green </p><p style="text-indent: 2em;font-size:18px;">B、yellow </p><p style="text-indent: 2em;font-size:18px;">C、blue </p><p style="text-indent: 2em;font-size:18px;">D、黑色 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">10、下面有关选择器的说法中，不正确的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、在class选择器中，我们只能对相同的元素定义相同的class属性 </p><p style="text-indent: 2em;font-size:18px;">B、后代选择器选择的不仅是子元素，还包括它的其他后代元素（如孙元素） </p><p style="text-indent: 2em;font-size:18px;">C、群组选择器可以对几个选择器进行相同的操作 </p><p style="text-indent: 2em;font-size:18px;">D、想要为某一个元素定义样式，我们可以使用不同的选择器来实现 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">11、下面的描述正确的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">#menu{ </p><p style="text-indent: 2em;font-size:18px;"> font-size:14px; </p><p style="text-indent: 2em;font-size:18px;"> } </p><p style="text-indent: 2em;font-size:18px;">A、menu是标签选择器 </p><p style="text-indent: 2em;font-size:18px;">B、menu是元素选择器 </p><p style="text-indent: 2em;font-size:18px;">C、menu是类选择器 </p><p style="text-indent: 2em;font-size:18px;">D、menu是ID选择器 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">12、阅读下面HTML代码，段落标签<p>内文本最终显示的颜色是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;"><style type="text/css"> </p><p style="text-indent: 2em;font-size:18px;">body { color:#333; } </p><p style="text-indent: 2em;font-size:18px;">#text{ color:#666; } </p><p style="text-indent: 2em;font-size:18px;">.content { color:#00f; } </p><p style="text-indent: 2em;font-size:18px;">.gray { color:#f00; } </p><p style="text-indent: 2em;font-size:18px;"></style> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">...... </p><p style="text-indent: 2em;font-size:18px;"><p id="text" class="content gray">我我本将心向明月，奈何明月照沟渠。</p> </p><p style="text-indent: 2em;font-size:18px;">...... </p><p style="text-indent: 2em;font-size:18px;">A、#f00 </p><p style="text-indent: 2em;font-size:18px;">B、#00f </p><p style="text-indent: 2em;font-size:18px;">C、#666 </p><p style="text-indent: 2em;font-size:18px;">D、#333 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">13、将<p>标签中的文字大小设置为18px,颜色设置为#336699，文本有删除线，则下列css</p><p style="text-indent: 2em;font-size:18px;">正确的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、p{font-size=18px;color:#336699;text-decoration:overline;} </p><p style="text-indent: 2em;font-size:18px;">B、p{font-size:18px;color:#336699;text-decoration:line-through;} </p><p style="text-indent: 2em;font-size:18px;">C、p{font-size:18px;color:#336699;text-decoration:underline;} </p><p style="text-indent: 2em;font-size:18px;">D、p{font-size=18px;color:#369;text-decoration:blink;} </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">14、下面哪个方法可以去掉文本超链接的下划线（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、a{ text-decoration:no underline; } </p><p style="text-indent: 2em;font-size:18px;">B、a{ underline:none; } </p><p style="text-indent: 2em;font-size:18px;">C、a{ decoration:no underline; } </p><p style="text-indent: 2em;font-size:18px;">D、a{ text-decoration:none; } </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">15、以下关于背景图片的设置说法错误的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、background可以设置背景图片 </p><p style="text-indent: 2em;font-size:18px;">B、background-image可以设置背景图片 </p><p style="text-indent: 2em;font-size:18px;">C、background-repeat：repeat；表示背景图像仅在横向上平铺 </p><p style="text-indent: 2em;font-size:18px;">D、background-repeat属性不设置，默认代表背景图像在纵向和横向上平铺 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">16、设置h1的边框，右边为红色，上下左为黑色边框。（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、h1 { border:1px solid black; border-right-color: red; } </p><p style="text-indent: 2em;font-size:18px;">B、h1 { border-right-color: red; border:1px solid black;} </p><p style="text-indent: 2em;font-size:18px;">C、h1 { border-right: red; border:1px solid black;} </p><p style="text-indent: 2em;font-size:18px;">D、以上都正确 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">17、设置元素相对自己原来的位置向上移动20px，正确的CSS属性设置是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、position:relative; top:-20px; </p><p style="text-indent: 2em;font-size:18px;">B、position:relative; top:20px; </p><p style="text-indent: 2em;font-size:18px;">C、position:absolute; top:-20px; </p><p style="text-indent: 2em;font-size:18px;">D、position:absolute; top:20px; </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">18、下面选项中，可以设置页面中某个DIV标签相对页面水平居中的CSS样式是（ ）（2</p><p style="text-indent: 2em;font-size:18px;">分） </p><p style="text-indent: 2em;font-size:18px;">A、margin:0 auto </p><p style="text-indent: 2em;font-size:18px;">B、padding:0 auto </p><p style="text-indent: 2em;font-size:18px;">C、text-align:center </p><p style="text-indent: 2em;font-size:18px;">D、vertical-align:middle </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">19、下列标签中，用于定义页面主区域内容之外的内容的标签是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、<nav> </p><p style="text-indent: 2em;font-size:18px;">B、<article> </p><p style="text-indent: 2em;font-size:18px;">C、<span> </p><p style="text-indent: 2em;font-size:18px;">D、<aside> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">20、以下不属于 HTML5 语义化结构标签的是（ ）（2分）。 </p><p style="text-indent: 2em;font-size:18px;">A、<article> </p><p style="text-indent: 2em;font-size:18px;">B、<banner> </p><p style="text-indent: 2em;font-size:18px;">C、<footer> </p><p style="text-indent: 2em;font-size:18px;">D、<main> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">二、多选题（共5题，10分） </p><p style="text-indent: 2em;font-size:18px;">1、以下（ ）是块级元素（2分） </p><p style="text-indent: 2em;font-size:18px;">A、div </p><p style="text-indent: 2em;font-size:18px;">B、img </p><p style="text-indent: 2em;font-size:18px;">C、input </p><p style="text-indent: 2em;font-size:18px;">D、p </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">2、在css中，能够去掉项目列表符号的属性是( )（2分） </p><p style="text-indent: 2em;font-size:18px;">A、 list-style-image 属性 </p><p style="text-indent: 2em;font-size:18px;">B、list-style-position属性 </p><p style="text-indent: 2em;font-size:18px;">C、list-style属性 </p><p style="text-indent: 2em;font-size:18px;">D、list-style-type属性 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">3、以下不是双标记的有（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">A、</p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">B、<head> </p><p style="text-indent: 2em;font-size:18px;">C、<p> </p><p style="text-indent: 2em;font-size:18px;">D、<hr> </p><p style="text-indent: 2em;font-size:18px;">E、<img> </p><p style="text-indent: 2em;font-size:18px;">F、<meta> </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">4、阅读下面HTML代码，若要使<dt>和<dd>标签在同一行显示，下面选项中的CSS书写正</p><p style="text-indent: 2em;font-size:18px;">确的是（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;"> <dl> </p><p style="text-indent: 2em;font-size:18px;"> <dt>用户名：</dt> </p><p style="text-indent: 2em;font-size:18px;"> <dd><input type="text" name="userName" size="12" /></dd> </p><p style="text-indent: 2em;font-size:18px;"> </dl> </p><p style="text-indent: 2em;font-size:18px;">A、dl dt { float:left; } </p><p style="text-indent: 2em;font-size:18px;">B、dl dd { float:left; } </p><p style="text-indent: 2em;font-size:18px;">C、dl dt, dl dd { float:left; } </p><p style="text-indent: 2em;font-size:18px;">D、dl { display:inline; } </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">5、分析下面的HTML代码片段，则选项中的说法正确的是( )（2分） </p><p style="text-indent: 2em;font-size:18px;"><table cellspacing="30"> </p><p style="text-indent: 2em;font-size:18px;"> <tr><td colspan="2" align="center">姓名</td></tr> </p><p style="text-indent: 2em;font-size:18px;"> <tr><td rowspan="2" align="center">成绩</td> </p><p style="text-indent: 2em;font-size:18px;"> <td align="center">语文</td> </p><p style="text-indent: 2em;font-size:18px;"> </tr> </p><p style="text-indent: 2em;font-size:18px;"> <tr><td colspan="2" align="center">数学</td></tr> </p><p style="text-indent: 2em;font-size:18px;"></table> </p><p style="text-indent: 2em;font-size:18px;">A、该表格共有两行三列 </p><p style="text-indent: 2em;font-size:18px;">B、该表格边框宽度为30像素 </p><p style="text-indent: 2em;font-size:18px;">C、该表格中的文字均居中显示 </p><p style="text-indent: 2em;font-size:18px;">D、"姓名”单元格跨2列 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">三、判断题（共5题，10分） </p><p style="text-indent: 2em;font-size:18px;">1、table 标签后面可以直接加td。（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">2、<meta />标记在<head>头部标记中，只可出现一次。（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">3、<body>标记和<head>标记是并列关系（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">4、任何标签都可以通过加style属性来直接定义它的样式。（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;">5、绝对定位的元素会脱离文档流。（ ）（2分） </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">四、程序填空题（共2题20空，40分） </p><p style="text-indent: 2em;font-size:18px;">1、阅读下列说明、效果图、HTML和CSS代码，进行网页制作，填写（1）至（10）代码。 </p><p style="text-indent: 2em;font-size:18px;">【效果图】 </p><p style="text-indent: 2em;font-size:18px;"> </p><p style="text-indent: 2em;font-size:18px;">【代码】 </p><p style="text-indent: 2em;font-size:18px;"><!DOCTYPE html> </p><p style="text-indent: 2em;font-size:18px;"><html> </p><p style="text-indent: 2em;font-size:18px;"><head> </p><p style="text-indent: 2em;font-size:18px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </p><p style="text-indent: 2em;font-size:18px;"><title>无标题文档