HTML5 Beginners Introduction

HTML5 the development of more and more mature, a lot of applications have gradually appeared in your daily life, not only let the traditional Web site interactive flash gradually replaced by HTML5 technology, more importantly, through the HTML5 technology to develop cross-platform mobile phone software, so many developers feel very excited!

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

　　What the hell is HTML5?

Generally speaking, the HTML5 contains three parts of HTML, CSS and JavaScript, not just the HTML part, CSS 3 and JavaScript also have a lot of innovation, so that the entire Web program function more colorful.

　　HTML5 's technical composition

　　Offline features

HTML5 provides several different offline storage capabilities through JavaScript, with better resiliency and architecture than traditional cookies, and the ability to store more content.

• WebStorage: Larger and more resilient storage than Cookies
• Web SQL database: local-side SQL databases
• Indexed Db:key-value's Local database
• Application cache: Caches some of the most commonly used Web content.

　　Real-time communication

In the past, due to the HTTP protocol and the browser design, real-time interactivity is quite limited, only some techniques can be used to "simulate" real-time communication effects, but HTML5 provides perfect real-time communication support.

• WebSocket: Real-time Socket online
• Web Workers: Once JavaScript is a single thread, you can have multiple operations through a Worker
• Notifications: Native cue message similar to growl hint like OS X

　　File and hardware support

I do not know if you have found that in Gmail and other new Web applications, can be dragged through the way the file as an email attachment? This is the Dragn drop and file API in the function of this part of the HTML5 file.

• Dragn drop:html Elements of the drag
• File API: Read the contents of a user's native computer
• Geolocation: geo-positioning
• Device Orientation: The direction of the handheld device
• Speech Input: Voice input

　　The semantics of

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

• New Tags: tags like headers, sections, etc.
• Application Tags: is also a new label, such as meter, progress
• such as
• Microdata: Add semantic data so that websites like search engines can display correctly
• Form type:form can add more type, including email and Tel properties, the browser will assist in data format validation

　　Multimedia

Audio, video's label support, and canvas's functionality should be the most familiar part of HTML5, and the main reason many people think Flash will be replaced.

• Audio Video: Native playback support for movies and music
• CANVAS:2D support for drawing functions
• Canvas 3d:3d support for drawing features
• SVG: Vector diagram support

　　CSS 3

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

• Selector: More Resilient Selector
• Webfonts: Embedded Fonts
• Layout: A variety of typesetting options
• Stlying radius gradient Shadow: fillet, Gradient, shadow
• Border background: Background support for borders
• Transition: Moving Effects of components
• Transform: Deformation effect of the component
• Animation: Adding motion and morphing to animation support

　　Javascript

The fundamentals of comparing JavaScript have also added Dom's API, and browser-to-page record changes.

• Dom API: More convenient query DOM component
• History API: Browser page content modification, convenient Ajax can keep browsing records

　　Start using HTML5 now.

So far, the mainstream web browser Firefox 5, Chrome 12 and Safari 5 have supported many of the HTML5 standards, and the latest version of IE 9 also supports many HTML5 standards, as users continue to upgrade to the new version of the browser, Developers should be able to start development now!

For older browser compatibility, CSS3 pie, previously written, is a library of JavaScript libraries that allow legacy browsers to support CSS 3 functionality.

Modernizer is also a very important JavaScript library that provides developers with an easy way to determine whether the current user's browser has support for specific HTML5 functions.

　　Learning Direction

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 HTML5 rocks site is also very recommended by me, among them, through the HTML5 development of HTML5 Introduction film is worth a look, you can actually play the above content (Chrome browser is recommended for full functional effect).

Special Statement : Source: Inside Internet trend Observation

HTML5 Beginners Introduction