HTML5 new Features

HTML5 Presumably everyone is familiar with it. However, can you tell exactly what new features the HTML5 brings? This article summarizes several new features that you must know about HTML5.

1. New Document type (Doctype)

Many web pages are still using XHTML 1.0 and want to declare document types like this in the first line:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

In HTML5, the above statement will be invalidated. Here's how it's declared in HTML5:

<! DOCTYPE html>

2. Scripts and links without type

(No more Types for Scripts and Links) in HTML4 or XHTML, you need to use the following lines of code to add CSS and JavaScript files to your Web page.

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

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

In HTML5, you no longer need to specify a type attribute. Therefore, the code can be simplified as follows:

<link rel= "stylesheet" href= "Style/stylesheet.css"/>

<script src= "Js/script.js" ></script>

3. Semantic header and Footer (the Semantic header and Footer)

In HTML4 or XHTML, you need to use the following code to declare "Header" and "Footer".

<div id= "Header" ></div>

<div id= "Footer" ></div>

In HTML5, there are two elements that can override the above declarations, which can make the code more concise.

<footer></footer>

4.Hgroup

In HTML5, there are many newly introduced elements, and Hgroup is one of them. Let's say my Site name is followed by a sub-heading, which I can define separately using

5. Mark Element

You can think of it as a highlight tag. The string modified by this tag should be related to the user's current action. For example, when I search for "Open your Mind" in a blog, I can use some of the phrases that the JavaScript will appear to use <mark> retouch.

<p> They were interrupted, just after Quato said, <mark> ' Open your mind ' </mark> </p>

6. Graphic elements (figure Element)

In HTML4 or XHTML, the following code is used to modify the annotations of the picture.

<p>image of Mars </p>

However, the above code does not relate the text to the image. Therefore, HTML5 introduces the <figure> element. When combined with <figcaption>, we can semantically link annotations to corresponding images.

<figure>

<figcaption>

<p>this is an image of something interesting.</p>

</figcaption>

</figure>

7. Redefining Small (Small Element redefined)

In HTML4 or XHTML, the small element already exists. However, there is no complete explanation of how to use this element correctly. In HTML5, small is used to define the small print. Consider the copyright status at the bottom of your site, and small can interpret this information correctly, based on the new HTML5 definition for this element.

8. Placeholder (Placeholder)

In HTML4 or XHTML, you need to use JavaScript to add placeholders to text boxes. For example, you can set up some information in advance, and when the user starts typing, the text in the textbox disappears.

In HTML5, the new "placeholder" simplifies the problem.

9. Required properties (Required Attribute)

The new attribute "required" in HTML5 Specifies whether an input is required. There are two ways of declaring this property.

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

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

When the text box is specified as required, the table cannot be submitted if blank. Here is an example of how to use it.

<form method= "POST" action= "" >

<label for= "Someinput" > Your Name: </label>

<input type= "text" id= "Someinput" name= "Someinput" placeholder= "Douglas Quaid" required>

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

</form>

In the above example, if the input is empty and the table is submitted, the input box is highlighted.

10.Autofocus properties (Autofocus Attribute)

Similarly, HTML5 's solution eliminates the need for JavaScript. If a particular input should be "select" or focus, by default, we can now take advantage of autofocus properties.

<input type= "text" name= "Someinput" placeholder= "Douglas Quaid" required autofocus>

11.Audio Support (Audio supports)

Currently we need to rely on third-party plugins to render audio. However,,<audio> elements were introduced in the HTML5.

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

<source src= "File.ogg"/>

<source src= "File.mp3"/>

<a href= "File.mp3" >download this file.</a>

</audio>

Remember to include two audio formats when using the <audio> element. Firefox want to. ogg formatted files, and WebKit browser you'll need the. mp3 format. As always, IE is not supported, and opera 10 and below only support the. wav format.

12.Video Support (Video supports)

There are not only <audio> elements in HTML5, but also <video>. However, like <audio>, HTML5 does not specify a video decoder, which is left to the browser to decide. While Safari and internet Explorer9 can support videos in the H. s format, Firefox and Opera adhere to the open source Theora and Vorbis formats. Therefore, when you specify HTML5 video, you must provide both formats.

