一、语义化标签
(1)现需要设置一个按钮,请填写语义化标签补全代码片段(仅填写一个标签名即可)
(2) 在HTML中一般用哪个语义化标签表示斜体文本效果?
(3)在HTML中一般用哪个语义化标签表示头部导航?
(4) 在HTML中一般用哪个语义化标签定义无序列表<______>
?
(5)在HTML中一般用哪个语义话标签定义表单<_______>
?
二、表单标签
(1)现要实现提交表单时输入的不是3位数的数字时提示请输入三位数字
,请补全下方代码片段
(2)现表单内有个提交按钮,点击后自动提交表单请求,请补全代码片段。
(3) 怎么用 input 标签创建一个表单重置按钮?请补齐这段代码
(4)现有以下HTML代码,需要在点击提交按钮时,将用户名和密码自动提交到https://ac-api.csdn.net/login
,请补全代码片段
三、转义字符
(1)在HTML源代码中用什么实体名称表示版权符号 ©? ©
(2)在HTML源代码中用什么实体名称表示商标符号 ™? ™
(3)在HTML源代码中用什么实体名称表示注册商标符号 ®? ®
四、head 头
(1) head
中一般使用哪个标签定义文档的标题?
(2)head
中一般使用哪个标签引入外部的CSS样式表文件?
(3)现有以下代码片段,要求实现定义SEO的关键字, 请补全代码片段。
(4)在移动端设备中想要定义视口宽度为屏幕宽度,请补全代码片段。
(5)需定义文档的字符编码为utf-8
,请补全代码片段
五、CSS 引入方式
(1)现需要导入外部样式表,请补全代码片段。
(2) 现需要导入外部样式表,请补全代码片段。
(3) 现有以下代码片段,需要在行内引入CSS样式,补全代码片段。
(4)现需要在index.css
中引入文件style.css
,补全代码片段。
六、CSS 背景属性
(1)现需要设置div
的背景图高宽为50px,请补全代码片段。
(2)现需要设置div
的背景图片,请补全代码片段。
(3)div需要横向平铺背景图片001.png,请补全代码片段。
(4)div需要设置背景图001.png的位置从左上角开始,请补全代码片段。
(5)现需设置div
的背景图,使背景图保持纵横比不变,最大程度覆盖背景区域,补全代码片段。
七、CSS 文本属性
(1)现需要实现英文小写转大写,请补全代码片段。
(2)现需要实现古代书写从上到下,从右至左的效果(如图所示),请补全代码片段。
(3)现需要使文本不换行,且保留文本当中的四个空格,请补全代码片段。
(4)现需要给文本内容「CSDN能力认证」增加下划线,请补全代码片段。
(5)现需要将p
元素的行高设置为24px
,请补全代码片段。
八、基础选择器
(1)想要选择ol元素的子代li元素,并设置字体和字体颜色样式,请补齐这段代码。
(2) 现有以下代码,要求使用类选择器
选择内容为CSDN能力认证中心
的p
元素,并为其设置样式,补全代码片段。
(3)现需要重置浏览器样式,将全部元素的border/padding/margin
都设置为0,请补全代码片段。
(4)现有以下代码,需要将「CSDN能力认证中心」之后的所有p
元素字体颜色设置为红色。
九、伪类选择器
(1)将最后一栏背景设置为灰色,补全横线处数字。
(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>
(3)要实现当鼠标悬停到a标签时移除下划线,请补齐选择器。
(4)需要将单数行文本的字体颜色设置为红色,偶数行文本的字体颜色设置为蓝色,请补齐选代码 。
十、伪元素选择器
(1)现需要实现首行文本为红色,请补全代码片段。
(2)现需要实现在文字结尾添加一张图片,请补全代码片段。
(3)现需要实现给文本请输入用户名
设置样式,请补全代码片段。
(4)现需要将li
元素前的项目符号修改为*
,请补全代码片段。
十一、CSS优先
(1)现有如下代码片段,hello world的最终显示颜色为color: ________
(2)现有如下代码片段,hello world的最终显示颜色为color: ________
十二、块级元素和行内元素
(1)现需要设置a
的顶部外边距,需要将其设置为块级元素,请补齐代码片段
(2)现有以下代码,请问此时span元素的高度为_____?
十三、盒子模型
(1)现有如下代码片段,请问标准盒模型中div
的实际占位高度为_______px
(2)现有以下代码,请问最终div
的实际宽度是_______px
(3)现有以下代码,请问最终div
的实际高度是_______px
十四、定位
(1)使div.box2定位在div.box1上方,横线处可填写的最大整型数字是
十五、浮动
(1)现要求将main中的section元素在一行排列,请补全代码片段
(2)现有以下代码片段,要求实现box1和box2在同一行排列,box3排在box1和box2下方,补全代码片段