c1能力认证-任务03-web基础与布局

最新推荐文章于 2024-05-04 23:29:53 发布
原创 最新推荐文章于 2024-05-04 23:29:53 发布 · 257 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了如何使用开源富文本编辑器Summernote，并展示了如何将文本转换为HTML标签。同时，通过实例演示了如何实现表格隔行换色和JavaScript按钮功能。接着，以WYSIWYG方式在code.org上进行HTML和CSS的网页开发任务，深化了对这两种技术的理解。此外，详细探讨了CSS盒子模型，包括边距、边框和内边距，以及浮动和定位的概念。最后，给出了一个CSS盒子模型布局的实现，并提供了HTML5和CSS的相关技术问题供读者自测。

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

任务二：“所见即所得”式开发
在code.org上一“所见即所得（WYSIWYG）”的方式完成HTML和CSS系列网页开发任务（https://studio.code.org/s/csd2-2019）
如果已注册账号则无需再注册。
加深对HTML和CSS技术的理解。

拓展：CSS盒子模型
深入理解CSS盒子模型多层次含义
边框边距
标准文档流（浮动与定位）
布局模式
完成下图的CSS盒子模型布局

自测：

  • HTML5为了使img元素可拖放，需要增加什么属性？
  • HTML5哪一个input类型可以选择一个无时区的日期选择器?
  • CSS盒子模型中的Margin、Border、Padding都是什么意思？
  • 说出至少五种常见HTML事件
  • HTML的onblur和onfocus是哪种类型的属性？
  • 怎么设置display属性的值使容器成为弹性容器？
  • JavaScript中有多少中不同类型的循环？
  • 用户搜索某个单词后，JavaScript高亮显示搜索到的单词，使用哪个语义化标签最合适？

分割线开始任务

任务一：
如图所示：表格隔行换色，js按钮效果如下。
在这里插入图片描述
代码如下：

	<p align="center">北上广天气预报</p>
	<table border="5" width="500px" bgcolor="skyblue" cellspacing="0" cellpadding="20px" align="center" frame="void">
				<caption>标题：3月平均气温</caption>  
				<thead>  
					<tr align="center" valign="center" bgcolor="steelblue">
                      <th height="40"><span align="center" valign="center">城市</span></th>  <!-- 加粗和居中 -->
                      <td align="center">北京</td>
                      <td align="center">上海</td>
					  <td align="center">广州</td> 
					</tr>
				</thead>
				<tbody>
					<tr align="center">
						<td>温度</td>
						<td>26℃</td>
						<td>25℃</td>
						<td>30℃</td>
					</tr>
					<tr align="center" bgcolor="steelblue">
						<td>紫外线</td> 
						<td>弱</td>  
						<td>弱</td>
						<td>强</td>
					</tr>
					<tr align="center">
						<td>天气</td>
						<td>多云</td>
						<td>多云</td>
						<td>晴天</td>
					</tr>
				</tbody>
				<tfoot>
					<tr align="center" bgcolor="steelblue">
						<td>风力</td>
						<td>3级</td>
						<td>4级</td>
						<td>1级</td>
					</tr>
				</tfoot>
			</table>&nbsp;<p></p><p><br></p>
<button border="1" cellpadding="1" onclick="alert('开始考试')">我要考试</button>

任务二：“所见即所得”式开发
https://studio.code.org/s/csd2-2019
在这里插入图片描述
在这里插入图片描述

拓展任务：CSS盒子模型
深入理解CSS盒子模型多层次含义
边框边距
标准文档流（浮动与定位）
布局模式
完成下图的CSS盒子模型布局
在这里插入图片描述
代码如下：
采用table的方式布局（主体部分如下：table123456）

