澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

开发者需要了解的技巧和工具汇总,移动和触摸

2019-07-20 作者:澳门新萄京赌场网址   |   浏览(122)

HTML5 开发者需要了解的技巧和工具汇总

2011/10/16 · HTML5 · HTML5

注:本文转载自iteye

HTML5现在已经成为了Web开发中的热门话题,大多数现代浏览器(Safari、Chrome,Firefox,IE10和移动设备)都支持HTML5。即使HTML5的规范还没有制定完成,但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头,如Google、Facebook、Twitter和YouTube等,都建立在HTML5基础上。

HTML5中最令人兴奋的功能莫过于画布(canvas)和强大的表单功能,画布功能已经可以在大部分浏览器中完美体验(除了IE),但对于新表单元素的支持还不是太好。对Web开发者来说,是时候开始HTML5开发了。

要进行HTML5开发,本文中的一些技巧、工具可以让你缩短学习的时间,提高开发的效率。

一、HTML5支持测试列表

在开始之前,你需要了解现代的浏览器以及移动平台对于HTML5的支持情况。

  • 主流浏览器HTML5功能支持一览
  • 移动平台HTML5支持一览
  • HTML5支持测试
  • HTML5演示

二、让HTML5元素可用

老版本的IE浏览器不能识别新的HTML元素。但是,可以使用一些JavaScript或CSS解决方案来弥补这个缺陷。

  • HTML5Shiv:此脚本可以使IE浏览器识别HTML5元素。
  • HTML5 Enabler:功能与HTML5Shiv类似。
  • Modernizr:它使得开发者可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
  • HTML5 Reset:它提供了一组HTML、CSS文件,让你能够以最少的时间来启动一个新的项目。它使用modernizr来支持HTML5 和 CSS3。

三、浏览器插件

下面是一些JavaScript插件,可以弥补一些浏览器对HTML5的支持问题。

  1. VideoJS

VideoJS是一个HTML5的视频播放器,可以在所有浏览器中使用,包括IE6和移动设备。对于不支持HTML5的浏览器则自动使用Flash播放器来播放。

澳门新萄京官方网站 1

  2. AudioJS

HTML音频播放器。用来让HTML5 的 <  audio> 标签可以在各种浏览器上使用,包括移动设备。

澳门新萄京官方网站 2

  3. HTML5Widget

HTML5的表单模块,包括日历,调色板,滑动部件,客户端验证等。

澳门新萄京官方网站 3

  4. Webforms2

HTML5 表单属性的支持,例如pattern、required和autofocus。

澳门新萄京官方网站 4

  5. LimeJS

LimeJS是HTML5的游戏框架,用于为现代触摸设备和桌面浏览器创建快速、本地化的游戏。

澳门新萄京官方网站 5

  6. FlexieJS

支持CSS3弹性盒子模型(Flexible Box Model)。

澳门新萄京官方网站 6

四、在线工具

此外,还有一些在线工具,可以帮助开发者加快HTML5项目的开发。

1. HTML5 Boilerplate

HTML5Boilerplate 是一个HTML / CSS /JS模板,是实现跨浏览器正常化、性能优化、稳定的可选功能如跨域Ajax和Flash的最佳实践。开发者称之为技巧集合,目的是满足你开发一个跨浏览器,并且面向未来的网站的需求。

澳门新萄京官方网站 7

  2. Switch to HTML5

非常有用的在线工具,可以根据你的喜好生成HTML5文档结构。

澳门新萄京官方网站 8

  3. Initializr

Initializr是一个HTML5模板生成器,以帮助你开始HTML5项目的开发 。它建立在HTML5 Boilerplate之上。

澳门新萄京官方网站 9

  4. HTML5 Visual 速查表

澳门新萄京官方网站 10

  5. HTML5 Canvas 速查表

澳门新萄京官方网站 11

  6. HTML5 笔记

澳门新萄京官方网站 12

  五、其他

你可以通过下面的链接来跟踪HTML5的更新。

HTML5追踪

你可以通过下面的链接获得HTML5网站的设计灵感。这个网站库中包含了大量的使用HTML5技术的网站。

HTML5Gallery

 

赞 3 收藏 评论

澳门新萄京官方网站 13

HTML5已经在Web开发中越来越流行。并且现在大部分流行的浏览器包括Firefox 6, Google Chrome, IE9等都支持HTML5。 利用框架能够帮助Web开发人员快速进行设计和开发。一个HTML5的框架提供了许多功能,如优美的排版,视频播放器,表单验证等,使开发人员能够轻松地 开发Web应用程序。

