【前端修炼之路】第一话 · 初识前端领域

news2024/11/18 21:38:48

写在前面


夏日炎炎,现在屋外的鸟儿叫的很欢,屋内刚刚组装完的主机风扇在轰轰作响,呜呜呜,怎么闻怎么看都不像是矿卡的显卡现在竟散发出阵阵甜味~哈哈哈哈开个玩笑,写个文章看个视频,这显卡的风扇应该都不带转的吧。

言归正传,好久没有写文章了,我也想写,可是有时候人就是会摆烂,之前是很忙,在忙毕设;之后虽然忙完了,但是要忙搬家;到了家里,又要打理房间,真心有些疲惫,所以也不能说自己在偷懒吧~总之,大学四年也告一段落了,有很多遗憾,也有很多话想说,但我想,现在都不是最好的时间,一年后的今天可能会更为合适,为什么呢?因为我要开始准备考研了,当然考研并不是想要去逃避工作,也不是想要去遗忘本科四年机械路的艰辛,只是发现漫漫长路真的需要热爱,生活与工作并不是苟且,我想悠然地生活,也想热爱地学着。

还记得一八年夏天,花火大会上不经意间看到的一行诗,来自于泰戈尔的《飞鸟集》——生如夏花之绚烂,死如秋叶之静美。这才刚刚打上几束花火,虽然已经都一一落幕了,可还没放完呢!咋就凄凉和后悔起来了呢?致那些为过去感到遗憾和后悔的友人,以此为我们共勉。

目录

写在前面

🍺知识点1:前端开发工程师做什么?

🍺知识点2:HTML的基础知识

🍯2.1 HTML与网页的关系

🥝1.静态网页

🥝2.动态网页

🍯2.2 HTML的标记

🥝1.单标记

🥝2.双标记

🍯2.3 创建网页

🍺知识点3:CSS的基础知识

🍯3.1 CSS与HTML的关系

🍯3.2 用CSS控制DIV

🥝1.行间样式表

🥝2.内部样式表

🥝3.外部样式表

🍺知识点4:JavaScript的基础知识

🍯4.1 JavaScript与HTML的关系

🥝1.JavaScript的概念

🍺知识点1:前端开发工程师做什么?


简单来说,前端开发就是开发网页上的内容展示,以及与用户的交互。这些内容可以是图片、文字、视频等信息;与用户的交互指的是用户可以与网页进行互动,比如说看到我这篇博客写的还不错,就点个赞,收藏一下,三连一下,你通过鼠标的点击与网页进行了互动,网页对你的点赞动作进行响应,在网页上随机显示点赞+1后的数量,这就是与用户的交互。

前端开发工程师需要具备的能力有哪些呢?多说无益,我们直接上招聘图即可:

这里仅选取了字节的招聘要求,其他公司的招聘要求都大同小异,但是我们能从中发现的是,它们都要求熟练掌握前端的技术,主要总结下来有以下几点:

1.熟练扎实的语言功底:想要当一个优秀的前端工程师,需要具备扎实的原生JS基础,要对前端性能的框架和性能优化有深入理解,同时也了解后端语言。

2.具有与时俱进的能力:要对新技术保持兴趣,时刻具有主动学习的劲头!所以呢,我现在也开始进行前端学习啦~关于技术,我还是想多学一些,因为很好玩啦!

因此,在接下来的一段时间中,我可能会定期发一些前端学习的总结,欢迎各位大佬和同学指正啦!

🍺知识点2:HTML的基础知识


🍯2.1 HTML与网页的关系


Q1:什么是HTML?

A1:HTML是一种用来制作超文本文档的简单标记语言,用HTML编写的超文本文档称为HTML文档,它用于描述网页的格式设计和它与万维网上其他页面的链接信息。HTML语言利用各种标记(tag)来标识文档的结构以及标识超链接(hyperlink)的信息,但不同浏览器会对此显示不同的效果。


🥝1.静态网页

在网站设计中,纯HTML格式的网页称为“静态网页”。静态网页的特点是这个网页无论何时何地被浏览,都显示相同的内容和形式,不会根据某种条件的变化而改变;例如下列代码形成的就是一个静态网页。

