任务一：使用富文本编辑器
-
实现样式如图
-
实现代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 实现隔行换色 */
.test{
background-color: #DEB887;
}
</style>
</head>
<body>
<!-- 做出表格 -->
<table border="1" cellspacing="1" cellpadding="1">
<tr class="test">
<td>姓名</td>
<td>性别</td>
</tr>
<tr>
<td>孙悟空</td>
<td>男</td>
</tr>
<tr class="test">
<td>猪八戒</td>
<td>男</td>
</tr>
<tr>
<td>白骨精</td>
<td>女</td>
</tr>
</table>
<br />
<!-- 做出按钮 -->
<button id="button" type="button">点我试试</button>
<script type="text/javascript">
// 获取按钮的id
button=document.getElementById("button");
// 实现按钮的弹窗
button.onclick=function(){
alert("我出来啦！！！")
}
</script>
</body>
</html>
任务二：所见即所得式开发
自测
1.HTML5为了使img元素可拖放，需要增加什么属性？
设置元素可拖放：将draggable属性设置为true
拖动什么：ondragstart 和 setData()
放到何处：ondragover
进行放置：ondrop
2.HTML5哪一个input类型可以选择一个无时区的日期选择器？
Input 类型: datetime-local
<input type="datetime-local" name="bdaytime">
3.CSS盒子模型中的Margin，Boder，Padding都是什么意思？
padding：内边距
border：边框
margin：外边距
4.说出至少五种常见HTML事件
onclick：当单击鼠标时运行脚本
ondrag：当拖动元素时运行脚本
oninput：当元素获得用户输入时运行脚本
onload：当文档加载时运行脚本
onfocus：当窗口获得焦点时运行脚本
5.HTML的onblur和onfocus是哪种类型的属性？
窗口事件属性
6.怎么设置display属性的值使容器成为弹性容器？
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
7.JavaScript中有多少种不同类型的循环？
三种。for 循环、do...while 循环和 while 循环。
8.用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？
mark