任务一: 富文本编辑器使用
开源的富文本编辑器:https://summernote.org/
- 添加文字颜色,创建表格,隔行换色
2.创建按钮,点击弹窗
3.插入视频和音频
- 源码如下:
<p><span style="color:red">CSDN能力认证中心</span></p>
<table border="1" width="200px" height="50px">
<tbody>
<tr style="background-color:#eeeeee">
<td>1</td>
<td>data1</td><td>data2</td><td>data3</td>
</tr>
<tr>
<td>2</td>
<td>data1</td><td>data2</td><td>data3</td>
</tr>
<tr style="background-color:#eeeeee">
<td>3</td>
<td>data1</td><td>data2</td><td>data3</td>
</tr>
</tbody></table>
<br>
<input type="button" value="点击" onclick="alert('这是一个弹窗)');">
<br><br>
<p>插入视频</p>
<video autoplay="autoplay" controls="control" loop="loop" id="video">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
<br><br>
<p>插入音频</p>
<audio autoplay="autoplay" controls="controls" loop="">
<source src="http://music.163.com/song/media/outer/url?id=447925558.mp3" type="audio/mpeg">
</audio>
任务二: HTML和CSS网页开发任务
登录https://studio.code.org/s/csd2-2019,完成自己第一个网站!
拓展任务: CSS盒子模型布局
CSS部分:
* {
border: 0;
padding: 20px;
margin: 0;
}
div {
text-align: center;
}
#main_box {
width: 1400px;
height: 1000px;
background-color: #FCDC9C;
display: grid;
grid-gap: 20px;
}
.box1_6 {
background-color: #C4CC8C;
border: 3px solid #B4CC8C;
}
.box7_8 {
background-color: #F8A464;
}
.box9 {
background-color: #FCCC9C;
}
#box1 {
grid-column: 1/4;
grid-row:1/3;
line-height: 174px;
}
#box2 {
grid-column: 1/4;
grid-row:3/9;
line-height: 562px;
}
#box3 {
grid-column: 4/9;
grid-row:1/5;
line-height: 363px;
}
#box4 {
grid-column: 4/7;
grid-row:5/9;
line-height: 388px;
z-index: 1;
}
#box5 {
grid-column: 7/9;
grid-row:5/7;
line-height: 174px;
}
#box6 {
grid-column: 7/9;
grid-row:7/9;
line-height: 174px;
}
#box7 {
width: 300px;
height: 260px;
line-height: 180px;
position: absolute;
left: 600px;
top: 120px;
}
#box8 {
width: 300px;
height: 260px;
line-height: 180px;
position: absolute;
left: 1100px;
top: -100px;
}
#box9 {
position: absolute;
width: 300px;
height: 260px;
line-height: 180px;
left: 600px;
top: 1000px;
z-index: 0;
}
p {
font-size: 30px;
color: #FFFFFF;
}
Html部分:
<div id="main_box">
<div class="box1_6" id="box1">
<p>1</p>
</div>
<div class="box1_6" id="box2">
<p>2</p>
</div>
<div class="box1_6" id="box3">
<p>3</p>
</div>
<div class="box1_6" id="box4">
<p>4</p>
</div>
<div class="box1_6" id="box5">
<p>5</p>
</div>
<div class="box1_6" id="box6">
<p>6</p>
</div>
<div class="box7_8" id="box7">
<p>7</p>
</div>
<div class="box7_8" id="box8">
<p>8</p>
</div>
<div class="box9" id="box9">
<p>9</p>
</div>
</div>
## 自测
- HTML5为了使img元素可拖放,需要增加什么属性?
<img draggable="true">
- HTML5哪一个input类型可以选择⼀个无时区的日期选择器?
date - CSS盒子模型中的Margin、Border、Padding都是什么意思?
Margin:元素外边距。
Border:元素边框。
Padding:元素内边距。 - 说出至少五种常见HTML事件
onclick: 点击元素。
onchange:元素改变。
onm ouseover:鼠标移动。
onm ouseout:鼠标离开。
onkeydown:键盘按下。
onkeypress:键盘松开。 - HTML的onblur和onfocus是哪种类型的属性?
onfocus:在元素获得焦点时触发。
onblur:在元素失去焦点时触发。 - 怎么设置display属性的值使容器成为弹性容器?
display:flex; - JavaScript中有多少种不同类型的循环?
for 、do…while和 while - 用户搜索某个单词后,JavaScript高亮显示搜索到的单词,使用哪个语义化标签最合适?
mark标签