JavaScript 移动和触摸框架

jQuery Mobile: 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。Sources.

Zepto.jsZepto.js 是支持移动WebKit浏览器的JavaScript框架,具有与jQuery兼容的语法。2-5k的库,通过不错的API处理绝大多数的基本工作。Sources.

MicroJS: Microjs网站应用列出了很多轻量的Javascript类库和框架,它们都很小,大部分小于5kb。这样你不需要因为只需要一个功能就要加载一个JS的框架。

PhoneGap:是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。Sources.

Sencha TouchSencha Touch 是一个支持多种智能手机平台(iPhone, Android, 和BlackBerry)的 HTML5 框架。Sencha Touch可以让你的Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理,全部基于最新的HTML5和CSS3的 WEB标准,全面兼容Android和Apple iOS设备。

JQtouch, 是一个jQuery 的插件,主要用于手机上的Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见UI效果的JavaScript 库。Sources.

DHTMLX Touch针对移动和触摸设备的JavaScript 框架。DHTMLX Touch基于HTML5,创建移动web应用。它不只是一组UI 小工具,而是一个完整的框架,可以针对移动和触摸设备创建跨平台的web应用。它兼容主流的web浏览器,用DHTMLX Touch创建的应用,可以在iPad、iPhone、Android智能手机等上面运行流畅。

 

jQuery 插件

Waypoints是一个jQuery 用来实现捕获各种滚动事件的插件,例如实现无翻页的内容浏览,或者固定某个元素不让滚动等等。支持主流浏览器版本。

Lazy loader插件可以实现图片的延迟加载,当网页比较长的时候,会先只加载用户视窗内的图片,视窗外的图片会等到你拖动滚动条至后面才加载,这样有效的避免了因图片过多而加载慢的弊端。

TweenJS: 一个简单和强大的 tweening / animation 的Javascript库。

Easings类Css3的jQuery 动画插件

Spritely这个插件可以创建出如flash一样的动画效果,比如:在页面上有一只飞动的小鸟,一个动态滚动的背景等。

File Upload,jQuery 文件上传插件4.4.1

Slideshow/Carousel插件.Sources.

Supersized– 全屏式的背景/幻灯片插件

Masonryi一款非常酷的自动排版插件,这款jQuery工具可以根据网格来自动排列水平和垂直元素,超越原来的css.Sources.

jQuery 简单Layout演示,管理各种边栏式,可改变大小式的布局。

Flexigrid– jQuery数据表插件

Isotope绝对是一个令人难以置信的jQuery插件,你可以用它来创建动态和智能布局。你可以隐藏和显示与过滤项目,重新排序和整理甚至更多。

Super GesturesjQuery 插件可以实现鼠标手势的功能。

MouseWheel是由Brandon Aaron开发的jQuery插件,用于添加跨浏览器的鼠标滚轮支持。

AutoSuggestjQuery 插件可以让你添加一些自动完成的功能。

qTip一个漂亮的jQuery的工具提示插件,这个插件功能相当强大。

jQueryCharts and graphic用来制作图表。

jQuery Tools– Themissing UI library

 

 

HTML5 视频播放器

Popcorn.js是一个HTML5 Video框架,它提供了易于使用的API来同步交互式内容,让操作HTML5 Video元素的属性,方法和事件变得简单易用。 (来自Mozilla)

LeanBack PlayerHTML5视频播放器,没有依赖任何JavaScript框架。支持全屏播放,音量控制,在同一个页面中播放多个视频。 (来自Google)

Vid.ly为你上传的视频提供转换功能,并且为转换后的视频创建一个短网址。通过Vid.ly,让你的视频可以在14种不同的浏览器和设备上播放,不需要再去考虑将要浏览视频的人使用什么设备了,以避免各各软件巨头之间的利益之争带来了不兼容,给用户带来了巨大的困扰,短网址让你可以通过Twitter、Facebook等方式方便分享视频。Vid.ly还可以通过html代码嵌入到其他网页中。Vid.ly免费帐户空间为1GB,免费帐户也没有播放或浏览限制。

 

JavaScript 音频处理与可视化效果

使用HTML5 和 Flash,SoundManager V2只用单一API的提供了可靠,简单和强大的跨平台的音频处理。

DSP, JavaScript的声音Digital Signal Processing

