Home > Developer > Web Develop
HTML5 Overview
HTML5 was introduced in 2004 by WHATWG (Web Hypertext Technology Working Group) and was accepted by the Internet in 2007.
On January 22, 2008, the first formal draft was published. Whatwg said that the norm was currently under way and that it still had to be years of work.
HTML version
Since the early days of the Web, several HTML versions have been developed:
1. HTML 1991
2, html+ 1993
3. HTML2.0 1995.1 RFC
4, HTML3.2 1996.1
5, HTML4.0 1997.12
6, HTML4.01 1999.12
7, HTML5 2008.1
8, HTML5 2012
9, XHTML5 2013
New features of HTML5
1, the new DOCTYPE
<! Doctype> statement
There are many different documents in the Web world. The browser can display the document correctly only if you understand the type of document.
HTML also has a number of different versions, only the exact HTML version used in the page is fully understood, and the browser can display the HTML page exactly. This is <!. The use of doctype>.
<! Doctype> is not an HTML tag. It provides the browser with a message (declaration) of what version of HTML was written.
Although using <! DOCTYPE Html>, even if the browser does not understand this sentence will be in accordance with the standard mode to render.
Common declarations
HTML5
<! DOCTYPE html>
HTML 4.01
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
XHTML 1.0
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
ExampleHTML5 document with the correct document type (DOCTYPE):
<!DOCTYPE HTML><HTML><Head><title>Title of the document</title></Head><Body>The content of the document ...</Body></HTML>
For an example or a complete list of document type declarations, please visit the DOCTYPE Reference manual.
2. Figure elements
Definition and usage
<figure> tags are used to group elements.
<figcaption> The image that is used as an illustration in a document with a caption.
< Figure>And<figcaption>to semantically represent a picture with a title< Figure><imgsrc= "Path/to/image"alt= " aboutimage "/><figcaption><P>This is an image of something interesting.</P></figcaption></ Figure>
3. Redefined <small>
Definition and usage
The <small> label renders the side comments as small text.
Disclaimers, precautions, legal restrictions, or the characteristics of a copyright notice are usually small texts. Small texts are sometimes used for news sources and licensing requirements.
For text that is emphasized by the EM element or is marked as important by the strong element, the small element does not suppress the emphasis on the text, nor does it diminish the importance of the text.
<small> has been redefined and is now used to represent small typography, such as the copyright notice at the bottom of the site
1 <DL>2 <DT>Single room</DT>3 <DD>399 USD<Small>Breakfast included, tax not included</Small></DD>4 <DT>Standard Double Room</DT>5 <DD>599 USD<Small>Breakfast included, tax not included</Small></DD>6 </DL>
4. Remove the type attribute from 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, let your content editable, only need to add a contenteditable property
<contenteditable= "true"> can edit content inside </Div >
If you add contenteditable= "true" inside the body, you can see how magical the property is. So we can set the contenteditable= "true" property to the HTML tag to edit the tag.
Contenteditable property is compatible with all browsers (IE6 Previous versions are not tested for compatibility)
In some cases we can use DIV instead of input or textarea to achieve the same effect, for example, when using AJAX, we can get the content of Div when we submit the form.
Careful people will find that the QQ space in the publication of the text box is actually a div, rather than textarea text box.
Div+css how to simulate TextArea text fields highly adaptive to achieve HTML5 standard contenteditable properties
This effect is achieved primarily by adding the Contenteditable property in the HTML5 to the label (contenteditable: Specifies whether the user is allowed to edit the content), and it is great that this property IE is also supported, so it is no longer too tangled up for compatibility issues.
Example<styletype= "Text/css">. Demoedit{Border:1px solid #dddddd;width:450px;Min-height:20px;_height:20px;Outline:0px;padding:2px;}//outline:0px; When the style resolution container gets the focus, the container in the FF browser displays the effect of the dashed box. . Demoedit P{margin:0px;padding:0px;} </style> <Divcontenteditable= "true"style= "border:1px solid #dddddd; width:360px;min-height:20px;_height:20px;outline:0px;"></Div> <Divcontenteditable= "true"class= "Demoedit"></Div>
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
12. 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");
13, Hgroup
Typically used in the header to group a set of headings together, such as
14. 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" >
15. Autofocus Properties
As its meaning is, it's focused on the input box.
<input type= "text" name= "Someinput" placeholder= "Douglas Quaid" required autofocus>
16. 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>
17. 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>
22. 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" </MARK>. </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 immediately?
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
26. 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>
<H1 data-hover-response= "I said Don ' t Touch me!" > Don ' t Touch Me
27. 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;}
HTML5 Basics of Getting Started
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