<!DOCTYPE html>
<html>
<head>
<style>
	* {
	  margin: 0;
	  padding: 0;
	}
	table{width: 100%;height: 100%;}
	.table0{
		border: solid;
		border-width: 5px;
		border-color: #838383;
		background-color:#dfdf6f ;
		max-width: 500px;
		max-height: 400px;
	}
	.table1{
		width: 100%;
		border-style: none;
		line-height: 80px;
		border-spacing: 10px 10px;
	}
	.table2{
		width: 100%;
		border-style: none;
		border-spacing: 0px 10px;
		padding-right: 10px;
	}
	#block1{
		background-color: #81ec8d;
		height: 100%;
		text-align: center;
	}
	#block2{
		background-color: #81ec8d;
		height: 200px;
		text-align: center;
	}
	#block3{
		background-color: #81ec8d;
		height: 150px;
		text-align: center; 
		
	}
	#block4{
		background-color: #81ec8d;
		height: 150px;
		text-align: center; 
	}
</style>
</head>
<body>
	<table class="table0">
		<tr>
			<td>
				<table class="table1">
					<tr id="block1"><td>1</td></tr>
					<tr id="block2"><td>2</td></tr>
				</table>
			</td>
			<td>
				<table class="table2">
						<tr id="block3"><td>3</td></tr>
						<tr>
							<td>
								<table >
									<tr>
										<td id="block4">4</td>
										<td>
											<table >
												<tr><td>5</td></tr>
												<tr><td>6</td></tr>
											</table>
										</td>
									</tr>
								</table>
							</td>
						</tr>
				</table>
			</td>
		</tr>
	</table>
</body>
</html>

采用table的方式布局
继续完善block789

<!DOCTYPE html>
<html>
<head>
<style>
	* {
	  margin: 0px;
	  padding: 0px;
	}
	#block9{
		background-color: #ffaa7f;
		position: absolute;
		width:35px;
		padding: 30px;
		text-align: center;
		left: 120px;
		top: 340px;
	}
	table{width: 100%;height: 100%;}
	.table0{
		border: solid;
		border-width: 5px;
		border-color: #838383;
		background-color:#dfdf6f ;
		max-width:600px;
		box-sizing: border-box;
	}
	.table1{
		width: 100%;
		border-style: none;
		line-height: 100px;
		border-spacing: 10px 10px;
	}
	.table2{
		width: 100%;
		border-style: none;
		border-spacing: 0px 10px;
		padding-right: 10px;
	}
	#block1{
		background-color: #81ec8d;
		height: 100px;
		text-align: center;
	}
	#block2{
		background-color: #81ec8d;
		height: 190px;
		text-align: center;
	}
	#block3{
		box-sizing: border-box;
		background-color: #81ec8d;
		height: 180px;
		text-align: center; 
	}
	#block4{
		background-color: #81ec8d;
		height: 100px;
		text-align: center; 
		position: relative;
		z-index:10000;
	}
	#block5{
		background-color: #81ec8d;
		text-align: center; 
		height: 80px;
	}
	#block6{
		background-color: #81ec8d;
		text-align: center; 
		height: 80px;
	}
	.table4{
		padding-left: 10px;
		border-spacing: 0px 10px;
		margin-top: -10px;
		margin-bottom: -10px;
	}
	#block7{
		background-color: #ffaa7f;
		position: relative;
		margin-left: 10px;
		width: 30px;
		padding: 40px;
	}
	#block_3{
		position: relative;
		text-align: center;
		top: -60px;
	}
	#block8{
		margin: -20px;
		background-color: #ffaa7f;
		position: absolute;
		width:15px;
		padding: 50px;
		height: 10px;
		box-sizing: border-box;
		left: 400px;
		top: -20px;
		text-align: center;
	}
</style>
</head>
<body>
	<div >
		<table class="table0">
			<tr>
				<td>
					<table class="table1">
						<tr id="block1"><td>1</td></tr>
						<tr id="block2"><td>2</td></tr>
					</table>
				</td>
				<td>
					<table class="table2">
							<tr id="block3"><td><div id="block7">7</div><div id="block_3" >
								3
							</div><div id="block8">8</div></td></tr>
							<tr>
								<td>
									<table class="table3">
										<tr>
											<td id="block4" >4 </td>
											<td>
												<table class="table4">
													<tr id="block5" ><td>5</td></tr>
													<tr id="block6"><td>6</td></tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div id="block9">
		9
	</div>