The RadiolabHyper Audio Playerv1, 带给你 WNYC Radiolab, SoundCloud 和 Mozilla Drumbeat

jPlayer, 一个 jQuery HTML5 音频/ 视频库,功能齐全的API

 

JavaScript 图形 和 3D

Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下, 可以实现程序图像、动画和互动的应用。其使用Web标准,无需任何插件。

Javascript 3D 引擎:ThreeJS由 Mr Doob 开发,一个轻量级的 3D 引擎,不需要了解细节,傻瓜都能使用。这个引擎可以使用

,

和 WebGL.

Shader Toy, 一款使用WebGL的在线着色器编辑器(2D/3D). 基于在线的应用架构使您无需下载任何软件即可开始体验. Shader Toy包含大量实用着色器, 诸如光线追踪, 场景距离渲染, 球体, 隧道, 变形, 后期处理特效等.

PhiloGL, Sencha的PhiloGL是首个WebGL开发工具之一,提供了高水准的功能,来构建WebGL应用。Sencha创建了几个演示,来描述框架交互式3D虚拟化的能力,比如3D view of global temperature changes。

WebGL Inspector你就Firebug等Web调试工具一样,这个是 WebGL的调试工具。

WebGL frameworks由 Khronos Group 收集的一个WebGL框架列表。

EaselJS, 一个使用html5的canvas的 JavaScript 库.Sources.

JavaScript Game Frameworks免费的JS游戏框架列表。另,可参看JS游戏框架列表。

Rapha?l是一个小型的JavaScript 库,用来简化在页面上显示向量图的工作。你可以用它在页面上绘制各种图表、并进行图片的剪切、旋转等操作。参看Javascript向量图Lib–Rapha?l

jQuery SVG插件让你可以了 SVG canvas 进行交互。

Google chart tools– 参看本站的使用Google API做统计图

Arbor.js,是一个利用webworkers和jQuery创建的数据图形可视化JavaScript框架。它为图形组织和屏幕刷新处理提供了一个高效、力导向布局算法。

 

JavaScript 浏览器接口 (HTML5)

Modernizr– 是一个专为HTML5 和CSS3 开发的功能检测类库,可以根据浏览器对HTML5 和CSS3 的支持程度提供更加便捷的前端优化方案.Sources. 一个有用的列表cross-browser Polyfills

HTML5Shiv: 该项目的目的是为了让IE 能识别HTML5 的元素。

Polyfills: 这个项目收集了一些代码片段其用Javascript支持不同的浏览器的特别功能,有些代码需要Flash。

YepNopeJS: 一个异步的条件式的加载器。Sources.

jQueryCSS3 Finalise: 是否厌倦了为每一个浏览器的CSS3属性加前缀?

Amplify.js:一套用于web应用数据管理和应用程序通讯的jQuery 组件库。提供简单易用的API接口。Amplify的目标是通过为各种数据源提供一个统一的程序接口简化各种格式数据的数据处理。Amplify的存储组件使用localStorage 和 sessionStorage标准处理客户端的存储信息,对一些老的浏览器支持可能有问题。Amplify’为jQuery的ajax方法request增加了一些额外的特性。Sources.

History.js优美地支持了HTML5 History/State APIs

Socket.IOWeb的socket编程。

 

JavaScript 工具

{{mustaches}} 小型的 JavaScript 模板引擎。

json:select(), CSS式的JSON选择器

HeadJS, 异步JavaScript装载。其最大特点就是不仅可以按顺序执行还可以并发装载载js。

JsDoc Toolkit是一款辅助工具,你只需要根据约定在JavaScript 代码中添加相应的注释,它就可以根据这些注释来自动生成API文档。Responsive image, 一个试验性的项目,用来处理responsive layouts式的图片。

UglifyJS是基于NodeJS的Javascript语法解析/压缩/格式化工具,它支持任何CommonJS模块系统的Javascript平台。

Dhteumeuleu, 交互式的 DOM 脚本和DHTML 的开源演示。

Backbone是一个前端 JS 代码 MVC 框架,被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery,不可取代现有的Template 库。而是和这些结合起来构建复杂的 web 前端交互应用。如果项目涉及大量的 javascript 代码,实现很多复杂的前端交互功能,首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。

 

客户端和模拟器

BrowserShot, 检查浏览器的兼容性,跨浏览器平器的测试

Test everything… 输入一个你想要测试的URL……

Android browser模拟器

