[CSDN]C1训练题解析_第二部分_Web基础

主页:写程序的小王叔叔的博客欢迎来访👀

支持:点赞收藏关注

社区:JAVA全栈进阶学习社区欢迎加入

声明本篇文档有C1教程视频中老师照着稿读的内容视频不用看,视频小姐姐的口述快到让你着急(1.5倍速你可能会si~)无可观看价值,我就把读的稿整理出来,边看边学习,不做广告推广      |       文末有惊喜

[CSDN]C1训练题解析 目录

第一部分_计算机通识

第二部分_Web基础

第三部分_JS基础

第四部分_Web进阶


十四、语义化标签

(1)现需要设置一个按钮,请填写语义化标签补全代码片段(仅填写一个标签名即可)(B)

          <_____>点我!</_____>  

(2)在HTML中一般用哪个语义化标签表示斜体文本效果  (A)

(3)在HTML中一般用哪个语义化标签表示头部导航    (D)

        解析:ul 无序列表、ol 有序列表

(4)在HTML中一般用哪个语义化标签定义无序列表<______>?(B)

(5)在HTML中一般用哪个语义话标签定义表单<_______>? (C)


十五、表单标签💥

(1) 现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字,请补全下方代码片段

<form action="/example/html5/demo_form.asp">
	密号:<input type="text" name="country_code" pattern="[0-9]{3}"  ________="请输入三位数字" />
	<input type="submit" />
</form>

过程:           答案:title

 (2)现表单内有个提交按钮,点击后自动提交表单请求,请补全代码片段     submit           

<input type="________" value="提交">

   提示:提交 submit、重置 reset

(3)怎么用input标签创建一个表单重置按钮?请补齐这段代码          reset             

<input type="________" value="重置">

(4)怎么用input标签创建一个密码输入框?请补齐这段代码     password    

<input type="________" placeholder="请输入密码">

(5)现有以下HTML代码,需要在点击提交按钮时,将用户名和密码自动提交到https://ac-api.csdn.net/login,请补全代码片段       action       

<form  _______="https://ac-api.csdn.net/login" method="get">
    <input type="text" placeholder="用户名">
    <input type="password" placeholder="密码">
    <input type="submit" value="提交">
</form>

十六、转义字符

转义字符也可称为字符实体,对于同一个特殊字符,可以使用【实体名称】或者【实体编号】表示

(1)在HTML源代码中用什么实体名称表示版权符号 ©?    &copy;      

(2)在HTML源代码中用什么实体名称表示商标符号 ™     &trade;     

(3)在HTML源代码中用什么实体名称表示注册商标符号 ®      &reg;      

(4)在HTML源代码中用什么实体名称表示大于号>    &gt;   

(5)在HTML源代码中用什么实体名称表示乘号  &times;  


十七、Head头

head标签中一般可以包含以下标签:<title>、<style>、<script>、<link>、<meta>、<base>

用于定义文档与外部资源的关系,最常用于链接样式表,也常用于给标题添加小图标

<link />是空元素,仅包含属性,只能存在于head部分

(1)现需要在html文件中引入JS脚本文件,补全代码      src       

<script _____="./index.js"><script>

(2)head中一般使用哪个标签引入外部的CSS样式表文件?    link      

<_____ rel="stylesheet" href="style.css" type="text/css" />

(3)现有以下代码片段,要求实现定义SEO的关键字, 请补全代码片段     keywords     

<meta name="_______" content="CSDN,CSDN能力认证中心"/>

(4)在移动端设备中想要定义视口宽度为屏幕宽度,请补全代码片段      device-width     

<head>
    <meta name="viewport" content="width=________, initial-scale=1.0">
</head>

扩展:

        width=device-width :表示宽度是设备屏幕的宽度
        initial-scale=1.0:表示初始的缩放比例
        minimum-scale=0.5:表示最小的缩放比例
       maximum-scale=2.0:表示最大的缩放比例
       user-scalable=yes:表示用户是否可以调整缩放比例

(5)需定义文档的字符编码为utf-8,请补全代码片段     charset    

<head>
    <meta _______="UTF-8">
</head>

十八、CSS引入方式

CSS(层叠样式表)定义了HTML元素在页面中的样式、布局以及整个页面的布局。CSS遵循W3C规范,实现了跨浏览器的标准化。

 (1)现需要导入外部样式表,请补全代码片段      stylesheet   

<head>
	<meta charset="utf-8">
	<link rel="________" href="style.css" />
</head>

 (2)现需要导入外部样式表,请补全代码片段     href     

