C1任务03 Web的世界（上）

最新推荐文章于 2023-12-18 11:43:22 发布

「已注销」

最新推荐文章于 2023-12-18 11:43:22 发布

阅读量736

点赞数 2

分类专栏：计算机C1认证文章标签： html css web

本文链接：https://blog.youkuaiyun.com/luck_gid/article/details/117026695

版权

一、任务准备

二、任务一-在开源文本编辑器上初识HTML

HTML表格资料

三、任务2-在code.org上完成HTML和CSS系列网页开发任务

一、任务准备

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

帮助⼿册软件

Dash：https://kapeli.com/dash
Zeal：https://zealdocs.org/

HTML

W3C：https://www.w3.org/TR/
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/HTML

CSS

Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/CSS

JavaScript

ECMAScript标准：https://www.ecma-international.org/technical-committees/tc39/?tab=published-standards
Mozilla社区：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

二、任务一-在开源文本编辑器上初识HTML

1、⾸先，在开源富⽂本编辑器中随便输⼊⼀段⽂本

例如我输入“玫瑰花”三个字，如下

2、然后，在源码模式下，查看内容是如何被转变为带标签的⽂本的，都带了哪些HTML标签

在源码模式下，玫瑰花带有了<p>标签，可以看到标签是以<p>开始、</p>结束的

3、最后，实现编辑器没有的功能，例如让表格隔⾏换⾊，加⼊JavaScript按钮，试着完成它吧

第一步我们首先要添加一个表格

第二步，我们转到源码形式

可以看到源码形式下的表格标签代码全在一行，这样我们很难去区分，因此我们利用<>标签开始、</>标签结束来划分标签行

到这一步不太好拆分了，那么我开始转到编辑器页面填写表格内容

之后再转到源码页面,由此我们可以重新进行划分

4、之后需要实现表格隔行换色，拿玫瑰花作为实验模板

实现效果

之后查看玫瑰花的源码

将玫瑰花背景加色的标签复制到表格标签中

实现效果，结果是猜想失败

于是查资料，得到如下

HTML表格资料

在HTML中，一个表格一般由以下3个部分组成

表格：table标签

行：tr标签

单元格：td标签

语法如下：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明

tr指的是table row（表格行）

td指的是table data cell（表格单元格）

<table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示表格单元格的开始和结束。

对源代码可以进行标签的重新划分，如下

<p><span style="background-color: rgb(239, 239, 239);">玫瑰花</span></p>
<p><br></p>
 <table class="table table-bordered">
  <tbody>
    <tr>
      <td>c1</td>
      <td>见习工程师认证</td>       
    </tr>
    <tr>
      <td>c4</td>
      <td>专项工程师认证</td>
    </tr>
    <tr>
      <td>c5</td>
      <td>全栈工程师认证</td>
    </tr>
  </tbody>
</table><p><br></p>

通过资料的补充学习，且按照要求，是将整行的背景颜色进行更改，我们尝试在行标签<tr>里加入style="background-color: rgb(239, 239, 239);"背景色设置