任务一：使用富文本编辑器
1、随便输入一行字，然后再源码模式下查看内容是如何转变成带标签的文本，都带了那些HTML标签
2、实现编辑器没有的功能，如：实现表格隔行变色，实现斑马线效果；加入JavaScript、实现按钮弹出消息功能
源码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>C1-任务03</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="dist/summernote-bs4.css">
<script type="text/javascript" src="dist/summernote-bs4.js"></script>
<link rel="stylesheet" href="examples/example.css">
<style type="text/css">
table {
width: 500px;
margin: 30px auto;
border: #aaa 4px double;
border-collapse: separate;
border-spacing: 0px
}
tr{
background: #FFFFFF;
}
tr:nth-child(even){
background: #66afe9;
}
</style>
</head>
<body>
<div class="container">
<div class="summernote">
<h4>C1-任务03之任务一</h4>
<p class="badge badge-primary">任务内容：</p><br>
<p id="content" class="badge badge-info"> 实现表格隔行换色，加入JavaScript按钮实现相应功能</p>
<table>
<thead>
<tr>
<td>序号</td>
<td>内容</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>html</td>
<td><button onclick="alert('直接显示点击结果')">显示内容</button></td>
</tr>
<tr id="sd">
<td>2</td>
<td>css</td>
<td><button onclick="onshowMessage('就是玩')">显示任务内容</button></td>
</tr>
<tr>
<td>3</td>
<td>javaScript</td>
<td><a href="#">空白链接</a></td>
</tr>
<tr>
<td>4</td>
<td>dom与bom</td>
<td>阿加莎杰卡斯</td>
</tr>
<tr>
<td>5</td>
<td>其他</td>
<td>我想要的结果</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote({
height: 500,
width:800,
tabsize: 2
});
});s
function onshowMessage(target){
var content =document.getElementById("content").innerText;
alert(content)
}
</script>
</html>
拓展：CSS盒子模型
效果图
html部分
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
<div class="box9">9</div>
</body>
css部分
body{
width:800px;
height:600px;
padding: 20px;
margin:20px;
border-color: #737373;
border-style:solid;
background-color: burlywood;
text-align: center;
}
.box9{
width:120px;
height:120px;
position: relative;
left: 290px;
bottom: 910px;
padding: 10px;
margin: 10px;
line-height: 100px;
background-color: #f8cc9d;
}
.box1{
width:270px;
height:150px;
margin-bottom: 20px;
padding: 70px;
background-color: aquamarine;
}
.box2{
width:270px;
height:390px;
line-height: 300px;
padding: 10px;
background-color: aquamarine;
}
.box3{
width:470px;
height:180px;
position: relative;
left:290px;
bottom: 560px;
line-height: 180px;
margin-bottom: 20px;
margin-right: 20px;
padding: 10px;
background-color: aquamarine;
}
.box4{
width:240px;
height:360px;
left:330px;
top: 240px;
position: absolute;
margin-bottom: 20px;
padding: 10px;
z-index: 999;
background-color: aquamarine;
}
.box5{
width:210px;
height:185px;
position: relative;
left:550px;
top: -560px;
margin-bottom: 20px;
padding-top: 80px;
background-color: aquamarine;
}
.box6{
width:210px;
height:155px;
position: relative;
left:550px;
bottom: 560px;
margin-bottom: 20px;
padding: 10px;
background-color: aquamarine;
}
.box7{
width:120px;
height:120px;
position: relative;
left: 300px;
top: -1110px;
background-color: #F3A464;
padding: 10px;
line-height: 110px;
margin: 10px 10px 20px;
}
.box8{
width:120px;
height:120px;
position: relative;
left: 540px;
top: -1300px;
background-color: #F3A464;
padding: 10px;
margin: 10px;
line-height: 95px;
}