C1任务03 HTML、CSS 2021-05-21

学习目标：

 

了解学习富文本编辑器，HTML、CSS、JS

---

任务内容：

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

• 首先，在开源富文本编辑器（ https://summernote.org/）中随便输入一段文本
• 然后，在源码模式下，查看内容是如何被转变为带标签的文本的，都带了哪些HTML标签
• 最后，实现编辑器没有的功能，例如让表格隔行换色，加入JavaScript按钮，试着完成它吧

完成截图如下：

<style>
    .divcss5-td-1{width:40px}
    .divcss5-td-2{width:160px}
    .divcss5-td-3{width:200px}
</style>

    <meta charset="UTF-8">
    <title>练习</title>



<p color="red"><font color="#636363" style="background-color: rgb(255, 0, 0);">CSDN能力认证中心</font></p>
<table class="table table-bordered divcss5-td-3" border="1">
    <tbody id="tb1">
    <tr style="background-color: rgb(99, 99, 99);">
        <td class="divcss5-td-1">C1</td>
        <td class="divcss5-td-2">见习工程师认证</td>
    </tr><tr style="background-color: rgb(255, 255, 204);">
        <td>C4</td>
        <td>专项工程师认证</td>
    </tr><tr style="background-color: rgb(99, 99, 99);">
        <td>C5</td>
        <td>全栈工程师认证</td>
    </tr></tbody>
<script type="text/javascript">
        var t_name = document.getElementById("tb1");
        var t_len = t_name.getElementsByTagName("tr");
        for(var i=0;i<=t_len.length;i++){
            //偶数行时执行
            if(i%2 == 0){
                t_len[i].style.backgroundColor="#636363";

            }
            else{
                t_len[i].style.backgroundColor="#ffffcc";
            }
 }
    </script>
</table>
<br><br>
<button type="button" onclick="alertTips()">我要考试</button>
<script>
        function alertTips()
        {
            alert("考试信息已提交");
        }
</script>

任务二:「所见即所得」式开发

• 在code.org上以「所见即所得(WYSIwYG) 」的方式完成HTML和CSS系列网页开发任务（ https://studio.code.org/s/csd2-2019)

• 如果已注册账号则无需再注册。加深对HTML和CSS技术的理解

按照教程一步步完成即可

 

扩展：CSS盒子模型

 

• 深入理解CSS盒子模型多层次含义（参考：https://www.runoob.com/css/css-boxmodel.html）

 

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

• 边框边距

边框：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

边距：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

标准文档流（浮动与定位)。

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

例子如下：

img
{
    float:right;
}

 

 

自测

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

• draggable=”true”

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

• type=”date”

cSS盒子模型中的Margin、Border、Padding都是什么意思?

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像

说出至少五种常见HTML事件

• 窗口事件
• 表单事件
• 键盘事件
• 鼠标事件
• 多媒体事件
• 其他事件

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

• onblur和onfocus是窗口事件的属性

怎么设置display属性的值使容器成为弹性容器?（参考：https://blog.csdn.net/XIAOYANG55555/article/details/101326570）

• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

JavaScript中有多少种不同类型的循环?

• for 循环、do...while 循环和 while 循环。

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

• 我也不清楚，我看百度是<em>
•