C1认证：作业三

最新推荐文章于 2024-05-11 18:54:59 发布
置顶 最新推荐文章于 2024-05-11 18:54:59 发布
阅读量713 收藏 10
点赞数 3
分类专栏： CSDN工程师认证
作者：何锦洋
本文链接：https://blog.csdn.net/weixin_44537669/article/details/115665635
版权

1、背景

一、来源于生活：
	很多（刚接触）互联⽹的⼈, 其实都是从（浏览器）开始的。

二、引人深思：
	游览器上的（图片、视频、购物）能够展现在（我们面前）是如何实现的呢？
	
三、追根溯源：
	1、(浏览器)其实(是)⼀类互联⽹编程技术的(载体)。
	2、真正构建这一切的是：HTML、CSS、JavaScript这3种语言。
	3、三种语言的作用：
		3-1：HTML定义了浏览器中各种元素的分类和⽤途。
		3-2：CSS定义了Web⻚⾯的布局和外观。
		3-3：⽽JavaScript可以动态创建⻚⾯，使⽹⻚能够响应⽤户的点击、拖拽等各种事件，能处理表单，给⽤户更好的体验。

2、任务大纲

一、基本任务
	要求：完成一个表格 （有表格标题、换行变色、添加：按钮点击事件）

二、基本（拓展任务）
	要求：在https://studio.code.org上注册账号，完成HTML和CSS的系列⽹⻚开发任务。

三、高级（拓展任务）
	要求：
		1、理解CSS盒⼦模型的多层含义（边框边距、标准⽂档流、浮动与定位、布局模式）
        2、完成下图的CSS盒⼦模型布局
        
四、自测
	1、HTML5为了使img元素可拖放，需要增加什么属性？
	2、HTML5哪⼀个Input类型可以选择⼀个⽆时区的⽇期选择器？
	3、CSS盒⼦模型中的Margin、Border、Padding都是什么意思？
	4、说出⾄少五种常⻅HTML事件

3、解决任务

3.1、推荐学习：视频、笔记

推荐视频：html、 css、 javaScript

推荐笔记：html、 css、 javaScript

3.2、基本任务

要求：完成一个表格 （有表格标题、换行变色、添加：按钮点击事件）

3.2.1、任务需求

image-20210412175830691

3.2.2、实现效果

bandicam 2021-04-12 18-10-50-660 00_00_00-00_00_30

3.2.3、源码

源码地址：https://pan.baidu.com/s/1_XOlxWUPimrEsUYlSjnzCg 提取码：5f36

3.3、基本（拓展任务）

要求：在https://studio.code.org上注册账号，完成HTML和CSS的系列⽹⻚开发任务。

3.3.1、任务需求

image-20210412184538013

3.3.2、开发任务：位置

1、登录：https://studio.code.org 创建一个账号

image-20210412194756307

2、复制PDF上的：URL进入到（任务页面）

image-20210412194819295

3、进行：任务学习

image-20210412195026645

3.3.3、任务模板

最后一个任务：要求设计一个（个人作品集网站）
	1、作品集1：个人博客     
	2、作品集2：我写的（一首小诗）
image-20210412203016729

3.3.4、实现效果

1、个人博客网站

博客地址： https://www.yangzaikongzhongfei.com/

在这里插入图片描述

2、我写的一首小诗

源码地址：https://pan.baidu.com/s/1_XOlxWUPimrEsUYlSjnzCg 提取码：5f36

在这里插入图片描述

3.4、高级拓展任务

3.4.1、任务需求

image-20210412215322919

3.4.2、实现效果

image-20210413143810950

3.4.3、原理分析

1、第一步：先了解（盒子模型、浮动） 知识。 可以参考我（另一篇文章）css快速学习笔记

image-20210413072346776

2、第二步：分析任务（盒子）div构造

image-20210413144002404

3、第三步：初步给盒子定个大小， 先把（样品）的框架搭出来， 浮动问题参考博客：css

image-20210413104621887

4、第四步给他们：标上序号（方便修改）

image-20210413105058985

5、第五步：借助于游览器（检查模式）， 进行修改（样式）。

image-20210413105210585

6、第六步：样式（调整完毕后），去掉边框， 予以上色，即可。