<head>
	<meta charset="utf-8">
	<link type="text/css" rel="stylesheet" ______="style.css" />
</head>

(3)现有以下代码片段,需要在行内引入CSS样式,补全代码片段     style      

<p _______="color: #333; font-size: 16px;">CSDN能力认证中心</p>

(4)现需要在index.css中引入文件style.css,补全代码片段        

/* index.css */
________ url('style.css')
p {
    font-size: 16px;
}
/* style.css */
p {
    color: red;
}

解析:使用@import url()可以在CSS文件中引入另外的CSS文件

(5)现需要导入外部样式表,请补全代码片段      text/css     

<head>
	<meta charset="utf-8">
	<link type="_______" rel="stylesheet" href="style.css" />
</head>

十九、CSS背景属性

 (1)现需要设置div的背景图高宽为50px,请补全代码片段     background-size     

<style>
    div {
        width: 100px;
        height: 100px;
        background-image: url('./bg.png');
        ________: 50px 50px;
    }
</style>
<div></div>

(2)现需要设置div的背景图片,请补全代码片段       url      

<style>
    div {
        background-image: ___________('./bg.png');
        height: 100px;
        width: 100px;
    }
</style>
<div></div>

(3)div需要横向平铺背景图片001.png,请补全代码片段        repeat-x       

div {
	background: url(images/001.png)  ________ left top;
}

(4)div需要设置背景图001.png的位置从左上角开始,请补全代码片段     background-position   

div {
    height: 100px;
    width: 100px;
    background-image: url('./bg.png');
    ___________: top left;
}

(5)现需要设置div的背景图,使背景图保持纵横比不变,最大程度覆盖背景区域,请补全代码片段      cover     

<style>
    div {
        width: 100px;
        height: 100px;
        background-image: url('./bg.png');
        background-size: ______;
    }
</style>
<div></div>

二十、CSS文本属性

  • horizontal-tb:文本流在水平方向从上到下排列,文字方向为水平方向

  • sideways-lr:文本流在垂直方向,从下至上、从左至右排列(该属性值不兼容webkit内核浏览器)

  • sideways-rl:文本流在垂直方向,从上至下、从右至左排列(该属性值不兼容webkit内核浏览器)

  • vertical-lr:文本流在垂直方向,从上至下、从左至右排列,文字方向为水平方向

  • vertical-rl:文本流在垂直方向,从上至下、从右至左排列,文字方向为水平方向,跟古诗阅读顺序一致

 (1)现需要实现英文小写转大写,请补全代码片段     text-transform     

<p style="________: uppercase">hello world</p>

(2)现需要实现古代书写从上到下,从右至左的效果(如图所示),请补全代码片段    writing-mode    

(3)现需要使文本不换行,且保留文本当中的四个空格,请补全代码片段      pre    

<style>
    p {
        width: 50px;
        white-space: _________;
    }
</style>
    
<body>
    <p>CSDN能力认证    专业IT能力认证</p>
</body>

(4)现需要给文本内容「CSDN能力认证」增加下划线,请补全代码片段    text-decoration    

<style>
    p {
        _________: 1px solid underline;
    }
</style>
<p>CSDN能力认证</p>

(5)现需要将p元素的行高设置为24px,请补全代码片段    line-height    

<style>
    p {
        _________: 24px;
    }
</style>
<p>CSDN能力认证</p>

二十一、基础选择器💥

选择器类型

描述

示例

通配选择器

通配选择器使用一个星号*表示,*会匹配所有元素

可以与其他选择器相结合,选择某元素下的所有元素

由于每个浏览器对元素的默认边距不一致,通配选择器常用于reset样式文件中,覆盖浏览器的默认样式

* {
    color: red;
}
标签选择器

通过标签名匹配,匹配文档中所有为此标签名的元素

标签选择器也常用于reset样式文件中,用于清除元素的默认样式,如li标签的小圆点、a标签的下划线等

p {
     color: red;
}
id选择器

通过井号#来定义id选择器,根据元素的id属性匹配(精确匹配)元素

id属性的属性值应当是当前文档唯一

#box {
     width: 300px;
}
类选择器

通过点.来定义类选择器,根据元素的class属性匹配(精确匹配)元素

class属性值在文档中可以重复

.container {
     height: 100px;
}
组合选择器

包括四种组合方式:后代选择器、子代选择器、相邻选择器、兄弟选择器

通过间隔符将基础选择器连接起来,实现组合选择的效果

选择器

间隔符

