Eight characteristics of HTML5

HTML5 is a standard version of HTML [1] (an application under standard Universal Markup Language) that replaces the HTML 4.01 and XHTML 1.0 standards developed in 1999, and is still in the development stage, but most browsers already support certain HTML5 technologies. HTML 5 has eight major features:

semantic characteristics (class:semantic) HTML5 gives the web a better sense and structure. Richer labels will build a data-driven web that is more valuable to programs and users, with support for RDFA, micro-data, and micro-formats.

Local Storage features (Class:offline & STORAGE)

Web apps based on HTML5 have shorter start-up times, faster networking speeds, all thanks to the HTML5 APP Cache and local storage capabilities. Indexed DB (one of the most important technologies for HTML5 local storage) and API documentation.

Device compatibility features (Class:device ACCESS)

Since the release of the API documentation for the geolocation feature, HTML5 has provided more functional optimization options for Web application developers, with the added benefit of more experience features. HTML5 provides unprecedented access to data and applications to open interfaces. Allows external applications to directly connect to the data inside the browser, such as video and audio directly linked to the microphones and camera.

Connection characteristics (class:connectivity)

More efficient Connection productivity enables page-based live chat, faster web game experience, and more optimized online communication. HTML5 has more efficient server push technology, Server-sent event and WebSockets are among the two features that can help us implement the server's ability to "push" data to the client.

Web Multimedia features (Class:multimedia)

Support the web-side audio, video and other multimedia functions, and the site's own apps, cameras, audio and video features complement each other.

Three-dimensional, graphic and special effects features (class:3d, graphics & effects)

Based on the 3D capabilities of SVG, Canvas, WebGL and CSS3, users will marvel at the amazing visuals that appear in the browser.

Performance and integration features (Class:performance & Integration)

No user will ever wait for your LOADING--HTML5 to help your Web applications and websites work faster in a diverse environment through technologies such as XMLHTTPREQUEST2.

CSS3 characteristics (CLASS:CSS3)

Without sacrificing performance and semantic structure, CSS3 offers more style and stronger results. In addition, the Web's Open font format (WOFF) provides greater flexibility and control than previous Web typography.

1. The new DOCTYPE
Although using <! DOCTYPE Html&gt, even if the browser does not understand the phrase will be in accordance with the standard mode to render
2. Figure elements
Use <figure> and <figcaption> to semantically represent a picture with a title
<figure>

<figcaption>
<p>this is an image of something interesting. </p>
</figcaption>
</figure>
3. Redefined <small>
<small> has been redefined and is now used to represent small typography, such as the copyright notice at the bottom of the site
4. Remove the type attribute from the link and script tags
5. Add/No parentheses
HTML5 There are no strict requirements attributes must be quoted, closed and not closed, but it is recommended to enclose quotes and closed labels
6. To make your content editable, just add a contenteditable property
7. Email Inputs
If we set the type of input to e-mail, the browser verifies that the input is an email type, not just the front-end checksum, and the backend has to have a corresponding checksum.
8. Placeholders
The meaning of this input property is that you don't have to do placeholder with JavaScript.
9. Local Storage
Using the local storage can permanently store large pieces of data on the client side (unless actively deleted), most browsers now support, before use can detect whether Window.localstorage exists
10. Semantic Headers and Footer
11. More HTML5 Form Features
IE and HTML5
By default, HTML5 new elements are rendered inline, but you can use the following method to make
It is rendered in block mode
Header, footer, article, section, Nav, menu, Hgroup {
Display:block;
}
Unfortunately, IE ignores these styles and can fix them like this:
Document.createelement ("article");
Document.createelement ("footer");
Document.createelement ("header");
Document.createelement ("Hgroup");
Document.createelement ("Nav");
Document.createelement ("menu");
Hgroup.
Typically used in the header to group a set of headings together, such as
. Required Properties
The Required property defines whether an input is required, and you can declare it as follows
<input type= "text" name= "Someinput" required>
Or
<input type= "text" name= "Someinput" required= "required" >
The . Autofocus Property
As its meaning is, it's focused on the input box.
<input type= "text" name= "Someinput" placeholder= "Douglas Quaid" required autofocus>
. Audio Support
HTML5 provides <audio> tags, you do not need to follow third-party plug-ins to render audio, most modern browsers provide support for HTML5 audio, but there is still a need to provide some compatibility processing, such as
<audio autoplay= "AutoPlay" controls= "Controls" >
<source src= "File.ogg"/><!–ff–>
<source src= "file.mp3″/><!–webkit–>
<a href= "File.mp3″>download this file.</a>
</audio>
. Video Support
And audio very much like the,<video> tag provides support for video, since the HTML5 document does not specify a specific encoding for video, the browser decides which encodings to support, resulting in a lot of inconsistencies. Safari and IE support the encoded format of H. Theora and Vorbis encoded format, Firefox and Opera, when using HTML5 video, you must provide:
<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>
18. Pre-load Video
The Preload property is as simple as its literal meaning, and you need to decide whether you need to preload the video when the page loads
<video preload>
19. Display Video Control
<video preload controls>
20. Regular expressions
Because of the pattern attribute, we can use regular expressions directly in your markup.
<form action= "" method= "POST" >
<label for= "username" >create a username: </label>
<input type= "text" name= "username" id= "username" placeholder= "4 <> 10″pattern=" [a-za-z]{4,10} "autofocus Required>
<button type= "Submit" >go </button>
</form>
21. Detection attribute Support
In addition to Modernizr, we can easily detect whether some properties are supported by JavaScript, such as:
<script>
if (! ') Pattern ' in document.createelement (' input ')) {
Do Client/server side validation
}
</script>
Mark Element
Think of the <mark> element as a highlight, and when I select a piece of text, the markup effect of JavaScript on HTML should look like this:
<p> They were interrupted, just after Quato said, <mark> "Open Your Mind" &LT;/MARK&GT;. </p>
23. When to use <div>
HTML5 has introduced so many elements, so div do we still need to use it? div You can use when there are no better elements.
24. Want to use HTML5 now?
Don't wait 2022, you can use it now, just do it.
25. Which is not HTML5
1) SVG
2) CSS3
3) geolocation
4) Client Storage
5) Web Sockets
The . Data property
<div id= "mydiv" data-custom-attr= "My Value" > Bla bla </div>
Used in CSS:
<style>
H1:hover:after {
Content:attr (Data-hover-response);
Color:black;
Position:absolute;
left:0;
}
</style>
&LT;H1 data-hover-response= "I said Don ' t Touch me!" > Don ' t Touch Me . Output element
The <output> element is used to display the result of the calculation, and there is a for property that is the same as the label
28. Create a slider with range input
The range type referenced by HTML5 can create a slider that accepts Min, Max, step, and Value properties
You can use 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;}

Eight characteristics of HTML5