weixin_39665060
2020-11-23 11:16 阅读 6

有关HTML5开发的资源集合

今天在百度知道,我手贱回答了一个问题《打扰大家了我是新手,学的是html5,。各位大神谁能告诉我:用html5开发app的工具都有哪些?》,码了快2个小时的字写了个答案,最后系统告诉我违反知道回答规范,气愤之余我将这个答案完整的转到我的博客中。

html5并不是一个什么很新鲜的东东了,首先不要有概念上的误区,我想题主说的html5是指一个泛概念,html5是由下面几个技术组成的一个整体:

HTML5 ~= HTML + CSS + JS

推荐一个PPT可以让你全面了解HTML5:http://slides.html5rocks.com/

HTML部分包括大家已经熟知的HTML4.01 Standard http://www.w3.org/TR/html401/ 还有就是即将成为Standard的 HTML 5 Candidate Recommendation http://www.w3.org/TR/html5/

HTML5 是在 HTML4的基础上增加了更多的语义化标签,比如:


<header>
<nav>
<section>
// 这有太多了,就不一一细说
</section></nav></header>

并且在原有Tag上,扩展了更多的标记属性,比如:


<input type="text" required>
<input type="email" value="some.com">

HTML5除此之外,还引入了很多新的标签和属性,比如:WebApp开发方向的progress、无障碍浏览ARIA 、做SEO优化Microdata等等。 - W3C HTML标准列表:http://www.w3.org/standards/techs/html#w3c_all

CSS部分也是同样的,大家已经熟知的CSS2 Standard http://www.w3.org/TR/CSS2/ W3C最新的是CSS Level3 标准,由于CSS3包含的内容非常多,文档都是分开的,暂时没办法给出所有的标准地址,先贴一部分常用的标准吧: - W3C CSS标准列表:http://www.w3.org/standards/techs/css#w3c_all - CSS Selector CSS选取器 http://www.w3.org/TR/2013/WD-selectors4-20130502/ - Transition 动画过渡效果 http://www.w3.org/TR/2013/WD-css3-transitions-20131119/ - Animation 页面动画 http://www.w3.org/TR/2013/WD-css3-animations-20130219/

JS部分对于HTML5来说主要体现在 Web API 方面,所有 API 都是 BOM对象,下面我也列出一些常见的标准地址:

W3C JavaScript API标准列表:http://www.w3.org/standards/techs/js#w3c_all Touch Events 触摸手势事件:http://www.w3.org/TR/touch-events/ Geolocation 地理位置:http://www.w3.org/TR/geolocation-API/ Web Storage Web存储:http://www.w3.org/TR/webstorage/

通过上面的内容,大概已经了解HTML5是个什么东西了,下面就来说说HTML5开发APP可以使用的一些资源。其实HTML5开发与以往的Web并没有本质的区别,主要差别体现在HTML5的一些新特性并没有被老旧类库很好的支持,这样就需要一些更现代的类库来使用HTML5做开发。

首先是 JS库/框架,

轻量级库包括 - Zepto.js http://zeptojs.com/ 这个一个在移动端很好用的轻量级库,非常小巧,但是功能也很简单; - jQuery 2.0 http://jquery.com/ 这里说的是2.0以后的版本,仅支持一些高级浏览器,使用很多HTML5的特性,虽然在移动端开发体积相对zepto较大了些,但是作为一个基础库来说确实令人爱不释手;

App框架(下面的框架不仅仅只能用来移动端开发) - jQuery Mobile http://jquerymobile.com/ 和jQuery是一样的编程思想,使用起来非常方便,包含浏览历史管理、视图导航渲染、UI组件等功能; - App Framework https://github.com/01org/appframework/ 与jQuery Mobile非常相似的一个框架,实际我也没有使用过,看过了API,基本与jQuery Mobile类似; - Sencha Touch http://www.sencha.com/products/touch/ Sencha的产品,在我使用Ext的时候就已经非常喜欢,是完全web组件化的思路,用来做企业应用开发非常的棒,但是,也有很多缺点,比如体积、复杂、性能等等;

MVC框架 - Backbone http://backbonejs.org/ MVC框架我只推荐Backbone,并不是因为Backbone有多好,但对于移动端开发来说,Backbone的体积是相对小巧的,并且功能也十分简单,很容易上手,AngularJS实在是太大太复杂了;

UI框架 - Bootsrap 3 http://getbootstrap.com/ 这个不用多说了吧,用来构建HTML/CSS的; - Pure CSS http://purecss.io/ 与Bootstrap一样的东东;

工具库(说到工具,实在是太多了,我没办法一一列出来,视乎到这的时候才离题主的问题近了一些) - iScroll https://github.com/cubiq/iscroll 模拟区域滚动,在移动端开发中使用 - pointer.js https://github.com/borismus/pointer.js 触摸手势工具,用来兼容Pointer Event Model与Touch Event Model; - Deeptissue.js http://deeptissuejs.com/ 触摸手势工具,扩展各种手势事件 - QUO.js http://quojs.tapquo.com/ 同上 - hammer.js https://github.com/EightMedia/hammer.js/ 也是手势工具,但这是一个jQuery plugin; - spin.js http://fgnass.github.io/spin.js/ 加载中动画小工具 - css3patterns http://lea.verou.me/css3patterns/ 使用css3绘制背景 - svgpatterns http://philbit.com/svgpatterns/ 使用svg绘制背景 - textillate.js http://jschr.github.io/textillate/ 各种文字动画效果 - Effeckt.css http://h5bp.github.io/Effeckt.css/dist/ 各种CSS3的动画效果 - JPlayer http://www.jplayer.org/ 音视频播放工具

CSS3代码生成工具 - http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/see-also.htm IE官方提供的一个工具,非常好用,功能很多; - http://cubic-bezier.com 贝塞尔曲线 - http://the-echoplex.net/flexyboxes/ flexbox布局 - http://cssarrowplease.com/ css3箭头 - http://heartcode.robertpataki.com/canvasloader/ canvas loading - http://www.css88.com/tool/css3Preview/Transform.html transform变形 - http://www.responsivewebcss.com/ 响应式布局 - http://nmsdvid.com/snippets/ - http://css3ps.com/ PhotoShop CSS3 plugin

最后分享几个我收集的移动端开发资源,虽然是移动端开发,但是移动端开发目前是最贴近HTML5技术的方向 - https://github.com/exfork/mobileTech - https://github.com/exfork/Mars

该提问来源于开源项目:maxzhang/maxzhang.github.com

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

7条回答 默认 最新

  • weixin_39989941 weixin_39989941 2020-11-23 11:16

    支持!

    点赞 评论 复制链接分享
  • weixin_39519554 weixin_39519554 2020-11-23 11:16

    很棒

    点赞 评论 复制链接分享
  • weixin_39610964 weixin_39610964 2020-11-23 11:16

    所以不要再在百度知道回答问题了,那种平台衰落是早晚的事情,即便是好爹撑着,内容质量也不高。

    我也体会过编辑半天,然后给你违反规范的感觉。

    点赞 评论 复制链接分享
  • weixin_39624705 weixin_39624705 2020-11-23 11:16

    点赞 评论 复制链接分享
  • weixin_39521009 weixin_39521009 2020-11-23 11:16

    丰富的资源,赞。

    点赞 评论 复制链接分享
  • weixin_39931362 weixin_39931362 2020-11-23 11:16

    点赞 评论 复制链接分享
  • weixin_39952800 weixin_39952800 2020-11-23 11:16

    mark

    点赞 评论 复制链接分享

相关推荐