前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言)

HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性

CSS的版本3,增加了translate(),能完成以前一定需要js才能做到的动画,同时增加了flex弹性盒子(响应式设计,提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间,以往使用float)

前端框架

一、Bootstrap

在Bootstrap的官网介绍中,Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 大致意思就是:Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的Web项目,用于开发响应式布局,是一套用于 HTML、CSS 和 JS 开发的开源工具集。

Bootstrap的设计以移动设备优先,在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap使用一个容器元素来包裹网站的内容,使用类.container(固定宽度并支持响应式布局的容器)和.container-fluid(用于 100% 宽度,占据全部视口(viewport)的容器),具体的就看教程吧(https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html,自带部分jQuery插件,3教程之后)

通常说 Bootstrap是一种前端框架,个人感觉其实这种说法不是很准确,Bootstrap的框架和Angular等说的框架,此框架非彼框架,Bootstrap更多感觉是一种页面UI的布局,通过一系列定义好的CSS class和一些预定义好的jquery插件实现比如过渡、下拉、折叠、轮播的初步效果

或者,Bootstrap是一种UI,用于前端布局的框架,属于css框架,而不是javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果

二、AmazeUI、LayUI

个人知道还不错的两款国产前端布局UI,部分功能需要使用js才能实现,采用自身模块规范编写,模块化的组件(lay官网还能直接拖动看效果和代码),感觉很棒

https://www.layui.com
http://amazeui.org

三、jQuery

jQuery 是一个 JavaScript函数库,极大地简化了 JavaScript 编程。jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

官网:https://jquery.com,中文手册:http://www.xgllseo.com/jq3/index-2.html,jQueryUI:http://jqueryui.com(用户界面交互、特效、小部件及主题)

基础语法:$(select).action(),jQuery的选择器和CSS一样,类选择器 .class,id的选择器 #id,sass写法 >

$(document).ready(function(){
//jQuery 入口函数
}); $("button").click(function(){
//jQuery 点击事件
});

jQuery感觉是封装了一部分的函数,简化了原生js的写法,在实际使用时,jQuery对DOM树进行操控,即:首先有一个写好的html页面,再对其修改操作

如写按钮事件函数,点击隐藏,切换,页面跳转等

四、三大框架

之前使用jQuery,目前处于初学框架阶段,处于选择一个框架学习的阶段,个人拙见,错望指正

通常说的三大框架,即:Angular Vue React

Angular (注:2,1的版本和2的版本简直是两种语言)是基于 TypeScript(Javascript超集)的 Javascript 框架。React 被描述为 用于构建用户界面的 JavaScript 库,Vue 为一款用于构建直观,快速和组件化交互式界面的 MVVM 框架

Angular 是一个框架而不是一个库,是一个完整的解决方案。React 和 Vue 更灵活的。Angular 必须用 TypeScript,文档均是TS的

  因为数据双向绑定和写法的问题,个人暂时不考虑学React。抱着对Google大大深深的爱,自己看了Angular 6的官方文档,然后,我发现我一句都看不懂,好吧,我承认我很菜,但是好歹给我个希望啊,但是相比之下,Vue官方的教程学习曲线简直不要太友好

不知道自己的理解是不是对的,Angular的使用导致了不论之后进行什么修改,都需要使用Angular的写法,而Vue因为其模块化,故可以在项目的部分使用Vue,进行修改时,即使是其他框架的项目也可以使用Vue.js进行修改。

以前一个学长告诉我的:说轻量级的展示页面使用jQuery,管理后台使用框架。jQuery的编程思想是首先编写HTML和CSS的页面展示再操作DOM树,而框架是首先考虑页面的功能,再进行前端的展示,编程思想正好相反。(个人学习中,待之后回来验证该说法)

选择哪种框架,参考说法:https://juejin.im/post/5a0d5df1f265da43062a542f

如果你在Google工作:Angular

如果你喜欢 TypeScript:Angular(或React)

如果你喜欢面向对象编程(OOP): Angular

如果你需要指导手册,架构和帮助:Angular

如果你在Facebook工作:React

如果你喜欢灵活性:React

如果你喜欢大型的技术生态系统:React

如果你喜欢在几十个软件包中进行选择:React

如果你喜欢JS和“一切都是 Javascript 的方法”:React

如果你喜欢真正干净的代码:Vue

如果你想要最平缓的学习曲线:Vue

如果你想要最轻量级的框架:Vue