iPhone browser模拟器

Opera browser模拟器

Firebug与Firefox集成,可以查看和调试你的Web页面。

 

CSS3 和 字库

CSS3 MakerCCS3的生成器容易地创建

CSS3 animations。Sencha Animator 是一个桌面应用可以为WebKit浏览器和触摸式移动设备创建 CSS3 animations 。

CSSwarp– CSS 文本扭曲生成器

Gradient Editor, 一个强大的Photoshop式的CSS 渐变编译器。来自 ColorZilla

Google Web Fonts通过Google Web Fonts API 可以浏览所有的字体@font-face Kit Generator, 为Web转换字体

Typetester, 比较字体。

Media Queries. 一组 responsive web 设计。

Pattern TAP, UI组件。

 

Website (FULL) 模板

HTML5 Boilerplate是一个HTML5/ CSS / js模板,是实现跨浏览器正常化、性能优化,稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合,目的是满足您开发一个跨浏览器,并且面向未来的网站的需求。Sources.

HTML5 starter pack是一个干净的和有组织的目录结构,其可适合很多项目,还有一些很常用的文件,以及简单的Photoshop设计模板。

Initializr是一个HTML5 模板生成器,其可以帮你在15秒内创建一个HTML5的项目。

Animated Portfolio Gallery(教程)Slick MobileApp Website如果通过 jQuery 和 CSS 制作一个手机应用的网站。

RSS Reader如果通过 jQuery Mobile 创建一个RSS Reader

Single Page Applications使用jQuery的朋友们 (Backbone, Underscore, …)创建单一页面。

移动和触摸框架 jQuery Mobile: 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布...

HTML5将彻底改变我们建设网站和Web应用程序的方式。这里有10个伟大的工具,用于简化和提高HTML5的编码。

HTML5现在已经成为了Web开发中的热门话题,大多数现代浏览器(Safari、Chrome,Firefox,IE10和移动设备)都支持 HTML5。即使HTML5的规范还没有制定完成,但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头,如Google、 Facebook、Twitter和YouTube等,都建立在HTML5基础上。

1. 52 Framework : HTML5-CSS3 Framework

澳门新萄京官方网站 14
该框架支持HTML5和CSS3,支持目前所有的浏览器。该框架充分利用了HTML5所有的优势。在网页设计师的世界中,CSS3是非常酷的东西,使用CSS3可以节省网页设计和布局的时间。在开发中可以使用CSS3所有的特性,如文本/框阴影、圆角和动画等。
Website

澳门新萄京官方网站 15

HTML5中最令人兴奋的功能莫过于画布(canvas)和强大的表单功能,画布功能已经可以在大部分浏览器中完美体验(除了IE),但对于新表单元素的支持还不是太好。对Web开发者来说,是时候开始HTML5开发了。

2. Gridless : HTML5-CSS3 Framework For Crossbrowser Websites

澳门新萄京官方网站 16
Gridless is an optionated HTML5 CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. It works on DBY (don’t bore yourself) approach and allows developers to use CSS normalization, beautiful typography, a well organized folder structure, IE bug fixes and other nice tricks for their websites.
The most exceptional feature of Gridelss is that it uses mobile first responsive web design, which means that it adapts itself to the device’s width which turns it into work anywhere with any old feature phone, newer Smartphone, tablets, notebooks and bigger desktops. It supports all modern browsers like Firefox, opera, chrome, Safari and IE 6 .
Website

假如你才刚开始利用HTML5来创建网站,可访问Initializr来入门。这个网站将帮您根据样板来创建一个简洁,可定制的网站模板。它包含了初学者,所需要的一切。

要进行HTML5开发,本文中的一些技巧、工具可以让你缩短学习的时间,提高开发的效率。

3. Perkins : HTML5-CSS3 Framework

澳门新萄京官方网站 17

Perkins 是一个 HTML5/CSS3 框架,主要为简化开发者和设计师的工具。使用一个基础的 HTML5 模板,包含多数所支持的标签以及一些 CSS 样式,便于创建诸如导航、圆角、渐进等效果。
Website

HTML5demos

一、HTML5支持测试列表

4. Less Framework 4

澳门新萄京官方网站 18
Less Framework is a CSS grid system for designing adaptive multicolumn websites layouts. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Less Framework can easily built sites compatible with mobiles and smart phones and it works fine with all modern browsers such as Firefox, Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, Android Webkit, and Mobile Safari etc.
Website

