C1认证_03

最新推荐文章于 2023-05-02 11:59:31 发布

菜鸟_G

最新推荐文章于 2023-05-02 11:59:31 发布

阅读量408

点赞数 1

分类专栏： C1认证

本文链接：https://blog.csdn.net/qq_45061154/article/details/117483013

版权

C1认证专栏收录该内容

4 篇文章

订阅专栏

博客围绕前端开发展开，指出大厂招聘前端工程师常用HTML、CSS、JavaScript技术。介绍学习任务，包括html基础、【所见即所得】式开发、css盒子模型，还给出相关实例与代码。最后设置自测任务，涵盖HTML5属性、CSS概念、HTML事件等知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标

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

学习任务

1、html基础

2、[所见即所得]式开发

3、css盒子模型

任务1：html基础

html基本代码框架

<!DOCTYPE html>    <!--声明当前浏览器使用html的版本-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <h1>这是大标题</h1>
	<p>这里是一个段落</p>
</body>
</html>

使用开源富文本编辑器学习html基础（在线文本编辑器），随便写一点内容，查看一下html的标签属性。

用开源工具做一个简单的实例

<table>标签属性

border	表格边框宽度
tr	行标签
td	列标签

<table border="1">
  <tbody><tr bgcolor="AntiqueWhite ">
    <td>属性</td>
    <td>描述</td>
  </tr>
  <tr>
    <td>class</td>
    <td>为html元素定义一个或多个类名（classname）(类名从样式文件引入)</td>
  </tr>
    <tr bgcolor="Aqua ">
    <td>id</td>
    <td>定义元素的唯一id</td>
  </tr>
  <tr>
    <td>style</td>
    <td>规定元素的行内样式（inline style）</td>
  </tr>
   <tr bgcolor="Aqua ">
    <td>title</td>
    <td>描述了元素的额外信息 (作为工具条使用)</td>
  </tr>
</tbody></table>

点击按钮弹出提示窗口，通过js实现，首先添加一个按钮<button>，给按钮添加点击效果，添加js代码。

<button onclick="run()">这是一个窗口</button>
<script>
  function run(){
  	alert("这是一个窗口");
  }
</script>

任务2：【所见即所得】式开发

html中<h1>-<h6>可定义标签，<h1>定义最大标签 <h6>定义最小标签

任务3：css盒子模型

任务要求

开始实施计划，附上代码css和html俩个部分

css部分：

* {
	border: 0;
	padding: 0;
	margin: 0;
}

div {
	text-align: center;
}

#main_div {
	width: 100%;
	height: 100%;
	background-color: #FFF0F5;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 77px 77px 77px 77px 77px 76px 76px 76px;
	grid-gap: 20px;

}

.div1 {
	background-color: #FFB6C1;
}

.div2 {
	background-color: #DC143C;
}

.div3 {
	background-color: #FF69B4;
}

#div1 {
	grid-column: 1/4;
	grid-row: 1/3;
	line-height: 174px;
}

#div2 {
	grid-column: 1/4;
	grid-row: 3/9;
	line-height: 562px;
}

#div3 {
	grid-column: 4/9;
	grid-row: 1/5;
	line-height: 363px;
}

#div4 {
	grid-column: 4/7;
	grid-row: 5/9;
	line-height: 368px;
}

#div5 {
	grid-column: 7/9;
	grid-row: 5/7;
	line-height: 174px;
}

#div6 {
	grid-column: 7/9;
	grid-row: 7/9;
	line-height: 174px;
}

#div7 {
	grid-column: 4/6;
	grid-row: 2/4;
	line-height: 174px;
	margin-left: 20px;
}

#div8 {
	position: absolute;
	left: 75%;
	width: 22%;
	height: 22%;
	top: -8%;
	line-height: 230px;
}

#div9 {
	position: absolute;
	width: 25%;
	height: 25%;
	line-height: 25%;
	left: 44%;
	top: 75%;
	z-index: -1;
}

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css盒子</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
	<div id="main_div" >
	<div class="div1" id="div1">
		<p>1</p>
	</div>
	<div class="div1" id="div2">
		<p>2</p>
	</div>
	<div class="div1" id="div3">
		<p>3</p>
	</div>
	<div class="div1" id="div4">
		<p>4</p>
	</div>
	<div class="div1" id="div5">
		<p>5</p>
	</div>
	<div class="div1" id="div6">
		<p>6</p>
	</div>
	<div class="div2" id="div7">
		<p>7</p>
	</div>
	<div class="div2" id="div8">
		<p>8</p>
	</div>
	<div class="div3" id="div9">
		<p>9</p>
	</div>
</div>
</body>
</html>

效果图可谓是满满的少女心。

自测任务

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

为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
拖动什么ondragstart和setdata()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

放到何处-ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
进行放置-ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}
代码解释：

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
被拖数据是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目标元素）中

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

<input type="datetime-local">

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

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
margin:2cm 4cm 3cm 4cm;
Border所有的边框属性，可以设置的属性分别（按顺序）：border-width, border-style,和border-color。
border:5px solid red;
Padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值.
padding:2cm 4cm 3cm 4cm;

说出至少五种常见HTML事件

onclick 当单击鼠标时运行脚本
ondblclick 当双击鼠标时运行脚本
onerror 当错误发生时运行脚本
oninput 当元素获得用户输入时运行脚本
onkeydown 当按下按键时运行脚本

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

onblur 表单事件-当元素失去焦点时运行脚本
onfocus 表单事件-当元素获得焦点时运行脚本

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

display: flex;

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

有2种不同类型的循环：for循环和while循环

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

<mark> 标签定义带有记号的文本。

请在需要突出显示文本时使用 <mark> 标签。

onclick	当单击鼠标时运行脚本
ondblclick	当双击鼠标时运行脚本
onerror	当错误发生时运行脚本
oninput	当元素获得用户输入时运行脚本
onkeydown	当按下按键时运行脚本

onblur	表单事件-当元素失去焦点时运行脚本
onfocus	表单事件-当元素获得焦点时运行脚本