首次点击按钮需双击！

概论 单元测试（一）

1
单选(2分)

​web前端开发中的“web”指的是：

‍

参考答案：
A：web系统

  • A.

    web系统

  • B.

    Internet

  • C.

    web客户端

  • D.

    web服务器

2
单选(2分)

‌以下哪个概念或者哪种功能属于“前端”：

‏

参考答案：
A：web系统中以网页等形式为用户提供的部分，用户能接触到的部分

  • A.

    web系统中以网页等形式为用户提供的部分，用户能接触到的部分

  • B.

    web系统中负责平台稳定性与性能的部分

  • C.

    web系统中负责完成相应的功能、处理业务的部分

  • D.

    web系统中负责数据存取的部分

3
单选(2分)

‌以下关于网页源文件的叙述不正确的是：

‍

参考答案：
B：网页源文件客户端是看不到的

  • A.

    网页源文件是纯文本文件

  • B.

    网页源文件客户端是看不到的

  • C.

    网页源文件可以在记事本里打开

  • D.

    网页源文件是一些代码

4
单选(2分)

​以下关于web前端开发技术标准叙述不正确的是：

‏

参考答案：
B：技术标准是由W3School组织提供的

  • A.

    技术标准主要包括HTML、CSS、JS等部分技术的一些规定

  • B.

    技术标准是由W3School组织提供的

  • C.

    这些技术标准是在做web前端开发的时候需要遵守的

  • D.

    技术标准的应用是一个逐步的过程

5
单选(2分)

‎以下不是网页的页面元素的是：

‏

查看答案

  • A.

    文字与图片

  • B.

    logo

  • C.

    导航栏

  • D.

    网页源文件

6
单选(2分)

‏以下说法中，错误的是：

‌

参考答案：
D：所有网页的扩展名都是 .htm

  • A.

    网站logo、banner、导航栏等都是网页的组成部分

  • B.

    主页就是进入网站的第一个页面，也被称为首页

  • C.

    网站就是一系列逻辑上可以视为一个整体的页面的集合

  • D.

    所有网页的扩展名都是 .htm

7
单选(2分)

‍以下说法中，错误的是：

‏

参考答案：
C：网页就是主页

  • A.

    网页的本质就是HTML等源代码文件

  • B.

    使用“记事本”编辑网页时，可将其保存为 .htm 或 .html 后缀

  • C.

    网页就是主页

  • D.

    网站通常就是一个完整的文件夹

8
单选(2分)

‏下列关于HTML语言描述不正确的是：

‌

参考答案：
C：HTML是指超文本链接语言，用超链接将网页组织在一起

  • A.

    HTML语言中可以嵌入如CSS、JavaScript等语言

  • B.

    HTML语言是通过一系列特定的标记来标识出相应的意义和作用的

  • C.

    HTML是指超文本链接语言，用超链接将网页组织在一起

  • D.

    HTML文档本身就是文本格式的文件

9
判断(2分)

‍后端部分是对普通用户不可见的，例如从数据库中读取数据。

‍

参考答案：
B：正确

  • A.
     
  • B.
     
10
判断(2分)

‌Web前端开发技术中HTML是用来完成网页内容的，CSS是用来设置样式的。

‎

参考答案：
B：正确

  • A.
     
  • B.

3. CSS样式 单元测验

1
单选(2分)

‏如何去掉文本超级链接的下划线 （     ）。

​

参考答案：
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}

2
单选(2分)

‍有内部样式表定义如下：
    <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.

    蓝色文本，默认字体大小，背景色为灰色

3
单选(2分)

‍查看如下样式定义：      
  .A  .B { font-weight:bold;}
下列选项中，文本加粗显示的是（    ）。 

‏

参考答案：
A：

文本

 

  • 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>

4
单选(2分)

‏关于CSS定义的说法错误的是（    ）。

‎

参考答案：
A：样式定义时属性和属性之间用空格分隔

  • A.

    样式定义时属性和属性之间用空格分隔 

  • B.

    ID样式的定义方法是#+样式名字

  • C.

    标签. 样式名字：表示只有该指定的标签才能引用它

  • D.

    类样式的定义方法是点+样式名字

5
单选(2分)

​关于样式表的优先级说法不正确的是（    ）。

‌

参考答案：
C：外部样式表级别最低

  • A.

    直接定义在标记上的CSS样式级别最高

  • B.

    浏览器默认样式级别最低

  • C.

    外部样式表级别最低

  • D.

    内嵌样式表优先级低于行内样式

