C1-见习工程师能力认证-03

Posted 2022-01-31 洛陨尘

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了C1-见习工程师能力认证-03相关的知识，希望对你有一定的参考价值。

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

1.在开源富文本编辑器中随便输入一段文本

富文本编辑器

2.在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些html标签

3.实现表格换色和js按钮

HTML代码

<h2>
	<font color="#ff0000">CSDN 我来了</font>
</h2>
<table class="table table-bordered" style="width:160px;height:40px">
 <tbody>
  	<tr style="background-color: rgb(181, 165, 214);">
    	<td>C1</td>
     	<td>见习工程师认证</td>
	</tr>
	<tr style="background-color: rgb(107, 173, 222);">
    	<td>C4</td>
    	<td>专项工程师认证</td>
	</tr>
	<tr style="background-color: rgb(181, 165, 214);">
    	<td>C5</td>
    	<td>全栈工程师认证</td>
 	</tr>
  </tbody>
  </table>
<h3>
  <button type="button" onclick="alert('好好学习，天天向上')">自主学习</button>
</h3>

呈现效果

点击自主学习按钮

任务二：『所见即所得』式开发

任务地址：code

任务三：拓展：CSS盒子模型

HTML文件

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="text.css">
  <head>CSS盒子模型</head>
  <body>
    <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>  
  </body>
</html>

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;

任务四：自测

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是哪种类型的属性？