浏览器解析CSS的两种模式:标准模式(strict mode)和怪异模式(quirks mode)。

所谓的标准模式是指,浏览器按W3C标准解析执行代码;怪异模式则是使用浏览器自己的方式解析执行代码,因为不同浏览器解析执行的方式不一样,所以我们称之为怪异模式。

浏览器解析时到底使用标准模式还是怪异模式,与你网页中的DTD声明直接相关,DTD声明定义了标准文档的类型(标准模式解析)文档类型,会使浏览器使用相应的方式加载网页并显示,忽略DTD声明,将使网页进入怪异模式(quirks mode)。

DOCTYPE作用

doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。

标准模式和怪异模式

  • document.compatMode:
    • BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。不同的浏览器就会显示不同的样式。
    • CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。

DOCTYPE 声明

HTML 5:

<!DOCTYPE html>

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dt">

该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。

HTML 4.01 Frameset:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。

XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 等参考 这里

此文介绍了我个人学习前端所总结的资源分类大纲.每个栏目下的推荐部分基本为必要的,可选的部分以后也是要学的…同时也已经入了全栈的坑,不过我后端还是入门不久,因此这里一笔带过.若文章在作为自己路灯的同时,也能照亮他人,那实为一件荣幸之事~

前端基础

前端学习中最原始也是最重要的东西:

  • html5
  • css3
  • js/es6

github上的前端学习指导

牛人总结的学习大纲

类库

类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。

  • 推荐
    • jQuery: A fast, small, and feature-rich JavaScript library.
    • animateCss: css3动画库
    • underscore.js: 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象。 他解决了这个问题:“如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?” 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分。
    • Lodash: underscore.js衍生
  • 可选
    • socket.io: websocket实时应用框架
    • D3.js: 是一个JavaScript库,它可以通过数据来操作文档
    • moment.js: JavaScript 日期处理类库
    • prototype.js: 原生 js 扩展
    • easing.js: jquery 缓冲动画插件
    • ceaser: CSS EASING ANIMATION TOOL
    • cubic-bezier: 赛贝尔曲线

mv* 框架

框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。

  • 推荐
    • vueJS: view 层,数据驱动的组件,为现代化的 Web 界面而生. - 尤雨溪
    • angularJS: 为了克服HTML在构建应用上的不足而设计的. - Google
    • reactJS: view 层,A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES. - Facebook
    • backbone.js: 简单纯粹的 mv* 框架.最佳适用场景是单页面应用,并且页面上有大量数据模型,模型之间需要进行复杂的信息沟通。
  • 可选
    • avalonJS: 迷你 mvvm 框架,司徒正美 去哪儿网
    • Ember.js: A framework for creating ambitious web applications.
    • Meteor: build app with JavaScript.现代网站开发平台,希望构建一个极简的网站开发环境。
    • Flux: 配合 react,用来构建用户端的web应用的应用程序体系架构。- Facebook
    • Redux: 配合 react,Redux is a predictable state container for JavaScript apps.是一个友好简洁的 flux 模式的实现.意义:实现前后端同构,更好组织 UI 组件事件分发.
    • ThinkJS: 一个快速、简单的基于MVC和面向对象的轻量级Node.js开发框架.使用了 ES6/7.全栈开发

UI 框架

快速建站框架

  • 推荐
    • Bootstrap: the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. - Facebook
    • amaze ui: 中国首个开源 HTML5 跨屏前端框架. - 妹子 UI
  • 常用
    • foundation: 迄今为止最好的响应式前端框架,更快、更轻、更多功能、更灵活、更强大!
    • semantic ui: 语义化的网页语言
    • frozen ui: 简单易用,轻量快捷,为移动端服务的前端框架. - 手机QQ UI
    • weiui: 微信官方网页开发样式库.
    • blendui: 移动web开发框架,通过集成原生组件令App体验一流,并为O2O场景特别优化. - 百度 UI
    • echarts: 一个纯 Javascript 的图表库. - 百度
    • jqwidgets: Advanced JavaScript & HTML5 UI Framework

游戏引擎

h5 游戏开发

  • 推荐
    • egret: 国产2D,现在可以3D.中文易学些.
    • createJs: 基于HTML5开发的一套模块化的库和工具,拥有共同或独立工作的丰富交互式内容的开源Web技术。
    • pixiJs: 2D webGL renderer with canvas fallback
    • threeJs: 3D JavaScript Library
  • 可选
    • pomelo: Fast, scalable, distributed game server framework for node.js. - 网易

混合应用框架

web 入侵其他领域

  • 推荐
    • reactNative: Learn once, write anywhere.构建原生 APP
    • nwjs: node-webkit.桌面应用框架
  • 可选
    • ionic: HTML5 Hybrid Mobile App Framework.AngularJS移动端解决方案
    • hex: USING HTML5 AND NODE.JS TO BUILD DESKTOP APPLICATION. - 网易有道
    • appjs: 一个令人振奋的 JavaScript 库,使我们能够使用 Web 技术快速开发桌面应用程序
    • Electron: Build cross platform desktop apps with web technologies

预处理器

处理兼容或者便于管理,快速书写

  • 推荐
    • less/scss: css 预处理器
    • babel: es6 语法预编译
  • 可选
    • polyfill: 使浏览器支持应有特性
    • shim: 使浏览器支持新特性
    • bluebird: Full featured Promises/A+ implementation with exceptionally good performance

移动端框架