6
单选(2分)

‌使用link元素调用CSS的语法中，以下哪个属性是用来指定CSS文件的路径的（     ）。

​

参考答案：
B：href

  • A.

    其余都不对

  • B.

    href  

  • C.

    url  

  • D.

    src

7
单选(2分)

​根据以下的CSS代码：h1{ color: limegreen ;font-family: aria  }可以知道（    ）。

‏

参考答案：
C：{ }部分是对H1这个选择器的样式的内容

  • A.

    此段代码是一个类选择器 

  • B.

    选择器的名称是color

  • C.

    { }部分是对H1这个选择器的样式的内容

  • D.

    limegreen和font-family都是值

8
单选(2分)

‎阅读下面代码，段落标签<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 

9
单选(2分)

 

参考答案：
D：链接外部

（    ）样式表一般用于大型网站。

 

‌
  • A.

    内嵌

  • B.

    层叠

  • C.

    行内

  • D.

    链接外部

10
单选(2分)

‏在HTML中，下面（    ）不属于HTML文档的基本组成部分。    

​

参考答案：
B：

  • A.

     <html></html>

  • B.

    <style></stytle>

  • C.

    <head></head>

  • D.

    <body></body>

11
单选(2分)

‌在HTML的<body>区域的某处有一段代码<table  style=″color:red;font-size:10pt″>，此为（    ）。

‌

参考答案：
C：行内样式表

  • A.

    内嵌式样式表

  • B.

    外部式样式表

  • C.

    行内样式表

  • D.

    动态式样式表

12
单选(2分)

‍下面选项中（     ）应用了行内样式。

‌

参考答案：
A：

 

 

  • A.

    <p  style="color : red;">

  • B.

    <p class="style1 style2">

  • C.

    <p  class="style">

  • D.

    <p  id="content">

13
单选(2分)

‏以下关于奇偶选择器论述正确的是（    ）。

‏

tr:nth-child(odd){
   color:red;
}

‏

参考答案：
D：表格奇数行，文字颜色为红色

  • A.

    表格奇数行，背景颜色为红色

  • B.

    表格偶数行，背景颜色为红色

  • C.

    表格偶数行，文字颜色为红色

  • D.

    表格奇数行，文字颜色为红色

14
单选(2分)

‏以下可以用于设置列表标号是一个图片的代码是（    ）。

‌

参考答案：
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)

15
单选(2分)

‍以下关于超链接样式叙述正确的是（    ）。

‏

参考答案：
C：可以分别设置四种不同状态下的超链接样式

  • A.

    用户单击过的超链接，可以采用a:linked设置

  • B.

    用户没有单击的时候的超链接状态，可以使用a:linked设置

  • C.

    可以分别设置四种不同状态下的超链接样式

  • D.

    页面一显示出来，超链接就处于活动状态

16
判断(2分)

​CSS行内样式的优先级高于外部样式表链接样式，如果有对属性的重复设置，行内样式会覆盖掉外部样式表的样式。

‏

参考答案：
B：正确

  • A.
     
  • B.
     
17
判断(2分)

‌超链接如果四种状态下做统一设置，则只需要定义选择器名称为a的样式即可。

​

参考答案：
A：正确

  • A.
     
  • B.

4. CSS定位与布局 单元测验

1
单选(2分)

‏下面关于CSS的说法错误的有（     ）。

‎

参考答案：
C：margin属性不能同时设置四个边的边距

  • A.

    margin属性的属性值可以是百分比

  • B.

    整个body可以作为一个盒子

  • C.

    margin属性不能同时设置四个边的边距

  • D.

    CSS可以控制网页背景图片

2
单选(2分)

‍下列属性哪一个能够实现层的隐藏（   ）。

‏

参考答案：
C：display:none

  • A.

    display:false

  • B.

    display:" "

  • C.

    display:none

  • D.

    display:hidden

3
单选(2分)

‌有样式定义如下：
    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.

    使用默认位置，定位并未发生改变

4
单选(2分)

‏以下哪个选项是设置底边框的（    ）。

​

参考答案：
A：border-bottom

  • A.

    border-bottom

  • B.

    border-top

  • C.

    border-left 

  • D.

    border-right

5
单选(2分)

‍在CSS中，为页面中的某个div标签设置样式div{width:200px;padding:0 20px; border:5px solid black;}，则该标签的实际宽度为（     ）。

