HTML5 new Features

3. Video and audio 3.1Video

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.

Cases:

<video controls= "preload" >

This property indicates that the video is loaded when the page loads and ready to play. If set to "AutoPlay", this property is ignored.

Controls to display a control such as a play button

<source src= "COHAGENPHONECALL.OGV" type= "video/ogg;codecs= ' Vorbis,theora '"/>

<source src= "Cohagenphonecall.mp4"

Type= "VIDE0/MP4; codecs= ' avc1.42e01e,mp4a.40.2 ' "/>

<p> your browser is too old. <a href= "Cohagenphonecall.mp4" > Download this video. </a></p>

</video>

Note:

· It is technically not necessary to set the type attribute, but if you do not do so, the browser will find the type itself, in order to save some bandwidth, it is best to declare.

· Not all browsers support HTML5, so under the resource element, you can provide a download link or Flash version replacement for embedded video, depending on the individual.

· If you want all browsers to support HTML5 tags, just link a js file. Write on the head or bottom of the page:
<script src= "Http://html5media.googlecode.com/svn/trunk/src/html5media.min.js" >
</script>

For the HTML section, use:

<video src= "Video.mp4" width= "height=" controls= "Autobuffer" >

</video>

3.2Audio

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.

Cases:

<audio autoplay= "AutoPlay" controls= "Controls" >

<source src= "File.ogg"/>

<source src= "File.mp3"/>

</audio>

The properties of the tag are the same as video. No height with width.

4.Web Storage4.1localStorage

Localstorage can store data for long periods without time constraints.

4.2sessionStorage

Sessionstorage cannot store data for long periods of time, and data is deleted as the browser shuts down.

Characteristics of 5.HTML5

5.1.1 The new DOCTYPE

<! DOCTYPE html>

5.1.2 Graphic Elements

<p>image of Mars</p>

Text wrapped in the P tag, with the IMG tag line, it is difficult to think that this is the title. HTML5 is corrected by using a figure element. When used in combination with figcaption, it is possible to semantically associate this with the title of the image.

<figure>

<figcaption>

<p>this is an image of somethinginteresting</p>

</figcaption>

</figure>

5.1.3<small> redefined

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

5.1.4 Scripts (scripts) and links do not require type

<link rel= "stylesheet" href= "Path/to/stylesheet.css" type= "Text/css"/>

<script type= "Text/javascript" src= "Path/to/script.js" ></script>

In the HTML5:

<link rel= "stylesheet" href= "Path/to/stylesheet.css" >

<script src= "Path/to/script.js" ></script>

5.1.5 quotation mark problem

HTML5 is not XHTML, so you don't need quotes.

<p Class= "MyClass" Id=someid>startthe reactor

But if you tend to be structured, you still need to add the quotes.

5.1.6 content can be edited

The contenteditable element, as its name implies, allows the user to edit any text contained in the element's contents.

[HTML]View PlainCopy

1. <ul contenteditable=" true ">  
2. <li>hello</ li>  
3. <li>beijing </li>  
4. <li>trs</li>  
5. </ul>&NBSP;&NBSP;

5.1.7email Inputs (input)

Apply the Type property named "Email" in the form input box 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.

[HTML]View PlainCopy

2. <form action= "" method= "get">
4. <label for= "email"> Email:</label><input id= "email"name= " Email " type=" email "/> "
6. <button type= "Submit"> OK </button>
8. </form>

5.1.8 placeholder (placeholders)

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:

<label for = "email" > Email:</label>

<input id= "Email" type= "email" placeholder= "[email protected]" size= "/>"

General WebKit core Browsers support this feature, such as Chrome, Safari.

5.1.9 Local Storage (localstorage)

Traditional HTML uses a well-known cookie, a variety of browsers are supported, directly with JS can be called, very convenient. But the traditional cookie has its own shortcomings and shortcomings. For example, the storage space is small, each site size is limited to about 4KB, and there is a time limit, and in the Request page cookie will be attached to each HTTP request header, so virtually increased traffic. The cookie in the HTTP request is passed in plaintext, so there is a security issue, a stake in SSL (secure Sockets layer, a security protocol for network communication security and data integrity). Cookies are also vulnerable to attacks that are more stable across sites. The user's cookie information can be easily obtained by adding "? Cookie=document.cookie" after a link. HTML5 Local storage may also have a cross-site scripting attack on XSS (cross site script, inter-site scripting attack). Malicious attackers insert malicious HTML code into the Web, and HTML code embedded inside the web is executed when the user browses to the page. ) problem.

HTML5 's local storage can store up to 5M of data, even more. It has four main types: Localstorage,sessionstorage,websql,indexdb

Example:

[HTML]View PlainCopy

2. <ul id="edit" contenteditable="true">
4. <li><li>
6. </ul>
8. <script language="javascript">
10. <!--
12. var edit=document.getElementById (edit);
14. edit.onblur=function () {
16. Localstorage.setitem ("Tododata", this.innerhtml);
18. };
20. if (Localstorage.getitem ("Tododata")) {
22. edit.innerhtml = Localstorage.getitem ("Tododata");
24. }
26. -->
28. </Script>

5.2.0 semantics of headers and footer

Past:

<div id= "Header" >

...

</div>

<div id= "Footer" >

...

</div>

With the HTML5, can be replaced directly;

...

<footer>

...

</footer>

5.2.1IE and HTML5

All elements have a default inline display. To ensure that all new elements are rendered correctly with block, you need to define this:

header,footer,article,section,nav,menu,hgroup{

Display:block;

}

However, because IE does not recognize certain tags, such as the header, these styles are ignored, so elements need to be created:

Document.createlement ("artical");

Document.createlement ("footer");

Document.createlement ("header");

Document.createlement ("Nav");

