前端零基础入门(三):HTML,CSS,Javascript三者之间的关系

时间:2021-11-18 04:14:02

每个人接触前端的角度可能都不一样
有些人是以前从事web相关行业的,比如后端,比如设计。从事这些行业的人因为工作需要,多多少少都会对前端有一定的了解,不一定是这个词,但一定是这个职位
小白的话,可能更多的听到的是h5,css3之类的名词,其实无论从哪个角度接触到前端,不可避免的要了解前端的三大语言 HTML CSS 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(Javascript)的作用也就呼之欲出了,就是用来做一些功能性的东西的。在08年以前,前端这个概念还不是特别清楚的时候,JS的作用几乎也就用来写点效果了,图片轮播啦,点击一个按钮,弹出来相应的内容啦之类的一些简单的交互,随着08年V8引擎的出现,以及09年第五版JS的出现,JS的能力得到了一个质的飞跃。此时JS开始处理页面上的复杂交互了,随之而来的大数据时代也让JS发光发热。再到现在,写特效写交互反而成了JS的副业,JS做得更多的是处理页面的逻辑,前后端的数据交互,页面性能等以前后端语言都不敢想象的事情。同时NodeJs的出现让JS走出了浏览器的限制,甚至可以在服务端运行!以后前端会发展成什么样谁都无法预测,而我们能做的,只有加油学习了。


此文主要让大家理解HTML,CSS和JS三者之间的关系

  • HTML可以看做是一个房子的骨架,结构
  • 如果说HTML是房子的骨架,那么CSS就是房子的外观
  • 那么一些功能性质的工作就得交给Javascript了!