‌

参考答案：
B：250px

  • A.

    220px

  • B.

    250px

  • C.

    200px

  • D.

    240px

6
单选(2分)

‌下列元素中，是行内元素的是（    ）。 

‍

参考答案：
C：span

  • A.

    div

  • B.

    h3

  • C.

    span

  • D.

    p

7
单选(2分)

‌采用DIV+CSS设计页面布局，错误的是（     ）。

​

参考答案：
C：其他都不对

  • A.

    增加代码可读性

  • B.

    网页更容易修改和维护

  • C.

    其他都不对

  • D.

    更利于布局与定位

8
单选(2分)

‍阅读下面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

9
单选(2分)

‏查看如下 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> 中的文本分两行显示，且文本左对齐

10
单选(2分)

‍层定位中，以下说法错误的是（     ）。

​

参考答案：
C：父元素不管什么定位方式，子元素为position:absolute，那么子元素相对于父元素定位

  • A.

    设置position:fixed，表示这个元素相对于浏览器窗口定位

  • B.

    父元素为position:relative，子元素为position:absolute，那么子元素相对于父元素定位

  • C.

    父元素不管什么定位方式，子元素为position:absolute，那么子元素相对于父元素定位

  • D.

    设置position:absolute，表示这个元素原有位置会丢失

11
单选(2分)

‍以下代码可以将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;
     }

     

12
单选(2分)

‏以下说法错误的是（    ）。

‎

参考答案：
A：z-index值越大，层越是在下方

  • A.

    z-index值越大，层越是在下方

  • B.

    层定位需要使用top、bottom、right、left设置层的位置

  • C.

    层定位可以使盒子像图层一样上写层叠

  • D.

    position属性决定层定位方式是固定定位、相对定位、绝对定位

13
单选(2分)

‏inline类型的元素（    ）。

​

参考答案：
B：display:inline表示将该元素表现出inline元素的特点

  • A.

    height、width都能设定

  • B.

    display:inline表示将该元素表现出inline元素的特点

  • C.

    height不能设定、width能设定

  • D.

    height能设定、width不能设定，就是内容的宽度

14
单选(2分)

​浮动定位说法正确的是（    ）。

‌

参考答案：
B：可以用float属性设置浮动定位

  • A.

    浮动定位元素原有位置保留

  • B.

    可以用float属性设置浮动定位

  • C.

    浮动元素不能设置高度和宽度

  • D.

    浮动元素不能设置层定位

15
单选(2分)

‍关于盒子模型叙述错误的是（   ）。

‏

参考答案：
A：盒子的各个组成部分都对应着CSS属性:content，border，padding，margin

  • A.

    盒子的各个组成部分都对应着CSS属性:content，border，padding，margin

  • B.

    盒子可以分为inline，block等等不同的类型

  • C.

    页面元素可以作为盒子

  • D.

    盒子可以层层嵌套

5. CSS3

1
单选(2分)

‎对于一个高和宽都是20px的盒子，设置其border-radius：10px；可以生成（）。

‏

参考答案：
C：圆形

  • A.

    长方形

  • B.

    椭圆形

  • C.

    圆形

  • D.

    圆角矩形

2
单选(2分)

‏box-shadow: 10px 10px 5px #888; 其中5px是指（）；

‌

参考答案：
C：阴影模糊范围

  • A.

    水平方向阴影偏移距离

  • B.

    垂直方向阴影偏移距离

  • C.

    阴影模糊范围

  • D.

    阴影与盒子之间的距离

3
单选(2分)

‌以下说法不正确的是（）。

‎

参考答案：
A：animation和keyframes都是属性名称

  • A.

    animation和keyframes都是属性名称

  • B.

    动画效果可由animation属性设置

  • C.

    动画可以设置匀速、变速等不同播放方式

  • D.

    动画的是由若干帧构成，每帧可由keyframes进行设置

4
判断(2分)

‎3D变换可以沿X轴、Y轴或者Z轴进行变换。

‌

参考答案：
B：正确

  • A.
     
  • B.
     
5
判断(2分)

‌3D变换的舞台，通常是进行3D变换元素的父容器。

‎

参考答案：
A：正确

  • A.
     
  • B.
     
6
判断(2分)

‍3D变换产生类似三维效果，可以在三维空间中进行变换，但是无法改变透视效果的大小。

‎

参考答案：
A：错误

  • A.
     
  • B.