Web前端第一阶段基础考试试卷HTML+CSS

本文链接：https://blog.csdn.net/qq_54075517/article/details/131836491

这篇文章是一份HTML和CSS的基础知识测试，包含选择题，涉及HTML标签、CSS样式、页面布局等多个方面。题目旨在考察考生对于超文本标识语言HTML和层叠样式表CSS的理解，包括元素、属性、样式控制等核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总分100分考试时间：120分钟考试形式：闭卷

一、选择题（每题1分，共20分）

1．HTML指的是_B_。

（A）超链接的文本标记语言（B）超文本标识语言（C）家庭工具标记语言（D）以上都不是

2．下列能够实现美化页面的语言是B__。

（A）HTML （B）CSS （C）VFP （D）JavaScript

3．以下标记中用于设置内部样式表的标记的是A__。

（A）<style> （B）<title> （C）<script> （D）<head>

4．以下选中_D_代表是空格字符实体。

（A）& （B）&nbsp （C）nbsp; （D） 

5．在方程的解X1=2中下标“1”在HTML中可以使用C__标记实现。

（A）<b> （B）<tt> （C）<sub> （D）<sup>

6．在HTML页面上能产生无序列表的选项是_D_。

（A）<dir><li>...</li>...</dir> （B）<dl><dt>...<dd>...</dl>

（C）<ol><li>...</li>...</ol> （D）<ul><li>...</li>...</ul>

7．将超链接的目标网页在新窗口中打开的方式是_D_。

（A）parent （B）self （C）top （D）blank

8. 去掉无序列表项前面的符号的方法是__B_。

（A）ul{ list-style:circle;} （B）ul { list-style-type:none;}

（C）ul { list-type:no ;} （D）ul { list-style-type :null;}

9．CSS 全称是C___。

（A）Computer Style Sheets （B）Creative Style Sheets

（C）Cascading Style Sheets （D）Creative Sheets Style

10．在下列的 HTML 中，B__可以产生超链接。

（A）<a url="http://www.edu.cn">EDU</a> （B）<a href="http:// www.edu.cn "> EDU </a>

（C）<a>http:// www.edu.cn </a> （D）<a name="http:// www.edu.cn "> EDU </a>

11．在表单中插入列表框的正确的HTML代码是。C

（A）<input type="submit" ></input> （B）<textarea name="textarea"></textarea>

（C）<select multiple></select> （D）<input type="select "></input>

12．下列能够设置文本加粗的CSS属性值对是_A___。

（A）font-weight:bold （B）style:bold （C）font:b （D）font="粗体"

13．去掉文本超链接的下划线的方法是。D_

（A）a{text-decoration:no underline;} （B）a{underline:none;}

（C）a{decoration:no underline;} （D）a{text-decoration:none;}

14．使用下列哪项属性，可以对文字或图像进行旋转、缩放、倾斜和移动的变形处理。C

A.text-algin 属性 B.display 属性 C.transform 属性 D.font-size 属性

15．以下哪个选项可以对元素定义不同的过渡效果 D。

A.animations 属性 B.transform 属性 C.position 属性 D.transition 属性

16．下列CSS的规则正确的是。A

（A）body{color:black;} （B） {body;color:black}

（C）body:color=black （D） {body:color=black(body)}

17．给元素添加类属性正确的HTML代码是：B。

（A）<div idname=""; ></div> （B）<div class="" ></div>

（C）<div classname="" ></div> （D）<div name="" ></div>

18．input标签的type的意义是：B。

A.input的name值 B.input类型 C.input值 D.input的默认值

19．下列哪个为相对定位方式A。

A.position:relative; B.position:absolute; C.position:fixed; D.position:static;

20．下列哪个不属于行内元素__A。

A.div B.a C.img D.span

二、填空题（每空1分，共20分）

1．HTML文件的扩展名可以是（1）或（2）。 html htm

2．在HTML文件中用什么标签来设置页面标题（3）。

html htm

3．一个完整的HTML文件包含（4）和（5）等两部分（填标记名称）。

4．在<a>元素中定义窗口弹出方式的属性是（6）。 target

5．web网页中支持（7）3种方式来编写样式。

1)行内样式：style属性上

2)内部样式：<style>标签中

3)外部样式：<link>标签引入

6．CSS中有哪些常用的选择器（8）。

1）通用选择器 *

2）普通选择器（id class 元素）

3）属性选择器：[key=value] ...

4）兄弟选择器：+ ~

5）后代选择器： >

6）交集和并集选择器 . ,

7）伪类伪元素选择器 :before ..

7．可使用CSS的（9）属性来让行内元素、行内块级元素或者文本水平居中。

text-align: “center”

8．CSS中常见的结构伪类和伪元素分别有哪些（10）和（11）。

结构伪类: :nth-child/:nth-of-type/:nth-last-child/:nth-last-of-type ....

伪元素： ::before/::after/::first-line/::placeholder....

9．在表单中让用户从互斥的选项中只能选一项，可使用type为“（12）”的输入框。

type=“radio”

10．HTML的全局属性有哪些（13）。

Id class style name title

11．CSS中有4种定义颜色的方法分别是（14）、（15）、（16）和RGB。

颜色关键字 red green ...

十六进制： #ffffff

RGBA: rgba( 0, 0, 0 ,0 )

12．导入外部的样式表通常放在内部样式表里的是第（17）行。

第一行或者首行

13．CSS中的（18）属性可以让一个文本垂直居中。

line-height

14．有哪些CSS属性可以隐藏一个元素（19）。

display:none

visibility :hidden

rgba（0,0,0, 0）

opcity: 0

15．在<select>中利用（20）属性可以定义下拉列表框的大小为5。

size=”5”

