前端技术-常识
计算机知识思维导图：前端技术-常识。网页展示前三层结构，可在线查看完整脑图并下载 GoMind 文件。
2026-08-25
## 前端技术-常识 ### 前端技术-常识 #### html ##### html ##### xhtml ##### DHTML ##### shtml #### html模板语言 ##### haml ##### markdown ##### slim ##### jade #### CSS ##### CSS预处理器 #### CSS预编译 ##### Sass(.sass) ##### Sass(.scss) ##### LESS ##### Stylus #### javaScript ##### 核心 ECMAScript ##### DOM（文档对象模型） ##### BOM（Browser Object Model） ##### 其它脚本语言or扩展 ##### 主流js扩展,脚本语言 ##### Ajax 框架 #### 认识 ##### Web组件由四个规范 ##### 基础支持库 ##### 标记语言 ##### 前端导航 ##### 其它 ## 前端技术-应用 ### 前端技术-应用 #### 开发工具IDE ##### IntelliJ IDEA ##### WebStorm ##### Aptana_Studio ##### sublime ##### Brackets ##### DCloud HBuilder-做最好的HTML5开发工具 ##### atom ##### 在线 #### 辅助开发工具 ##### Emmet 快速编写HTML/CSS代码 :代码补全 ##### Zen Coding: 一种快速编写HTML/CSS代码的方法 ##### alignment 一个强迫症插件，可以将=对齐 ##### 性能分析器 yslow ##### 最佳远程调试器：fiddler（小提琴） ##### 最佳压缩器/编译器：yuicompressor和Google Closure Compiler ##### javascript单元测试框架：Jasmine ##### chrome插件 ##### cnd #### 开源js工具 ##### 插件@osc ##### highlightjs 代码高亮支持 ##### 页面滚动 ##### 图片展示/焦点图/幻灯片/轮播图/画廊 ##### 表单验证插件 Parsley.js ##### 对话框插件 SimpleModal ##### 图片 ##### 图标&字体 ##### 图表 ##### 轮播图 ##### 标签云 ##### 统计 ##### autoComplete #### 前端开发包管理工具 ##### Bower ##### 前端工作流程自动化——Grunt/Gulp 自动化 ##### npm是一个node包管理和分发工具 ##### Browserify ##### Component ##### Duo #### 流行开源 ##### 设计 ## 前端技术-框架 ### 前端技术-框架 #### 工具框架(&UI) ##### 重量级 ##### 轻量级 #### Hybrid APP开发框架 ##### ionic ##### AppCan ##### jquery mobile ##### mui ##### Intel XDK ##### Native.js #### JavaScript MVC 框架 ##### angularjs -google ##### ReactJS -facebook ##### Mithril – 构建杰出 Web 应用的 JS MVC 框架 #### js模板框架 ##### template.js ##### Beetl ##### AngularJS 含有模板能力 > 仅展示前三层结构；请在线查看完整脑图或下载 GoMind 文件。
前端技术-常识
前端技术-常识
html
XHTML 与 HTML 4.01 标准没有太多的不同
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
与htlm不同
xhtml
HTML+CSS+JAVASCRIPT+DOM HTML
综合和其它动态的技术而成的网页技术
DHTML
用于SSI技术的文件
shtml
html
haml
markdown
slim
jade
html模板语言
SCSS（Sassy Css）
SASS
http://www.w3cplus.com/sassguide/
less
CSS预处理器
CSS
compass
bourbon
Sass(.sass)
compass
bourbon
Sass(.scss)
LESS Hat
LESS
Nib
Stylus
CSS预编译
核心 ECMAScript
HTML 和 XML 的应用程序接口（API）
Document根节点包含子节点：forms、location、anchors、images、links
DOM（文档对象模型）
BOM包含了DOM(对象)
主要处理浏览器窗口和框架
通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分
弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口大小 提供 Web 浏览器详细信息的定位对象 提供用户屏幕分辨率详细信息的屏幕对象 对 cookie 的支持 IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象
Window对象包含属性：document、location、navigator、screen、history、frames
由于BOM的window包含了document，window
BOM（Browser Object Model）
BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。
Dart
CoffeeScript
TypeScript
ES6 / ECMAScript 6
Flash的脚本语言
ActionScript
Untitled node
NativeScript
NativeScript既不是一种新型的JavaScript语言，也不是原生功能的封装器，它包括一个JavaScript运行时环境和一种将JavaScript调用转化为原生调用的机制。用JavaScript（或TypeScript，CoffeeScript等）语言编写应用，之后在安卓平台用V8，在iOS和Windows Phone上用WebKit JavaScriptCore解释应用。然后，NativeScript运行时环境找到原生的目标API，将JS数据类型转化为相应的原生类型，然后调用原生API，并将得到的结果值返回 用NativeScript创建JavaScript原生移动应用 http://www.infoq.com/cn/news/2015/03/nativescript
其它脚本语言or扩展
共有95款 脚本编程语言 http://www.oschina.net/project/tag/326/scripting
CoffeeScript
LiveScript
Traceur
主流js扩展,脚本语言
jQuery
jQuery & jQuery UI (Base Theme)
Angular
Zepto
MooTools
Prototype
YUI
Ext JS
Dojo
Ajax 框架
javaScript
BOM和DOM详解 http://www.bitscn.com/school/Javascript/201410/347570.html
Custom Elements
Templates
Shadow DOM
HTML imports
Web组件由四个规范
这四个规范已经由W3C具体化了 http://zhuanlan.zhihu.com/FrontendMagazine/19726472
ECMA3Script Built-In Library
ECMA3 Braower Support Library
基础支持库
Wikitext语言 ，亦称Wiki标记语言
Markdown 的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客
Textile 是一个人性化的Web文本生成器，以简洁的方式提供HTML标签功能
热门
Markdown --标记语言以及文本到HTML的转换工具
MultiMarkdown --基于Markdown但具有更多功能
AsciiDoc --漂亮的文本文档格式用于写作
Textile --被称为“人类网络文本生成器”
Texy --文本到XHTML格式化和转化库
Tome --作者的标记语言和工具包
reStructuredText --Docutils的标记语法分析组件
热门2
作业部落 Cmd - 在线 Markdown 编辑阅读器
马克飞象
在线编辑器
标识性置标语言
nroff, troff, TeX, Lout 以及 PostScript.
过程性标识
HTML
超文本标记语言
XHTML
XAML
可扩展标记语言
描述性标记
以表达为目标的轻量级标记语言有AsciiDoc, BBCode, JsonML, MakeDoc, Markdown, Org-mode, POD, reStructuredText, Ruby Document format, Texy!, Textile, txt2tags, UDO,Wiki标记语言。
以数据线性化为目标的轻量级标记语言有Curl (programming language) (homoiconic, but also reads JSON; every object serializes), JSON, OGDL, Simple Declarative Language，YAML
各种轻量级标记语言
标记语言
前端设计导航
http://uedh.cn/index.php
大前端-前端网址导航
http://www.daqianduan.com/nav
前端导航
知乎上，前端开发领域有哪些值得推荐的问答？
http://blog.163.com/front_end1205/blog/static/21437113820121120113558430/
其它
认识
前端技术-应用
前端技术-应用
IntelliJ IDEA
JavaScript优
WebStorm
Aptana_Studio
sublime
Brackets
极客的选择
html5优
DCloud HBuilder-做最好的HTML5开发工具
AtomSetup.exe
atom
http://runjs.cn/code
http://codepen.io/pen/
在线
开发工具IDE
Emmet快捷键中文查询-小工具
Emmet 快速编写HTML/CSS代码 :代码补全
Zen Coding: 一种快速编写HTML/CSS代码的方法
Untitled node
alignment 一个强迫症插件，可以将=对齐
默认快捷键是ctrl+alt+a，和国内某著名IM的截图快捷键冲突了，我把它改成alt+shift+f了（貌似和netbeans一样）
性能分析器 yslow
http://yslow.org/
最佳远程调试器：fiddler（小提琴）
最佳压缩器/编译器：yuicompressor和Google Closure Compiler
javascript单元测试框架：Jasmine
AlloyDesigner 页面样式抓取
http://alloyteam.github.io/AlloyDesigner/
chrome插件
https://cdnjs.com/
http://cdn.code.baidu.com/
http://libs.useso.com/
cnd
http://blog.xn--9p3a45o.cn/cdnjs.html
辅助开发工具
Untitled node
插件@osc
highlightjs 代码高亮支持
全屏滚动 fullPage.js
页面滚动
图片展示/焦点图/幻灯片/轮播图/画廊
表单验证插件 Parsley.js
对话框插件 SimpleModal
fancybox 图片预览
图片
Font Awesome
图标&字体
Humble Finance
图表
swiper
轮播图
wordcloud2.js
标签云
ALog
busuanzi.pure.mini.js
统计
autoComplete
开源js工具
Bower是一个Node模块，因此你需要安装Node.js
bower解决js的依赖管理
Untitled node
Bower
Untitled node
前端工作流程自动化——Grunt/Gulp 自动化
npm是一个node包管理和分发工具
Browserify
Component
Duo
前端开发包管理工具
http://zhuanlan.zhihu.com/FrontendMagazine/19726472 前端模块管理器简介 http://www.tuicool.com/articles/nYVj2i
扁平化
Material Design 设计语言
Material Design 中文版 http://wiki.jikexueyuan.com/project/material-design/ 谷歌的Material design并不是一种系统界面设计风格，Material design其实是单纯一种设计语言，它包含了系统界面风格、交互、UI等，此外对于谷歌来说，Material design还有着非常伟大的使命，那就是打造一个横跨所有设备的统一的设计语言，像是手机、桌面端、可穿戴设备等今天就请大家跟随这小编的脚步，来看看 这次谷歌全新设计理念Material design。 http://tech.sina.com.cn/mobile/n/2014-11-17/08329797684.shtml
设计
流行开源
前端技术-框架
前端技术-框架
dom操作的库
jquery是一个javascript的类库，封装了一些方法，可以减少编写js代码的工作量
jquery
Bootstrap 的 JavaScript 插件需要引入 jQuery / 仅使用CSS样式可不需要
bootstrap和jquery mobile都是基于jquery编写
并不是针对移动web
Twitter Bootstrap 3.0 正式发布,更好地支持移动端开发
Bootstrap很好的解决了适应性布局的问题
Bootstrap并没有提供更多的移动平台的组件
移动端适配
Bootstrap
使用前提需要导入基础jquery.js
jqueryMoblie是在jquery的基础上，构建的一系列适合移动设备展现的，主要面向UI的一个框架
缺点就是太多用不到的代码，体积大，效率地下
APP开发时，最好使用JM，他的UI更接近原生UI
页面导航机制使它更像APP，而不是跳转到一个网页
移动端UI组件
jquery mobile
jQuery Mobile：http://jquerymobile.com/ jquery是一个javascript的类库，封装了一些方法，可以减少编写js代码的工作量。 jqueryMoblie是在jquery的基础上，构建的一系列适合移动设备展现的，主要面向UI的一个框架 可以说jquerymobile是在jquery基础上对移动设备支持的扩展。
文件非常庞大
UI库真的非常全面
kendoui
重量级
不包含UI
jqmobi的性能比jQuery高10来倍
如果你是自己写ui的话 可以拿jqmobi来替换jQuery.js
jQ.Mobi
jQ.Mobi：http://www.jqmobi.com/ jqmobi是专门针对移动端产生的HTML5移动端框架，但是不包含UI，需要web app那套要单独下载 特点是很小压缩了只有几K大 jQuery mobile也是正对移动端开发的框架 他包含了UI一套。但是除开要加载jQuery以外还要加载他的移动框架JS。代码量很大。。。但是入门容易 简单好学。缺点就是太多用不到的代码，体积大，效率地下 而jqmobi的性能比jQuery高10来倍。。如果你是自己写ui的话 可以拿jqmobi来替换jQuery.js
ZUI
jQuery相似的语法
非常的小
压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小
不兼容IE
zepto
Amaze UI
基于zepto的mobile UI组件库
GMU组件
jQTouch
app framework
Jingle UI
Dsure
轻量级
工具框架(&UI)
手机网页或微网站的开发用什么框架好？jquerymobile？zepto？jqmobi？jQTouch？哪个体验最佳？ http://www.zhihu.com/question/22438122/answer/29934188
ionic
AppCan
jquery mobile
HBilder团队
mui
http://dcloudio.github.io/mui/ http://dev.dcloud.net.cn/mui/ https://github.com/dcloudio/mui
Intel XDK
Native.js
Hybrid APP开发框架
使用了自定义的代码模板,且静态解析,无需web容器
angularjs -google
ReactJS -facebook
与前面提及的框架不同，出于灵活性考虑，React使用JavaScript来构建用户界面，没有选择HTML
Mithril – 构建杰出 Web 应用的 JS MVC 框架
JavaScript MVC 框架
template.js
Beetl
AngularJS 含有模板能力
js模板框架