C1能力认证训练题解析 _ 第二部分 _ Web基础

C1能力认证训练题解析 _ 第二部分 _ Web基础

一、语义化标签

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

<_____>点我!</_____>

不用说,按钮标签<button></button>

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

斜体文本效果<i></i>

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

 头部导航<nav></nav>

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

ul 无序列表、ol 有序列表

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

<form></form>

二、表单标签

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

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

title,它可以用在任何元素上,把鼠标移动到元素上面,就会显示 title 的内容

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

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

提交 submit、重置 reset

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

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

提交 submit、重置 reset

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

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

action

三、转义字符

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

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

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

转义字符查看下表: 

显示 实体名称 实体编号 说明
空格 &nbsp; &#160; 半角不换行的空格,相当于按下键盘space键产生的空格,受字体影响,不同字体表现一致
空格 &ensp; &#8194; 半角空格,占1/2个中文字符宽度,基本不受字体影响,不同字体空格宽度表示一致
空格 &emsp; &#8195; 全角空格,占1个中文字符宽度,基本不受字体影响,不同字体空格宽度表示一致
< &lt; &#60; 小于号
> &gt; &#62; 大于号
& &amp; &#38; &符号
" &quot; &#34; 双引号
' ------ &#39; 单引号
© &copy; &#169; 版权符号
&trade; &#8482; 或 &#153; 商标符号
® &reg; &#174; 注册商标符号
$ ------ &#36; 美元符号
¥ &yen; &#165; 人民币符号
× &times; &#215; 乘号
÷ &divide; &#247; 除号

四、head 头

(1) head中一般使用哪个标签定义文档的标题?

文档标题标签<title></title>

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

答案:link

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

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

答案:keywords

meta 标签主要用于 SEO 优化,通过 keywords 和 description 描述网页的关键字和描述

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

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

答案:device-width

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

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

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

答案:charset

五、CSS 引入方式

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

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

答案:stylesheet

link 标签用于链接外部文档,最常用的是方式是用于链接样式表;

link 标签常用属性:

        href:被链接文档的位置 URL;

        type:规定被链接文档的 MIME 类型;

        rel:规定当前文档与被链接文档之间的关系。

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

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

答案:href

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

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

答案:style

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

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

答案:@import

六、CSS 背景属性

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

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

答案:background-size

C1能力认证训练题解析 _ 第二部分 _ Web基础

C1能力认证训练题解析 _ 第二部分 _ Web基础

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

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

答案:url

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

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

答案:repeat-x

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

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

答案:background-position

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

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

答案:cover

七、CSS 文本属性

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

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

答案:text-transform

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

<p style="________: vertical-rl; height: 100px;">两个黄鹂鸣翠柳,一行白鹭上青天</p>

答案:writing-mode

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

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

答案:pre

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

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

答案:text-decoration

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

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

答案:line-height

八、基础选择器

(1)想要选择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>

答案:ol>li

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

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

答案:.title

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

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

答案:*

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

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

答案:~ (兄弟选择器)

九、伪类选择器

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

答案:1

:nth-last-of-type(n)匹配属于其父元素的第 N 个指定类型的子元素,从最后一个 子元素开始计数, :nth-last-of-type(1)则可选取属于其父元素的最后一个 li 元素 

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

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

答案:1

划去内容不是质数的 li 元素,首先判断哪个 li 元素的内容不是质数;

上述代码最后一个 li 元素的内容为 8 不是质数,则要选取最后一个 li 元素 .item:nth-last-child(1)

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

a:________{
	text-decoration: none;
}

答案:hover

(4)需要将单数行文本的字体颜色设置为红色,偶数行文本的字体颜色设置为蓝色,请补齐选代码 。

<style>
    p:nth-of-type(odd) {
        color: red;
    }
    p:nth-of-type(______) {
        color: blue;
    }
</style>

