Unless you are isolated, you must have heard all kinds of sounds about HTML5, HTML5 on the surface is used to replace Flash Web video, however, its mission is much more than that. HTML5 is the next-generation Web language, not just a markup language, but a new generation of web features that will lead the next-generation Web to a desktop-like application experience.
HTML5 Main new features
- Local Audio Video playback
- Animation
- Geographic information
- Hardware acceleration
- Run locally (even after an Internet connection is interrupted)
- Local storage
- Drag and drop files from desktop to browser upload
- Semantic markup
Application Status of HTML5
Today
The big browsers have different support for HTML5.
, we look forward to their convergence in a year or two, and you might think that, in that case, few people are using this future standard, and that's not the case, HTML5 is now widely used, as
William Gibson
Said, the future of the WEB has come, but has not been widely adopted.
You may not know,
Google's Home page
Also use HTML5, but, at present, they have only used the
HTML5 's DOCTYPE
, other parts of the page are still
Old Code
, but Google has widely adopted HTML5 in their various applications. The most typical example is GMAIL,HTML5 offline storage that allows users to use Gmail even offline, and Google Docs uses offline storage, as do similar applications from other vendors using offline storage, including Zoho office suites and Wordpress Blog platform. If you're interested in HTML5 's offline storage capabilities, you can look at Mark Pilgrim's
How to add offline support to your apps
A article.
SCRIBD HTML5-based document reader
The image above is a new document reader for SCRIBD, all based on WEB standards, without Flash.
In addition to video, HTML5 can also replace Flash in multiple ways, document sharing site
Scribd
Recent
Announced
, they will
Using HTML5 instead of Flash to implement a document reader
, SCRIBD is the best example of the amazing functionality that HTML5 can achieve with CSS, and they also use @font-face to personalize fonts, and the rollover effect is entirely based on CSS3. The combination of these WEB standard tools enables SCRIBD to achieve a transition from Flash to pure HTML without sacrificing the functionality of the document in terms of structure, fonts, inline images, layers, and so on. SCRIBD's newest document reader even supports IE6, and here's an example
Use pure HTML to output complex formulas
。
Unfortunately, the wall-translator
HTML5 Canvas and HTML5 video
Invaders Classic game based on HTML5 Canvas object
Although the application of SCRIBD to Canvas has been superb, we can find more such sites.
Canvas Demos
There are a series of applications on Canvas, from
All kinds of online games
To
Extract colors from a Web page
Of
Rainbow
Application.
The most typical example of a video is
Youtube
And
Vimeo
, they all provide a HTML5 version.
HTML5 Geographic Information location
Click on the map, the yellow villain above the circle, you can tell Google map your location
Another feature of HTML5 is the geo-information positioning feature, which some browsers provide
Geolocation API
, this API is also managed by the HTML5 to achieve your current location.
Google Maps
In the use of this feature, on Google Maps, there is a small circle, click, you can tell Google Map of your current location. Currently, the geolocation API is not widely used by many desktop browsers (only Chrome and Firefox 3.6+), but Google Gears Plug-ins can help those old browsers implement this feature.
Twitter
To realize the geo-information-aware tweets message, when the browser supports the Geolocation API, it will automatically use the API, otherwise, the use of Google Gears.
More Meaning of HTML5
HTML5 's meaning is much more than these, its biggest significance is to change the structure of Web documents, with header, footer, section, article these tags, we can achieve more structured, semantic Web documents. In this way, search engines can easily index WEB sites, and we can also search for faster, more accurate information.
There are countless sites in the use of HTML5 new tags, you can
Html5gallery
Find a large number of such sites. To use the new structure of HTML5 now, take a look at this article
HTML5 Tutorial
。
In addition, with the help of
Microdata
, HTML5 can also implement a more powerful semantic structure, a standardized data format similar
Microformats
Allows your site not only to provide data, but also to provide data definitions. Microdata for browsers and search engines are far-reaching, search engines can use microdata to find your friends in the network, and the browser can be connected to your social network friend site, you can in Google's
Rich Snippets Testing Tool
Experience this.