描述
后代选择器空格选取该元素的后代元素
子代选择器> 大于号选择该元素的第一级子元素
相邻选择器+ 加号选择该元素之后相邻第一个元素,且两者具有相同的父元素
兄弟选择器~ 波浪号选择该元素之后的同层级元素
#box>.nav p {
     color: blue;
}

(1)想要选择ol元素的子代li元素,并设置字体和字体颜色样式,请补齐这段代码    ol>li   

<style>
    ________{
        color: #000000;
        font-family: 'Microsoft YaHei';
    }
</style>
<ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
</ul>
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

解析:使用子代选择器,可以选取该元素的所有子代元素

(2)现有以下代码,要求使用类选择器选择内容为CSDN能力认证中心p元素,并为其设置样式,补全代码片段    .title     

<style>
    ______ {
        color: #333;
        font-size: 16px;
    }
</style>
<p class="title">CSDN能力认证中心</p>

(3)现有以下代码片段,要求使用id选择器选择内容为CSDN能力认证中心span元素,补全代码片段     #title    

<style>
    ______ {
        color: #333;
        font-size: 16px;
    }
</style>
<span id="title">CSDN能力认证中心</span>

(4)现需要重置浏览器样式,将全部元素的border/padding/margin都设置为0,请补全代码片段    *    

___ {
    border: 0;
    padding: 0;
    margin: 0;
}

(5)现有以下代码,需要将「CSDN能力认证中心」之后的所有p元素字体颜色设置为红色   ~  

<style>
    .title___p {
        color: red;
    }
</style>
    
<div>
    <p class="title">CSDN能力认证中心</p>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>C5全栈能力认证</p>
</div>

解析:在CSS选择器中,使用兄弟选择器(~)能够选中该元素之后的所有同级元素,并给这些元素设置样式


二十二、伪类选择器

 (1)将最后一栏背景设置为灰色,补全横线处数字      1   

<style>
	.item:nth-last-of-type(________) {
		background-color: gray;
	}
</style>
<ul class="list">
	<li class="item">2</li>
	<li class="item">3</li>
	<li class="item">5</li>
	<li class="item">6</li>
</ul>

过程

(2)划去内容不是质数的<li></li>,补全横线处数字      1     

<style>
	.item:nth-last-child(________) {
		text-decoration: line-through;
	}
</style>
<ul class="list">
	<li class="item">2</li>
	<li class="item">3</li>
	<li class="item">5</li>
	<li class="item">8</li>
</ul>

过程

 (3)要实现当鼠标悬停到a标签时移除下划线,请补齐选择器     hover    

a:________{
	text-decoration: none;
}

(4)需要将文本「C1见习能力认证」的字体颜色设置为红色,请补齐选择器     1    

<style>
    p:nth-of-type(_____) {
        color: red;
    }
</style>
    
<div>
    <h1>CSDN能力认证中心</h1>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>C5全栈能力认证</p>
</div>

