HTML5开发需要学习哪些内容

关于Web前端学习的必经阶段。正在从事Web前端学习的小伙伴们来和小伙伴们一起看一看吧。希望能够对大家有所帮助！

第一阶段：

● HTML+CSS:

HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、

● JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树 *** 作大全、ECMAscript、DOM、BOM、定时器和焦点图。

● JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、d出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

● JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

● JQuery：基础使用

悬着器、DOM *** 作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：HTML5和移动Web开发

● HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas.

● CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

● Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

● 移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、d性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：HTTP服务和AJAX编程

● WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

● PHP基础：

PHP基础语法、使用PHP处理简单的GET或者POST请求、

● AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

● AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现瀑布流案例额。

第四阶段：面向对象进阶

● 面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

● 面向对象三大特征：

继承性、多态性、封装性、接口。

● 设计模式：

面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：封装一个属于自己的框架

● 框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

● 框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

● 框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：模块化组件开发

● 面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

● 面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：主流的流行框架

● Web开发工作流：

GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

● MVC/MVVM/MVW框架：

Angular.js、Backbone.js、Knockout/Ember。

● 常用库：

React.js、Vue.js、Zepto.js。

第八阶段：HTML5原生移动应用开发

● Cordova：

WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战(创建项目，配置，编译，调试，部署发布)。

● Ionic：

Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果(下拉刷新，上拉加载，侧滑导航，选项卡)。

● React Native：

React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

● HTML5+：

HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段： Node.js全栈开发

● 快速入门：

Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

● 核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径 *** 作，序列化和反序列化、文件流 *** 作、HTTP服务端与客户端、Socket.IO。

● Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库 *** 作和数据访问、非关系型数据库 *** 作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

● 快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

● Node.js开发电子商务实战：

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

在上一篇结构型模式中，我们以功能为基本单位，研究了一些设计模式，用于实现功能转换、功能组合、功能封装等目的。

我们知道，面向对象编程有两个核心元素：对象、对象间通信协作。从面向对象的角度看，任何系统和功能，都是由一个个对象，相互分工合作实现的。推而广之，很多系统也都是这样组织和运行的。

本章的设计模式，列举了通用场景下常用功能机制的经典实现方法，讲解了经典实现中是如何高效组织对象、控制对象协作交互的，具有很好的参考价值。

示例：https://www.runoob.com/design-pattern/chain-of-responsibility-pattern.html

责任链模式，就是把程序处理对象前后排列起来，形成一条处理线。处理线上需要被处理的信息，在处理线上向下传递，任何一个节点都可以随时中断传递。

GUI系统中的事件传递机制（在Javascript中叫做事件冒泡），是责任链模式最典型的应用之一。

当某一事件发生时，最顶层GUI对象会首先收到事件，但是它先不处理，而是依次交给命中的子GUI对象处理。当子GUI对象返回为False时，表示事件未被接收，此时父GUI对象才真正对发生的事件进行业务处理。

可以看出，事件传递机制，是一种增强版的责任链模式，它的节点处理权，经历了向下和向上的双向传递过程。

总结：当项目中一个数据对象，需要被多个处理对象进行处理时，可以将处理对象链接起来，然后把数据对象传递给头节点，随着处理的进行，数据对象的处理权会在处理链中流动，从而完成整个处理过程。

责任链模式结构适用于需求固定的场景，用于实现简单高效的处理机制。假如需求不断变化，而且功能很复杂，那么用责任链模式很可能就无法胜任了，需要采用新的高复杂度的设计。例如，如果想要数据对象在所有处理对象中根据状态来实现跳转，可以选择使用状态机等其他方案来实现。

示例：https://www.runoob.com/design-pattern/command-pattern.html

想要实现撤销、重做、事务等功能，可以使用此设计模式。通常在编辑器、数据库中有此类功能需求。

命令也就是请求，或者叫调用。命令模式要求将请求参数和请求相关的方法封装在一起。

请求对象中封装了实现“撤销”、“重做”、“事务”功能所需要的所有信息，实现了关联信息的高内聚，所以可以实现我们想要的功能。

例如，可以在请求对象中保存修改之前的值、修改之后的值。利用修改之前的值，可以实现“撤销”功能；利用修改之后的值，可以实现“重做”功能。如果将所有请求对象都记录下来，并按照先后顺序排列起来，形成“撤销重做”堆栈，这样就可以实现连续的“撤销”、“重做”。“事务”则是“撤销”与“重做”的结合体，正常执行流程等同于“重做”，发生错误需要回滚，等同于“撤销”。