三、简答题（60分）

1.写出URL的组成格式，并举例说明。(5分)

答：

scheme://host.domain:port/path/filename?tag=networking#top

[协议类型]://[服务器地址]:[端口]/文件路径？[查询]#[片段ID] （3分）

例如：http://localhost:8080/forum/questions?tag=networking#top（2分）

2.分别写个无序和有序列表的结构？(5分)

答：

<ul>

</ul>

(3分)

<ol>

</ol>

(2分)

3.结构伪类nth-child(n)和nth-of-type(n)的区别？(5分)

答：

:nth-child :是结构伪类选择器，选中父元素的第几个子元素 , 计数时与元素的类型无关。（3分）

:nth-of-type:是结构伪类选择器和nth-child类似，但是计数时只计算同种类型的元素。（2分）

4.描述一下元素的盒子模型包含哪些内容？(5分)

答：

content: 盒子的内容(width + height)

padding: 盒子内边距（3分）

border: 盒子的边框

margin:盒子外边距（2分）

5.元素或文本水平居中实现方案有哪几种？(5分)

答：

1）text-align: center（1分）指定该属性的元素可以让其内部：行内元素，行内块级元素和文本水平居中。

2）margin: 0 auto（1分）该属性可以让具有宽度的块级元素水平居中。

3）定位

position: relative;（1分） left:50% transfrom:translate(-50%,0); (行内元素无效)

或者width: 200px （1分） height:200px position: absolute; （需要设置宽） left: 0; right: 0; margin: 0 auto;

或者position: absolute; left:50% width: 200px; margin-left: -100px（需要居中的元素使用）

4）flex布局

display: flex;（1分） justify-content: center (flex item居中)

6.元素或文本垂直居中实现方案有哪几种？(5分)

1）line-height（2分）可以让块级和行内元素（行内非替换元素，行内替换元素，行内块级元素）的文本垂直居中。

2）定位

position: relative;（1分） top:50% transfrom:translate(0,-50%)(行内元素无效)

或者 width: 200px （1分） height:200px position: absolute; （需要设置高） left: 0; right: 0; margin: 0 auto;

或者 position: absolute; top:50% height: 200px; margin-top: -100px （需要居中的元素使用）

3）flex布局实现

display: flex;（1分） align-items: center (flex item居中)

7.为什么需要清除浮动？清除浮动有几种方法？(10分)

答：

1）由于浮动元素脱离了标准流，变成了浮动元素，不再向父元素汇报高度。所以父元素在计算高度时并没有将浮动元素的高度计算进来，因此就造成了高度塌陷的问题。解决高度塌陷的问题就叫做清除浮动（3分）

2）清除浮动的目的：是为了让父元素在计算高度的时候把浮动子元素的高度计算进去（2分）

3）清除浮动的4种方法

a.给父元素设置固定高度，扩展性不好，不推荐（1分）

b.在父元素的最后增加一个空的块级子元素，并给这个子元素设置clear:both , 但是增加了无意义的空标签，违反了结构与样式分离的原则（1分）

c.给父元素添加一个伪元素(推荐)（2分）

.clear_fix::after {
    content: "";
    display: block;
    clear:both;
    visibility: hidden; /* 浏览器兼容性 */
    height: 0; /* 浏览器兼容性 */

}
.clear_fix {
    *zoom: 1; /* IE6/7兼容性 */
}

d. overflow:auto触发BFC来清除浮动（前提高度为auto）（1分）

8.flex布局container 和 item的属性分别有哪些？以及其作用？(10分)

答：

display: flex

flex container

flex-direction 决定主轴方向,默认值为row。

flex-wrap 决定flex container是单行还是多行,默认值为nowrap。

flex-flow 前面两个属性的组合写法,默认值为row。

justify-content 决定flex items在主轴的对齐方式,默认值为flex-start。

align-items 决定flex items在交叉轴的对齐方式,默认值为normal。

align-content 决定多行flex items在交叉轴的对齐方式,默认值为stretch。（5分）

flex item

flex-grow: 决定flex items如何拉伸,默认值为0。

flex-shrink: 决定flex items如何收缩,默认值为1。

flex-basis:决定flex items的基本size大小, 默认值为auto。

flex: 是前面3个属性的组合写法。

align-self:指定flex item自身的排序方式,默认值为auto。

order:决定了flex items的排布顺序，越小越靠前,默认值为0。（5分）

9.什么是视口(viewport)？移动端适配方案有哪些？(10分)

PC端视口：就是浏览器的可视区域

移动端视口：

布局视口: 相对于宽为980px来布局页面的视口，称为布局视口。默认大小是 980px。

视觉视口：显示在可见区域的视口，称为视觉视口。

理想视口：通过设置布局视口的宽度和缩放，让布局视口等于视觉视口，称为理想视口。

移动适配方案：

1）百分比布局：因为不同属性百分比的值，相对的可能是不同的参照物，所以百分比往很难统一。

2）视口 + ( rem + 动态HTML的 font-size )

动态计算 HTML font-zise：

            A.用媒体查询来修改HTML font-size( 缺点不能实时改变font-size的大小 )

            B.自己编写JS来实现修改HTML font-size的大小(可以实时修改字体大小)

           C.是引用lib-flexiable库来实现（原理是JS动态改HTML font-size大小）

px 转成rem：

A.手动计算 rem

B.Less的映射来计算

C.postcss-pxtorem插件来实现（webpack阶段会学到）

D.cssrem VSCode插件来实现

3）视口 + vw

px转成rem

A.手动计算vw

B.Less的映射来计算

C.Postcss-px-to-viewport的插件(Wepack 阶段学)

D.ccsrem VSCode插件

4）flex弹性布局