C1任务——Web基础

最新推荐文章于 2022-08-06 10:32:12 发布

「已注销」

最新推荐文章于 2022-08-06 10:32:12 发布

阅读量152

点赞数 8

分类专栏： C1认证

本文链接：https://blog.csdn.net/weixin_53790347/article/details/118324601

版权

C1认证专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Web基础

说明

大厂每年都要招聘大量的前端软件工程师,有些开发基于浏览器应用,有些开发基于H5的应用,而有些可能会开发小程序和桌面应用。不管是做哪种开发工作的前端工程师,都离不开HTML,CSS,JavaScript这三类Web浏览器核心技术。HTML定义了浏览器中各种元素的分类和用途,CSS定义了浏览器页面的整体布局和外观,而 JavaScript可以动态创建页面,使网页能够响应用户的点击、拖拽等各种事件,给用户更好的体验。

任务一

首先,在开源富文本编辑器(https://summernote.org/)中随便输入一段文本
在这里插入图片描述

然后,在源码模式下,査看内容是如何被转变为带标签的文本的,都带了哪些HTML标签
在这里插入图片描述
最后,实现编辑器没有的功能,例如让表格隔行换色,加入 JavaScript按钮,试着完成它吧

我们可以使用以下代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        table,tr,td{border:1px solid; padding:5px 30px 5px 0;}
        .tr1{background-color:#E6E6E6}
      </style>
      
      <script>
        function fun(){
        alert("ssdd");
      }
      </script>
      
    <p><span style="color: red;">CSDN认证中心</span></p>
      <table style="border-collapse:collapse;">
        <tbody>
          <tr class="tr1">
            <td>C1</td>
            <td>见习工程师</td>
          </tr>
          <tr>
            <td>C4</td>
            <td>专项工程师</td>
          </tr>
          <tr class="tr1">
            <td>C5</td>
            <td>全栈工程师</td>
          </tr>
        </tbody>
      </table>
      <br>
      <button onclick="alert('考试开始')">我要考试</button>
</body>
</html>

效果为点击我要考试弹出考试开始
在这里插入图片描述

所见即所得式开发

在这里插入图片描述

CSS盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style type="text/css">
        * {
                margin: 0;
                padding: 0;
            }
        body {
            background-color: rgb(255, 214, 128);
            border: solid 2px rgb(154, 154, 154);
            height: 500px;
            display: flex;
            flex-flow: column wrap;
            color:white;
        }
        #B1 {
            width: 30%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #B2 {
            width: 70%;
            height: 40%;
            position: relative;
        }

        #B3 {
            width: 70%;
            height: 60%;
            display: flex;
            flex-direction: row ;
        }
        #B4 {
            width: 50%;
            display: flex;
            position: relative;
        }
        #B5 {
            width: 50%;
            display: flex;
            flex-direction: column;
        }
        .b1, .b2, .b3, .b4, .b5, .b6,.b7,.b8,.b9 {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .b1, .b2, .b3, .b4, .b5, .b6 {
            border: solid rgb(160, 180, 116) 1px;
            background-color: rgb(180, 220, 115);
            margin: 20px;
        }
        .b1 {
            height: 30%;
        }
        .b2 {
            flex-grow: 1;
        }
        .b3 {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .b4 {
            flex-grow: 1;
            z-index: 1;
        }
        .b5 ,.b6{
            flex-grow: 1;
        }
        .b7 {
            width: 25%;
            height: 60%;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: 40px;
            background-color: rgb(255, 168, 113);
        }
        .b8 {
            width: 25%;
            height: 60%;
            position: absolute;
            background-color: rgb(255, 168, 113);
            top: -25%;
            left: 70%;
        }
        .b9 {
            width: 60%;
            height: 30%;
            background-color: rgb(255, 190, 130);
            position: absolute;
            top: 90%;
            left: 20px;
            margin: auto 20px;
        }
    </style>
</head>
<body>
    <div id="B1">
        <div class="b1">1</div>
        <div class="b2">2</div>
    </div>
    <div id="B2">
        <div class="b3">3</div>
        <div class="b7">7</div>
        <div class="b8">8</div>
    </div>
    <div id="B3">
        <div id="B4">
            <div class="b4">4</div>
            <div class="b9">9</div>
        </div>
        <div id="B5">
            <div class="b5">5</div>
            <div class="b6">6</div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

自测

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

draggable

HTML5哪⼀个input类型可以选择⼀个无时区的日期选择器？

datetime-local

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

Margin：元素外边距
Border：元素边框
Padding：元素内边距

在这里插入代码片说出至少五种常见HTML事件

onclick：点击元素
onchange：元素改变
onmouseover：鼠标移动
onmouseout：鼠标离开
onkeydown：键盘按下
onkeypress：键盘松开

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

onfocus：在元素获得焦点时触发。
onblur：在元素失去焦点时触发。

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

display=“flex”

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

for 循环、do…while 循环和 while 循环。

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

<strong>：定义重要的文本

「已注销」

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
7
评论
C1任务——Web基础

说明大厂每年都要招聘大量的前端软件工程师,有些开发基于浏览器应用,有些开发基于H5的应用,而有些可能会开发小程序和桌面应用。不管是做哪种开发工作的前端工程师,都离不开HTML,CSS,JavaScript这三类Web浏览器核心技术。HTML定义了浏览器中各种元素的分类和用途,CSS定义了浏览器页面的整体布局和外观,而 JavaScript可以动态创建页面,使网页能够响应用户的点击、拖拽等各种事件,给用户更好的体验。任务一首先,在开源富文本编辑器(https://summernote.org/)中随便输
复制链接

扫一扫