3.4.4、源码

源码地址：https://pan.baidu.com/s/1_XOlxWUPimrEsUYlSjnzCg 提取码：5f36

4、自测题

4.1、第一题：

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

<!--img标签中添加draggable 属性设置（拖拽）-->
draggable="true"			<!--true 可拖拽-->

draggable="flase"			<!--false 不可拖拽 -->

4.2、第二题

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

<input type="date">
image-20210413113514414

4.3、第三题

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

image-20210413140710089

4.4、第四题

说出⾄少五种常⻅HTML事件

参考网站（菜鸟教程）: https://www.runoob.com/tags/ref-eventattributes.html

1、点击事件: onclick
	<button onclick="copyText()">复制文本</button>		

2、获取焦点事件：onfocus
	<input type="text" id="fname" onfocus="setStyle(this.id)">

3、失去焦点事件：onblur
	<input type="text" name="fname" id="fname" onblur="upperCase()">
        
4、表单提交事件：onsubmit
	<form action="demo_form.html" onsubmit="checkForm()">
        
5、当文档加载完成后运行事件：onload
	<body onload="load()">

5、总结

技术源于生活， html、css、js又何尝不是如此？

我们其中的很多人，都想建立属于自己的（一个家）， 一个家的载体（很多时候：是一座房子）。

我们需要，买房子， 要添置家具， 要装修, 要它智能化。 

不就正对应我们的： html、css、js吗？ 
	html(是毛坯房、待美化的家具)
	css(是粉刷、美化家具的利器)
	js(是实现：指纹解锁，人脸识别， 家中器物联网化、智能化的好扳手)