澳门新萄京官方网站 19

在开始之前,你需要了解现代的浏览器以及移动平台对于HTML5的支持情况。

5. Gravity : SASS Based Front End HTML5-CSS3 Framework

澳门新萄京官方网站 20
Gravity is SASS based framework for making powerful, easily maintainable HTML5 websites. Gravity holds every type of feature for developing beautiful websites such as readymade typography presets, media queries, button styles, from styling, column sizing based on variables and much more. Users need to install SASS to run the framework. It includes numbers of killer features such as it is SASS based, CSS3 Mixins, Rapid Prototyping, Grid builder, CoffeeScript, Core JS imports and many more.
Website

HTML5demos这个网站提示一些示例来帮助你检测HTML5的一些特性,在不同浏览器下的支持情况。比如可以测试HTML5 canvas在Firefox上是否支持或Safari是否可以运行HTML5简单的聊天客户端等。

  • 主流浏览器HTML5功能支持一览
  • 移动平台HTML5支持一览
  • HTML5支持测试
  • HTML5演示

6. HTML5 BoilerPlate

澳门新萄京官方网站 21

HTML5 Boilerplate 是一个HTML / CSS / js模板,是实现跨浏览器正常化、性能优化,稳定的可选功能如跨域Ajax和Flash的最佳实践。 项目的开发商称之为技巧集合,目的是满足您开发一个跨浏览器,并且面向未来的网站的需求。

HTML 5样板的一些特性如下:

支持HTML 5

跨浏览器兼容,包括对IE6的支持

高速缓存和压缩规则,最佳实践配置

移动浏览器优化

单元测试套件Javascript分析

移动与特定CSS规则的IOS和Android的浏览器支持

Website

HTML5 Tracker

二、让HTML5元素可用

7. G5 Framework : HTML5-CSS3 Front End Framework

澳门新萄京官方网站 22

G5 Framework 是一个 (X)HTML5, CSS3, PHP & jQuery 前端框架。该框架旨在提升开发效率、减少代码。

关键特性:

  • HTML5 baseline
  • 开发者需要了解的技巧和工具汇总,移动和触摸框架。Base CSS
  • PHP Active Class
  • Smooth Scroll to Top
  • HTML5 Placeholder Fallback
  • Base SEO
  • Based on a F Layout
  • Sticky Footer
  • Clean Organization

Website

澳门新萄京官方网站 23
HTML5 Tracker能够用于跟踪HTML5相关的最新修订信息。

老版本的IE浏览器不能识别新的HTML元素。但是,可以使用一些JavaScript或CSS解决方案来弥补这个缺陷。

8. Baseline : HTML5-CSS Framework

澳门新萄京官方网站 24
Baseline is HTML5 frame works which assists users to easily create and develop websites and web applications. Baseline comes standard typography, includes style for HTML form and new HTML 5 tags. Baseline supports all modern browsers such as Safar 3 , Google Chrome, Firefox 3 , Opera 9 , and IE 8.
Website

HTML5 visual cheat sheet

  • HTML5Shiv:此脚本可以使IE浏览器识别HTML5元素。
  • HTML5 Enabler:功能与HTML5Shiv类似。
  • Modernizr:它使得开发者可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。
  • HTML5 Reset:它提供了一组HTML、CSS文件,让你能够以最少的时间来启动一个新的项目。它使用modernizr来支持HTML5和CSS3。

9. Sprout Care : Open Source HTML5 Framework

澳门新萄京官方网站 25
Sprout care is an open source HTML5 Framework used to rapidly build up innovative web applications. With sprout care developers can build rich, interactive applications with less code. Sproutcore includes many features like Clean MVC Architecture – which keeps users codes sensible and organized for easy maintenance, Incredible Speed—client-side logic means no more waiting for severs, Sproutcore apps give you a native experience, built in tools that will make your application beautiful and many more.
Website

澳门新萄京官方网站 26

三、浏览器插件

10. LimeJS : HTML5 Game Framework

澳门新萄京官方网站 27
LimeJS是一个HTML5游戏框架,能够帮助开发人员为流行的触摸设备和桌面浏览器快速开发出用户友好,拥有原生体验的游戏。
Website

 这一个HTML5标签速查表,能够帮助您快速,简便地查找标签或属性。各种速查表对所有Web开发的人员来说非常好用。

下面是一些JavaScript插件,可以弥补一些浏览器对HTML5的支持问题。