</body>
</html>

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

答：<img draggable="true">

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

答： <input type="date">

3.CSS盒子模型中的margin,border,padding都是什么意思？

答：外边距(margin)、边框(border)、内边距(padding)

4.说出5种常见的HTML事件

答：Window 事件属性，表单事件，键盘事件，鼠标事件，媒介事件

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

答：onblur失去焦点事件 onfocus 获得焦点事件

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

答：flex

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

答：for循环；do..while循环；while循环

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

答：<mark>
C1能力认证训练题解析 _ 第三部分 _ JavaScript基础
商务合作 | 共同学习 | 携手共进
01-13 9万+
C1见习工程师能力认证训练题 _ 第三部分 _ JavaScript基础
C1认证复习材料（参照考纲,任务）
yuwoxinanA3的博客
02-17 3472
计算机通识 进制转化 我之前在复习数字逻辑电路时写过进制转化，这里不写了，直接给链接，有例题 数字电子技术复习第一章_yuwoxinanA3的博客-CSDN博客 看第1.2数制与编码 位运算 这个也直接给链接 位运算（&、|、^、~、>>、 | 菜鸟教程 储存单位换算 1 字节（Byte）= 8 位（bit） 1KB（Kilo Byte，千字节）= 1024B（Byte） 1MB（Mega Byte，兆字节）= 1024KB 1GB（Giga Byte..
c1能力认证任务04-计算机程序逻辑
Friedy星期五的博客
08-17 266
任务一：生成图片广告 首先，能够用HTML+CSS+JavaScript在页面正中生成一幅广告图片。 其次，用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。 最后，用JavaScript代码实现多张广告图片轮播效果：在页面正中间每隔3秒切换不同的广告图片，多张图片轮流显示。 任务二：程序逻辑训练 在code.org上完成系列任务如下，加深对代码逻辑和程序语法的理解。 变量，条件和函数相关任务（https://studio.code.org/s/csp
c1能力认证考试训练任务03-web基础与布局
一粒程序米
06-02 358
任务一：使用富文本编辑器 代码： <p align="center">作为有情怀的国产手机，质量一定要过硬</p> <table border="5" width="500px" bgcolor="skyblue" cellspacing="0" cellpadding="20px" align="center" frame="void"> <caption>标题：3月平均气温</caption>
c1能力认证考试训练任务03-web基础与布局(1)
2401_84094908的博客
05-04 800
去过华为、OPPO等大厂，18年进入阿里一直到现在。**
Snake最终版以及程序文件
06-20
在gcc环境下使用,包含所有使用到的资源
易语言源码易语言GDI渐变矩形源码
06-20
易语言源码易语言GDI渐变矩形源码
基于风光储能和需求响应的微电网日前经济调度（Python代码实现）
06-20
内容概要：通过Python代码实现基于风光储能和需求响应的微电网日前经济调度模型，综合考虑风能、光伏等可再生能源出力不确定性、储能系统的充放电行为以及需求响应机制，构建优化调度模型以降低系统运行成本、提高能源利用效率和电网运行的经济性与可靠性；该资源提供了完整的代码实现与技术解析，适用于科研复现与教学实践。; 适合人群：具备一定电力系统背景、Python编程基础和优化理论知识的科研人员、研究生及高年级本科生。; 使用场景及目标：①研究微电网在含高比例可再生能源条件下的日前经济调度策略；②探究储能系统与需求响应在削峰填谷、降低用能成本中的协同作用；③实现调度模型的编程复现与算法优化。; 阅读建议：建议结合相关电力系统优化理论与Python编程实践，深入理解模型构建逻辑与代码实现细节，可进一步拓展至多时间尺度调度或不确定性优化方法的研究。
扫地机器人（solidworks+step+x_t).rar
06-20
扫地机器人（solidworks+step+x_t).rar
HZFS.SHX.rar
06-20
当 CAD 缺失对应字体时，图纸文字会显示异常，出现乱码、问号。将下载好的字体文件复制到 AutoCAD 的 Fonts 文件夹中，即可恢复正常显示。
AI矩阵投放，支持平台「抖音_小红书_快手_视频号_B站」，支持已发布抖音_B站账号的视频数据回收；.zip
06-20
做了十年独立站，操盘超1亿美金预算，我把我自己蒸馏成了30 个独立站AI顾问。这是一套面向独立站与 DTC 品牌的全链路增长顾问 Skill 系统，覆盖诊断、选品、品牌、广告投放、CRO、留存、运营与规模化增长等模块。
一个基于AI智能化体系的广告投放综合管理平台系统.zip
06-20
做了十年独立站，操盘超1亿美金预算，我把我自己蒸馏成了30 个独立站AI顾问。这是一套面向独立站与 DTC 品牌的全链路增长顾问 Skill 系统，覆盖诊断、选品、品牌、广告投放、CRO、留存、运营与规模化增长等模块。
【创新未发表】绿电直连型电氢氨园区优化运行研究（Matlab代码、Python、数据、word论文）
06-20
内容概要：本研究聚焦于“绿电直连型电氢氨园区”的优化运行，提出一种直接利用绿色电力驱动制氢与合成氨的综合能源系统架构。通过构建包含风/光发电、电解水制氢、氢气储存、合成氨反应及电能直供等关键环节的系统模型，研究旨在实现能源的高效转化与梯级利用，降低对外部电网依赖，提升园区能源自洽率与经济性。研究综合运用Matlab与Python工具进行建模与仿真，结合实际气象与负荷数据，对系统在不同工况下的运行策略、能量流动、设备容量配置及经济技术指标进行深入分析与优化，并形成完整的Word论文文档，为新型零碳产业园区的规划与建设提供了理论依据和技术支撑。; 适合人群：具备新能源、电力系统、化工或综合能源系统背景的科研人员，以及从事园区规划、能源管理、低碳技术开发的工程技术人员。; 使用场景及目标：①研究绿电如何高效耦合至化工生产流程，实现“电-氢-氨”多能互补；②掌握综合能源系统（IES）的建模、仿真与优化方法，特别是多时间尺度下的运行调度策略；③为撰写高水平学术论文或完成相关课题研究积累数据、代码与写作模板。; 阅读建议：此资源包含代码、数据和完整论文，建议使用者先通读Word论文以理解整体框架与理论基础，再结合Matlab/Python代码进行复现与调试，最后可基于提供的数据和模型进行二次开发，以深化对绿电综合利用技术的理解。
十字轴式万向联轴器.rar
06-20
十字轴式万向联轴器.rar
利用 ODE45 求解耦合表-质量系统的 MATLAB 模拟，包括轨迹可视化和动画。.zip
06-20
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
SolidWorks2022 螺栓垫圈库内置下载.zip
06-20
SolidWorks2022 螺栓垫圈库内置下载.zip
用JavaScript重做工程化发布流水线
最新发布
06-20
标题：用JavaScript重做工程化发布流水线 内容概要：围绕核心链路、并发控制、异常补偿与可观测性建设，说明用JavaScript重做工程化发布流水线的关键实现重点。 24直播网：www.zhizhuboapp.cn 24直播网：zhizhuboapp.cn 24直播网：m.szsrphoto.com 24直播网：www.szsrphoto.com 24直播网：szsrphoto.com
易语言源码易语言EXE托盘助手源码
06-20
易语言源码易语言EXE托盘助手源码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Friedy星期五

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

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

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

打赏作者

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

抵扣说明：

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

余额充值