Some new features of HTML5

HTML is now not a subset of SGML, mainly about image, location, storage, multi-tasking and other functions.

. painting canvas;

. Video for media playback:

Ogg is a file with Theora video encoding and Vorbis audio encoding;

The MPEG4 is a MPEG4 file with a video encoding of H + + and AAC audio encoding;

WEBM is a VP8 video encoding and Vorbis audio encoded file;

The HTML5 specification does not specify a specific video codec, which is left to the browser to decide.

Safari and IE9 are expected to support the video in H. Two format, and Firefox and Opera adhere to the open source Theora and Vorbis formats, so they need to be available in up to four formats.

Video supports three different formats: OGG,MPEG4,WEBM.

. Audio:

No more reliance on third-party production areas to render audio, because HTML5 provides <audio> elements.

The Moozilla core Firefox browser supports only. ogg files, WebKit core browser support. mp3 extension, Safari does not recognize. ogg, it skips and moves to the MP3 version. So you need to create two versions of audio.

Audio supports three different formats: Ogg vorbis,mp3,wav.

Local offline storage Localstorage long-term storage data, the browser is closed after the data is not lost;

. sessionstorage data is automatically deleted after the browser is closed;

. HTML5 's local storage can store up to 5M of data, even more. It mainly has four kinds: localstorage,sessionstorage,websql,indexdb;

. Semantically better content elements, such as article, footer, header, nav, section;

. form controls, calendar, date, time, email, url, search;

. New technical Webworker, WebSocket, geolocation;

Elements to remove:

Elements of pure expression: basefont,big,center,font,s,strike,tt,u;

Elements that have a negative impact on usability: frame,frameset,noframes;

Support for HTML5 new tags:

. IE8/IE7/IE6 supports labels generated by the Document.createelement method,

You can use this feature to enable these browsers to support HTML5 new tags.

After the browser supports the new tab, you also need to add a default style for the label.

　　

It is also possible to use mature frameworks directly, such as Html5shim;

<!--[If Lt IE 9]>

<script>

Src= "Http://html5shim.googlecode.com/svn/trunk/html5.js"

</script>

<! [endif]-->

How to differentiate HTML5:

. DOCTYPE declaration \ New structure element, functional element

.<mark> element as highlight. The string that this label wraps should be associated with the user's current action.

. Color gradient:

In addition to the CSS colors, the FillStyle and Strokestyle properties can be set to Canvasgradient objects. --with Canvasgradient you can use color gradients for lines and fills. To create a Canvasgradient object, you can use two methods: Createlineargradient and Createradialgradient. The former creates a linear color gradient, which creates a circular color gradient. After you create a color gradient object, you can use the Addcolorstop method of the object to add a color intermediate value.

The. Type=number HTML form element is a key that can be used to change the value in a text box.

. Type=range is an area range that can select a value.

The. Type=data means a time picker control.

The. Type=color means a color picker control.

The. DataList is a pull-down effect that implements the data list.

The .<small> element is no longer used to create a related subtitle near the logo. ,<small> is redefined in HTML5, which refers to the small print.

In the form input box, the type attribute named "email" can be used to command the browser to allow only strings that conform to a valid e-mail address structure. Older browsers, however, do not recognize them, and they are simply returned to the normal text box.

. Placeholder:

Placeholders the text box/text field space by default there will be a text hint, the text will disappear when the focus is obtained, and if the content is empty when the focus is lost, the prompt text appears again. The prompt text that appears inside the form control is a placeholder.

If you previously needed some JavaScript code to implement placeholders, HTML5 made it very easy

.<mark> element as highlight. The string that this label wraps should be associated with the user's current action.

Some new features of HTML5