11. Cartagen : HTML5 Framework For Dynamic Mapping

澳门新萄京官方网站 28
Cartagen lets you make beautiful, customized maps with a simple stylesheet. Maps are styled with Geographic Style Sheets (GSS), GSS is a scripting language as well making Cartagen an idea framework for loan modification mapping dynamic data. Cartagen is vector mapping, client side HTML 5 framework for rendering maps in native HTML5 applications. It is written in JavaScript, it uses the new Canvas element to load mapping date from various sources including OpenStreetMap.
Website

Switch To HTML5

1. VideoJS

12. inuitCSS : HTML5-CSS Framework

澳门新萄京官方网站 29
Inuitcss是一个漂亮和实用的框架。能够帮助我们开发出漂亮的网站。它支持新的HTML5标签,支持平板电脑和智能手机。Developers can build their own fluid grid systems and it provides nice typography for development along with all type of modern browsers supports even IE6.
Website

澳门新萄京官方网站 30

VideoJS是一个HTML5的视频播放器,可以在所有浏览器中使用,包括IE6和移动设备。对于不支持HTML5的浏览器则自动使用Flash播放器来播放。

这是一个非常简单,基本,但高效的模板生成器。如果你想要开始开发一个基于HTML5的网站,可以访问这个网站来获得一个免费的HTML5网站模板!

2. AudioJS

Cross browser HTML5 forms

HTML音频播放器。用来让HTML5 的 <audio> 标签可以在各种浏览器上使用,包括移动设备。

澳门新萄京官方网站 31
表单是一个网站非常重要的一部分。 HTML5的特性日历,色彩板,滑动部件,客户端验证等这些都是非常强大的工具,但现实的情况就是,大多数的浏览器不支持所有的功能。这是一个很大的问题,刚好Cross browser HTML5能够帮您如何轻松创建一个跨浏览器的表单。

3. HTML5Widget

HTML5 Test

HTML5的表单模块,包括日历,调色板,滑动部件,客户端验证等。

澳门新萄京官方网站 32
你现在使用的浏览器是否支持HTML5?你可以利用HTML5 Test这个工具来检测你的浏览器对HTML5新增的Video, audio, canvas等特性的兼容情况。

4. Webforms2

HTML5 Canvas cheat sheet

HTML5 表单属性的支持,例如pattern、required和autofocus。

澳门新萄京官方网站 33
画布canvas是一个HTML5的重要组成部分,因为它可以让你在屏幕上绘制图形。在很多情况下,你都有可能用到它。这个速查表将对您非常有帮助。

5. LimeJS

Lime JS

LimeJS是HTML5的游戏框架,用于为现代触摸设备和桌面浏览器创建快速、本地化的游戏。

澳门新萄京官方网站 34
这是一个HTML5游戏框架,让您能够快速创建,对所有的触摸屏和桌面浏览器的都具有本地体验的游戏。它非常令人吃惊,你必须尝试一下。

6. FlexieJS

HTML5 Reset

支持CSS3弹性盒子模型(Flexible Box Model)。

澳门新萄京官方网站 35
HTML5 Reset提供一组HTML, CSS等文件,让你能够以最少的时间来启动一个新的项目。

四、在线工具

 

此外,还有一些在线工具,可以帮助开发者加快HTML5项目的开发。

1. HTML5 Boilerplate

HTML5Boilerplate是一个HTML / CSS /JS模板,是实现跨浏览器正常化、性能优化、稳定的可选功能如跨域Ajax和Flash的最佳实践。开发者称之为技巧集合,目的是满足你开发一个跨浏览器,并且面向未来的网站的需求。

2. Switch to HTML5

非常有用的在线工具,可以根据你的喜好生成HTML5文档结构。

3. Initializr

Initializr是一个HTML5模板生成器,以帮助你开始HTML5项目的开发 。它建立在HTML5 Boilerplate之上

4. HTML5 Visual 速查表

5. HTML5 Canvas 速查表

6. HTML5 笔记

五、其他

你可以通过下面的链接来跟踪HTML5的更新。

开发者需要了解的技巧和工具汇总,移动和触摸框架。HTML5追踪

你可以通过下面的链接获得HTML5网站的设计灵感。这个网站库中包含了大量的使用HTML5技术的网站。

HTML5Gallery

澳门新萄京官方网站,文章出自:queness.com

译文出自:ITeye

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:开发者需要了解的技巧和工具汇总,移动和触摸

关键词: