HTML5 New Features

HTML5 New Features

HTML5 is the latest HTML standard. Many people will feel that it is much easier to develop an HTML5 website than to migrate a website from HTML4 to html5, there are major differences between the two versions. HTML5 has not made major changes to HTML4. Many of them are similar.

First, the doctype Declaration is one of the many new features in HTML5. Now you only need to write <! Doctype html>. It does not need to introduce DTD, not based on SGSL.

Replaces the <canvas> label of Flash.

HTML5 <canvas> elements are used to draw images, which are completed by scripts (usually JavaScript.

<Canvas> labels are only graphical containers. You must use scripts to draw images.

You can use Canva to draw paths, boxes, circles, characters, and add images in multiple ways.

Currently, the <canvas> flag cannot provide all Flash functions, but in time, Flash will be eliminated from the web. We will wait and see because many people do not agree with this idea.

<Canvas id = "myCanvas" width = "200" height = "100"
Style = "border: 1px solid #000000;">
</Canvas>

<Script>
Var c = document. getElementById ("myCanvas ");
Var ctx = c. getContext ("2d ");
Ctx. fillStyle = "# FF0000 ";
Ctx. fillRect );
</Script>

<Header> and <footer> flag

The HTML5 design <Footer> </footer> footer.

You do not need to use the <div> label to mark these parts of the webpage.

<Section> and <article> MARK

Similar to the

<article><A href = "http://www.apple.com"> Safari 5 released </a> <br/> 7 Jun 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><H1> PRC </section>

New <menu> and <figure> labels

The new <menu> tag can be used as a normal menu or a toolbar or right-click menu, although these items are not commonly used on pages.

Similarly, the new <figure> tag is a more professional way to manage text and images on pages. Of course, you can use a style sheet to control text and images, but it is more suitable to use the HTML5 built-in mark.

New <audio> and <video> tags

Audio File insertion

<Audio controls>
<Source src = "horse.ogg" type = "audio/ogg">
<Source src = "horsedio" type = "audio/mpeg">
Your browser does not support the audio element.
</Audio>

Video file insertion

<Video src = "img/audiovidio/video. webm" width = "600" height = "400"
Controls = "controls" loop poster = "img/audiovidio/PLMM.jpg"
Preload = "auto" id = "video1">

</Video>

<Form> and <forminput> mark all new modifications to the original form elements. They have many new attributes (and some modifications ). If you often develop forms, you should spend more time studying them in 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>

Form can be understood as a box, and all input is put in it,

The form attribute action indicates the backend page for processing the form content, which is usually php or asp. The method attribute indicates the method for sending the request, including get and post, post encryption, no byte restrictions.

In actual development, the input content of a page cannot be put together, and other content may be inserted in the middle. Therefore, in html5, form has a new element and an ID is set, then, set the form attribute in other input elements with the value equal to ID, so that there is no need to have multiple form tags in a page, then, all input tags can be put into the form element with the same ID. Example:

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

First name:<input type="text" name="fname" />

<input type="submit" />

</form>

  < p > The following input fields are outside the form element, but are still part of the form. </ p >  Last name: < input  type = "text"  name = "lname"  form = "user_form"  />

<B> and <font> are no longer used. <strong> </strong>

<Frame>, <center>, and <big> are not used.

<Area> A tag defines the areas in the image ing (image ing refers to an image with clickable areas ).

The area element is always nested in the <map> label.

<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>

<Address> the tag defines the contact information of the Document Author or owner.

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

<address>Written by w3chtml.com <br/> <a href = "mailto: info@w3chtml.com"> Email us </a> <br/> Address: Box 564, Disneyland <br/> Phone: + 12 34 56 78</address>

I am not sad to remove these marks. For the same reason, there are better tags to implement their functions-this is good, and any obsolete tags are welcome to be removed from the standard.