HTML5 new Features

Source: Internet
Author: User

HTML5 is the latest HTML standard, is the latest standard, many people will feel that the development of a HTML5 site, compared to a site from HTML4 to HTML5 on the migration of more easily, two versions have a big difference. HTML5 did not make significant changes to HTML4, and many of them were similar.

First, the DOCTYPE statement is one of the many new features in HTML5. Now all you have to do is write <!doctype html> It does not introduce DTDs and is not based on SGSL.

Replaces Flash's <canvas> tag

HTML5 <canvas> elements are used for drawing drawings, which are done through scripts (usually JavaScript).

<canvas> tags are just graphics containers, and you must use scripts to draw graphics.

There are several ways you can use Canva to draw paths, boxes, circles, characters, and add images.

Currently, the <canvas> tag does not provide all the features that Flash has, but in time, Flash will be eliminated from the Web. We will wait and see, because many people do not agree with this view.

<canvas id= "MyCanvas" width= "$" height= "100"
Style= "border:1px solid #000000;" >
</canvas>

<script>
var C=document.getelementbyid ("MyCanvas");
var Ctx=c.getcontext ("2d");
Ctx.fillstyle= "#FF0000";
Ctx.fillrect (0,0,150,75);
</script>

HTML5 design <footer></footer> footer.

Do not use the <div> tag to label these parts of the page.

<section> and <article> tags

Like the

<article><a href= "http://www.apple.com" >safari 5 released</a><br/>7 June 2010. Just after the announcement of the new IPhone 4 at WWDC, Apple announced the release of Safari 5 for Windows and Mac ...</article>

<section></section>

New <menu> and <figure> tags

New <menu> tags can be used as normal menus or on toolbars and right-click menus, although these things are not commonly used on the page.

Similarly, the new <figure> tag is a more professional way of managing text and images on a page. Of course, you can use style sheets to control text and images, but using the HTML5 built-in tag is more appropriate.

New <audio> and <video> tags

Inserting an audio file

<audio controls>
<source src= "Horse.ogg" type= "Audio/ogg" >
<source src= "Horse.mp3" type= "Audio/mpeg" >
Your browser does not support the audio element.
</audio>

Insertion of video files

<video src= "IMG/AUDIOVIDIO/VIDEO.WEBM" width= "All" height= "400"
Controls= "Controls" loop poster= "Img/audiovidio/plmm.jpg"
preload= "Auto" id= "Video1" >

</video>

<form> and <forminput> mark new changes to the original form elements, which have a lot of new properties (and some modifications). If you develop the form frequently, you should take the time to study it in more detail.

<form action="form_action.asp" method="get"><p>first Name: <input type= "text" name= "fname"/></p> <p>last name: <input type= "text" Name= " LName "/></p> <input type=" Submit "value=" Submit "/></form>

A form can be understood as a box, and then all input is placed inside,

The property of the form action represents the back-end page you want to work with the contents of the form, typically PHP or ASP; The method property, which represents the methods that send the request, including get and post two, post encryption, no byte limit.

Because the input content of a page in the actual development can not be completely attached to a piece, the middle may insert other content, so, HTML5 in the form has a new element, set an ID, and then other input elements set the form property, the value equals the ID, There is no need to have more than one form tag in this page, and then you can put all the input tags into the form element with the same ID. Example:

<formaction="/example/html5/demo_form.asp" method="get"id="user_form">

First name:<inputtype="text" name="fname"/>

<inputtype="submit"/>

</form>

< p >下面的输入域在 form 元素之外,但仍然是表单的一部分。</ p > Last name: < input type = "text" name = "lname" form = "user_form" />

No longer use <strong></strong> for <b> and <font> tagging

no longer using <frame>, <center>, <big> tags

<area> tags define the area within the image map (image mapping refers to an image with a clickable area).

The area element is always nested inside the <map> tag.

<map id= "Planetmap" > <area shape = "Rect" coords = "0,0,110,260" href = "sun.htm" alt= "Sun"/> <area shape = "Circle" coords = "129,161,10" href = "mercur.htm" alt = "Mercury"/> <area shape = "Circle" coords = "180,139,14" href = "venus.htm" alt= "Venus"/></map>

The <address> tag defines the contact information for the author or owner of the document.

If the <address> element is inside a <article> element, it represents the contact information for the author or owner of the article.

<address>Written by w3chtml.com<br/><a href= "Mailto:[email protected]" >email us</a><br/>address:box 564, disneyland<br/>phone: +12 34 56 78</address>

I am not saddened by the removal of these marks. For the same reason, there are better marks to achieve their function--which is good, and any obsolete mark removed from the standard is welcome.

HTML5 new Features

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.