如果不采用这种方式，会导致实现这些功能的信息，分散在源码中多个地方，或者已经丢失，没有保存，就无法实现“撤销”、“重做”、“事务”功能。

同时，实现请求参数高内聚，也可以很方便地将它们保存到磁盘上，保存到文件的过程叫做“序列化”，从文件中读取的过程叫“反序列化”。这里的序列指的就是二进制流。

Qt中与命令模式相关的部分是：Undo Framework，里面有示例项目，不熟悉的同学可以抽点时间看一看。

示例：https://www.runoob.com/design-pattern/interpreter-pattern.html

顾名思义，解释器模式是用来实现解释器的。 解释器是这样一个程序：解释器以符合语法的文本为输入，解释输入内容，完成一定的计算功能。文本可以在程序运行时动态加载，动态解释、动态执行。

实现简单的解释器：命令行程序，如ping命令、cd命令等； 实现复杂的解释器：脚本语言解释器，如python，lua，javascript；计算器。

我们知道，在GUI图形用户界面被发明之前，人类和程序之间的交互是通过敲命令行实现的，缺点是使用难度较大，门槛较高。 在GUI发明以后，交互更加友好，电脑更加易于使用了，所以也更加普及了。

但是GUI交互的缺点在于，不够灵活，对参数的控制粒度不够细致。例如，现在大多数开发者都使用集成开发环境来开发软件，一般情况下都使用默认参数，比较方便。但是如果你想要更改某些编译选项，可能还是需要直接修改底层的编译命令。命令相对于GUI元素更加灵活，过于灵活的地方用GUI比较难于实现，例如组合、递归、跳转等等。在这些场景下，使用解释器是非常合适的。但是通常情况下，这个模式并不常用。

示例：https://www.runoob.com/design-pattern/iterator-pattern.html

在需要多次遍历同一个数据集合的时候，为了少些一些for，或者想要把遍历过程封装起来，降低耦合，就可以使用迭代器模式。这个模式非常常用。

迭代器就是一个专门用来遍历数组的类。它只需要实现两个接口：hasNext()、next()。 hasNext()接口用于控制循环何时停止；next()接口用于取出当前位置的数据元素，并将遍历指针指向下一个元素。 当然，构造迭代器对象的时候，需要将数据集合传递给迭代器，让迭代器知道要遍历哪些数据。

原本需要用for循环来遍历的代码，现在通过封装，提取出了“遍历”这一功能所需要的必要信息，定义了两个接口，把不必要暴露的信息封装在了迭代器中，妥妥的实现了解耦。

示例：https://www.runoob.com/design-pattern/mediator-pattern.html

中介者模式是指，在原本直接通信的对象之间，添加一个通信中间层，使对象间通信变为间接通信，降低对象间的耦合。

此模式和代理模式基本思想上是一致的。二者的区别是：代理模式是通过加一个中间层，来实现两个原本很难交互的功能主体，实现顺畅交互；中介者模式是为了降低对象间通信时的耦合而提出的，为的是提高代码的可维护性。

比较大的项目中会用到，一般存在于某些框架中。因为大的项目中对象繁多，通信也比较复杂，适合使用中介者模式。

在大的项目中，一般会有一个全局的通信管理器，任何对象都可以使用通信管理器提供的接口，将自己注册为某一个具有唯一ID消息的发送者和接收者。这样发送者只需要发送消息，不需要管谁来接收，不需要拥有发送者的实例指针，发出消息后，已注册的接收者都会收到消息。接收者不需要管信号是谁发的，即不需要拥有发送者的实例指针。

所以，中介者模式也可以叫“通信中介模式”。

示例：https://www.runoob.com/design-pattern/memento-pattern.html

这个模式和状态存档功能是绑定在一起的。为了在程序中实现状态存档功能，可以使用备忘录模式。

原例子中有三个类，个人觉得没有必要，这里我们简化成两个类，即备忘录模式中有两个类：状态对象类和状态对象管理类。 状态对象类是状态字段是集合，并提供了存取接口；状态对象管理类负责组织和保存状态对象。当然实际实现中可以根据需求增加类，配合使用，完成状态保存恢复。

