任务一：使用富文本编辑器
经过简单摸索后，发现会直接将一行字转换为“p标签”，直接切换编码模式，用前端的技术完成任务。
附上上述效果代码：
<style>
.table tr:nth-child(odd){
background-color:yellow;
}
</style>
<p>CSDN任务三</p>
<table class="table">
<tbody><tr>
<td>c1</td>
<td>1</td>
</tr>
<tr>
<td>c4</td>
<td>2</td>
</tr>
<tr>
<td>c5</td>
<td>3</td>
</tr>
</tbody></table>
<button onclick="javascript:alert(1)">按钮，点击出弹框</button>
任务二：‘所见所得式’开发
我用的是“Markdown”，“Markdown”可以将文档转换为有效的XHTML或HTML文档，所以在这里简单实现一下效果。
拓展CSS盒子模型
CSS盒子模型布局
HTML部分代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="new_file.css" />
</head>
<body>
<div class="box1 container">
<div class="color" style="height: 20%;">1</div>
<div class="color top" style="height: 76.8%;">2</div>
</div>
<div class="box2 container">
<div class="bottom" style="flex: 1;height: 30%;">
<div class="color three">3
<div class="seven">7</div>
</div>
</div>
<div style="display: flex;height: 66.8%;">
<div class="right" style="flex: 1;">
<div class="color">4</div>
</div>
<div style="flex: 2;">
<div class="color bottom" style="height: 50%;">5</div>
<div class="color" style="height: 45.3%;">6</div>
</div>
</div>
</div>
<div class="box eight">8</div>
<div class="box nine">9</div>
</body>
</html>
CSS部分代码
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: yellow;
display: flex;
padding: 20px;
}
div {
height: 100%;
}
.box1 {
flex: 1;
margin-right: 20px;
}
.box2 {
flex: 2;
}
.color {
background-color: greenyellow;
}
.top {
margin-top: 20px;
}
.right {
margin-right: 20px;
}
.bottom {
margin-bottom: 20px;
}
.three {
position: relative;
}
.seven {
position: absolute;
width: 30%;
height: 80%;
top: 10%;
left: 4%;
}
.seven,
.eight,
.nine {
background-color: red;
}
.box {
width: 240px;
height: 160px;
}
.eight {
position: fixed;
top: -60px;
right: 50px;
}
.nine {
position: fixed;
right: 47.4%;
bottom: -50px;
z-index: -1;
}
自测
1、HTML5为了使img元素可拖放，需要增加draggable属性并设置值为true；
2、HTML5种input类型datatime-local可以选择一个无时区得日期选择器；
3、CSS盒子模型中，margin外边距（容器与容器间得距离），padding内边距（容器与容器内容间得距离），border边框；
4、onclick点击事件、onchange元素内容改变事件、onload页面初始化加载事件、onblur元素失去焦点事件、onfocus元素获取焦点事件；
5、给容器设置display:flex，可以让容器变为弹性容器；
6、JS中得循环：for循环，while循环，do-while循环，for-in循环，for-of循环，each()循环；
7、语义化标签mark可高亮显示。