<video Controls Preload>

<source src= "COHAGENPHONECALL.OGV" type= "VIDEO/OGG; Codecs= ' Vorbis, Theora ' "/>

<source src= "Cohagenphonecall.mp4" type= "VIDEO/MP4; ' codecs= ' avc1.42e01e, mp4a.40.2 ' "/>

<p> Your browser is old. <.A href= "Cohagenphonecall.mp4";. Download this video instead.</a> </p>

</video>

13. Video Pre-load (preload attribute in Videos Element)

This property allows the video to be preloaded when the user accesses the page. In order to achieve this function, you can add preload= "preload" to the <video> element or just preload.

<video preload >

14. Show control bar (display controls)

If you have used each of the above mentioned technical points, you may have noticed that using the above code, the video only shows a picture, there is no control bar. In order to render the playback control bar, we must specify the controls property within the video element.

<video preload controls>

15. Regular Expressions (Regular Expressions)

In HTML4 or XHTML, you need to use some formal expressions to validate specific text. The new pattern attribute in HTML5 allows us to insert a regular expression directly at the label.

<form action= "" method= "POST" >

<label for= "username";. Create a Username: </label>

<input type= "text" name= "username" id= "username" placeholder= "4 <>" pattern= "[a-za-z]{4,10}" autofocus Required>

<button type= "Submit";. Go </button>

</form>

16.Range Input

The range type referenced by HTML5 can create sliders that accept min, Max, step, and Value properties using CSS: Before and: After to display the values of min and Max

<input type= "range" name= "range" min= "0″max=" 10″step= "1″value=" ">

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

}

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

New interface

To help create a Web App, HTML5 introduces some new interfaces:

• Media tag video and audio playback process Control, synchronization of multiple media tags, subtitles and other interfaces

• Form restriction authentication interface (e.g. setcustomvalidity)

• Introducing an app caching mechanism to allow web apps to be offline API

• An API that allows a web app to register as an app for processing apps for a corresponding protocol or media type. (i.e. Registerprotocolhandler and Registercontenthandler)

• Introducing the contenteditable attribute, allowing the interface of any element to be edited

• Expose session history, allow script to update page URL without refresh (Legacy interface)

• Base64 Conversion API (Atob () and Btoa ())

• Interface for processing search providers (Addsearchprovider () and issearchproviderinstalled ())

• External interface

• Print the document's interface (print ()) (the following interfaces are very early, belonging to the consensus part of the BOM, until HTML5 to join the standard)

• Interface for exposing document URLs, allowing script switching, refreshing pages (location interface)

• Time-based callback interfaces (SetTimeout () and setinterval ())

• Prompt interface (alert (), confirm (), prompt ()) provided to the user

• Window interface

• Navigator Interface

Modified interface

The following interface for DOM 2 has been modified:

• The return value of Document.title will collapse multiple whitespace

• Document.domain allows assignment, so you can change the script origin of the document

• Document.open () can empty the document (if it is called with only two or the following parameters), or behaves as if it were a window.open () (if there are three or four arguments on the call). Throws an XML exception in the previous invocation mode

• Document.close (), document.write (), Document.writeln () throw an XML exception. The latter two allow mutable parameters, which can be used to add text to the document stream during the document parsing phase and implicitly invoke Document.open (). In some cases, they may be ignored

• Document.getelementsbyname () returns all HTML elements that satisfy the name compliance parameter

• Htmlformelement's Elements interface will return htmlformcontrolscollection, including button, FieldSet, Input,keygen, object, output, Select and textarea

• The Htmlselectelement Add () interface allows the second parameter to be a number

• The Remove () interface of the htmlselectelement removes the first element in the collection when the parameter is out of bounds

• The click (), focus (), and blur () interfaces can be called in all HTML elements.

• A and areastringify are their href attributes (meaning that the ToString method corresponding to Htmlanchorelement and Htmlareaelement returns their href attribute)

Document Extension

