web基础
语义化标签
1、现需要设置一个按钮，请填写语义化标签补全代码片段（仅填写一个标签名即可）
<_____>点我!</_____> buttoninput：输入框；a：超链接；div：块
2、在HTML中一般用哪个语义化标签表示斜体文本效果 i
p：段落标签；span：文本标签，行内元素；h4：标题
3、在HTML中一般用哪个语义化标签表示头部导航 nav
a：超链接；header：页眉，头部；link：链接外部资源；
4、在HTML中一般用哪个语义化标签定义无序列表<______>? ul
div：块；ol：有序列表；section：定义某个区域，块；
5、在HTML中一般用哪个语义话标签定义表单<_______>? form
aside：侧边栏；mian：唯一，指定主体内容；section：定义某个区域，块
![]()
表单标签
1、现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字，请补全下方代码片段
<form action="/example/html5/demo_form.asp">
密号：<input type="text" name="country_code" pattern="[0-9]{3}" ____title____="请输入三位数字" />
<input type="submit" />
</form>
2、现表单内有个提交按钮，点击后自动提交表单请求，请补全代码片段
<input type="___submit_____" value="提交">3、怎么用input标签创建一个表单重置按钮？请补齐这段代码
<input type="___reset_____" value="重置">4、怎么用input标签创建一个密码输入框？请补齐这段代码
<input type="____password____" placeholder="请输入密码">5、现有以下HTML代码，需要在点击提交按钮时，将用户名和密码自动提交到https://ac-api.csdn.net/login，请补全代码片段
<form ___action____="https://ac-api.csdn.net/login" method="get">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" value="提交">
</form>
![]()
转义字符
1、在HTML源代码中用什么实体名称表示版权符号 ©？ ©
2、在HTML源代码中用什么实体名称表示商标符号 ™ ™
3、在HTML源代码中用什么实体名称表示注册商标符号 ® ®
4、在HTML源代码中用什么实体名称表示大于号> >
5、在HTML源代码中用什么实体名称表示乘号x ×
Head头
1、现需要在html文件中引入JS脚本文件，补全代码
<script __src___="./index.js"><script>2、head中一般使用哪个标签引入外部的CSS样式表文件？
<__link___ rel="stylesheet" href="style.css" type="text/css" />3、现有以下代码片段，要求实现定义SEO的关键字， 请补全代码片段
<meta name="____keywords___" content="CSDN，CSDN能力认证中心"/>4、在移动端设备中想要定义视口宽度为屏幕宽度，请补全代码片段
<head>
<meta name="viewport" content="width=____device-width____, initial-scale=1.0">
</head>5、需定义文档的字符编码为utf-8，请补全代码片段
<head>
<meta ___charset___="UTF-8">
</head>
CSS引入方式
1、现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link rel="____text/css____" href="style.css" />
</head>2、现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" __href____="style.css" />
</head>3、现有以下代码片段，需要在行内引入CSS样式，补全代码片段
<p ____style___="color: #333; font-size: 16px;">CSDN能力认证中心</p>4、现需要在index.css中引入文件style.css，补全代码片段
/* index.css */
____@import___ url('style.css')
p {
font-size: 16px;
}
/* style.css */
p {
color: red;
}5、现需要导入外部样式表，请补全代码片段
<head>
<meta charset="utf-8">
<link type="___text/css____" rel="stylesheet" href="style.css" />
</head>CSS背景属性
1、现需要设置div的背景图高宽为50px，请补全代码片段
<style>
div {
width: 100px;
height: 100px;
background-image: url('./bg.png');
_____background-size___: 50px 50px;
}
</style>
<div></div>
2、现需要设置div的背景图片，请补全代码片段
<style>
div {
background-image: ____url_______('./bg.png');
height: 100px;
width: 100px;
}
</style>
<div></div>3、div需要横向平铺背景图片001.png，请补全代码片段
div {
background: url(images/001.png) ____repeat-x____ left top;
}4、div需要设置背景图001.png的位置从左上角开始，请补全代码片段
div {
height: 100px;
width: 100px;
background-image: url('./bg.png');
____background-position_______: top left;
}5、现需要设置div的背景图，使背景图保持纵横比不变，最大程度覆盖背景区域，请补全代码片段
<style>
div {
width: 100px;
height: 100px;
background-image: url('./bg.png');
background-size: __cover____;
}
</style>
<div></div>
CSS文本属性
1、现需要实现英文小写转大写，请补全代码片段
<p style="___text-transform____: uppercase">hello world</p>2、现需要实现古代书写从上到下，从右至左的效果（如图所示），请补全代码片段
<p style="___writing-mode_____: vertical-rl; height: 100px;">两个黄鹂鸣翠柳，一行白鹭上青天</p>3、现需要使文本不换行，且保留文本当中的四个空格，请补全代码片段
<style>
p {
width: 50px;
white-space: _____pre____;
}
</style>
<body>
<p>CSDN能力认证 专业IT能力认证</p>
</body>4、现需要给文本内容「CSDN能力认证」增加下划线，请补全代码片段
<style>
p {
_____text-decoration____: 1px solid underline;
}
</style>
<p>CSDN能力认证</p>5、现需要将p元素的行高设置为24px，请补全代码片段
<style>
p {
_____line-height____: 24px;
}
</style>
<p>CSDN能力认证</p>基础选择器
1、想要选择ol元素的子代li元素，并设置字体和字体颜色样式，请补齐这段代码
<style>
____ol>li____{
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元素，并为其设置样式，补全代码片段
<style>
__.title____ {
color: #333;
font-size: 16px;
}
</style>
<p class="title">CSDN能力认证中心</p>3、现有以下代码片段，要求使用id选择器选择内容为CSDN能力认证中心的span元素，补全代码片段
<style>
___#title___ {
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>
伪类选择器
1、将最后一栏背景设置为灰色，补全横线处数字
<style>
.item:nth-last-of-type(1) {
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>，补全横线处数字
<style>
.item:nth-last-child(1) {
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标签时移除下划线，请补齐选择器
a:hover{
text-decoration: none;
}4、需要将文本「C1见习能力认证」的字体颜色设置为红色，请补齐选择器
<style>
p:nth-of-type(1) {
color: red;
}
</style>
<div>
<h1>CSDN能力认证中心</h1>
<p>C1见习能力认证</p>
<p>C4专项能力认证</p>
<p>C5全栈能力认证</p>
</div>5、需要将所有内容为「CSDN」的文本的字体颜色设置为红色，请补齐选代码
<style>
p:nth-of-type(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、现需要实现首行文本为红色，请补全代码片段
<style>
p::____first-line___{color: red;}
</style>
<p>CSDN软件工程师能力认证对标名企技术标准<br/>校招/转岗/加薪必备。</p>
2、现需要实现在文字结尾添加一张图片，请补全代码片段
<style>
p::___after___ {content: url('./bg.png');}
</style>
<p>CSDN软件工程师能力认证</p>3、现需要实现给文本请输入用户名设置样式，请补全代码片段
<style>
input::___placeholder____ {content: url('./bg.png');}
</style>
<input type="text" placeholder="请输入用户名">4、现需要将li元素前的项目符号修改为*，请补全代码片段
<style>
ul li::__marker__ {
content: '*';
}
</style>
<ul>
<li>C1 见习工程师能力认证</li>
<li>C4 专项工程师能力认证</li>
<li>C5 全栈工程师能力认证</li>
</ul>5、现需要实现在文字内容之前添加符号>，请补全代码片段
<style>
p::___before____ {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>
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>-
【内联样式】 > 【ID选择器】 > 【类选择器、属性选择器、伪类选择器】 > 【标签选择器 、伪元素选择器】
块级元素与行内元素
1、现需要设置a的顶部外边距，需要将其设置为块级元素，请补齐代码片段
a {
display: ____block___;
margin-top: 10px;
}
2、现有以下代码，请问此时span元素的高度为___28px__？
<style>
span {
height: 50px;
line-height: 28px;
}
</style>
<span>CSDN能力认证中心</span>3、以下选项中，全部标签都为行内元素的选项是_______？
4、要将p元素设置为行内元素不独占一行，请补全代码片段
<style>
p {
_____display____: inline;
}
</style>
<p>CSDN能力认证中心</p>5、要将div元素设置为不独占一行，且设置的宽高对元素产生影响，请补全代码片段
div {
display: ____inline-block___;
}
盒子模型
1、现有如下代码片段，请问标准盒模型中div的实际占位高度为____110___px
div {
width: 100px;
height: 100px;
margin: 5px;
}
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;
}
-
怪异盒模型的实际大小 = 盒模型设置的
width、height，宽高已经包含了border和padding
5、现有以下代码，请问最终div的实际高度是___160____px
div {
box-sizing: content-box;
width: 150px;
height: 150px;
padding: 5px;
margin: 10px;
}标准盒模型
怪异盒模型
定位
1、使div.box2定位在div.box1上方，横线处可填写的最大整型数字是
<style>
.box {
position: relative;
}
.box1 {
position: absolute;
width: 400px;
height: 400px;
background: yellow;
z-index: ___9____;
}
.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上方，横线处可填写的最小整数是？
<style>
.box { position: relative; }
.top {
position: absolute;
width: 200px;
height: 200px;
background: red;
z-index: __10____;
}
.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>0
3、使类名为top的div定位在类名为bottom的div上方，横线处可填写的最小整数是？
<style>
.box { position: relative; }
.top {
position: absolute;
width: 200px;
height: 200px;
background: red;
z-index: __-20__;
}
.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>
4、如下图所示，将box1元素相对于自身位置进行定位偏移（红色方框为box1发生偏移前的位置），请补全代码片段
<style>
body {
padding: 100px;
}
.box1 {
width: 150px;
height: 150px;
background-color: purple;
position: _relative_;
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元素进行定位，使其固定在浏览器可视窗口的最上方，请补全代码片段
header {
width: 100%;
height: 50px;
position: ____fixed____;
top: 0;
background-color: #3f93f4;
}浮动
1、现要求将main中的section元素在一行排列，请补全代码片段
<style>
main {
width: 500px;
}
section {
width: 80px;
height: 80px;
margin: 10px;
background-color: cadetblue;
___float_: left;
}
</style>
<main>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</main>
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;
__clear_: both;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
3、现有以下代码，要求实现如图所示的文字环绕图片的效果，请补全代码片段
<style>
.box {
width: 300px;
}
img {
width: 100px;
margin-right: 20px;
_float__: 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>
浙公网安备 33010602011771号