目录
- 任务一：使用富文本编辑器
-
- 1.在开源富文本编辑器中随便输入一段文本
- 2.在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签
- 3.实现表格换色和js按钮
- 任务二：『所见即所得』式开发
- 任务三：拓展：CSS盒子模型
- 任务四：自测
任务一：使用富文本编辑器
1.在开源富文本编辑器中随便输入一段文本
富文本编辑器
2.在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签
3.实现表格换色和js按钮
HTML代码
<h2>
<font color="#ff0000">CSDN 我来了</font>
</h2>
<table class="table table-bordered" style="width:160px;height:40px">
<tbody>
<tr style="background-color: rgb(181, 165, 214);">
<td>C1</td>
<td>见习工程师认证</td>
</tr>
<tr style="background-color: rgb(107, 173, 222);">
<td>C4</td>
<td>专项工程师认证</td>
</tr>
<tr style="background-color: rgb(181, 165, 214);">
<td>C5</td>
<td>全栈工程师认证</td>
</tr>
</tbody>
</table>
<h3>
<button type="button" onclick="alert('好好学习，天天向上')">自主学习</button>
</h3>
呈现效果
点击自主学习按钮
任务二：『所见即所得』式开发
任务地址：code
任务三：拓展：CSS盒子模型
HTML文件
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="text.css">
<head>CSS盒子模型</head>
<body>
<div class="d1">
<div class="left">
<div class="a">1</div>
<div class="b">2</div>
</div>
<div class="right">
<div class="c">3</div>
<div class="lefts">
<div class="d">4</div>
<div class="rights">
<div class="e">5</div>
<div class="f">6</div>
</div>
</div>
<div class="j">7</div>
</div>
<div class="h">8</div>
<div class="i">9</div>
</div>
</body>
</html>
CSS文件
.d1{
width:800px;
height:500px;
background-color:#FADB9A;
margin: 20px;
position:absolute;
}
.a{
width:190px;
height:120px;
text-align:center;
line-height: 120px;
color:#FFF;
background-color:#C5D08E;
margin-bottom: 20px;
}
.b{
width:190px;
height:340px;
text-align:center;
line-height: 350px;
color:#FFF;
background-color:#C5D08E;
}
.left{
float:left;
margin: 10px;
}
.right{
float:right;
margin:10px;
}
.c{
width:570px;
height:150px;
text-align:center;
line-height:150px;
color:#FFF;
background-color:#C5D08E;
float:left;
}
.d{
width:260px;
height:310px;
text-align:center;
line-height:310px;
color:#FFF;
background-color:#C5D08E;
float: left;
margin-top: 20px;
}
.e{
width:290px;
height:145px;
text-align:center;
line-height:160px;
color:#FFF;
background-color:#C5D08E;
margin-bottom: 20px;
}
.f{
width:290px;
height:145px;
text-align:center;
line-height:160px;
color:#FFF;
background-color:#C5D08E;
}
.j{
width:150px;
height:100px;
text-align:center;
line-height:100px;
color:#FFF;
position:absolute;
margin-left: 20px;
background-color:#F3A464;
}
.h{
width:150px;
height:100px;
text-align:center;
line-height:100px;
color:#FFF;
position:absolute;
top:-40px;
margin-left: 610px;
background-color:#F3A464;
}
.i{
width:150px;
height:100px;
text-align:center;
line-height:100px;
color:#FFF;
margin-top: 430px;
background-color:#F8CC9D;
margin-left: 250px;
}
.rights{
float: right;
margin-top: 20px;
}
.lefts{
width: 570px;
margin-top: 20px;
}
任务四：自测
1.HTML5为了使img元素可拖放，需要增加什么属性？
draggable="true"
2.HTML5哪⼀个input类型可以选择⼀个⽆时区的⽇期选择器？
datetime-local
3.CSS盒⼦模型中的Margin、Border、Padding都是什么意思？
margin:外边距
boder:边框
padding:内边距。
4.说出⾄少五种常⻅HTML事件
窗口事件：onblur , onfocus , onload , onresize ;
表单事件：onblur , onfocus , onsubmit , onchange , onreset , oninput , onselect
键盘事件：onkeydown , onkeypresss , onkeyup;
鼠标事件：onclick , ondrag , onmousedown , onmousemove , onmouseout
其他事件：onshow , ontoggle
5.HTML的onblur和onfocus是哪种类型的属性？
属于事件类型的属性
onblur失去焦点时事件
onfocus获得焦点时事件。
6.怎么设置display属性的值使容器成为弹性容器？
display:flex
7.JavaScript中有多少种不同类型的循环？
共三种分别为：
for 循环
do…while 循环
while 循环。
8.⽤户搜索某个单词后，JavaScript⾼亮显示搜索到的单词，使⽤哪个语义化标签最合适？
mark