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应用程序。

1. 52 Framework : HTML5-CSS3 Framework

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

2. Gridless : HTML5-CSS3 Framework For Crossbrowser Websites

图片 15
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

3. Perkins : HTML5-CSS3 Framework

图片 16

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

4. Less Framework 4

图片 17
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

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

图片 18
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

6. HTML5 BoilerPlate

图片 19

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

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

支持HTML 5

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

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

移动浏览器优化

单元测试套件Javascript分析

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

Website

发表评论

电子邮件地址不会被公开。 必填项已用*标注