HTML development 5 more and more towards maturity, many applications have gradually appeared in the daily life you and I, not only to make the traditional interactive Flash website is gradually HTML technology to replace 5, more importantly, through HTML5 technologies to develop cross-platform mobile software, so many developers are very excited!
When you start to want to learn, I want to try to put related development, due to the HTML5 technology continues to develop, evolve them, learning resources are more scattered, difficult to have an overall direction. In this article, I will introduce the main component HTML5 technology, and provide learning resources for your reference.
HTML5 in the end is what?
HTML5 is generally broad sense includes HTML, CSS three parts and JavaScript, HTML is not just part of it, CSS 3, and JavaScript, there are many innovations, so that the entire page program features more colorful.
Technical components of HTML5
Offline features
JavaScript HTML5 delivered through a number of different offline storage capabilities, as opposed to the traditional Cookie better in terms of flexibility and architecture, and can store more content.
- WebStorage: Cookies greater than, more flexible storage
- Web SQL Database: local end SQL database
- Indexed DB: Key-value local database
- Application Cache: The part of the popular web content cache up
Real-time communication
Since the previous site and the browser's HTTP protocol design, real-time interactive fairly limited, can only use some techniques to real-time communication results "simulation", but HTML5 provides comprehensive real-time communication support.
- WebSocket: real-time socket connection
- Web Workers: the past, JavaScript is single thread, through the Worker can have multiple operations
- Notifications: native prompt message, similar like OS X's Growl tips
Files and hardware support
I do not know if you have not found in Gmail and other new web applications which can already be dragged through the way the file as an email attachment? This is Dragn Drop this part of the HTML5 file functions and the File API.
- Dragn Drop: drag an HTML element
- File API: reading the contents of the user's local computer
- Geolocation: geographic positioning
- Device orientation: the direction of the handheld device
- Speech input: Voice Input
Semantic
Semantic web is to let computers to better understand the content of the page, such as for search engine optimization (SEO) or a recommendation system can be of great help.
- New tags: a new label, such as header, section, etc.
- Application tags: is the new label, like a meter, progress
- Wait
- Microdata: data into semantic search engines and other sites can be displayed correctly
- Form type: form can be added to the type will be more than, tel contains attributes such as email and the browser will help validate data format
multimedia
Audio, Video of the Canvas tag support and functionality should be familiar to everyone for the most part of the HTML5, Flash is why many people believe that the main reason will be replaced.
- Native support for playback of movies and music: Audio video
- Canvas: 2D drawing functions support
- Canvas 3D: 3D-graphics
- SVG : Vector map support
CSS 3
CSS3 support embedded fonts, layout of typography, as well as the most impressive animated feature.
- Selector: more flexible selector
- Webfonts: embedded fonts
- Layout: diversification typographic options
- Stlying radius gradient shadow: rounded, gradient, shadow
- Border background: background border support
- Transition: Effect moving assembly
- Transform: deformation effect assembly
- Animation: join the movement and deformation animation support
- Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
JavaScript
In comparison JavaScript fundamentals also added the DOM API, and records up and down the browser page changes.
- DOM API: more convenient query DOM components
- History API: up and down the browser page content changes, easy AJAX can keep browsing history
Start now with HTML5
Up to now, the popular web browser Firefox 5, Chrome 12 and Safari 5 have supported many of the HTML5 standard, and the latest version of IE 9 also supports a number of HTML5 standard, as the user gradually upgrade to the new version of browser, developers should now start developing!
For compatibility with older browsers, the author previously introduced in CSS3 Pie is to make a legacy browser can support CSS 3 features of JavaScript libraries.
And Modernizer is also a very important function JavaScript library that provides developers a way to easily determine whether the current user's browser that supports HTML5-specific functions.
learning direction
After reading this article, you may be able to interested parties for their own search to find relevant learning resources and content via keywords.