静态页面使用HTML编写,通常扩展名为.htm、.html、.shtml、xml等;例如上图页面的扩展名就是.html。静态网页只能单纯地在网页中展示文字与图片,听起来似乎功能简单,但它是所有网页的基础要素。

Q1:静态页面是不是一定是静止的呢?

A1:HTML格式的网页上,可以出现各种动态的效果,如GIF格式的动画、FLASH、滚动字母等,但这些“动态效果”只是视觉上的,它并不是动态网页。


🥝2.动态网页

动态网页指的是网页的内容可以根据某种条件的改变而自动改变。常见的例子就是,登陆CSDN时,当用户输入正确的用户名和密码后就可以成功登陆,而如果输入的用户名和密码错误,页面会提示用户错误信息,输入的值的改变会导致网页的显示的改变,因此这就是一个典型的动态页面。

🍯2.2 HTML的标记


Q1:什么是HTML标记?

A1:HTML中用于描述功能的符号称为标记,如"HTML"、"BODY"、"Head"等。标记在使用时必须用尖括号<>括起来,浏览器会对尖括号里面的标记进行解释。标记通常是成对出现的,无斜杠的标记代表该标记的作用开始,有斜杠的标记代表该标记的作用结束。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>这是一个静态网页,你无法与我互动哦!</div>
	</body>
</html>

如上图程序所示,<head>、<div>等都称为标记,上述HTML代码中出现<div></div>标记对时,浏览器在解释该标记对的过程中,会把它们看成一个层。


🥝1.单标记

有一些标记无需使用标记对就可以完整地表达标记里的意思,我们称这类标记为单标记;其语法形式如下:

<标记>

上面<>中的标记指的是由HTML提供的具有特殊功能的英文字母,例如:

<hr>    /*表示画一条横线*/
<br>    /*表示在标记处换行*/

🥝2.双标记

双标记有头有尾,前后标记的内容相同,但是后面的标记有斜杠。其工作原理是开始标记告诉浏览器从本处开始标记所表达的功能,再由结束标记告诉浏览器功能结束;其语法形式如下:

<标记> 内容 </标记>

上面的<标记>指的是字母关键字组成的标记,而“内容”是被标记修饰的部分。举个例子来说,下面的<div>与</div>是一个标记对,它们中间的这段文字是内容,内容从标记对开始到结束都被标记div修饰,<div>表示这段文本文字是一个层。

<div>我是kikokingzz</div>

标记和内容一同组成了网页上的信息,我们可以在Hbuilder中使用crtl+N新建一个.html文件,如果是mac电脑就采用command+N,新建文件。

输入文件名为标记.html后,我们可以得到HTML的基本标记如下:

关于上述各行标记的解释如下:

<!DOCTYPE html>
<html>            /*<html>是网页最基本的标记对,表示HTML语言,是网页的开始标记*/
	<head>        /*<head>是网页的头部信息开始标记*/
		<meta charset="utf-8">
		<title>   /*<title>是网页的主题开始标记*/
        </title>  /*网页主题的结束标记*/
	</head>       /*头部信息的结束标志*/
	<body>        /*<body>是网页的主体开始标记*/
	</body>       /*网页的主体结束标记*/
</html>           /*网页的结束标记*/

注意:如果你的软件不像HBuilder直接为你提供好基本的HTML标记,那么需要注意不要将HTML的标记对放错位置,例如<title></title>是处于<head></head>标记对中的,不可以放到<body></body>中。HTML各基本标记的包含结构如下图所示:

🍯2.3 创建网页


通过上述对于HTML基本内容的了解,我们现在可以进行最简单的实操,来创建一张最简单的网页吧!

step1.打开HBuilder软件,新建.html文件。

step2.在已有的标签中输入对应的文字,保存代码后使用快捷键crtl+R进入浏览器运行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这里是主题,内容要放在“标签对”内</title>
	</head>
	<body>
		这是我的第一个网页
	</body>
</html>

🍺知识点3:CSS的基础知识


🍯3.1 CSS与HTML的关系