当一个对象会影响到其他多个对象时，即当对象间存在一对多关系时，使用观察者模式。 一般应用于单向通知的场景，如GUI中鼠标事件、按键事件、窗口事件通知。使用Qt中的信号槽机制可以实现此模式。

“一”是指发生变化的那个对象，“多”是指需要获取此变化通知的对象组。其中，变化消息是单向地由“一”到“多”传递的。如果不是单向的或者对象间不是一对多的关系，更加复杂，就需要重新思考其他对象间通信模型。

如果不使用此模式，可能会导致观察者不能动态增加或删除；可能会造成发送者的业务代码和接收者的响应代码混在一起，耦合严重。

使用此模式，需要为观察者设计一个基类，并设计一个接收通知的接口，所有观察者需要实现通知接口；所有观察者指针可以保存在队列中，实现动态增删。

状态模式用于实现状态机。 如果一个程序功能中存在某些状态，在一定情况下，这些状态可以互相转换，并且在转换前后需要作出对应的 *** 作，这种情况下使用状态机来实现就非常合适。

如果不使用状态机（状态模式），一般的实现方法是使用一连串的if-else，或者使用长长的switch-case来实现。这样做的缺点，一方面状态判断不够高效，另一方面是业务代码集中在一块，不好维护。

使用状态机，每个状态都是一个类，相关的业务代码分布到各自的状态类中，能够实现不同的状态及与状态相关的业务代码解耦。同时某个状态和下一个状态是关联好的，在状态切换时，效率更高，不需要执行长长的判断。

Qt中已实现状态机框架，The State Machine Framework，在此框架下，我们可以更加专注于业务实现，而不是状态机本身的技术细节。

示例：https://www.runoob.com/design-pattern/null-object-pattern.html

使用基类保存子类对象通常有两种做法：

第一种方法用指针是基本方法，但是指针用起来要非常小心，要考虑内存释放的问题。此时空对象就可以用空指针表示。 第二种方法用基类对象保存子类对象，这种方法使用起来相对省心，不用与指针打交道，使用者不用直接管理内存。例如Qt中的Qt XML C++ Classes类的设计就是采用这种方式设计的。这种情况下，因为不使用指针，就需要使用空对象来代替空指针。

可以仿造Qt XML中的类进行设计。一般需要提供isNull()接口，对象类型转换接口等。

策略模式和桥接模式类似，用于实现功能切换与组合。二者区别在于，策略模式专注于一个功能的不同实现方式；桥接模式专注于多个功能之间的组合。

将功能抽象成单独的类，功能切换只需要切换不同的功能子类即可，同一个功能需要实现同一个功能接口。

示例：https://www.runoob.com/design-pattern/template-pattern.html

模板模式应该是我们最熟悉的。 这里的模板就是接口类，接口类定义了使用者和功能提供者之间交互的函数列表。子类负责功能的具体实现。

示例：https://www.runoob.com/design-pattern/visitor-pattern.html

访问者模式用于将数据结构与数据 *** 作相分离。

访问者模式和迭代器模式类似。迭代器模式一般用来遍历数组，所以没有把for封装起来。而访问者模式可以遍历一切类型的数据结构，具体的遍历过程被封装在接收者内部。同时，对每一个遍历得到的数组元素的 *** 作，被封装在访问者内部。每一种对元素不同的 *** 作，都需要新建一个访问者类。

接收者需要实现accept()接口，访问者需要实现visit()接口。

每种设计模式都有使用场景，都有优点和缺点。随着需求的改变，任何一种设计模式可能都将不再适用。

HTML编辑器有以下几种：

1、AdobeDreamweaver

简称“DW”，中文名称 "梦想编织者"，最初为美国MACROMEDIA公司开发，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

2、Microsoft Expression Web

Microsoft Expression Web是由微软打造的一款网页设计工具，它为用户提供了所见即所得的设计模式，支持javascript技术，可以方便初学者快速设计师标准的网站，并拥有与asp.net2.0紧密结合进行各种模块进行开发的功能。

3、CoffeeCup HTML Editor

它是一款功能强大的html网页编辑器，软件界面简单，可以轻松对html页面进行编辑、预览等 *** 作，拥有avaScripts、ActiveX 控制、图片功能、色彩向导、多文件支持、全功能 FTP 程序、服务器扩展支持 (ASP，SHTML，HTML以及CSS)等多种功能。

扩展资料

html特点：

1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

3、平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

4、通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

---