一: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