Q1:什么是CSS?

A1:CSS是层叠样式表单,它是一种控制网页样式并允许样式信息与网页内容分离的一种标记性语言。CSS通常在网页制作中起重要作用,不仅可以减少网页代码量,更能提高网络访问网页的速度。


小明:讲了这么多,感觉还是不太清楚CSS与HTML的关系和区别是什么呀?

kiko:那我们现在来举个例子进行说明!


📜例题1:在浏览器中画一个200*200像素的绿色方块

首先我们需要使用<div>标记来呈现出一个方块,由于此处限定了方块的宽度和高度都为200px(px:像素),因此我们需要写一个样式表,规定这个方块的样式。

<div style="width:200px;height:200px;">这是一个绿色方块</div>

为什么没有显示绿色方块呢?因为我们这边没有设置颜色的标识,但方块其实已经创建好了,如果想要看到这个方块,我们可以现在可以采用两个方法。

解法1:我们只需要再添加一个背景颜色background:green;,就可以看到这个200*200的绿色方块啦。

<div style="width: 200px;height: 200px;background: green;">
这是一个绿色方块
</div>

 

解法2:我们可以使用边框border来将方块显现,边框有很多属性,例如线条的粗细,线条是不是实心的,边框是不是有颜色?我们这边先不深入了解,只先将下面代码理解即可。

border: 10px solid green; /*边框的粗细为10px,边框使用绿色实线*/

看到这里大家可能不难发现,我们可以通过更改样式来修改网页页面的展现,但我们在修改样式的过程中,始终遵循着HTML的结构,即在<body>标记对中使用<div>在展现一个绿色方块,所以我们不妨可以做这么一个类比:

  • HTML——>好比是一栋房子的结构。
  • CSS——>好比是一栋房子的装修,样式是依托于结构的,而结构要想达到与众不同,就需要CSS的帮助才可以。

📜例题2:在浏览器中画一个400*400像素的方块中插入一张图片

插入图片的操作其实就是将方块的背景颜色改为图片,因此操作与例题1中的解法1较为相似,只不过这里的background后边赋的并不是颜色值,而是图片的URL值,其一般形式如下:

