【前端篇】前端技术介绍

一、前端流行技术的重要节点

阶段一：原生 HTML、CSS、JavaScript（es5）
阶段二：jQuery 时代
阶段三：HTML5、CSS3、JavaScript（es6）
阶段四：MVVM 响应式框架，VUE、React 时代

 

二、前端基础部分

• HTML 为基本标签的使用
• CSS 包含基本样式、文字、盒子模型、定位、布局等内容
• JavaScript 主要是 es5、es6 的一些内容

• HTML：全称 Hyper Text Markup Language（超文本标记语言）。
• CSS：即 Cascading Style Sheet（层叠样式表），是用来控制网页外观的一种技术。
• JavaScript：就是通常所说的 JS，是一种嵌入到 HTML 页面中的脚本语言，由浏览器一边解释一边执行。

HTML 用于控制网页的结构，CSS 用于控制网页的外观，而 JavaScript 控制着网页的行为。

制作网页就好像是盖房子。盖房子的时候，我们都是先把结构建好（HTML）。之后，再给房子装修（ CSS），例如给窗户装上窗帘、在地板上铺瓷砖。装修好之后，当夜幕降临之时，我们要开灯（JavaScript）才能把屋子照亮。

三、jQuery​

对于前面的 JavaScript 基础不会深入学习，而是使用 jQuery 这个工具操作页面。重点学习 jQuery 的使用，使前端开发更加顺畅。

四、Lay-ui 框架

Lay-ui 是一个开源模块化前端 UI 组件库，基于浏览器端原生态模式，面向全层次的前后端开发者，易上手且开源免费的 Web 界面组件库。

五、网页​

网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频等。

构成： 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

• 结构标准：结构用于对网页元素进行整理和分类
• 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式
• 行为标准：行为是指网页模型的定义及交互的编写

理想中的源码： .HTML, .css, .js

结构层：通过对语义的分析，可以对其划分结构。具有了结构的内容，将更容易阅读。

表现层：是为了让网页就能展现出灵活多样的显示效果。

行为层：用户对网页进行操作，网页可以做出响应性的变化。

六、开发工具​

目前，前端开发工具非常多，例如 Dreamweaver、Sublime Text、Atom、HBuilder、Vscode 等等。对于有经验的开发者来说，使用哪一款工具都无所谓。如果是专门的前端开发，后期的话更推荐 Vscode 或 Webstorm，这两个工具更能满足真正的前端开发需要。