引言
我们知道想做前端,html、css、javascript这三样是必学的,并且这三个的学习是递进的,也就是说先学html才能理解css,学了html+css才知道javascript到底在前端中中到底扮演着什么样的角色。笔者这里浅淡一下html+css+javascript,希望对想学前端或想了解前端的童鞋有所帮助。
HTML
先是html,稍微了解一点的都知道,html不是编程语言,而是一种超文本标记语言。为什么这样说,是因为html不具备编程语言的特性,编程顾名思义编写程序,程序一定是具备一定逻辑的代码的集合,而html是没有逻辑可言的。html更像是用带标签的代码来可视化的排版内容,它基本语句就是标签+属性+内容。html通过标签来告诉浏览器我需要什么,标题、段落、logo、图片还是链接还是一个表单等等,然后在用属性来为所加入的内容添加属性,闭合标签内部就是内容。所以说html是一个网页内容的代码体现。一个html5+css+javascript的文件模板如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页标题栏的标题</title>
<!--引入外部文件-->
<link rel="" href=""/>
<script>
<!--这里写入js脚本-->
</script>
<style>
<!--这里写入css样式-->
</style>
</head>
<body>
<!--这里写入html代码-->
</body>
</html>
如你所见,html文件是有一定的格式,一定的缩进可以让html代码美观易读。并且css和javascript代码是可以嵌入html中的,只要用<style></style>
和<script></script>
标签包裹就好了。
CSS
下面,介绍css样式,css样式文件后缀为.css,CSS 指层叠样式表 (Cascading Style Sheets)
。同样css也不是编程语言,而只是一个离了html就没什么意义的样式表。那么css到底是干啥的?我打个比方,如果说html是素颜出镜,那加上了css的html就是盛装出席。html对于网页是内容的体现,而css就是为了装饰内容使其更加美观而存在的。其实html中的属性也可以为内容添加一些样式,但是如果仅仅靠属性,代码的重用性就很低,并且在一些块<div>
的样式设置上会比较繁琐,css就可以很好的解决这两个问题。为什么这样说呢,这要看css的语法:
css的基本语法其实超级简单,CSS 规则由两个主要的部分构成:
选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明则是由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被一个冒号分
。
这样,如上图,选择器可以定位到html中的任何一个元素,任何的块,并且因为样式是将所需属性封装起来,提高了代码的重用性和易读性。
JavaScript
最后说一下javascript,js是一种编程语言,js和其它的OOP语言一样是一种面向对象的轻量级编程语言,同时也是一种脚本语言,广泛应用于web开发中。js有if else
条件语句,for while switch
循环语句等等和其他编程语言是一样的,但又因其是脚本语言,所以可以嵌入html中。那js在网页开发中是干啥的呢?其实你可以这样想,js是编程语言,有一定的逻辑性,那么一个有了逻辑思维的网页就可以“思考”了,html只是内容的堆砌,css是加了点装饰,那js就是让网页动起来,为网页添加一些动画效果,对一些鼠标点击、鼠标移动和键盘的事件做出反应等等。js有一个库叫jquery,集成了许多函数,语法也大有所不同,不过很好用,值得一学。
如果想学习这些内容,可以访问下面的网站:
https://www.w3cschool.cn/tutorial