移动开发常用

  • 推荐
    • zepto: 轻量jQuery
    • swiper: 移动端网页触摸内容滑动js插件.
    • touch: BAIDU CLOUDA EVENT & GESTURE LIBRARY
    • hammerjs: 是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。
  • 可选
    • iscroll: smooth scrolling for the web
    • video.js: html5 视频框架

构建工具

构建自己的前端工作流

  • 推荐
    • bower: 前端包管理
    • npm: nodejs package manager
    • gulp: 前端构建工具
    • browserify: 模块化
    • requireJs: 模块化amd
    • webpack: 模块化与前端构建 commonjs&amd. - Facebook
  • 可选
    • seaJs: 模块化cmd. - 玉伯 淘宝
    • fis: 为你定制的前端工程构建工具. - 百度

开发组合

开发全家桶

  • 推荐
    • gulp+browserify+babel: 前端构建套装
    • react + webpack + babel: react项目构建
    • react+flux+koa: react 应用开发套装
  • 可选
    • mean: mongoDB express angular nodejs 全栈套餐

后端

不会后端的前端不是好前端

  • 推荐
    • php+mysql
    • nodejs+mongoDB
  • 可选
    • thinkphp: 是一个快速、兼容而且简单的轻量级国产PHP开发框架
    • laravel: 为 WEB 艺术家创造的 PHP 框架
    • express/koa: 基于 Node.js 平台,快速、开放、极简的 web 开发框架。
    • jade: 源于 Node.js 的 HTML 模板引擎

工具网站

有用而有趣的工具

  • 推荐
    • codepen: web在线编辑,各种栗子
    • github: 世界著名同性交友网站
    • can i use: Support tables for HTML5, CSS3, etc
  • 可选
    • easyicon: 图标
    • iconfont: 图标字体
    • impress.js: It’s a presentation framework based on the power of CSS3 transforms and transitions in modern browsers.
    • reveal.js: A framework for easily creating beautiful presentations using HTML
    • lantern: 翻墙

学习资讯

学习是一门技巧

  • 推荐
    • 阮一峰个人网站: 大神!但可能出现几年后他说之前理解错了的情况,被误导就怪自己修行不够
    • 廖雪峰个人网站: 只看了 git 教程, 简单易懂
    • 张鑫旭个人网站: 风格有点奇怪但是很厉害
    • 尤雨溪个人网站: 严格意义上的大神
    • http://taobaofed.org/: 淘宝前端团队
    • alloyteam: 腾讯全端团队
    • ISUX: 腾讯社交用户体验设计
    • 奇舞团: 360前端
    • 知乎: 问答社区
    • stackoverflow: 问答社区
    • 慕课网: IT 教程
    • w3cshool: web 教程
    • w3cplus: 引领web前沿,打造前端精品教程
    • 菜鸟教程: 入门教程
    • segmentfault.com: 是一个专注于解决编程问题,提高开发技能的社区。页面好看,回答好,有教程.
    • 推酷: IT人专属个性阅读社区.
    • 伯乐在线: 做最专业的IT互联网职业社区
    • 开源中国: 找到您想要的开源项目,分享和交流.
    • htmleaf: jQuery之家,自由分享jQuery、html5和css3的插件库
    • dowebok: 意为做好网站,为用户提供代码、素材、特效、教程、模板等建站服务。
    • 微信,微博,qq: 关注些牛人, 技术资讯, 加入些技术干货群
  • 可选
    • cnblog: 面向开发者的知识分享社区.
    • CSDN: 中文 IT 社区
    • open-open.com: 您的生活化网络和IT资讯来源
    • html5中国: html5中文社区
    • 极客学院: 各种教程
    • Codepad: a place for developers to share & save code snippets. Join the community!
    • v2ex.com: V2EX 是一个关于分享和探索的地方
    • 数英: 数字媒体及职业招聘网站
    • 码农网: 编程经验分享
    • 简书: 交流故事,沟通想法,一个基于内容分享的社区
    • 简明现代魔法: 加入魔法协会,一起分享编程的快乐
    • cocoachina: 让移动开发更简单
    • 脚本之家
    • 红黑联盟: IT 门户
    • 程序师: 用程序猿的阳光看世界

书籍

只看过一本纸质书,但是觉得很有用

  • 推荐
    • Javascript设计模式

设计

不会搞艺术的程序员不是好设计师

  • 推荐
    • ps: 切图(cutterman)
  • 可选
    • sketch: mac 设计
    • axure: 交互原型设计
    • xmind: 脑图

其他

必备防身技能

  • 推荐
    • git: 版本管理
    • HTTP
    • TCP/IP
    • seo: 搜索引擎优化
    • shell: 命名行
    • 微信jssdk: 微信h5开发
  • 可选
    • cdn: 内容分发网络
    • REST API
    • markdown

加分

养成良好习惯,做点能出手的东西

  • 推荐
  1. 技术博客
  2. github
  3. 优秀项目
  4. 收集常遇到的问题
  5. 全栈

编辑器

好的编辑器对编程速度和质量都很重要

  • 推荐
    • sublime: 轻量,丰富插件
    • idea/webstorm/phpstorm: 强大
  • 可选
    • vscode: 开源,听说好厉害的样子,但是没研究过

前端优化

优化有很多,网页收藏,云笔记也好,最重要是要用

  • 推荐
    • 雅虎军规
    • 兼容
    • 移动端优化

开发调试

少几个bug吧

  • 推荐
    • 单元测试
    • chromeDevTools 调试
  • 可选
    • jshint