有deadline的H5急速学习

本文提供了一条从HTML5基础到高级应用的学习路径,涵盖了HTML5结构标签、CSS3布局与动画、JavaScript基础与进阶、jQuery和Canvas。同时讨论了AngularJS、React Native以及Node.js,并提到了前端优化技术,如页面预加载、音频播放和触摸事件。H5不仅涉及HTML5新特性,还整合了CSS3、前端框架和JavaScript技术,为构建响应式和交互丰富的移动端网站提供解决方案。

H5学习路线图
前端入门: 页面布局与重构, HTML CSS
移动前端开发: 响应式布局, HTML5 CSS
Web交互开发: JavaScript, jQuery Ajax
前端高级开发: 原生开发, 移动端开发

HTML5基础

H5结构标签,标签类型
H5新标签语义,属性语法
H5新功能标签
H5表单元素
H5视频,音频

CSS

CSS盒子模型,CSS浮动,定位,CSS结构布局,CSS Sprite技术
CSS3语法规则,CSS3选择器,伪代码,背景扩展,CSS3新增盒子属性,文字属性,CSS3滤镜,混合模式
CSS3键值对,CSS3转化模块,过度模块
CSS3浏览器兼容处理
CSS3自定义动画模块,CSS3动画合成混搭
iconfont 图标文字,弹性盒子
媒体查询,响应式布局,CSS3多列
CSS3景深透视,3D三位体构建,CSS3三维特效

H5实战

大型网站项目制作技巧,SEO代码搜索引擎优化技巧

JavaScript基础

JavaScript简介 ECMAScript语法基础
变量 函数 条件语句 循环语句 定时器
DOM和BOM操作
运算符 数组 遍历
JSON语法基础 JSON数据解析
JavaScript主流浏览器兼容处理

JavaScript进阶

JavaScript运动基础 运动类型 面向对象的JavaScript运动框架
JavaScript指针 闭包 作用域 函数节流深入剖析和运用
正则表达书 表单验证
AJAX技术 排序算法 递归算法
JavaScript内置对象深入剖析
面向对象基础 面向对象进阶
装饰着模式
选择框架,面向对象版事件框架,面向对象版高级运动框架

jQuery框架

jQuery框架基础 选择器 DOM节点操作
事件处理机制, jQuery动画,拖拽,表单开发以及其他高级特性
jQuery AJAX技术剖析
jQuery特效原理剖析与制作
jQuery相关插件

Canvas基础

Canvas基础,画布基本图形API
Canvas动画原理,物理建模,碰撞检测,边界识别,粒子系统,游戏引擎等
Canvas特效开发
Canvas手机端游戏制作

AngularJS

MVVM.MVC简介 AngularJS基础知识
服务 控制器 指令
作用域 过滤器 模块化 模块控制 表单处理
AngularJS $http服务和模板
AngularJS路由
AngularJS项目实战及API使用

React Native

环境配置
项目创建 配置 调试 部署 发布
React Native原生API 生命周期 Fetch服务
React Native路由 UI组件 原生模块
第三方库 插件集成 多平台混合开发
React Native项目实战

Node.js (选学)

Node.js发展,生态圈,IO.js
环境配置
REPL环境和控制台程序
异步编程,非阻塞I/O
模块概念,模块管理工具
开发流程,调试,测试
事件驱动,事件发射器
加密解密,路径操作,序列化和反序列化
文件流操作
HTTP服务端与客户端
Socket.IO

先学习HTML,包括HTML5的新标准和之前的全部标准,然后学CSS以及CSS3,了解它们在浏览器的实现情况,原生JS了解一点就可以,大多的操作可以用Jquery,了解常用的几个Jquery插件的用法,应该就差不多了。如果想要做更酷炫的的,学一下egret或者cocos2d更好。 如果要优化加载速度,还要学一下grunt-类的自动化工具。微信的sdk有很多坑,至少nodejs或者php-类的后端语言要会一点。

1.页面素材预加载技术,可以使用createJS之中的preloadJS。我没有看preloadJS的源码,不过预加载并不是HTML5标准中更新的方法。
2.音乐加载播放技术,createJS中同样有soundJS可以实现,而且这部分说起来确实是HTML5标准支持的内容,在上个时代并没有audio这样的标签。
3.可以滑动的页面,大多数是用了swiper.js这个Jquery插件,也有一些是 写的swipe,比较拙劣的手写版页面是不会跟手滑动的,其中touchstart等四个touch系列的事件是HTML5标准中的事件
4.可以涂抹擦除,多半是canvas叠加层,canvas是HTML5标准里面的标签,是代表了先进生产力的标签。
5.有动态的文字和图片,常见的是使用了css3或者直接使用js动画。很多时候提到HTML5多半还会带上CSS3,而CSS的分级又是另外的一个问题了,在不同的项目标准上, CSS会独立定级,以后应该不会有CSS4这个东西,所以大家也不用担心在H5以后又冒出来了C4 (不过真是想用C4炸死那些每天把H5挂在嘴上的人)
6.可以填表报名,这是最基本的表单,有网页以来就有的东西。
7.可以支持分享自定义的文案和图片,这个是用到了微信的jssdk,和HTML标准半毛钱关系都没有。
8.……所以我们在谈论H5的时候,实际上是一个解决方案,一个看起来酷炫的移动端onepage网站的解决方案。而这个解决方案不仅包含了HTML5新增的audio标签, canvas, 拖拽特性,本地存储,websocket通信,同时也包括了盒模型,包括绝对定位,包括一切前端的基本知识。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值