找回密码
 立即注册
查看: 196|回复: 0

Web前端开发到底需要做什么的?

[复制链接]
发表于 2023-3-8 19:34 | 显示全部楼层 |阅读模式
随着前端在国内的火爆,可能很多人都听说了这么一个职位,于是乎就开始摩拳擦掌,跃跃欲试。
但是大部分人都不知道前端到底是做什么的,只知道和IT有关,和网站有关。
今天要来讨论的这个话题就是前端到底需要做什么,需要什么样的知识储备才能轻松应对这份工作。
说道这个的话就不得不说说网站整体的开发流程以及参与开发的人员了。
域名选择和注册—网站建设—网站上线运营
这是一个最简单的网站从无到有的流程,不过这不是我们今天要讨论的范围,我们今天只讨论中间网站建设这个环节。
那么这一个环节里面又细分了很多环节:


这是一个最简单的网站开发流程图,那么在这里面,前端开发主要要做的就是:
1、了解开发需求。
2、把设计做好的页面用代码还原。
3、和后端配合做页面上的功能。
这三点是最基本的前端开发人员的需求了。
首先,第一点,了解开发需求,这个没什么。该开的会开,该看的文档看,该问的点问就可以了。
第二点,把设计做好的页面用代码还原。这个是作为前端最基本的技能,12,13年国内大多数前端做的事情就是这个。
要做这件事情,会的东西有:
图形处理软件:Photoshop。
代码编辑软件:Sublime Text、DreamWeaver、Hbuilder、Webstorm(JavaScript开发工具)。(任选其一)
浏览器 :Chrome(谷歌浏览器)、Firefox(火狐浏览器)、Opera(欧朋浏览器)、Safari(苹果公司的浏览器)… (任选其一)
语言类:
HTML,英文全称:HyperText Markup Language(超文本标记语言)。
CSS ,英文全称:Cascading Style Sheets(层叠样式表)。
JavaScript(脚本语言)。
往后,我们先说说还原设计稿这件事。
今天咱们要说的就是这三大语言之一的HTML,翻译成中文,叫做超文本标记语言,英文全称是HyperText Markup Language。
我们直接来看这个中文名,叫超文本标记语言。把这个名词拆分一下,分别是“超文本”,“标记”,“语言”,那么html是一门语言这个毋庸置疑,也没什么可说的。
再往前看,“标记”,其实这是html语言的一个特点,语言里面所有的东西都叫做标记。
用一个标记来包含一块内容表示其作用,比如用<h1>标签来表示页面上的一个标题,用<p>标签来表示一个文章段落等等。
这里说的标签,就是标记,它的名字有很多,但是表示的都是同一个东西,从html语言角度,它叫做标记,我们平常也会称之为标签。
从盒模型的角度,可以称之为盒子。
从标签与标签之间的关系来看,又可以称之为元素。
从渲染引擎的角度,还可以称之为文档对象模型(Document Object Model —— DOM)等等…
再接着往前,“超文本”其实这里从字面上就已经能够理解了,说的是这个语言已经远远超出了文本的范畴,文本,但从字面上来理解,就是文字、符号。这称之为文本。但是如今的网页上,感觉更多的是图片。那么图片就是一个超文本。再比如音乐,电影,或者一些其他的媒体。这都远远超出了文本的范畴,所以说是超文本。
HTML建立之初是用来描述文档结构的,这里是一个标题,这里是文章段落,这里需要加粗强调一下,或者用于描述一个表格,再或者用来承载一些功能。
比如说a链接,比如说表单提交数据。到了今天,我们可以把HTML看做是一个房子的骨架,结构。
在1994年万维网联盟(W3C)成立之初,因为没有相关标准,外加上网站的风靡,HTML被迫出现了一下诸如<font>之类的一些用来描述外观的标签,但这并不是HTML的本职工作,以至于今天我们能看到很多很多很多的标签,但是我们并不会经常用到它们,也没有必要全都了解。
也正是因为逐渐增多的网站提出的需求也越来越多,人们开始注重网站的外观,这时候CSS也就应运而生了。
说白了,CSS就是控制为HTML元素添加样式从而使页面更加漂亮的。
CSS的全称 Cascading Style Sheets,中文名:层叠样式表。我认为这个中文名翻译得非常贴切,从字面上就能看出来CSS的特点,那就是层叠,或者叫堆叠。
利用CSS的选择器就可以在元素身上堆叠很多很多的样式,甚至可以重复添加,只不过是后者会覆盖前者罢了。
与HTML相比,CSS支持更丰富的文档外观,其表现程度也远非HTML的力,所能及。
CSS可以为任何元素的文本和背景设置颜色;允许在任何元素外围创建边框,同时能增大或减少元素外的空间;允许改变文本的大小写、装饰方式、间隔,甚至可以确定是否显示文本,还允许完成许多其他的效果。
如果说HTML是房子的骨架,那么CSS就是房子的外观——外墙是什么颜色?家里是什么颜色?地板是什么材质的?房子外围有多大的草坪?这些都由CSS来决定!
那么到此为止我们拥有了房子的骨架、房子的外观,按理来说一个房子就可以完工了,不需要别的东西了。
但是别忘了,今天我们对房子的需求,如果里面要住人的话,那么空调得有吧,洗衣机要不要?水电煤少不了吧?那么这些功能性质的工作就得交给Javascript了!
于是乎JS的作用也就呼之欲出了,就是用来做一些功能性的东西的。
在2008年以前,前端这个概念还不是特别清楚的时候,JS的作用几乎也就用来写点效果了,图片轮播啦,点击一个按钮,弹出来相应的内容啦之类的一些简单的交互,随着2008年V8引擎的出现,以及2009年第五版JS的出现,JS的能力得到了一个质的飞跃。
此时JS开始处理页面上的复杂交互了,随之而来的大数据时代也让JS发光发热。
再到现在,写特效写交互反而成了JS的副业,JS做得更多的是处理页面的逻辑,前后端的数据交互,页面性能等以前后端语言都不敢想象的事情。
同时NodeJs的出现让JS走出了浏览器的限制,甚至可以在服务端运行!以后前端会发展成什么样谁都无法预测,而我们能做的,只有加油学习了。
<h1>定义最大的标题,<h6>定义最小的标题。
<h1>尽量靠近在html中<body>标签,越近越好,以便让搜索引擎最快的领略主题。
<h1>用来修饰网页的主标题,它在一个页面最多只能有一个,h1≠title,title可以包含h1,另外h1不要用在logo上。
<h2>表示一个段落的标题。
<h3>表示段落的小节标题。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×
懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-5-30 21:02 , Processed in 0.088742 second(s), 26 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表