C1认证任务三

最新推荐文章于 2024-05-19 17:34:30 发布

牛 

最新推荐文章于 2024-05-19 17:34:30 发布

阅读量238

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/weixin_44727513/article/details/117037207

版权

学习目标：

一、学会使用富文本编辑器
二、“所见即所”式开发
三、CSS盒子模型

学习内容：

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

首先我们需要从 https://summernote.org/ 进入富文本编辑器
在这里插入图片描述在其中随意输入一段话，并切换到源码模式下，然后放大
随后我们仿照源码写出另一段话，来更好的了解标签<p>的作用
我们切回到文本模式下可以出现之前的内容
之后，我们可以试着改变颜色，和添加按钮等，这里我列出了本次任务需要用到的一些标签和属性

标签	含义
`<p> </p>`	HTML中的一个段落
`<font></font>`	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色。
`<br>`	换行
`<table>`	定义表格
`<tbody></tbody>`	定义表格的主体
`<tr></tr>`	定义表格的行
`<td></td>`	定义表格的单元
`<button></button>`	定义一个按钮

属性	含义
`style=""`	规定元素的行内样式
`color=""`	HTML5 不支持。HTML 4.01 已废弃。规定文本的颜色
`class=""`	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
`type=""`	规定按钮的类型
`onclick=""`	当单击鼠标时运行脚本

按照任务把代码敲好，此时就可以实现我们所要求的内容和格式

<p><font color="#00ffff">心情大好 </font></p>
<p><font color="red">出去走走</font></p>

<table style="border-collapse: collapse; border: 1px solid #0e0e0e;" border="1">
<tbody>
<tr style=" background-color: silver;"><td>C1</td><td>见习工程师认证</td></tr>
<tr><td>C4</td><td>专项工程师认证</td></tr>
<tr style=" background-color: silver;"><td>C5</td><td>全栈工程师认证</td></tr>
</tbody>
</table>
<p>
<span style="font-family: Helvetica;"></span>
 </p>
<button type="button" onclick="alert('点击成功')">我要考试</button>

在这里插入图片描述

任务二：“所见即所”式开发

在code.org上完成网页开发的课程及系列任务https://studio.code.org/s/csd2-2019 ，根据提示做完即可。
在这里插入图片描述

任务三：CSS盒子模型

首先，我们需要用到的软件是webstorm，在应用商店下载就可以，随后我们选择新建任务，我们这里需要用到html文件，其中会有CSS的使用，这里附上CSS的基本知识供大家学习https://www.w3cschool.cn/css/css-boxmodel.html

<html>
<head>
  <style>
    div {
      color: #FFFFFF;
    }
    .left,
    .right {
      float: left;
    }
    .body {
      width: 780px;
      height: 600px;
      background-color: #FFD700;
      padding: 20px;
    }
    .a {
      width: 300px;
      height: 200px;
      background-color: #BDB76B;
    }
    .b {
      margin-top: 20px;
      width: 300px;
      height: 380px;
      background-color: #BDB76B;
    }
    .c {
      margin-left: 20px;
      width: 460px;
      height: 300px;
      background-color: #BDB76B;
    }
    .d {
      position: relative;
      top: 240px;
      left: 60px;
      width: 150px;
      height: 100px;
      background-color: #BDB76B;
    }
    .e {
      position: relative;
      left: 20px;
      top: -80px;
      width: 220px;
      height: 280px;
      background-color: #BDB76B;
      z-index: 0;
    }
    .f {
      width: 230px;
      height: 150px;
      background-color: #BDB76B;
      margin-top: 20px;
      margin-left: 30px;
    }
    .g {
      width: 230px;
      height: 110px;
      background-color: #FFA500;
      margin-top: 20px;
      margin-left: 30px;
    }
    .h {
      width: 230px;
      height: 110px;
      background-color: #FFA500;
      margin-top: 60px;
      margin-left: 20px;
    }
    .i {
      width: 160px;
      height: 110px;
      background-color: #FFA500;
      position: relative;
      left: 230px;
      top: -240px;
    }
    .cent,
    .centr {
      float: left;
    }
  </style>
</head>
<body>
<div class="body">
  <div class="left">
    <div class="a">1</div>
    <div class="b">2</div>
  </div>
  <div class="right">
    <div class="c">3
      <div class="h">7</div>
      <div class="i">8</div>
    </div>
    <div class="cen">
      <div class="cent">
        <div class="d">9</div>
        <div class="e">4</div>
      </div>
      <div class="centr">
        <div class="f">5</div>
        <div class="g">6</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

在这里插入图片描述

自测

1.HTML5为了使img元素可拖放，需要增加什么属性

答：<img draggable="true">

2.HTML5哪一个input类型可以选择一个无时区的日期选择器

答：<input type="date">

3.CSS盒子模型中的margin,border,padding都是什么意思

答：外边距(margin)、边框(border)、内边距(padding)

4.说出5种常见的HTML事件

答：Window 事件属性，表单事件，键盘事件，鼠标事件，媒介事件

5.HTML的onblur和onfocus是哪种类型的属性

答：onblur失去焦点事件 onfocus 获得焦点事件

6.怎么设置display属性值使容器成为弹性容器？

答：flex

7.Javascript种有多少种不同类型的循环？

答：for循环；do..while循环；while循环

8.用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最适合

答：<mark>

牛 

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
C1认证任务三

学习目标：一、学会使用富文本编辑器二、“所见即所”式开发三、CSS盒子模型学习内容：任务一：学会使用富文本编辑器首先我们需要从 https://summernote.org/ 进入富文本编辑器在其中随意输入一段话，并切换到源码模式下，然后放大随后我们仿照源码写出另一段话，来更好的了解标签<p>的作用我们切回到文本模式下可以出现之前的内容之后，我们可以试着改变颜色，和添加按钮等，这里我列出了本次任务需要用到的一些标签和属性标签含义<p> &lt
复制链接

扫一扫