<div>
    <p>CSDN能力认证中心</p>
    <p>C1见习能力认证</p>
    <p>C4专项能力认证</p>
    <p>C5全栈能力认证</p>
</div>

答案:even

even 偶数行、odd 奇数行

十、伪元素选择器

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

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

答案:first-line

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

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

答案:after

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

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

答案:placeholder

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

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

答案:marker

伪元素

描述 示例
::after 用于创建伪元素,在元素内容之后插入内容,该伪元素默认为行内元素 p::after {
     content: "结束";
}
::before 用于创建伪元素,在元素内容之前插入内容,该伪元素默认为行内元素 p::before {
     content: "开始";
}
::first-line 向文本的首行添加样式,只能应用于块级元素 p::first-line {
     color: #333;
}
::first-letter 向文本的首字母添加样式,只能应用于块级元素 p::first-letter {
     font-size: 16px;
}
::marker 用于改变li元素的数字或符号的样式,只能作用于display属性值为list-item的元素 ul li::marker {
     content: '*';
}
::placeholder 用于设置表单元素占位符文本的样式 input::placeholder {
     color: blue;
}

十一、CSS优先

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

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

答案:#111999

C1能力认证训练题解析 _ 第二部分 _ Web基础

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

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

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

答案:#999998

在一个样式声明中使用!important时,这个样式将覆盖其他的任何声明,与优先级无关

十二、块级元素和行内元素

行内元素:

  • 不独占一行,默认不自动换行

  • 宽高、上下边距不可以控制,仅有左右边距可以控制且会对周围元素产生影响

  • 一般只能包含内容和其他行内元素,不可包含块级元素

  • 设置宽高无效,宽高默认为内容的宽高

  • 常见行内元素:span、label、a、em、strong、img

  • 设置display属性为display: inline可将元素转换为行内元素

块级元素:

  • 在浏览器显示时总是独占一行

  • 宽高、内外边距可以控制,且上下左右的外边距均可对周围元素产生影响

  • 可以包含内容、行内元素和其他块级元素

  • 宽度未设置时默认为其父级元素的宽度,高度未设置时为内容的高度

  • 常见块级元素:div、form、footer、h1-h6、ol、ul、p、video

  • 设置display属性为display: block可将元素转换为块级元素

行内块级元素:

  • 综合块级元素与行内元素的特性

  • 不独占一行

  • 元素宽高、内外边距均可设置,上下左右边距均会对周围元素产生影响

  • 宽高未设置时默认为内容宽高

  • 常见行内块级元素:button、input、textarea、select

  • 设置display属性为display: inline-block可将元素设置为行内块级元素

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

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

答案:block

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

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

答案:28px

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

十三、盒子模型

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

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

答案:110

  • 标准盒模型实际占位高度 = height + padding-top + padding-bottom + margin-top + margin-bottom + border-top + border-bottom

  • 在上述题目中,该盒模型只设置了height和margin,【margin:5px;】表示margin-top、margin-bottom、margin-left、margin-right均为5px

  • div的实际占位高度 = height + margin-top + margin-bottom = 100 + 5 + 5 = 110

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

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

答案:200

怪异盒模型的实际大小 = 盒模型设置的width、height,宽高已经包含了border和padding

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

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

答案:160

  • box-sizing: content-box;表示div为标准盒模型

  • div实际高度 = width + padding-top + padding-bottom + border-top + border-bottom

十四、定位

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

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

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

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

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

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

答案:9

  • z-index属性值越高,层级越高,层级高的元素会覆盖层级低的元素

  • z-index值相同时,后面的元素会覆盖前面的

  • box2的z-index值为9,box1的z-index值设置小于或等于9时,即可实现box2定位在box1上方

十五、浮动

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

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

答案:float

使用浮动属性也可实现文字环绕图片的效果

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

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

答案:clear (清除浮动)

box1和box2均为浮动元素,清除浮动即可使box3排在box1和box2下方

上一篇:css练习1


下一篇:less 基础教学