HTML5 Beginner's Guide to Beginners

The development of HTML5 is becoming more and more mature, many applications have gradually appeared in your daily life, not only to the traditional web site of interactive Flash gradually replaced by HTML5 technology, more importantly, through the HTML5 technology to develop Cross-platform mobile phone software, so that many developers are very excited !

When you start to want to learn and try to invest in related development, because HTML5 technology is still developing, evolving, learning resources are relatively fragmented, more difficult to have a holistic direction. In this article, the author will guide the main technical composition of HTML5, and provide some learning resources for everyone to refer to.

What the hell is HTML5?

Generally speaking, HTML5 contains HTML, CSS and JavaScript, not just the HTML part, CSS 3 and JavaScript have many innovations, so that the entire Web page program features more fun.

The technical composition of HTML5

Offline features

HTML5 provides several different offline storage capabilities through JavaScript, with more flexibility and architecture than traditional cookies, and can store more content.

webstorage– larger, more resilient storage than cookies

SQL database on the local side of the Web SQL database–

Local repository for Indexed Db–key-value

Application cache– to Cache some of the most commonly used Web content

Instant Messaging

Previous Web sites because of the HTTP protocol and the design of the browser, real-time interactivity is quite limited, can only use some skills to "simulate" real-time communication effect, but HTML5 provides perfect instant messaging support.

websocket– Instant Socket Connection

Web workers– used to be single thread, and there are multiple operations through the worker

notifications– Yuan's cue message, similar to OS X's growl hint

File and hardware support

Do not know if you have found that in Gmail and other new Web programs, can be dragged through the file as a mail attachment? This is the drag ' n Drop and file API for this part of the HTML5 file.

Drag of Drag ' n drop–html elements

File api– reads the contents of the user's native computer

geolocation– Geographical location

Direction of Device orientation– handheld device

Speech input– Voice Input

of semantics

A semantic web is a way to make your computer understand the content of a Web page more, and it can be a great help to search engine optimization (SEO) or referral systems.

New tags– tags, like

、 Wait

Application tags– is also a new tag, like , and so on

microdata– Add semantic information so that sites like search engines can be displayed correctly.

Form type–

You can add more type, including email and tel and other attributes, the browser will assist in data format validation

Multimedia

Audio, video label support and canvas functions should be the most familiar part of the HTML5, and many people think that flash will be replaced by the main reason.

Audio video– videos and music support for the Highland broadcast

Drawing function Support for canvas–2d

Drawing function support for Canvas 3d–3d

svg– Vector Graph Support

CSS 3

The CSS3 supports the embedding of fonts, layout, and most impressive animation features.

selector– more Flexible Selector

webfonts– Embedded Fonts

layout– variety of typesetting options

stlying radius Gradient shadow– rounded corners, gradients, shadows

Background support for Border background– border

Moving Effects of transition– components

Deformation effect of transform– element

animation– will move and transform into animated support

Javascript

The fundamentals of comparison JavaScript also add Dom's API, and browser-page record changes.

Dom api– more convenient query DOM components

History api– Browser content modification to facilitate Ajax can keep browsing records

Let's start with HTML5.

So far, the mainstream web browser Firefox 5, Chrome 12 and Safari 5 have supported a number of HTML5 standards, and currently the latest version of IE 9 also supports a number of HTML5 standards, as users are upgraded to a new version of the browser, Developers should be able to start developing now!

For old browser compatibility, CSS3 pie, previously written by Inside, is a JavaScript library that allows older browsers to support CSS 3 features.

Modernizer is also a fairly important JavaScript library that provides developers with a relaxed way to determine if the current user's browser has support for specific HTML5 features.

The direction of learning

After reading this article, you may be able to focus on their own areas of interest through keyword search to find relevant learning resources and content.

Google's Html5rocks Web site is also my recommended, which through the HTML5 developed HTML5 introduction of the film is worth a look, can be the content of the above are actually played (the recommended use of Chrome browser to achieve full functional effect).

Article Source: INSIDE