这篇文章给大家聊聊关于stellar theater，以及前端怎样入门对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
html就充当了房子结构这部分，也是房子的基础。
这里还是要推荐下我自己建的前端学习群：527535103，如果你正在学习前端，小编欢迎你加入，大家都是前端党，不定期分享干货（只有web前端相关的），包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。
css呢，就好比咱们房子的装修，墙面什么颜色，什么风格，什么地板...这些给房子改变风格，样式的就是css
javascript呢，就好比这个房子的功能，房子需要制冷吧，需要暖气吧，也需要上下水吧。这些功能性的就相当于是javascript
例子可能不是很恰当，只是帮助大家有个初步的认识~
方法步骤、工具以及开发的案例展现
1、前端工具箱（dreamwear/sublime/Photoshop/SVN等）
页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border、Background、Font、盒模型、文本设置...
header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd...绝对路径、相对路径、标签语义化、标签嵌套规范、SEO...
d、class、类型选择、包含选择、群组选择、通配符、选择器优先级、标签样式初始化订制方案、超链接及伪类划分、标签类型划分及特性、inline、inline-block、block..
浮动的作用、浮动的特性、文档流、浮动的各种问题、clear、BFC(块级格式化上下文)、触发BFC的条件、Haslayout、Haslayout的触发条件...
relative相对定位、Absolute绝对定位、Absolute绝对定位、Fixed固定定位、inherit继承、static静态定位、默认值、zIndex层级问题、margin负值、透明度...
表格标签、表格样式重置、单元格合并、表单元素、表单相关的属性操作、表单默认样式初始...
兼容性问题总结、浮动在IE6，7下的各种问题、表单在低版本IE的问题、处理低版本IE对新增标签的支持、CssHack、条件注释语句、PNG问题、透明度的问题、固定定位在IE低版本的处理方式...
样式规划、favicon、CssSprite、DataURI、隐藏元素、测试工具使用、滑动门、等高布局、三列布局、未知宽高图片在容器内水平垂直居中、文本水平垂直居中、多行文本水平垂直居中...
transition、属性选择器、nth-of-type、nth-child、backgroundSize、box-sizing、圆角，盒模型阴影、文字阴影、rgba、表单高级、H5表单新增属性、E:not(s)、E:target、E::selection、background-clip...
测试环境Emulation、viewport、window.devicePixelRatio、物理分辨率、MediaQueries、rem、window.screen、移动端布局相关问题、window.deviceorientationevent、横竖屏判断...
浏览器前缀、keyFrames、Animation调用、播放次数设置、动画偶数次调用顺序、Animation的问题、无缝滚动、动画播放|暂停、rotate旋转、deg、skew斜切、scale缩放、translate位移、transform-origin、transform的执行顺序问题...
Html语法规范、CSS语法规范、Less和Sass中的嵌套、class命名、选择器、Normalize.css、栅格系统、排版、代码、响应式工具...
PC端的企业网站布局（例：sony官网）
PC端的电商类网站布局（例：京东商城）
移动端常见页面布局（例：微信活动页/商城）
学习前端书籍自然不可少，这里给大家推荐《html5与css3权威指南》，虽然主要是讲解html5+css3，但倒也是一本好的入门书籍。该书比较系统，覆盖面也比较广。技术新颖，所有知识点都紧跟html5与css3的最新发展动态（html5和css3仍在不断完善之中）；也有比较强的实战性（包含246个示例页面），不仅每个知识点都配有精心设计的小案例（便于动手实践），配合案例，也比较生动有趣。该书不仅能满足你全面而系统地学习理论知识的需求，还能满足你需要充分实践的需求。
前端开发全面知识库，包括HTML5，CSS3和js的基本框架知识，以及DOM和BOM操作的基础知识和一些基本工具和IDE。学习本篇，你将了解到以下知识。
W3Chttp://www.w3school.com.cn/html5/W3Chttps://www.w3.org/html/ig/zh/wiki/HTML5菜鸟教程http://www.runoob.com/html/html5-intro.htmlHTML5中文门户http://www.html5cn.org/
W3CCSS教程http://www.w3school.com.cn/css/index.aspW3CCSS3教程http://www.w3school.com.cn/css3/index.asp菜鸟教程CSS教程http://www.runoob.com/css/css-tutorial.html菜鸟教程CSS3教程http://www.runoob.com/css3/css3-tutorial.htmlCSS参考手册http://css.doyoe.com/
W3Chttp://www.w3school.com.cn/js/菜鸟教程http://www.runoob.com/js/js-tutorial.html廖雪峰js教程http://www.liaoxuefeng.comjs标准参考教程-阮一峰http://javascript.ruanyifeng.com/
W3Chttp://www.w3school.com.cn/jquery/菜鸟教程http://www.runoob.com/jquery/jquery-tutorial.html极客学院http://wiki.jikexueyuan.com/project/jquery-tutorial/廖雪峰http://www.liaoxuefeng.com/wiki/参考手册http://www.css88.com/jqapi-1.9/参考手册http://www.runoob.com/manual/jquery/
阮一峰ES6http://es6.ruanyifeng.com/极客学院http://wiki.jikexueyuan.com/project/es6/JavaScript标准参考阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html
parallel.js:前后端通用的一个并行库zepto:用于现代浏览器的兼容jQuery的库totoro:稳定的跨浏览器测试工具TheaterJS:一个用于模拟人输入状态的JS库stellar.js:前端用于实现异步滚动效果的库，现已不再维护skrollr:另一款实现一步滚动的开源库，使用人数众多，可实现各种狂拽酷炫掉渣天的前端效果，看真相Framework7:前端框架，是开发人员可以基于web技术构建IOS7程序regulex:用于生成正则表达式的可视化流程图markdown-it:新型Markdown解析器，快速，支持插件multiline:用于Javascript中的多行文本，类似于Ruby的HEREDocscreenfull.js:全屏插件，支持各大浏览器lunr.js:类似于Solr,但是用于浏览器上的全文搜索引擎，可以为JSON创建索引，离线也可以使用jquery.hotkeys:jQuery插件，用于绑定热键breach_core:Javascript编写的Browser(浏览器)octocard:用于生成Github信息卡片的库github-cards:用于生成Github信息卡片的库money.js:轻量级货币转换库，web和node皆可用accounting.js:轻量级的数字、货币转换库javascript-algorithms:Javascript实现的各种算法集合lazy.js:类似于underscore,但是会延迟执行，某些场景下，性能会有很大的提升seajs:前端模块加载器，解决模块化、依赖等问题jQuery-One-Page-Nav:单页应用中一个用于处理导航栏的库js.js:Javascript实现的javascriptJITjquery-ui:jQuery团队开发的UI相关的前端库，功能强大todomvc:分别基于AngularJS/EmberJS/Backbone等实现的TODOList,帮助开发者选择前端MVC库localForage:Mozilla出品，用于离线存储，基于IndexedDB,WebSQL或者localStorage,提供一致的接口EventEmitter:浏览器版的EventEmitterjquery.serializeJSON:jQuery插件，用于将form表单序列化成JSON数据knockout:前端MVVM框架，用于开发富前端应用mermaid:可以根据文本生成流程图，类似于Markdown的语法js-sequence-diagrams:另一款可以根据文本生成流程图的库，类似于Markdown的语法flow:一个用来检测Javascript语法错误的库，Facebook出品zoomooz:jQuery插件，用来处理浏览器缩放fancyBox:一个用于放大缩小图片、Web内容或者多媒体元素的库，优雅大方mithril.js:轻量型前端MVC框架，部分使用场景下性能优于Angular.js和Reactbackbone:强大的前端MVC库，鼻祖级前端库，最初为了配合Rails来模块化前端应用，兼容性良好(兼容到IE6)，插件丰富，性能良好jquery.smartbanner:smartbanner是从IOS6开始支持的一个新特性,这个插件提供了对早期IOS4/5和Android的支持jquery.scrollTo:在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素，支持回退等jScrollPane:自定义的滚动条，让所有浏览器都显示一样的滚动条onepage-scroll:提供类似于iPhone6展示页类似的效果，适用于单页应用，兼容到IE8scrollMonitor:前端插件用来监控元素的滚动事件(进入、退出等)，性能很好ScrollMagic:神奇的滚动交互效果插件，可以在滚动的过程中设置各种各样的动态效果infinite-scroll:滚动加载，滚动到最下到自动加载，PaulIrish大神之作animatable:仅仅依靠border-width和background-position实现的各种动态效果，看真相Fluidbox:页面上内嵌图片的放大缩小效果，类似于Medium中的效果jquery-validation:jQuery的一个插件，用于校验Form表单BigVideo.js:jQuery的一个插件,用于实现大背景(视频、图片)效果emscripten:一款基于LLVM,可以将C/C++转换成Javascript的工具，使得Javascript可以近乎Native的速度qrcode-generator:各种语言的二维码生成工具device.js:一个可以检测设备类型的工具，可以让我们根据不同的设备来为其定制响应的Javascript和CSSjquery-qrcode:jQuery插件，用来生成二维码Wookmark-jQuery:jQuery的一个插件，可以用来实现瀑布流的效果isotope:可以用来过滤、排列布局，实现美观的动态布局切换效果，Demolazysizes:功能强大的图片延迟加载工具，可以首先加载一个低质量的图片，然后再加载高质量的图片progressbar.js:简洁美观的进度条，扁平化pigshell:一个由Javascript实现的Shell,将互联网当做一个大的文件系统,通过cd/ls/cat…..等命令,可以访问Facebook/Twitter/GoogleDrive等网络服务spectrum:Js实现的颜色选择器(Colorpicker)jQuery.countdown:jQuery倒计时插件summernote:WYSIWYG富文本编辑器awesomplete:非常轻型的一个自动补全JS库,没有任何依赖,配置简单,美观switchery:IOS7上Switch的JS实现,支持IE8及以上浏览器trix:Basecamp公司出品的富文本编辑器，简洁小巧sensor.js:在智能移动设备浏览器上，通过HTML5的api使用移动设备的功能。定位、运动、倾斜等hyhyhy:用于创建基于HTML5的演示文稿swipebox:jQuery插件，用于处理移动端的触摸事件FileAPI:前端用户处理文件（拖放、多文件上传等）Sortable:现代浏览器上用于实现元素拖拽排序的功能，支持Meteor,AngularJS,React，不依赖jQuerySwiper:用于实现浏览器上的滑动切换效果，支持硬件加速matter-js:2D物理效果引擎，碰撞、弹跳等jQTouch:用于辅助创建手机端的Web应用，支持主题、Zepto.js等snabbt.js:一个利用Javascript和CSStransform的animation库c3:基于D3的图表库echarts:企业级图表库，百度开发parallax.js:一个用于响应智能手机orientation的库jQuery-Animate-Enhanced:jQuery动画库的一个增强，用于现代浏览器wysihtml:富文本编辑器，适用于现代浏览器slip:一个通过滑动或者拖拽来操控列表的库evil-icons:一个矢量图库，提供Ruby/Node等支持PhotoSwipe:JS的一个图片展示库focusable:是页面上一个元素高亮的库，有图有真相firefox.html:Firefox在浏览器端的实现——HTML版的Firefoxjquery-mobile:jQuery团队开发的用于辅助手机端webapp开发的库，基于HTML5mobile-angular-ui:基于angularjs和bootstarp的webapp开发框架interact.js:一个适用于现代浏览器的，用于处理手势、拖放、缩放等的库rebound-js:实现部分物理效果，Facebook出品basket.js:基于LocalStorage的资源加载器，可以用来缓存script和css,手机端使用速度快于浏览器直接缓存iscroll:高性能的滚动(scroll)处理库，功能强大，支持各种事件，不依赖任何的库，且插件丰富,大众点评的手机端列表滚动就是用这个库处理的metrics-graphics:基于D3的图表库，简洁、高效，Mozilla出品accessible-html5-video-player:Paypal出品的Video播放器loading:几种Loading效果，基于SVGflippant.js:一款能够漂亮的网页元素翻转效果库，代码许久不更新，不过作为源码学习还是不错的move.js:基于CSS3的前端动画框架scrollReveal.js:使元素以非常酷帅的方式进入画布(Viewpoint)，看DemoModernizr:一个用来检测HTML5和CSS3支持情况的库foundation:另一款前端模版框架，类似于BootstrapFlat-UI:Bootstrap的一款主题，简洁美观iCheck:一款漂亮的Checkbox插件Swipe:非常轻量级的一个图片滑动切换效果库,性能良好,尤其是对手机的支持,压缩后的大小约5kbslick:功能异常强大的一个图片滑动切换效果库SocialButtons:漂亮的社交按钮sweetalert:一个非常美观的用于替换浏览器默认alert的库web-animations-js:Javascript实现的WebAnimationAPIvivus:可以动态描绘SVG的JS库,支持多种动画plyr:轻量,小巧,美观的HTML5视频播放器timesheet.js:基于HTML5&CSS3时间表slideout:一个非常美观的侧滑菜单
包管理工具PackageManagers
菜鸟教程NPM使用介绍http://www.runoob.com/nodejs/nodejs-npm.html淘宝NPM镜像https://npm.taobao.org/npm模块安装机制简介http://www.ruanyifeng.com/blog/2016/01/npm-install.htmlnpm包搜索地址https://www.npmjs.com/
Bower中文网http://www.bowercn.com/Bower：客户端库管理工具-阮一峰http://javascript.ruanyifeng.com/tool/bower.html
yarn中文网https://yarnpkg.com/zh-Hans/快速、可靠、安全的依赖管理YARN简介https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/
编辑器TextEditors
官网下载http://www.jetbrains.com/webstorm/download前端网破解版下载http://www.qdfuns.com/tools
官网下载https://code.visualstudio.com/vscode插件精选-献给所有前端工程师https://segmentfault.com/a/1190000006697219
官网下载https://www.sublimetext.com/前端网破解版插件版下载http://www.qdfuns.com/toolsSublimeCodeIntel:SublimeText的代码补全工具，支持多种语言Emmet：一个用于提高开发效率的编辑器插件，前身是ZencodingSublimeLinter:一个提供代码质量检测的插件SublimeTmpl：快速新建指定的模版文件Syntax-highlighting-for-Sass：sass代码高亮插件MarkdownEditing:SublimeText强大的Markdown扩展,提供快捷键,主题等ApplySyntax:辅助检测语法插件CTags:SublimeTextCtags支持插件,需要安装ctagssublime-react:React代码高亮
JS框架JSFrameworks
Backbone.jsAPI中文文档http://www.css88.com/doc/backbone/
中文官方文档https://angular.cn/angularjs中文网http://www.apjs.net/angularjs教程http://www.angularjs.net.cn/Angular基础入门http://www.cnblogs.com/micua/p/angular-essential.htmlangular-masonry:Masonry的AngularJS插件，用于瀑布流angular-schema-form:根据JSON生成响应的Form表单restangular:Angular中用来处理RESTfulAPI的插件，可替代$resourceng-cordova:Cordova常用组件的Angular版本angular-translate:Angular的国际化(I18n)ng-inspector:Chrome插件，用于调试Angularangularjs-style-guide:AngularJS代码风格ngReact:React的Angular插件，可以在Angular中使用ReactComponentsmaterial:GoogleMaterialDesign效果的Angular实现angular-local-storage:Angular插件,提供了对localStorage的友好支持,并对不支持的浏览器使用cookie优雅降级angular-filter:一组有用的AngularFiltersbindonce:Angular插件,用于减少Watcher的数量,提升性能
英文官方文档https://facebook.github.io/react/docs/hello-world.html中文官方文档http://reactjs.cn/react/docs/getting-started-zh-CN.htmlgitbooks手册https://hulufei.gitbooks.io/react-tutorial/content/introduction.html阮一峰react入门http://www.ruanyifeng.com/blog/2015/03/react.html阮一峰ReactRouter入门http://www.ruanyifeng.com/blog/2016/05/react_router.htmlReactRouter中文文档https://react-guide.github.io/react-router-cn/react-redux中文文档http://cn.redux.js.org/docs/react-redux/index.html阮一峰Redux入门教程http://www.ruanyifeng.com/blogreact:React框架源代码react-native:Facebook出品的使用React开发IOS原生应用的框架react-hot-loader:实时调整React组件效果grunt-react:React的Grunt组件,用于将JSX编译成JStouchstonejs:基于React的手机应用前端框架essential-react:基于React,ES6,React-Router的一个应用脚手架react-router:React路由解决方案
vue官方http://cn.vuejs.org/vuex官方http://vuex.vuejs.org/zh-cn/vue-router官方https://router.vuejs.org/zh-cn/
UI框架UIFrameworks
最受欢迎的HTML、CSS和JS框架http://v3.bootcss.com/
一款接近原生的Html5移动App开发框架会htmlcssjs就可以开发apphttp://www.ionic.wang/
Foundation中文网迄今为止最好的响应式前端框架http://www.foundcss.com
移动端服务的前端框架http://frozenui.github.io/
materializecss
基于MaterialDesign的主流前端响应式框架http://www.materializecss.cn/
最接近原生APP体验的高性能前端框架http://dev.dcloud.net.cn/mui/
和react配合的UI框架https://ant.design
和vue配合的UI框架http://element.eleme.io/
JS预处理JSPreprocessors
TypeScript入门教程菜鸟教程http://www.runoob.com/TypeScript中文网https://www.tslang.cn/TypeScript教程gitbookhttps://www.gitbook.com/
CoffeeScript中文http://coffee-script.org/CoffeeScript实用手册极客学院http://wiki.jikexueyuan.com/project/coffeescript/
过程自动化ProcessAutomation
Grunt中文网http://www.gruntjs.net/
gulp.js中文网http://www.gulpjs.com.cn/gulp详细入门教程http://www.ydcss.com/前端构建工具gulpjs的使用介绍及技巧http://www.cnblogs.com/2050/p/4198792.htmlGulp开发教程https://www.w3ctech.com/topic/134
模板引擎Templating
handlebarsjs官网http://handlebarsjs.com/Handlebars中文文档http://www.360doc.com/content/Handlebars.js中文文档http://keenwon.com/992.htmlHandlebars的使用方法文档整理http://www.tuicool.com/articles/fqQFN3
haml官方文档https://github.com/haml/hamlhaml入门http://blog.csdn.net/napoay/article/details/50491363
Jade官方的英文文档http://www.w3cplus.com/html/how-to-use-jade.htmlJade的使用http://www.w3cplus.com/html/how-to-use-jade.html带你学习Jade模板引擎视频http://www.imooc.com/learn/259
构建工具BuildTools
RequireJS英文网http://requirejs.org/RequireJS中文网http://requirejs.cn/require.js的用法-阮一峰http://www.ruanyifeng.com/blog
seajs文档http://seajs.org/docs/SeaJS从入门到原理http://www.tuicool.com/articles/FfEJv2u
官网http://browserify.org/githubhttps://github.com/substack/node-browserify/
Webpack中文指南http://webpackdoc.com/webpack的实例http://www.vichily.comwebpack的入门http://www.vichily.com一小时包教会——webpack入门指南http://www.w2bc.com/Article/50764
CSS预处理器CSSPreprocessors
sass入门http://www.w3cplus.com/sassguide/sass参考手册http://sass.bootcss.com/docs/sass-reference/SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/
最后还是要推荐下我的web前端学习群：527535103，每天晚上20:00我都会开直播给大家分享web前端学习知识和路线方法
好了，文章到这里就结束啦，如果本次分享的stellar theater和前端怎样入门问题对您有所帮助，还望关注下本站哦！
