HTML/CSS/Javascript三座大山是前端技术的核心,万变不离其宗,回归基础,夯实基础,加深理解,是成为高级前端工程师的必经之路。
基础知识学习请参考 MDN 或菜鸟教程
基础技术:
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
HTML&HTML5
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML5 是最新的 HTML 标准。
HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件。
HTML5 拥有新的语义、图形以及多媒体元素:canvas,video,audio。
HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
HTML5 是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
拖放:Drag,Drop
视频音频:video,audio
画布:canvas
地理定位:geolocation
web存储:localStorage - 没有时间限制的数据存储,sessionStorage - 针对一个 session 的数据存储
CSS&CSS3
-
CSS 指层叠样式表 (Cascading Style Sheets)。
定义如何显示 HTML 元素,样式通常存储在样式表中,一般情况下分为三种样式:行内样式,内部样式,外联样式。 -
CSS3 是最新的 CSS 标准。
选择器:属性选择器,伪类选择器,子元素选择器.etc.
框模型:flex-box,grid-box
背景和边框:background-size,border-radius,box-shadow,border-image
文本效果:text-shadow,word-wrap
2D/3D 转换:transform相关
动画:@keyframes,animation
多列布局:column-count,column-gap,column-rule
用户界面:box-sizing,resize -
Sass & Less
相关css属性浏览器支持情况请查询 https://www.caniuse.com/
Javascript
JavaScript 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。
ECMA-262 是其官方名称。ECMAScript 2019(ES10)为最新版本,ECMAScript 6 (发布于 2015 年)是最熟知的 JavaScript 版本。
Js学习 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

常用插件/组件
工欲善其事,必先利其器。 善用工具和框架能使我们开发事半功倍。当前用工具的同时我们也要明白其中的原理,这样才能知其然又知其所以然。官方API是最好的学习工具。
目前流行的三大框架
-
Vue
Vue
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
Vue全家桶:vue-cli + vue + vuex + vue-router + axios + element-ui
Vue学习 https://vuejs.org/
-
React
React
React 是一个用于构建用户界面的 JavaScript 库。
React全家桶:react+react-dom+react-router+axios+redux
React学习 https://react.docschina.org/docs/getting-started.html
-
AngularJs
AngularJs
JS&UI组件/插件
1. UI组件:
-
ElementUI
ElementUI
-
IviewUI
image.png
-
mint-ui
mint-ui
-
muse-ui
muse-ui
-
滴滴 mand-mobile
mand-mobile
2. 图表插件:
-
百度 Echarts
echarts
-
HighCharts
high-charts
-
FusionCharts
image.png
3. 其他工具插件:
-
Node.js
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时 -
Webpack-js
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 -
Lodash-js
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。 -
Babel
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。 -
Axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
有关jQuery,easyUI之类的工具类和UI组件在此不在赘述,有需自查官方文档
网友评论