漫漫求
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
C1认证_1
qq_45061154的博客
05-31 1058
数据编码技术背后的计算机二进制知识是软件工程师必备的基础技能，也是C1阶段的计算机通识模块之一，大厂开发中的多媒体数据采集、分割、压缩、编解转码、传输、纠错、合并等工作，都和它息息相关 ...
技术知识库——C1见习能力认证（应用软件开发的基础知识）
CSDN能力认证官方博客
03-10 6039
C站软件工程师能力认证对标大厂招聘标准，练好本领，直通大厂拿高薪。 了解详情点击：C站（CSDN）软件工程师能力认证 C站能力认证包含C1见习能力认证、C4专项能力认证、C5全栈能力认证，对应各项能力认证的知识模块，我们精选了优质文章供大家学习参考。 这篇文章我们整理了针对C1见习能力认证相关技术的文章。 C1认证含信息/编码、IP/组网、程序逻辑、Web基础4大板块，帮助你掌握计算机科学技术中的应用软件开发方面的基础知识。 信息/编码 https://blog.csdn.net/qi.
C1认证_02
qq_45061154的博客
06-01 430
BAT、TMD等一二线大厂都是互联网公司，如果希望进这样的企业做软件开发，TCP/IP、HTTP和Socket通信等网络相关协议、技术，就是必须牢牢掌握的核心知识，这也是C1阶段的计算机通识模块之二。后续C4/C5中的所有开发技术，也会高频用到这些网络的基础知识。本任务通过网络抓包工具，让学习者以最直接的方式近距离「观察」网络究竟⻓什么样子。 ...
2024年网络安全最全C1认证学习笔记（第一章）_c1笔记(1)，程序员进阶
最新发布
m0_54903333的博客
05-11 756
二进制二进制：是指在数学和数字电路中以2为基数的记数系统，二进制只有0和1两个数字符号，其运算规律是逢2进1，例如101101。八进制八进制：一种以8为基数的计数法，采用0，1，2，3，4，5，6，7这八个数字符号，其运算规律是逢8进1，例如57。十进制十进制：一种以10为基数的计数法，采用0，1，2，3，4，5，6，7，8，9这十个数字符号，其运算规律是逢10进1，例如99。十六进制。
C1—任务02--计算机网络
飞扬晴雪
04-21 246
C1—任务02–计算机网络 1.任务1 使用的工具：谷歌浏览器，fidlie，postman 1.1.结题思路 我们向Web服务器发送请求到获得信息过程如下：我们输入网址，相当于给服务器提交了一个请求，服务器接到请求之后，会寻找对应的资源，如果资源存在则加载资源在浏览器进行渲染，显示出对应的信息，如果不存在则返回400等信息。我们请求分为两类 POST 和 GET，POST比GET传输数据量大，以表格方式提交信息，获取服务器响应。 1.2.解题步骤 1.打开fidlie，（需要提前注册账号，fidile下载
c1认证（web进阶篇）
ceike的博客
08-06 606
其实学习开发web前端也有半年了，经过这次专业认证学习，发现自己的不足之处比自己想象中的要多的多；也意识到，了解，熟悉，与精通之间的差距；这一周多的时间里，让我受益和感触最深的就是，用马云先生的一句话:"因小而美，因小而伟大"； The best asset you have is that you are young. Don't complain. Let the other people complain. The opportunity lie, always lies where p....
C1认证总结
m0_55422956的博客
03-01 2178
C1 认证总结 用时一周时间，通过对C1整体内容的学习，我收获了很多，分享以下几点： 深刻的思维碰撞 C1的任务过程中，我们有和多时间都是在小组的讨论，讨论题怎么做，某个知识点怎样理解，讨论怎样可以快速的完成任务， ...
C1认证_网络抓包
qq_45061154的博客
06-02 247
使用网络抓包工具来完成认证第二个任务。 ⾸先，访问⽹址：http://temp.blog8090.com/ ，提交⼿机号、姓名，在浏览器返回的信息中，得到下⼀步任务的「暗号」
C1认证任务
牛-菜菜的博客
05-11 438
学习目标： 数据编码技术背后的计算机二进制知识是软件工程师必备的基础技能，也是C1阶段的计算机通识模块之一，大厂开发中的多媒体数据采集、分割、压缩、编解转码、传输、纠错、合并等工作，都和它息息相关。 1、用（0）（1）绘图； 2、掌握进制编辑器； 3、修改植物大战僵尸存档。 学习内容： 一、准备软件： 1.Hex Editor Neo（修改的工具）（https://www.hhdsoftware.com/hex-editor） 2.PlantsVsZombies（植物大战僵尸）（最好使用电脑
C1认证经验总结
一个优秀的极客「白泽」
12-23 5042
C1认证经验总结 在前段时间，突然看到CSDN官方举行了CSDN软件开发精英赛，抱着试试看的态度报考。最终获得了第五名的成绩，因此对自己的备考经验做一总结：CSDN软件开发精英赛（首赛）精英榜 1. 什么是C1认证？ 从官网的介绍来开，通过C1认证，表明持有人具有软件开发所必需的基础知识，具备“计算机通识”、“程序逻辑”和“Web基础”能力，其中程序逻辑使用JavaScript语言作为编程语言。确保持有者是可以从事软件开发相关的见习/实习类岗位工作的。也就是说，如果能通过C1的认证，你就已经具备了在公司中实
超全C1认证学习笔记，内容详细，赶快收藏
CSDN能力认证官方博客
04-15 1955
在我们考过C认证和正在考C认证的同学们当中，都有十分认真的同学。他们每堂课都认证的记下笔记，归纳好，方便自己后续的复习。 今天我们也收到我们C认证考生的投稿，他一共投稿了三篇文章，内容包括计算机通识、WEB基础、JavaScript基础三篇文章，文章干货满满，赶快收藏哦~ 计算机通识 C1认证学习笔记（第一章）https://blog.csdn.net/Aluxian_/article/details/123476618?spm=1001.2014.3001.5501 WEB基础 C1认证
C1认证学习笔记（第四章）
Aluxian_的博客
04-16 2058
C1认证（三）——Web进阶：DOM节点操作（上）：任务目标:任务背景:任务内容：任务练习：DOM节点操作（下）：任务目标:任务背景:任务内容：DOM修改：DOM添加：DOM删除：任务练习：DOM控制CSS样式：任务目标:任务背景:通过style属性控制样式：通过classList控制样式：任务练习： DOM节点操作（上）： 任务目标: 理解DOM结构以及HTML节点关系 掌握常用的节点获取方法及属性 掌握常用的节点属性获取方式 任务背景: DOM（Document Object Model——文档对象模型
C1认证学习笔记（第二章）
Aluxian_的博客
04-13 2027
C1认证（二）——Web基础：语义化标签：任务目标：任务背景：常见的语义化标签：任务练习：表单标签：任务目标：任务背景：form标签：input 元素:label标签：select标签：button元素：任务练习：转义字符：任务目标：任务背景：转义字符实体：任务练习：Head头：任务目标：任务背景：head标签：title标签：link 标签：style 标签：script标签：meta标签：base 标签：任务练习：CSS引入方式：任务目标：任务背景：行内样式：内嵌样式：外部样式： 语义化标签： 任务目标
C1认证备考记录
qq_40983811的博客
02-07 344
C认证
新手小白过C1认证：第一关
qq_44376585的博客
04-13 1080
文章目录前言一、需要的准备？软件1.Hex Editor Neo（修改的工具）2.PlantsVsZombies（植物大战僵尸）3.准备工作最后二、正式解题任务一1.找到Userdata（游戏存档在那里）2.用Hex Editor Neo打开dat文件3.寻找规律（找到之后怎么修改内容）任务二1.注册账号2.进入项目3.学习二进制总结 前言 通过C1认证，表明持有人具有软件开发所必需的基础知识，具备“信息/编码”、“IP/组网”、“程序逻辑”和“Web基础”能力，其中程序逻辑使用JavaScript语言作
CSDN C1认证：作业1
CXNing的博客
04-06 1737
1、作业任务 1、修改《植物大战僵尸》的存档文件，将一个新用户的进度直接修改到5-2关 2、金钱（能量）直接修改到10000 2、运行环境 ①win10系统 ②《植物大战僵尸1》单机中文版 ③H小D Hex Editor 64位 注：《植物大战僵尸1》以及Hex Editor下载地址： https://pan.baidu.com/s/1Vr4UJQwpZTgRSnI1qF2U9A 提取码：lnhs 3、实现详解 3.1 实现流程 1、下载安装《植物大战僵尸1》和16进制编辑器 2、打开游戏，新建
CSDN认证C1等级考试——练习（二）
m0_51660523的博客
05-04 1186
CSDN认证C1等级考试——练习（二） 任务1： 图中的主体窗口里显示了抓包的情况。列出了抓到数据包的序号、时间、源目的MAC地址、源目的IP地址、协议类型、源目的端口号等内容。很容易看出IP地址为10.32.20.71的主机在极短的时间内向大量的不同主机发出了访问请求，并且目的端口都是445。 ...
C1认证的第二天
m0_55422699的博客
02-21 367
#员工宿舍网络接入项目感受 ##一、项目内容 使用C类IP将四个宿舍进行划分 ##二、项目完成情况 通过一天的努力，首先是通过网络等工具在网上进行资料的获取，了解子网、IP地址。经过玉龙老师的讲解后，两组人员进行讨论，最后得出最终的结果 ##三、项目中的知识点 1、复习第一个项目计算机进制内容； 2、了解A、B、C类IP地址； 3、掌握子网运算。 ##4、项目完成感受 1、计算机的知识点都有互通的内容，今天的第二个项目就跟昨天的第一个项目有相互关联的东西，其实计算机的知识每个单点都不能说难，只不过是需要良好
C1认证任务：web基础
m0_50232165的博客
05-18 143
文章目录任务一：使用富文本编辑器任务二：【所见即所得】式开发 了解HTML, CSS, Javascript的技术应用 任务一：使用富文本编辑器 首先，在打开富文本编辑器随便输入一段文本 在源码模式下，查看内容是如何被转变为带标签的文本的，都带了那些HTML标签 最后，使用编辑器没有的功能，例如让表格隔行换色，并加入JavaScript按钮。 任务二：【所见即所得】式开发 HTML5为了使img元素可拖放，需要增加什么属性? 答：draggable:true HTML5哪一个inp
能力认证计划 -- 名企内推保 offer 直通车
独木不成林，单弦不成音。
05-06 2959
CSDN 推出的超级实习生计划，是一项名企内推保 offer 计划。加入超级实习生计划，不仅可以通过 CSDN 的专属内推渠道获得名企实习 offer，还能提升项目工程化交付级能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

漫漫求

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值