Document.createlement ("menu");

Document.createlement ("Hgroup");

Another solution:

<!-[if ie]>

<script src= "Http://html5shim.googlecode.com/svn/trunk/html5.js" ></script>

<! [endif]-->

5.2.2 Information for a part of a document (Hgroup)

Use the Hgroup element to group headings together.

for people whowant the memory of a lifetime.

5.2.3 Necessary properties (required attribute)

<input type= "text" name= "Someinput" required>

Or use a more structured approach:

<input type= "text" name= "Someinput" required= "required" >

If the "Someinput" text box is blank, the form will not be submitted.

<form action= "" method= "get" >

<lable for = "name" > Name:</label>

<input id= "name" name= "name" type= "text" placeholder= "TRS" required= "required"/>

<button type= "Submit" > Submit <button>

</form>

If the content in input is blank, the text box will be highlighted when the form is submitted, but it appears to have this effect only in chrome.

5.2.4autocomplete Properties

The AutoComplete attribute specifies that the form or input field should have auto-complete functionality.

It is used for <form> labels, as well as the following types of <input> tags: text,search,url,telephone,email,password,datapickers,range and color.

<form action= "" method= "Get" autocomplete= "on" >

<label for = "email" > Email:</label>

<input type= "Email" name= "email" autocomplete= "Off"/>

</form>

5.2.5 Regular Expressions

Using regular expressions makes it easy to validate a specific text.

<form action= "" method= "get" >

<label for = "username" > name:</label>

<input id= "username" name= "username" type= "text" placeholder= "4-10 English letters"

Pattern= "[a-za-z]{4,10}" required= "required" autofocus/>

<button type= "Submit" > Submit </button>

</form>

The [a-za-z]{4,10} represents the acceptance of 4-10-bit case-insensitive English letters. This feature appears to be supported only in the Chrome browser.

5.2.6 Properties Support Detection

Use the excellent Modernizr library (http://www.modernizr.com/) to detect if the browser supports certain properties.

As long as these elements are created and analyzed, you can determine the browser's capabilities. In fact, this is a common method of determining browser compatibility. For example, to determine the Pattern property, add a small piece of code to Javascrip:

Alert (' Pattern ' in document.createlement (' input '));//boolean

Creates a new input element and determines whether the pattern property browser inside is supported.

You can also:

<script>

If (! ') Pattern ' in document.createlement (' input ')) {

Do the operation

}

</script>

5.2.7mark Element (Mark Element)

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

5.2.8div

Div should be used when there are no better elements. For example, you need to wrap a block of code within a packaging unit that handles content positioning. But if it is an article, it is best to use <artical> if it is a list of links, use <nav>.

5.2.9 Small Knowledge

· SVG (Scalable Vector graphics) is not a HTML5, it is based on Extensible Markup Language (XML), used to describe a two-dimensional vector graph of a graphic format.

· Geolocation is not a HTML5, it means geo-location, and HTML5 enables Web applications to determine location and provide more relevant information.

· To retrieve the value of a custom property:

5.3.0data Properties

HTML code section: <div id= "mydiv" data-custom-attr= "My Value" >lady Gaga </div>

Retrieval:

var thediv = document.getElementById ("mydiv");

var attr = Thediv.getattribute ("data-custom-attr");

alert (attr);//my Value

· The application of this property in CSS

CSS code:

. data_custom{display:inline-block;position:relative;}

. Data_custom:hover{color:ransparent;}

. data_custom:hover:after{

Content:attr (Data-hover-response);

Color:black;

Position:absolute;

left:0;

}

HTML code:

<a Class= "Data_custom" data-hover-response= "I said Don't touch me!" "Href=" # > Don't touch me, Gaga </a>

Note: Browsers support pseudo-class after a quarter of content attr.

5.3.1 Creating a slider using area input

HTML5 introduced a range type of input.

<input type= "Range", which can receive Min,max,step and value properties, and so on.

· Label
<form method= "POST" >
<input type= "range" name= "range" min= "0" max= "ten" step= "1" value= ""/>
<output name= "Result" ></output>
</form>

· Css

Use: Before and: After informs the user of the specified maximum and minimum values

input {font-size:14px;font-weight:bold;}

Input[type=range]:before{content:attr (min):p adding-right:5px;}

Input[type=range]:after{content:attr (max):p adding-left:5px}

output{

Display:block;

Font-size:5.5em;

Font-weight:bold;

}

· Javascript

L Detect if the browser is able to identify the rangeinput and display the prompt if it is not recognized;

L dynamically change the value of output when the user moves the slider;

L Monitoring, when the user leaves the slider, the insertion value, while local storage;

L then when the page is refreshed, the selected area and values are automatically set to the last selection.

(function () {

var f =document.forms[0],//Returns a reference to all documents in an object

range=f[' Range ',

result=f[' Result ',

Cachedrangevalue=localstorage.rangevalue?localstorage.rangevalue:5;

Detect if the browser is cool enough

Identify range input

var o =document.createlement (' input ');

O.type= ' range ';

if (o.type== ' text ')

Alert (' Sorry, your browser isn't cool enough, try the latest Chrome browser! ’);

Set the initial value

Set to 5 regardless of whether it is stored locally

Range.value=cachedrangevalue;

Result.value=cachedrangevalue;

When the user selects a value, updates the local storage

Range.addeventlistener ("MouseUp", function () {

Alert ("Your choice is:" +range.value+ "I am now saving this value with local storage.) Refresh the validation on the browser. ”);

Localstorage? (localstorage.rangevalue=range.value): Alert ("Data is saved to a database or somewhere else.") ”);

},false);

Swipe to display selected values

Range.addeventlistner ("Change", function () {

Result.value=range.value;

},false);

})();

　　

HTML5 new Features