一：1：打开开源富文本编辑器（Summernote - Super Simple WYSIWYG editor）
2： 然后，在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签
输入一段话? ? CSDN能力认证中心
?最后，实现编辑器没有的功能，例如让表格隔行换色，加入JavaScript按钮
<table border="">
<colgroup>
<col style="background-color: blue">
<col style="background-color: yellow">
<col style="background-color: red">
</colgroup> <tbody><tr>
<td>树娟</td>
<td>任务三</td>
<td>代码</td>
</tr>
<tr>
<td>Hello</td>
<td>World</td>
<td>！</td>
</tr>
</tbody></table> 用代码建立一个表格，并且设置每一行的颜色，显示如下：
?接下来我们用下面的代码写出一个JavaScript按钮
<button onclick="alert('hello world！')">hello这是一个小小按钮</button> 点击按钮弹出消息
二：拓展：
深入理解CSS盒子模型多层次含义
边框边距
盒子模型包括：边框、内边距、外边距和内容。
边框由三部分组成，分别是：边框宽度，边框样式以及边框颜色：
| 属性 | 定义 |
| border-width | 定义边框粗细，单位是 |
| pxborder-style | 定义边框的样式：solid（实线）、dashed（虚线）、dotted（点线） |
| border-color | 定义边框的颜 |
内边距
| 属性 | 定义 |
| padding-left | 左内边距 |
| padding-right | 右内边距 |
| padding-top | 上内边距 |
| padding-bottom | 下内边距 |
外边距
| 属性 | 定义 |
| margin-left | 左外边距 |
| margin-right | 右外边距 |
| margin-top | 上外边距 |
| margin-bottom | 下外边距 |
标准文档流（浮动与定位）
标准文档流：指在不使用其他与排列和定位相关的特殊 CSS 规则时，各种元素的排列规则。
1.盒子浮动 float
Float 属性： 默认是 none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；
2.使用 clear 清除浮动的影响
Clear 属性： 默认是 none，允许两边都可以有浮动对象；
Left： 不允许左边有浮动对象
Right：不允许右边有浮动对象
Both：不允许有浮动对象
3.盒子定位 position
Position 属性： 默认是 static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；（包含框是指含有posistion属性的盒子）
Fixed：固定定位，以浏览器窗口为基准进行定位
三：完成css盒子布局模型
<style type="text/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;
}
</style>
<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>自测：
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