本文共 1610 字，大约阅读时间需要 5 分钟。

C1-任务03-Web基础

C1-03 LZG小组

任务一

首先，在开源富⽂本编辑器（ https://summernote.org/ ）中随便输⼊⼀段⽂本

1. 打开链接：如下图所示：
   
2. 向其中白色区域随便输入一段文本，如下所示：
   

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

1. 点击下图红线圈画起来的标志，进入源码模式
   
2. 点击上面所示标签之后，会出现以下情景：
   
   会发现刚刚输入的内容加了一个<p></p>,这是HTML中的段落标签。

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

一、表格隔行换色

1. 先点击刚刚红圈圈画出来的标志，退出源码模式

2. 点击以下红笔标出来的地方，随自己选择几行几列，我选择的三行2列

   
   

3. 在出现的表格中输入自己像输入的文字

   

4. 进入源码模式

   
   我对这些代码的格式进行了一些些的改变看滴会舒服一点，截图没截全，这一步可做可不做：
   

5. 在tr标签中内部引入style样式，将第一行显示为红色，第二行显示为绿色，第三行显示为黄色，如下图所示

   
   上图中的第三行中的背景颜色：#FFFF00。就是黄色的意思

6. 退出源码模式后，就会发现表格已经隔行换色了

   
   二、使用JavaScript加入一个按钮，点击此按钮弹出相应的信息
   1 进入源码模式
   2.首先在源码中添加一个button点击按钮的标签，并写上你想写的文字，我写的是“点击我吧”。
   然后就在button标签中写入οnclick=“myFunction()” 其中的myFunction()是一个方法名，可以自己随意起个，onclick是在鼠标点击之后会触发事件，也就是会触发myFunction这个方法。
   最后在所有的标签底下，在<script></script>标签中编写JavaScript代码
   最终如下图所示：
   
   其中的alert就是弹出框
   3 退出源码模式，点击自己定义的按钮，就会弹出含有“哈哈哈你点击我啦”的警示框
   

任务二

在code.org上以「所⻅即所得（WYSIWYG）」的⽅式完成HTML和CSS系列⽹⻚开发任务（ https://studio.code.org/s/csd2- 2019 ）

因为没有在code.org上找到所及即所得的形式，于是我就使用了sublime编辑器对HTML以及CSS技术进行理解,这个截取其中的一个图：例如HTML中的标签<h1>~<h6>其中定义的标题大小从小到大进行排序，且一篇文本中只能含有一个h1标签

自测

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

   答：draggable=“true”

2. HTML5哪⼀个input类型可以选择⼀个⽆时区的⽇期选择器？

   答：type=“date”

3. CSS盒⼦模型中的Margin、Border、Padding都是什么意思？

   答：Margin:外边距，控制块级元素之间的距离
   Border：边框，块级元素的边框
   Padding：内边距，控制块级元素内部之间的距离

4. 说出⾄少五种常⻅HTML事件

   答：onclick:鼠标左键单击事件
   onmouseover:鼠标进入事件
   onmousuout:鼠标离开事件
   onfocus:鼠标焦点事件
   onblur:失去焦点事件
   onmousemove:鼠标移动事件
   onkeydown/onkeyup:键盘按下or抬起事件

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

   答：事件属性

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

   答：display:flex

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

   答：三种，分别是：for循环、do…while循环、while循环

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

   答：mark

转载地址：http://kucki.baihongyu.com/