C1-任务03-Web基础
C1-03 LZG小组
任务一
首先,在开源富⽂本编辑器( https://summernote.org/ )中随便输⼊⼀段⽂本
- 打开链接:https://summernote.org/如下图所示:
- 向其中白色区域随便输入一段文本,如下所示:
然后,在源码模式下,查看内容是如何被转变为带标签的文本的,都带了哪些HTML标签
- 点击下图红线圈画起来的标志,进入源码模式
- 点击上面所示标签之后,会出现以下情景:
会发现刚刚输入的内容加了一个<p></p>
,这是HTML中的段落标签。
最后,实现编辑器没有的功能,例如让表格隔⾏换⾊,加⼊JavaScript按钮,试着完成它吧:)
一、表格隔行换色
-
先点击刚刚红圈圈画出来的标志,退出源码模式
-
点击以下红笔标出来的地方,随自己选择几行几列,我选择的三行2列
-
在出现的表格中输入自己像输入的文字
-
进入源码模式
我对这些代码的格式进行了一些些的改变看滴会舒服一点,截图没截全,这一步可做可不做:
-
在tr标签中内部引入style样式,将第一行显示为红色,第二行显示为绿色,第三行显示为黄色,如下图所示
上图中的第三行中的背景颜色:#FFFF00。就是黄色的意思 -
退出源码模式后,就会发现表格已经隔行换色了
二、使用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 )
如果已注册账号则⽆需再注册
加深对HTML和CSS技术的理解
因为没有在code.org上找到所及即所得的形式,于是我就使用了sublime编辑器对HTML以及CSS技术进行理解,这个截取其中的一个图:例如HTML中的标签<h1>~<h6>
其中定义的标题大小从小到大进行排序,且一篇文本中只能含有一个h1标签
自测
-
HTML5为了使img元素可拖放,需要增加什么属性?
答:draggable=“true” -
HTML5哪⼀个input类型可以选择⼀个⽆时区的⽇期选择器?
答:type=“date” -
CSS盒⼦模型中的Margin、Border、Padding都是什么意思?
答:Margin:外边距,控制块级元素之间的距离
Border:边框,块级元素的边框
Padding:内边距,控制块级元素内部之间的距离 -
说出⾄少五种常⻅HTML事件
答:onclick:鼠标左键单击事件
onmouseover:鼠标进入事件
onmousuout:鼠标离开事件
onfocus:鼠标焦点事件
onblur:失去焦点事件
onmousemove:鼠标移动事件
onkeydown/onkeyup:键盘按下or抬起事件 -
HTML的onblur和onfocus是哪种类型的属性?
答:事件属性 -
怎么设置display属性的值使容器成为弹性容器?
答:display:flex -
JavaScript中有多少种不同类型的循环?
答:三种,分别是:for循环、do…while循环、while循环 -
⽤户搜索某个单词后,JavaScript⾼亮显示搜索到的单词,使⽤哪个语义化标签最合适?
答:mark