C1任务03-wed基础和布局

任务一： 富文本编辑器使用

开源的富文本编辑器：https://summernote.org/

1. 添加文字颜色，创建表格，隔行换色
   
   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：元素改变。
  onmouseover：鼠标移动。
  onmouseout：鼠标离开。
  onkeydown：键盘按下。
  onkeypress：键盘松开。
• HTML的onblur和onfocus是哪种类型的属性？
  onfocus：在元素获得焦点时触发。
  onblur：在元素失去焦点时触发。
• 怎么设置display属性的值使容器成为弹性容器？
  display:flex;
• JavaScript中有多少种不同类型的循环？
  for 、do…while和 while
• 用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？
  mark标签