解析:nth-of-type(N:N从1开始计数

(5)需要将所有内容为「CSDN」的文本的字体颜色设置为红色,请补齐选代码     nth-of-type    

<style>
    p:________(3n) {
        color: red;
    }
</style>

<div>
    <h1>CSDN能力认证</h1>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>CSDN</p>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>CSDN</p>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>CSDN</p>
</div>

二十三、伪元素选择器

一个选择器只能使用一个伪元素,伪元素必须在基础选择器语句后使用

为了便于区分伪类选与伪元素,使用双冒号【::】作为伪元素选择符

 (1)现需要实现首行文本为红色,请补全代码片段    first-line      

<style>
    p::_______{color: red;}
</style>
<p>CSDN软件工程师能力认证对标名企技术标准<br/>校招/转岗/加薪必备。</p>

(2)现需要实现在文字结尾添加一张图片,请补全代码片段     after      

<style>
    p::_______ {content: url('./bg.png');}
</style>
<p>CSDN软件工程师能力认证</p>

(3)现需要实现给文本请输入用户名设置样式,请补全代码片段     placeholder    

<style>
    input::_______ {content: url('./bg.png');}
</style>
<input type="text" placeholder="请输入用户名">

(4)现需要将li元素前的项目符号修改为*,请补全代码片段     marker     

<style>
	ul li::____ {
		content: '*';
  }
</style>
<ul>
	<li>C1 见习工程师能力认证</li>
	<li>C4 专项工程师能力认证</li>
	<li>C5 全栈工程师能力认证</li>
</ul>

(5)现需要实现在文字内容之前添加符号>,请补全代码片段     before        

<style>
    p::_______ {content: '>';}
</style>
<p>CSDN软件工程师能力认证</p>

二十四、CSS优先级

 (1)现有如下代码片段,hello world的最终显示颜色为color: __#111999__

<style>
	#son.bt p {color: #111999;}
	#father>div p {color: #333444;}
</style>
<div id="father">
	<div id="son" class="bt">
		<p>hello world</p>
	</div>
</div>

 过程:根据CSS选择器权重计算
            第一个选择器权重 = 100 + 10 + 1 = 111
           第二个选择器权重 = 100 + 0 + 1 + 1 = 102

(2)现有如下代码片段,hello world的最终显示颜色为color: ___#999998_____

<style>
	.text1 {color: #999998 !important;}
	#son {color: #00ff00;}
</style>
<p id="son" class="text1" style="color: #ff0000;">hello world</p>

 (3)现有如下代码片段,hello world的最终显示颜色为color: __#00ff00_

style>
.text1:nth-of-type(1) {
color: #999998
}
#son {
color: #00ff00;
}
</style>
<p id="son" class="text1">hello world</p>

(4)现有如下代码片段,文本「C1见习能力认证」的最终显示颜色为color: __#ff0000__

<style>
    .title ~ p {
        color: #ff0000;
    }
    div > p {
        color: #00ff00;
    }
</style>
<div>
    <p class="title">CSDN能力认证中心</p>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>C5全栈能力认证</p>
</div>

(5)现有以下代码,文本「C1见习能力认证」的字体颜色最终显示为___#00ff00__?

<style>
    .title ~ p {
        color: #ff0000;
    }
    div.box > p {
        color: #00ff00;
    }
</style>
<div class="box">
    <p class="title">CSDN能力认证中心</p>
    <p>C1见习能力认证</p>
</div>

二十五、块级元素与行内元素

 (1)现需要设置a的顶部外边距,需要将其设置为块级元素,请补齐代码片段    block      

a {
	display: ________;
	margin-top: 10px;
}

过程

 (2)现有以下代码,请问此时span元素的高度为__28px___?

<style>
	span {
		height: 50px;
		line-height: 28px;
	}
</style>
<span>CSDN能力认证中心</span>

解析span元素为行内元素,为行内元素设置宽,行内元素的宽高为内容的宽高

(3)以下选项中,全部标签都为行内元素的选项是 D:span、label、img、strong)

(4)要将p元素设置为行内元素不独占一行,请补全代码片段     display       

<style>
    p {
       _________: inline;
    }
</style>

<p>CSDN能力认证中心</p>

解答:css可以通过为p标签设置“display:inline;”或“display:inline-block;”样式使p标签不换行。

(5)要将div元素设置为不独占一行,且设置的宽高对元素产生影响,请补全代码片段  inline-block  

div {
    display: _______;
}

二十六、盒子模型💥

 (1)现有如下代码片段,请问标准盒模型中div的实际占位高度为__110_____px

div {
    width: 100px;
    height: 100px;
    margin: 5px;
}

解答:height(100) + margin(上:5+下:5)=110px

(2)现有如下代码片段,请问标准盒模型中div的实际占位高度是__120__px

div {
    width: 100px;
    height: 100px;
    margin-top: 10px;
    padding-top: 10px;
}

过程

 (3)如下代码片段,请问标准盒模型中div的实际占位高度为__110__px

div {
    width: 100px;
    height: 100px;
    margin: 5px 10px;
}

过程

 (4)现有以下代码,请问最终div的实际宽度是___200__px

div {
    box-sizing: border-box;
    width: 200px;
    height: 100px;
    padding: 5px;
    margin: 10px;
}

 (5)现有以下代码,请问最终div的实际高度是_______px

div {
    box-sizing: content-box;
    width: 150px;
    height: 150px;
    padding: 5px;
    margin: 10px;
}

过程


二十七、定位💥

static定位:页面上的每个盒子从上到下、从左到右依次排列的布局

relative定位:相对于元素自身原始位置定位,元素不脱离文档流,即原来元素所占的空间不会改变

absolute定位:元素相对于最近的非static定位的祖先元素定位进行偏移,元素脱离文档流

 fixed定位:相对于浏览器窗口进行定位,元素脱离文档流

sticky定位(存在兼容性问题):根据自身原始位置或浏览器窗口进行固定定位,类似relative和fixed的结合

(1)使div.box2定位在div.box1上方,横线处可填写的最大整型数字是     9    

<style>
	.box { 
		position: relative; 
	}
	.box1 {
		position: absolute;
		width: 400px;
		height: 400px;
		background: yellow;
		z-index: _______;
	}
	.box2 {
		position: absolute;
		width: 200px;
		height: 200px;
		background: orange;
		z-index: 9;
	}