DOM Level 2 has a HTMLDocument interface that inherits from the document interface, and provides an element within the documentation (only within the HTML context) of the Access interface. HTML5 moved these members to the document interface and extended it in a specific direction. Because the document interface is used by various documents (such as XML, HTML5, SVG, and so on), the elements within the HTML5 category are available in all categories of documents, so these interfaces work well in documents such as SVG.

In addition, the document interface has some new members:

• Location, LastModified, and readystate: metadata to help manage documents (metadata)

• Dir, head, embeds, plugins, scripts: Used to get different parts of the DOM tree

• Activeelement and Hasfocus interfaces for determining whether an element has been focused

• Document editing interfaces: DesignMode, ExecCommand (), querycommandenabled (), Querycommandindeterm (), Querycommandstate (), Querycommandsupported (), Querycommandvalue ()

• All IDL event handling properties. In addition, onReadyStateChange is the only interface that is valid on document that modifies the part of the HTMLDocument prototype in the script to function properly, due to window. The HTMLDocument will also return to the document interface.

HtmlElement extension

The HtmlElement interface has also been extended in HTML5:

• The interface dataset used to get the properties of the data-*

• Click (), Focus (), blur () interface allow scripts to simulate user clicks and toggle Focus

• Accesskeylabel gives the UA the shortcut key that the element is given, and development can influence the behavior of the UA through the AccessKey property.

• Iscontenteditable returns whether the element can be edited

• All IDL Event Processing properties

• Interfaces for obtaining element properties such as translate, hidden, TabIndex, AccessKey, contenteditable, spellcheck, style, DOM level 2 only the setattribute and getattribute on the element interface are recommended to get or set these definitions of HTML ATTRIBUTE,HTML5 extend the scope of the HTML Attribute so that they can be like DOM Same as set and Get--ua already widely supported)

• Some previously defined interfaces on HtmlElement were moved to the element interface: ID, className, classlist, Getelementsbyclassname (): Extended DOM level 2 on the element interface definition, you can directly set/get the ID and other attribute values--ua has long been widely supported)

Other interface extensions

Other interfaces in DOM Level 2 have also been extended.

Interface New Interface

htmloptionscollection legacy caller, setter Creator, add (), remove (), SelectedIndex

htmlformelement getter, Checkvalidity () by name or index

htmlselectelement getter, setter Creator, item (), Nameditem (), labels, selectedoptions, and various validate interface functions

htmloptionelement Constructor New Option ()

htmlinputelementfiles, height, indeterminate, list, valueasdate, Valueasnumber, Width, stepup (), Stepdown (), Labels, text selection area API and various validate interface functions

htmltextareaelementtextLength, labels, text selection area API and various validate interface functions

htmlbuttonelement labels and various validate interface functions

htmllabelelementControl

htmlfieldsetelement type, elements, and various validate interface functions

htmlanchorelement rellist, Text

htmllinkelementrellist

htmlareaelementrellist

Htmlimageelement Constructor New Image (), Naturalwidth, Naturalheight, complete

htmlobjectelement Contentwindow, Legacy caller and various validate interface functions

htmlmapelementImages

htmltableelementcreatetbody ()

htmliframeelement Contentwindow

In addition

• Htmllinkelement and Htmlstyleelement implement the Linkstyle interface in the Cssom

• Htmlanchorelement, Htmllinkelement, and htmlareaelement implement the Urlutils interface

Obsolete interface

• Properties that have been deprecated in HTML5, and their corresponding IDL attribute interfaces will also be discarded. If bgcolor has been discarded, then the IDL attribute interface bgcolor above htmlbodyelement is discarded

• Elements that have been discarded in the HTML5 and their corresponding interfaces are also discarded, including Htmlappletelement, Htmlframesetelement,htmlframeelement, Htmldirectoryelement and Htmlfontelement, htmlbasefontelement

• The Htmlisindexelement interface was discarded because the HTML parser replaced Isindex with other elements

• Some member properties are moved from the HTMLDocument interface to the document interface and are therefore discarded under the original htmldocument: anchors and applets

Turn from: 1190000007215988

Xiaoqi77

HTML5 new Features