首次点击按钮需双击！
<script> function toggleContent(buttonId, contentId) { var hiddenContent = document.getElementById(contentId); var toggleButton = document.getElementById(buttonId); if (hiddenContent.style.display === "none") { hiddenContent.style.display = "block"; toggleButton.textContent = "隐藏"; } else { hiddenContent.style.display = "none"; toggleButton.textContent = "展开"; } } </script>概论 单元测试（一）
web前端开发中的“web”指的是：
参考答案：
A：web系统
-
A.
web系统
-
B.
Internet
-
C.
web客户端
-
D.
web服务器
以下哪个概念或者哪种功能属于“前端”：
参考答案：
A：web系统中以网页等形式为用户提供的部分，用户能接触到的部分
-
A.
web系统中以网页等形式为用户提供的部分，用户能接触到的部分
-
B.
web系统中负责平台稳定性与性能的部分
-
C.
web系统中负责完成相应的功能、处理业务的部分
-
D.
web系统中负责数据存取的部分
以下关于网页源文件的叙述不正确的是：
参考答案：
B：网页源文件客户端是看不到的
-
A.
网页源文件是纯文本文件
-
B.
网页源文件客户端是看不到的
-
C.
网页源文件可以在记事本里打开
-
D.
网页源文件是一些代码
以下关于web前端开发技术标准叙述不正确的是：
参考答案：
B：技术标准是由W3School组织提供的
-
A.
技术标准主要包括HTML、CSS、JS等部分技术的一些规定
-
B.
技术标准是由W3School组织提供的
-
C.
这些技术标准是在做web前端开发的时候需要遵守的
-
D.
技术标准的应用是一个逐步的过程
-
A.
文字与图片
-
B.
logo
-
C.
导航栏
-
D.
网页源文件
以下说法中，错误的是：
参考答案：
D：所有网页的扩展名都是 .htm
-
A.
网站logo、banner、导航栏等都是网页的组成部分
-
B.
主页就是进入网站的第一个页面，也被称为首页
-
C.
网站就是一系列逻辑上可以视为一个整体的页面的集合
-
D.
所有网页的扩展名都是 .htm
以下说法中，错误的是：
参考答案：
C：网页就是主页
-
A.
网页的本质就是HTML等源代码文件
-
B.
使用“记事本”编辑网页时，可将其保存为 .htm 或 .html 后缀
-
C.
网页就是主页
-
D.
网站通常就是一个完整的文件夹
下列关于HTML语言描述不正确的是：
参考答案：
C：HTML是指超文本链接语言，用超链接将网页组织在一起
-
A.
HTML语言中可以嵌入如CSS、JavaScript等语言
-
B.
HTML语言是通过一系列特定的标记来标识出相应的意义和作用的
-
C.
HTML是指超文本链接语言，用超链接将网页组织在一起
-
D.
HTML文档本身就是文本格式的文件
后端部分是对普通用户不可见的，例如从数据库中读取数据。
参考答案：
B：正确
-
A.
-
B.
Web前端开发技术中HTML是用来完成网页内容的，CSS是用来设置样式的。
参考答案：
B：正确
-
A.
-
B.
3. CSS样式 单元测验
如何去掉文本超级链接的下划线 （ ）。
参考答案：
B：a {text-decoration:none}
-
A.
a {underline:none}
-
B.
a {text-decoration:none}<strike style="background-color: transparent; border-bottom-color: rgb(102, 102, 102); border-bottom-style: none; border-bottom-width: 0px; border-image-outset: 0; border-image-repeat: stretch; border-image-slice: 100%; border-image-source: none; border-image-width: 1; border-left-color: rgb(102, 102, 102); border-left-style: none; border-left-width: 0px; border-right-color: rgb(102, 102, 102); border-right-style: none; border-right-width: 0px; border-top-color: rgb(102, 102, 102); border-top-style: none; border-top-width: 0px; color: rgb(102, 102, 102); cursor: text; font-family: Arial,Helvetica,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 22px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; orphans: 2; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-align: left; text-decoration: line-through; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px; word-wrap: break-word;"></strike>
-
C.
a {decoration:no underline}
-
D.
a {text-decoration:no underline}
有内部样式表定义如下：
<style type="text/css">
p{color:red;font-size:15px;}
</style>
同时，有 HTML代码如下所示：
<p style="background-color:gray;color:blue;">p text</p>
段落中的文本”p text“的最终显示效果是（ ）。
参考答案：
C：蓝色文本，字体大小为 15px，背景色为灰色
-
A.
红色文本，字体大小为 15px，无背景色
-
B.
蓝色文本，字体大小为 15px，无背景色
-
C.
蓝色文本，字体大小为 15px，背景色为灰色
-
D.
蓝色文本，默认字体大小，背景色为灰色
-
A.
<p class="A"><a class="B">文本</a></p>
-
B.
<a class="A">文本</a>
-
C.
<a class="B">文本</a>
-
D.
<p class="B"><a class="A">文本</a></p>
关于CSS定义的说法错误的是（ ）。
参考答案：
A：样式定义时属性和属性之间用空格分隔
-
A.
样式定义时属性和属性之间用空格分隔
-
B.
ID样式的定义方法是#+样式名字
-
C.
标签. 样式名字：表示只有该指定的标签才能引用它
-
D.
类样式的定义方法是点+样式名字
关于样式表的优先级说法不正确的是（ ）。
参考答案：
C：外部样式表级别最低
-
A.
直接定义在标记上的CSS样式级别最高
-
B.
浏览器默认样式级别最低
-
C.
外部样式表级别最低
-
D.
内嵌样式表优先级低于行内样式
使用link元素调用CSS的语法中，以下哪个属性是用来指定CSS文件的路径的（ ）。
参考答案：
B：href
-
A.
其余都不对
-
B.
href
-
C.
url
-
D.
src
根据以下的CSS代码：h1{ color: limegreen ;font-family: aria }可以知道（ ）。
参考答案：
C：{ }部分是对H1这个选择器的样式的内容
-
A.
此段代码是一个类选择器
-
B.
选择器的名称是color
-
C.
{ }部分是对H1这个选择器的样式的内容
-
D.
limegreen和font-family都是值
阅读下面代码，段落标签<p>内文本最终显示的颜色是（ ）。
<style type="text/css">
body { color:#333; }
#text{ color:#f00; }
.content { color:#00f; }
.gray { color:#666; }
</style>
......
<p id="text" class="content gray">锦瑟无端五十弦，一弦一柱思华年。</p>
参考答案：
D：#f00
-
A.
#333
-
B.
#00f
-
C.
#666
-
D.
#f00
参考答案：
D：链接外部
-
A.
内嵌
-
B.
层叠
-
C.
行内
-
D.
链接外部
在HTML中，下面（ ）不属于HTML文档的基本组成部分。
参考答案：
B：
-
A.
<html></html>
-
B.
<style></stytle>
-
C.
<head></head>
-
D.
<body></body>
在HTML的<body>区域的某处有一段代码<table style=″color:red;font-size:10pt″>，此为（ ）。
参考答案：
C：行内样式表
-
A.
内嵌式样式表
-
B.
外部式样式表
-
C.
行内样式表
-
D.
动态式样式表
下面选项中（ ）应用了行内样式。
参考答案：
A：
-
A.
<p style="color : red;">
-
B.
<p class="style1 style2">
-
C.
<p class="style">
-
D.
<p id="content">
以下关于奇偶选择器论述正确的是（ ）。
tr:nth-child(odd){
color:red;
}
参考答案：
D：表格奇数行，文字颜色为红色
-
A.
表格奇数行，背景颜色为红色
-
B.
表格偶数行，背景颜色为红色
-
C.
表格偶数行，文字颜色为红色
-
D.
表格奇数行，文字颜色为红色
以下可以用于设置列表标号是一个图片的代码是（ ）。
参考答案：
B：list-style-image: url(pic.jpg)
-
A.
list-style-type: url(pic.jpg)
-
B.
list-style-image: url(pic.jpg)
-
C.
list-style-image: src(pic.jpg)
-
D.
list-style-position: url(pic.jpg)
以下关于超链接样式叙述正确的是（ ）。
参考答案：
C：可以分别设置四种不同状态下的超链接样式
-
A.
用户单击过的超链接，可以采用a:linked设置
-
B.
用户没有单击的时候的超链接状态，可以使用a:linked设置
-
C.
可以分别设置四种不同状态下的超链接样式
-
D.
页面一显示出来，超链接就处于活动状态
CSS行内样式的优先级高于外部样式表链接样式，如果有对属性的重复设置，行内样式会覆盖掉外部样式表的样式。
参考答案：
B：正确
-
A.
-
B.
超链接如果四种状态下做统一设置，则只需要定义选择器名称为a的样式即可。
参考答案：
A：正确
-
A.
-
B.
4. CSS定位与布局 单元测验
下面关于CSS的说法错误的有（ ）。
参考答案：
C：margin属性不能同时设置四个边的边距
-
A.
margin属性的属性值可以是百分比
-
B.
整个body可以作为一个盒子
-
C.
margin属性不能同时设置四个边的边距
-
D.
CSS可以控制网页背景图片
下列属性哪一个能够实现层的隐藏（ ）。
参考答案：
C：display:none
-
A.
display:false
-
B.
display:" "
-
C.
display:none
-
D.
display:hidden
有样式定义如下：
div.parent {
width:100px;
height:70px;
border:1px solid gray;
}
div.child {
width:80px;
height:30px;
border:1px solid black;
background-color:silver;
}
同时，有 html 代码如下所示：
<body>
<div class="parent">
<div class="child">1</div>
<div class="child" style="position:absolute;top:15px;">2</div>
</div>
</body>
第二个 div 在页面上的最终位置是（ ）。
参考答案：
C：其上边框距离 body 元素为 15 px 距离
-
A.
其上边框距离其原有位置为 15 px 距离
-
B.
其上边框距离其父元素（div） 为 15 px 距离
-
C.
其上边框距离 body 元素为 15 px 距离
-
D.
使用默认位置，定位并未发生改变
以下哪个选项是设置底边框的（ ）。
参考答案：
A：border-bottom
-
A.
border-bottom
-
B.
border-top
-
C.
border-left
-
D.
border-right
在CSS中，为页面中的某个div标签设置样式div{width:200px;padding:0 20px; border:5px solid black;}，则该标签的实际宽度为（ ）。
参考答案：
B：250px
-
A.
220px
-
B.
250px
-
C.
200px
-
D.
240px
下列元素中，是行内元素的是（ ）。
参考答案：
C：span
-
A.
div
-
B.
h3
-
C.
span
-
D.
p
采用DIV+CSS设计页面布局，错误的是（ ）。
参考答案：
C：其他都不对
-
A.
增加代码可读性
-
B.
网页更容易修改和维护
-
C.
其他都不对
-
D.
更利于布局与定位
阅读下面HTML代码，两个div水平之间的空白距离是（ ）。
<style type="text/css">
div{float:left;width:100px;height:200px;margin:5px;}
</style>
......
<div ></div>
<div ></div>
......
参考答案：
C：10px
-
A.
15px
-
B.
25px
-
C.
10px
-
D.
0px
查看如下 html 代码：
<div style="float:left;">div text</div>
<p style="clear:left;">p text</p>
此代码在页面上的显示效果为（ ）。
参考答案：
D：
中的文本分两行显示，且文本左对齐
-
A.
<div> 中的文本和 <p> 中的文本在一行上显示，且文本右对齐
-
B.
<div> 中的文本和 <p> 中的文本在一行上显示，且文本左对齐
-
C.
<div> 中的文本和 <p> 中的文本分两行显示，且文本右对齐
-
D.
<div> 中的文本和 <p> 中的文本分两行显示，且文本左对齐
层定位中，以下说法错误的是（ ）。
参考答案：
C：父元素不管什么定位方式，子元素为position:absolute，那么子元素相对于父元素定位
-
A.
设置position:fixed，表示这个元素相对于浏览器窗口定位
-
B.
父元素为position:relative，子元素为position:absolute，那么子元素相对于父元素定位
-
C.
父元素不管什么定位方式，子元素为position:absolute，那么子元素相对于父元素定位
-
D.
设置position:absolute，表示这个元素原有位置会丢失
以下代码可以将div水平居中的是（ ）。
参考答案：
B：div{ width:200px; margin:0 auto; }
-
A.
div{
height:200px;
margin:0 auto;
} -
B.
div{
width:200px;
margin:0 auto;
} -
C.
div{
text-align:center;
} -
D.
div{
margin:0 auto;
}
以下说法错误的是（ ）。
参考答案：
A：z-index值越大，层越是在下方
-
A.
z-index值越大，层越是在下方
-
B.
层定位需要使用top、bottom、right、left设置层的位置
-
C.
层定位可以使盒子像图层一样上写层叠
-
D.
position属性决定层定位方式是固定定位、相对定位、绝对定位
inline类型的元素（ ）。
参考答案：
B：display:inline表示将该元素表现出inline元素的特点
-
A.
height、width都能设定
-
B.
display:inline表示将该元素表现出inline元素的特点
-
C.
height不能设定、width能设定
-
D.
height能设定、width不能设定，就是内容的宽度
浮动定位说法正确的是（ ）。
参考答案：
B：可以用float属性设置浮动定位
-
A.
浮动定位元素原有位置保留
-
B.
可以用float属性设置浮动定位
-
C.
浮动元素不能设置高度和宽度
-
D.
浮动元素不能设置层定位
关于盒子模型叙述错误的是（ ）。
参考答案：
A：盒子的各个组成部分都对应着CSS属性:content，border，padding，margin
-
A.
盒子的各个组成部分都对应着CSS属性:content，border，padding，margin
-
B.
盒子可以分为inline，block等等不同的类型
-
C.
页面元素可以作为盒子
-
D.
盒子可以层层嵌套
5. CSS3
对于一个高和宽都是20px的盒子，设置其border-radius：10px；可以生成（）。
参考答案：
C：圆形
-
A.
长方形
-
B.
椭圆形
-
C.
圆形
-
D.
圆角矩形
box-shadow: 10px 10px 5px #888; 其中5px是指（）；
参考答案：
C：阴影模糊范围
-
A.
水平方向阴影偏移距离
-
B.
垂直方向阴影偏移距离
-
C.
阴影模糊范围
-
D.
阴影与盒子之间的距离
以下说法不正确的是（）。
参考答案：
A：animation和keyframes都是属性名称
-
A.
animation和keyframes都是属性名称
-
B.
动画效果可由animation属性设置
-
C.
动画可以设置匀速、变速等不同播放方式
-
D.
动画的是由若干帧构成，每帧可由keyframes进行设置
3D变换可以沿X轴、Y轴或者Z轴进行变换。
参考答案：
B：正确
-
A.
-
B.
3D变换的舞台，通常是进行3D变换元素的父容器。
参考答案：
A：正确
-
A.
-
B.
3D变换产生类似三维效果，可以在三维空间中进行变换，但是无法改变透视效果的大小。
参考答案：
A：错误
-
A.
-
B.
 {
var hiddenContent = document.getEleme...)
 {
var hiddenContent = document.getEleme...&pics=https://blog.xyweb.cc/content/uploadfile/202504/e8cb1745484685.png)
这一切，似未曾拥有