</style>
<div class="box">
	<div class="box1"></div>
	<div class="box2"></div>
</div>

过程

(2)使类名为top的div定位在类名为bottom的div上方,横线处可填写的最小整数是?  10    

<style>
	.box { position: relative; }
	.top {
		position: absolute;
		width: 200px;
		height: 200px;
		background: red;
		z-index: _______;
	}
	.bottom {
		position: absolute;
		width: 400px;
		height: 400px;
		background: blue;
		z-index: 9;
	}
</style>
<div class="box">
	<div class="top"></div>
	<div class="bottom"></div>
</div>

过程

(3)现要求“Hello,World!”文本相对于div向左偏移20px,显示效果如下图,请补全代码片段     -20  

<style>
    body {
        padding-left: 100px;
        margin: 0px;
    }
    div {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: #999999;
    }
    p {
        position: absolute;
        left: _______px;
    }
</style>
<body>
    <div>
        <p>Hello,World!</p>
    </div>
</body>

过程

(4)如下图所示,将box1元素相对于自身位置进行定位偏移(红色方框为box1发生偏移前的位置),请补全代码片段     relative     

<style>
    body {
        padding: 100px;
    }
    .box1 {
        width: 150px;
        height: 150px;
        background-color: purple;
        position: ________;
        top: 50px;
        left: 100px;
    }
    .box2 {
        width: 300px;
        height: 300px;
        background-color: royalblue;
    }
</style>
<div class="box1">box1</div>
<div class="box2">box2</div>

 过程

 (5)现要求将header元素进行定位,使其固定在浏览器可视窗口的最上方,请补全代码片段   fixed   

header {
    width: 100%;
    height: 50px;
    position: ________;
    top: 0;
    background-color: #3f93f4;
}

二十八、浮动💥

 (1)现要求将main中的section元素在一行排列,请补全代码片段    float    

<style>
    main {
        width: 500px;
    }
    section {
        width: 80px;
        height: 80px;
        margin: 10px;
        background-color: cadetblue;
        ___________: left;
    }
</style>
<main>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
	<section></section>
</main>

 过程

(2)现有以下代码片段,要求实现box1和box2在同一行排列,box3排在box1和box2下方,补全代码片段     clear   

<style>
    .box1, .box2 {
        width: 300px;
        height: 500px;
        background-color: skyblue;
        float: left;
    }
    .box3 {
        width: 800px;
        height: 100px;
        background-color: #f51;
        ______: both;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

(3)现有以下代码,要求实现如图所示的文字环绕图片的效果,请补全代码片段    float     

<style>
    .box {
        width: 300px;
    }
    img {
        width: 100px;
        margin-right: 20px;
        ________: left;
    }
    p {
        text-align: justify;
    }
</style>
<div class="box">
    <img src="./images/logo.png" alt="logo">
    <p>C站能力认证是由中国软件开发者网站CSDN制定并推出的一个能力认证标准, C站软件工程师能力认证模块包含:C1见习能力认证、C4专项能力认证、C5全栈能力认证,开发者们根据实际情况和目标选择适合自己的认证路径。</p>
</div>

(4)现有以下代码,在所有元素都在同一行显示的情况下,请问此时排在最左边的元素的类名为__box3___?

<style>
.box1, .box2, .box3 {
    width: 200px;
    height: 80px;
    background-color: slateblue;
    float: right;
    margin: 20px;
}
</style>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

(5)现有以下代码,在所有元素都在同一行显示的情况下,请问此时排在最右边的元素的类名为__box1___?

   <style>
        .box1, .box2, .box3 {
            width: 200px;
            height: 80px;
            background-color: slateblue;
            margin: 20px;
        }
        .box1, .box3 {
            float: right;
        }
        .box2 {
            float: left;
        }
    </style>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

参考: C1能力认证训练题解析 _ 第二部分          css怎么设置p标签不换行


C1证书粘贴位置💯💯💯

​​​​​​​


⚠️注意 ~

💯本期内容就结束了,如果内容有误,麻烦大家评论区指出

如有疑问❓可以在评论区留言💬或私信留言💬,尽我最大能力🏃‍♀️帮大家解决👨‍🏫!

如果我的文章有帮助,欢迎打赏✔️鼓励博主🏃,您的鼓励是我分享的动力🏃🏃🏃~

  • 4
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:精致技术 设计师:CSDN官方博客 返回首页
评论

打赏作者

写程序的小王叔叔

感谢!您的打赏是我前进的动力~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值