background:url(http://***.jpg);

比如我要将网上的一张类似动漫里“玉子”的头像插入到方框中,我就需要点击图片右键,复制图片的链接,即复制图片的URL值。

然后将复制的值填入到background:url( )的圆括号中,具体操作如下图所示:

<div style="width: 400px;height: 400px;background: url(https://img2.woyaogexing.com/2018/11/21/8cec35ff91984091a4d9e25ed277f96a!400x400.jpeg);">
</div>

🍯3.2 用CSS控制DIV


通过上面的两道简单例题,我们不难发现<div>只不过是一个层,并不会给页面添加什么样式,而CSS能控制DIV的外观与大小。在网页中我们可以通过外接方式链接CSS文件;也可以通过内接方式写CSS;还可以在<div>中加入style方式结合样式文件。


🥝1.行间样式表

用CSS控制DIV的第一种方式就是在<div>标记里用style来表示里面的样式,语法形式如下:

<div style="#"></div> /*#代表样式的内容*/

像下面代码的表示形式就是使用了行间样式表,样式表内容为宽度200像素(px),高度为200像素(px),背景色为green;但值得注意的是,添加的样式仅适用于其对应的标记,即给第一个<div>设置的样式并不会附加给第二个<div>。

<div style="width: 200px;height: 200px;background: green;">div1</div>
<div>div2</div>

行间样式表的缺点:当我们需要更改多个内容不同而样式相同的值时,例如将下面行间样式表中的背景色改为绿色,则我们需要一个一个修改,非常繁琐!

修改前:
<div style="width: 100px;height: 100px;background: red;">div1</div>
<div style="width: 100px;height: 100px;background: red;">div2</div>
<div style="width: 100px;height: 100px;background: red;">div3</div>

修改后:
<div style="width: 100px;height: 100px;background: green;">div1</div>
<div style="width: 100px;height: 100px;background: green;">div2</div>
<div style="width: 100px;height: 100px;background: green;">div3</div>

我们如何通过只修改一次代码,就可以同时改变多种相同样式的div呢?方法当然是有的,就是我们接下来准备介绍的。


🥝2.内部样式表

内部样式表比内行间样式表修饰的范围大许多,内部样式表的范围是整个网页。这种形式在大型网站采用的比较多,加载整个网页更快。内部样式表是由<style></style>标记对放在<head></head>中,其一般格式如下:

<head>
    ···
    <style>

    /*这里写样式*/

    </style>
</head>

采用以上的结构,我们就可以实现一键修改多个相同样式的div,如下图可见,将<style>中的样式background值从red改为greenyellow

 

内部样式表的缺点:内部样式表的作用范围只能作用在当前的页面,无法作用于其他页面文件,即此处的内部样式表仅适用于第一个网页.html这个页面文件中,无法适用于其他新建的.html文件。


🥝3.外部样式表

外部样式表是将样式写在一个单独的文件里,即将CSS文件放在网页外面,通过外部链接的方式使CSS文件对网页的样式有效,这样的链接称为外部链接。其一般格式如下所示:

<link type="text/css" rel="stylesheet" src="style.css" />

(1)type:表示是CSS文本,记作text/css,这一步可以不设置
(2)rel:表示样式,记作stylesheet,这一步很重要,不设置可能会导致网页链接失败
(3)src:表示地址

外部样式表是通过标记<link>将外部的样式文本链接到网页,大多数网站都采用这种方法,只完成一张样式表即可控制所有页面效果。当然,在修改样式表的同时,链接该外部样式表的所有网页都会受到影响。

我们可以通过一个案例来理解,首先我们ctrl+N新建一个.css文件,这里将其命名为style.css,其程序代码如下图所示:

div{
	width:100px;
	height:100px;
	background:red;
}

这样我们就把样式设置完了,但是光有样式是无法显示的,我们只有将样式添加到结构上,我们才能看见,因此我们现在设置结构,即HTML框架,假设我们在这里要写上10个div,就可以采用div*10然后敲Tab键的方式,快速打出10个div。但是,光这么写是无法将样式与结构相关联的,因此我们需要使用<link>标签

此时我们需要在<head>标签对中写上<link>标签的内容:

<link type="text/css" rel="stylesheet" href="style.css" />

通过链接外部样式的方式,可以对多个不同的页面进行相同样式的设定,这种方式在日常前端开发中是经常用到的!

🍺知识点4:JavaScript的基础知识


🍯4.1 JavaScript与HTML的关系


Q1:JavaScript与HTML有什么关系?

A1:在2.1中我们知道,在网站设计中,纯HTML格式的网页称为“静态网页”,随着Web发展,页面设计人员希望页面能够与用户进行交互,即创建“动态网页”,此时单靠HTML就无法实现交互,而JavaScript则可以帮助控制浏览器并给网页增添活力与交互性,即可以让网页“动”起来。


🥝1.JavaScript的概念

JavaScript是一种用来给页面增加交互性的编程语言,它可以给站点的用户提供更好的体验,因此也被称为客户端语言,即设计JavaScript的目的是在用户的机器上而不是在服务器上执行任务,因此JavaScript有一些固有限制:

  • JavaScript不允许写服务器机器上的文件。
  • JavaScript不能关闭不是由它自己打开的窗口。
  • JavaScript不能从另一个服务器已经打开的网页中读取信息。

Q1:JavaScript与Java有什么关系?

A1:这两者间毫无关系,JavaScript最初称为LiveScript,但是当时Java被计算机行业众星捧月,因此为了蹭一波热度,Netscape将LiveScript更名为JavaScript。


📜例题3:在浏览器中点击一个200*200像素的图片后使其显示完全

我么发现,这里多了一个点击的操作,这一操作让网页“动”起来了,因此得知,我们这里要使用JavaScript语言,而与鼠标点击相关的操作我们一般可以用onclick来表示,如下面程序示例展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div onclick="this.style.width='400px';this.style.height='400px'"style="width: 200px;height: 200px;background: url(https://img2.woyaogexing.com/2018/11/21/8cec35ff91984091a4d9e25ed277f96a!400x400.jpeg);">
		</div>
	</body>
</html>

值得注意的是,下面这段语句的含义是,点击后这个div的样式宽度变为400像素,样式高度变为400像素。

onclick="this.style.width='400px';this.style.height='400px';"

可见,我们通过使用JavaScript就可以编写一些可以与用户互动的网页,赶紧快来试试呀!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409402.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

申请百度地图开发者AK和基本使用

前言 有需求就会有市场&#xff0c;百度地图也会开放一些免费的Api。来提供一些基本的地图服务。 今天我们讲解的是百度地图申请AK过程&#xff0c;和申请完之后基本的使用&#xff0c;方便大家日后有需要浏览。 AK-申请 1.首先我们学习一个技术最直接的是去看官方文档&…

ES6中新语法:解构

目录 解构 1.解构初了解 2.解构详细解析 2.1对象属性赋值形式 2.2变量的声明 2.3怎么解构 3.实践 3.1数组的解构 3.2对象的解构 3.3解构参数 4.总结 ☀️作者简介&#xff1a;大家好我是言不及行yyds &#x1f40b;个人主页&#xff1a;言不及行yyds的CSDN博客 &#…

Element-UI--<el-switch>的@change回调函数的参数用法

原文网址&#xff1a;Element-UI--&#xff1c;el-switch&#xff1e;的change回调函数的参数用法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Element-UI的<el-switch>的change回调函数的参数用法。 需求 2个switch组件&#xff0c;用同一个回调函数switch组件状…

Flask 与 Django 框架对比

详细分析了两种 Python Web框架&#xff1a; Flask 与 Django。从开发难易度、应用架构、性能、可扩展性以及适用范围等方面进行了详细说明。 Django 中级教程在 B 站上线&#xff0c;深入解析 Django 体系架构&#xff0c;实现从入门到精通的跨越。在线教程 前言 基于 Gith…

H5呼起微信支付(个人实践总结)

H5呼起微信支付存在两种场景 第一种&#xff1a;其他浏览器呼起微信支付。 第二种&#xff1a;微信内部呼起微信支付。 项目说明&#xff1a; 我这边的项目要求的两种方式均要适用。 产品要求是当支付失败时或者未支付情况是停留在支付订单页面&#xff0c;可再次发起订单请…

Vue3下使用Vuex(store)实现响应式全局变量

Vue3下使用Vuex store1 安装2 编写vuex配置文件2.1 目录及文件结构2.2 index.js文件2.3 编写vuex模块级参数文件2.4 index.js中引入模块级参数3 引入4 使用5 持久化5.1 vuex值存储在sessionStorge中5.1 vuex值存储在localStorge中注意本文记录了如何使用vuex建立响应式全局变量…

Java后端Date类型返回给前端变为时间戳解决方法

今天在制作个人博客的分页功能时候&#xff0c;发现了这个问题 后端查询数据正确&#xff0c;2022-11-12 数据库MySQL5.7 用的date类型 因为写文章一般yyyy-MM-dd 类型就够用了 如果你需要yyyy-MM-dd HH-mm-SS 这种带时分秒的用datetime类型 数据存的也是2022-11-12 格式正确…

【JSP入门】只知道HTML却不知道JSP?

前言 今天我们继续来总结学习JSP相关知识&#xff0c;上一篇我们学习了Servlet的基础入门&#xff0c;如果你还对Servlet那么建议你先去看一下上篇博客再回来。 传送门&#xff1a;【Servlet入门】一篇文章让你从没听过到了熟于心 在之前我们已经学习了HTML&#xff0c;CSS&…

html静态登录、注册页面

登录 代码如下 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <style> body { background: url(https://cdn.pixabay.com/photo/2018/08/14/13/23/ocean-3605547_1280.j…

windows7安装node14版本及以上

前言&#xff1a; gitee上拉了一个项目&#xff0c;npm install一直报错。一直没有解决&#xff0c;就去gitee上看前端启动教程。作者说要运行在node14或者16上。我就去官网下载node14的msi。这个是不支持windows7的。我就百度&#xff0c;他们说要下载压缩包。 我之前走了好…

sourcemap文件泄露漏洞

最近进行渗透测试时&#xff0c;时常遇到xray扫出sourcemap文件&#xff0c;每次扫到都要百度&#xff0c;因此做个笔记。 漏洞原理 在日常测试时&#xff0c;经常会遇到以js.map为后缀的文件 这是jQuery中的一个新功能&#xff0c;支持Source Map 非常多Webpack打包的站点都…

Vue3: vue3 props接多个不同类型的参数,默认false

哪天的问题来着...嘶...(挠头)... 之所以会卡在这里&#xff0c;是因为在我的经验及认知里&#xff0c;封装组件中props的使用&#xff0c;接参时从来都是一个参数对应一个值&#xff0c;尤其是在ts中&#xff0c;还更为严格地设定了参数类型&#xff0c;所以我的业务需求不知道…

保姆级教程!如何在安卓手机上安装使用油猴脚本

浏览器插件成千上万&#xff0c;但是大家都有一个共识&#xff0c;那就是油猴无插件能敌&#xff0c;原因就在于它一个插件就可以实现众多插件的功能。 首先需要明确一点的是&#xff0c;油猴插件本身是没有任何功能的&#xff0c;它需要依靠脚本来实现功能。至于脚本&#xf…

红队web打点信息收集

目录 红蓝对抗 ICP备案查询—查询主域 主站域名一键查询 敏感信息收集 googlehack语法 目标邮箱号收集 子域名收集 被动信息收集 证书透明 fofa_viewer 在线子域名查询 第三方DNS服务 google语法 主动信息收集 oneforall Sylas—从burp历史记录中提取子域 Lay…

【node.js从入门到精通】使用express创建web服务器,路由,进行中间件的创建链接路由及其他中间件

目录 前言 初识express 使用express创建基本的web服务器 初识express路由 路由匹配概念 路由模块化 中间件 中间件和路由的区别 定义中间件函数 中间件作用 局部生效中间价 中间件分类 1.应用级别中间件 2.路由级别的中间件 3.错误级别中间件 4.内置中间件 5.自定义…

带你深入理解js事件循环机制

同步任务和异步任务&#xff08;微任务和宏任务&#xff09; JavaScript是一门单线程语言 分为同步任务和异步任务 同步任务是指在主线程上排队执行的任务&#xff0c;只有前一个任务执行完毕&#xff0c;才能继续执行下一个任务。 异步任务指的是&#xff0c;不进入主线程…

Pro1:图片的隐藏和显示

什么是JavaScript&#xff1f;实现目标实现代码实现效果实现方法&#x1f49b;作者主页&#xff1a;静Yu &#x1f9e1;简介&#xff1a;CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家&#xff0c;前端知识交流社区创建者 &#x1f49b;社区地址&#xff1a;前端知识交…

axios 中如何取消请求_从不会使用到精通原理_番茄出品

start 最近频繁遇到一个问题&#xff0c;axios 是如何取消请求的&#xff1f;这篇文章将从新手小白的视角出发&#xff0c;从 axios 取消逻辑的基础使用&#xff0c;到原理分析&#xff0c;带你彻底了解并掌握 axios 中取消请求的“秘密”。编写时间&#xff1a;2023/02/24-23…

520到了,教你做个JavaWeb表白墙小项目

目录 1.配置 Maven 项目 1.1 创建 Maven 项目 1.2 引入相关依赖 1.3 项目总结构 2. 约定前后端交互接口 3.服务端代码 3.1 创建Message类 3.2 创建工具类 3.3 添加信息类&#xff08;AddMessage&#xff09; 3.4 查询信息类&#xff08;MessageList&#xff09; 4. …

vue3中的配置代理

如图&#xff0c;配置代理就是在客户端与服务器中充当中介的角色 目录 关于配置代理&#xff0c;首先我们的要知道为什么要配置代理&#xff0c;配置代理做了什么事情 一、跨域是什么 二、如何解决 三、配置代理案例 1. 下面是我自己在后端尝试解决跨域的例子 2.然后在vue中…