如果你想在一个文件中分离关注点:Vue

如果你一个人工作,或者有一个小团队:Vue(或 React)

如果你的应用程序往往变得非常大:Angular(或 React)

如果你想用 react-native 构建一个应用程序:React

如果你想在圈子中有很多的开发者:Angular 或 React

如果你与设计师合作,并需要干净的 HTML 文件:Angular or Vue

如果你喜欢 Vue 但是害怕有限的技术生态系统:React

如果你不能决定,先学习 React,然后 Vue,然后 Angular

前端三大框架(Angular Vue React)的更多相关文章

  1. 浅谈前端三大框架Angular、react、vue

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必 ...

  2. 前端三大框架Angular & React & Vue

    前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 We ...

  3. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  4. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  5. 前端三大框架之一React入门教程

    相信大家对框架这个词都很熟悉吧,我一直喜欢js原生来开发,但是目前都要求工作效率,所有使用框架或者是库会使我们开发更加方便和快速,甚至一个人干十个人的活.. 框架优点: 1.方便开发.快速写功能 2. ...

  6. SPA框架 Angular、React、Vue

    指尖前端重构(React)技术调研分析   摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...

  7. Web前端三大框架_angular.js 6.0(二)

    Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0  1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...

  8. 前端三大框架 Vue.js、AngularJS、React 的区别

    Vue.js Vue.js 是一种构建数据驱动的Web界面的渐进式框架,Vue.js 采用自底向上增量开发的设计. Vue.js 轻量高效,数据双向绑定(响应式数据绑定), 它会自动响应数据的变化情况 ...

  9. 前端开发框架简介:angular和react

    作者:vienwu react是facebook推出一个用来构建用户界面的js库.官方介绍的三大特性如下: just the ui 把react只当作一个ui组件就好,等同于传统mvc中的view. ...

随机推荐

  1. 2.2 使用 JAXP 对XML文档进行SAX解析

    使用JAXP 对 XML文档进行 SAX解析: public class Demo1 { /** * 使用JAXP对XML文档进行SAX解析 * @throws Exception * @throws ...

  2. 【SpringBoot】Web开发

    一.简介 1.1 引入SpringBoot模块 1.2 SpringBoot对静态资源的映射规则 二.模版引擎 2.1 简介 2.2 引入thymeleaf 2.3 Thymeleaf使用 一.简介 ...

  3. 四、DML语言

    目录 简介 主要操作 插入语句 语法 修改语句 修改单表 删除语句 DELETE TRUNCATE 两种删除总结 简介 DML语言就是数据操作语言 主要操作 插入:insert 修改:update 删 ...

  4. jquery属性方法hasClass判断是否存在某个class

    判断匹配集合中是否存在至少一个元素使用样式'selected',存在则返回'true',不存在为'flase'. <html> <head> <script src=&q ...

  5. linux基础_用户管理

    1.创建用户 基本语法 创建用户:useradd [选项] 用户名 (1)当传教用户成功后,会自动的创建和用户名同名的家目录. (2)也可以通过useradd -d 指定目录 新用户名,给新创建的用户 ...

  6. VMware ESXi 和 VMware Server 有区别

    VMware ESXi 和 VMware Server 有区别: VMware ESXi 是一个企业级虚拟机管理程序,提供接近本机性能的祼机体系结构.各种旨在提高整合率的功能(例如取消内存复制),以及 ...

  7. MyBatis中的OGNL教程

    MyBatis中的OGNL教程 有些人可能不知道MyBatis中使用了OGNL,有些人知道用到了OGNL却不知道在MyBatis中如何使用,本文就是讲如何在MyBatis中使用OGNL. 如果我们搜索 ...

  8. Centos7静态ip设置(亲测有效)

    本文引自:https://www.cnblogs.com/toov5/p/10340395.html,特此鸣谢 最近想测试消息中间件等各类web集群相关技术,这就需要解决linux主机之间互联互通的若 ...

  9. Codeforces Round #588 (Div. 2) C. Anadi and Domino(思维)

    链接: https://codeforces.com/contest/1230/problem/C 题意: Anadi has a set of dominoes. Every domino has ...

  10. 09 saltstack生产实例--Haproxy+keepalived

    1.如何理解haproxy+keepalived https://www.cnblogs.com/zs-wei/p/9213961.html HaProxy可以通过监听一个统一的端口对外提供能力,然后 ...