什么是前端？以及HTML/DIV+CSS/JavaScript技术是什么？（1） - 好文

这篇文章适用范围：

适用于：对前端、HTML/DIV+CSS/JavaScript有所耳闻，但是不理解含义

不适用：学习过3天以上前端的入门者（-。- ）你去看点高阶的好么。。。

经常听说前后端/全栈等词汇，但好像还是不理解什么意思？各种技术名称诸如HTML/CSS/JavaScript让人头疼？尝试认真阅读10分钟，轻松理解这些词汇的内涵。

本文主要回答两个问题：

1.什么是前端？

2.什么是HTML/DIV+CSS/JavaScript？

1.什么是前端？

在Web开发中，有前端与后端之分。

前端负责页面的布局，后端负责页面的逻辑。

我们用教务系统的网页举个栗子，来看看前后端做了什么。

前端
负责设计这个网页的样子，也就是我们看到的一个个彩色的方框（-。-）和上面的文字，但是仔细一想，似乎一个网站只有这些按钮还远远不够啊。背后肯定还有服务器记录我们的成绩信息、考试信息，等等（难道是？）。

没错，后端负责的就是我们看不到的那些逻辑程序，它负责处理我们在网页上输入的那些信息或者点击信号。

2.什么是HTML/DIV+CSS/JavaScript技术？

HTML/DIV+CSS/JavaScript前端常见的三大技术。我们把这个问题分解成三个小问题，逐一回答。

1）HTML（HyperText Markup Language）

中文名称：超级文本标记语言。

故名思意，这是一种语言。和我们常见的C、Java不同，这种语言没有顺序结构，选择结构，循环结构这些东西。它单纯是用来储存结构化的文本信息。

列出一段HTML代码。这段语言如果保存成一个以.html结尾的文件，用浏览器打开的话，就是解析后的内容。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>唐诗一首</title>
</head> <body> <h1>春晓</h1> <p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。 </p> </body> </html>
代码解析后的页面

不过话说，这样看来这个语言和txt文本没啥区别啊。

当然不！除了文本，如何显示各种优美的图案？前端程序员可以给语言里附上一些“属性”，浏览器看到了就会给页面加上相应的效果。

所以，加上了“优美的效果”后，页面是这样的。

2.DIV+CSS

随着网友内容的眼球越来越刁钻，需要添加的属性也越来越多（渲染网页的样子越来越复杂）。

打个比方：最初一个网站可能只要修改下字体和大小颜色等等属性就可以迎合大部分网友，但后来发现网友对这种平平无奇的网页不再感冒了，我们开始追求更加优雅美观的效果。于是，不得不增加更多的属性，以此加强表现效果。

结果，问题来了——过多的属性并不利于修改，单单阅读HTML代码也是个问题（可读性下降）。

解决方案就是：DIV+CSS技术。

DIV是HTML里的一个标签，负责Web页面的布局。（不理解标签这个概念不要紧）而CSS（Cascading Style
Sheets）从英文名字就可以看出，这是一个关于Style的表。

这个技术如何解决上文的问题呢？

CSS把原本的HTML文档中的内容与样式分离开来，单独对样式进行管理。

其中HTML仍然负责组织结构化的数据，但把怎么显示它们的任务交给了CSS。

这样一来，可读性更好了，因为没有了复杂的属性去修饰HTML文档，HTML文档变得十分清晰。

其次对于修改属性的任务，CSS也可以很轻松处理，通过选择器机制（为了让文章易懂，就不介绍了）。

至于JavaScript,就留到下一篇文章。

本文特意避开了技术细节，而是站在宏观的角度进行介绍。希望这种形式可以更好理解？

欢迎订阅和评论，你的反馈可以帮助我写的更好：）

热门工具换一换