基础HTML语法学习,可以通过http://www.w3school.com.cn来直接在线练习Demo,通过不断地实现对应的效果,增加学习的乐趣,可以在一天内熟悉基本的标签语言,同时这种实时展示的机制,避免了语法的错误使用,或者是学的知识有误,但是又不知道的那种情况发生,同时还可以举一反三,在单个Demo里自定义复习之前学过的其他语法,效率还是非常快的,对于刚刚接触的朋友们,也免去了IDE的安装流程以及无格式文本书写的不爽体验。(相当于一个在线简约版的Dreamweaver)您如果想在基础学习的过程中,多练习一下手打代码的话,也是一个积极的想法,后期也很受益,那么您可以下载安装一个Sublime Text编辑器http://www.sublimetext.com/这也是一个非常强大好用的轻型IDE,插件还是非常丰富的。如下图,还是非常美观的
先说说前端三剑客吧
- HTML:负责结构,网页想要表达的内容由HTML标签书写
- CSS:负责样式,网页的美观程度由它来控制
- JS:负责交互,用户和界面产生的互动由它来控制效果
OK 我来聊聊我对于前端学习的看法吧
- 前端的技术栈庞大,技术更迭极快,入门容易,精通难
- 前端技术在之前还停留在UI和动态效果实现上,现在大不相同,前端工程师也会涉及大量数据交互处理和性能优化等等
- 前端框架丰富,只掌握一个可能举步维艰
- 学好前端,一定要了解后端开发的一些思想和技术概要,因为等你接触工作,面对更多的不是技术难题,而是沟通难题
- 图片处理、网络基础、(云)服务器搭建、SEO(Search Engine Optimization):汉译为搜索引擎优化、公众号、小程序的申请、搭建、开发等等,你都要有所了解
- Git的使用,也要从现在开始,就是你决定要迈进IT行业的时候
- etc
接下来 梳理下现在比较流行的前端框架
Vue.js
近几年最火的前端框架应该是Vue.js了,Vue.js是一套构建数据驱动的 web 界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。很多使用过vue的程序员这样评价它:“Vue.js兼具Angular.js和React.js的优点,并剔除了它们的缺点”。授予了这么高的评价的Vue.js,也是开源领域华人的骄傲,因为它的作者是位中国人--尤雨溪
官方网站:https://cn.vuejs.org/
React
React 起源于 Facebook 的内部项目,该公司对当时现有的JavaScript MVC 框架都不是很满意,所以就决定自己写一个,用于构建Instagram(Facebook收购的照片墙应用)的网站,于2013年5月开源。
React是一个用于构建用户界面的JavaScript库,也是Web应用程序的视图层。所有的React应用程序的核心是组件(Component)。组件是一个子包含的模块,它提供一些输出。所以,可以将类似按钮或输入框等元素作为React组件,组件和组件之间可以嵌套组合,组件也可以包含输入一个或多个其他的组件。React 拥有较高的性能,代码逻辑非常简单,已经有越来越多的人开始关注和使用它。
由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。
这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目,目标更是宏伟,希望用写 Web App 的方式去写 Native App。如果能够实现,整个互联网行业都会被颠覆,因为同一组人只需要写一次 UI ,就能同时运行在服务器、浏览器和手机。
React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
官方网站:https://reactjs.org/
Angular JS
AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建 ,就得了解什么不适合用AngularJS构建。
如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如jQuery可能会更好。
官方网站:https://www.angular.cn/
Bootstrap
Bootstrap作为我使用的第一个前端框架,我还是有很多情有独钟的地方的。而且其官网中文站可以很方便访问其他相关技术库、文档和其他框架的官网,这种开放的心态,是我比较欣赏的,从中文站上提供的框架入口简介,可以很简明地了解各个框架及技术库和文档等的作用,方便平时使用时迅速选择。
Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统,能够快速为你的想法开发出原型或者构建整个 app 。
官方网站:https://getbootstrap.com/
中文站:https://www.bootcss.com/
Layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持、不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护、不断建设和提升社区服务,在 Web 开发者的圈子里口口相传,乃至于成为今天的 layui 最强劲的源动力。目前,layer已成为国内最多人使用的 Web 弹层组件,GitHub 自然Stars5000+,官网累计下载量达50w+,大概有30万不同规模的 Web 平台使用过 layer。
之所以列举上面这些数字,并非是在夸夸其谈,而是懂 layer 的人都知道,这是一种怎样不易的沉淀。而由于 layer 在 layui 体系中的位置比较特殊,甚至让很多人都误以为 layui = layer ui,所以再次强调 layer 只是作为 layui 的一个弹层模块,由于其用户基数较大,所以至今仍把她作为独立组件来维护。
官方网站:https://www.layui.com/
技术总是玲琅满目,切不可囫囵吞枣,要专一个、熟一个、懂一个、了解一个。
以后每周更新一篇文章,希望大家一起交流。