28 new features, new skills, and new technologies you must know about HTML5

Comments: HTML5 has many new features. The new Code is very good. Now let's summarize it for your reference only.1. New Doctype
Use <! DOCTYPE html>, rendering in standard mode even if the browser does not understand this sentence
2. Figure Element
Use <figure> and <figcaption> to represent images with titles in a semantic manner.
<Figure>

<Figcaption>
<P> This is an image of something interesting. </p>
</Figcaption>
</Figure>
3. Redefined <small>
<Small> it has been redefined and is now used to represent small typographical formats, such as the copyright statement at the bottom of the website.
4. Remove the type attribute in the link and script labels.
5. Add/without parentheses
HTML5 does not have strict requirements. Attributes must be enclosed by quotation marks. It is not closed, but it is recommended to add quotation marks and closed tags.
6. to edit your content, add a contenteditable attribute.
7. Email Inputs
If we set the Input type to email, the browser will verify whether the Input is of the email type. Of course, it cannot only rely on the front-end verification, and the backend must also have the corresponding verification.
8. Placeholders
The meaning of this input attribute is that it does not have to use javascript to do the placeholder effect.
9. Local Storage
You can use Local Storage to permanently store large data fragments on the client (unless you delete them manually). Currently, most browsers support this function. before using this function, you can check whether window. localStorage exists.
10. semantic headers and footer
11. More HTML5 Form Features
12. IE and HTML5
By default, new HTML5 elements are rendered in inline mode, 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 the following:
Document. createElement ("article ");
Document. createElement ("footer ");
Document. createElement ("header ");
Document. createElement ("hgroup ");
Document. createElement ("nav ");
Document. createElement ("menu ");
13. hgroup
It is generally used to combine a set of headers in the header, such
<Header>
<Hgroup>
<H1> Recall Fan Page <H2> Only for people who want the memory of a lifetime. </Hgroup>
</Header>
14. Required attributes
The required attribute defines whether an input is required. You can declare it as follows:
<Input type = "text" name = "someInput" required>
Or
<Input type = "text" name = "someInput" required = "required">
15. Autofocus attributes
As its meaning is, it is focused on the input box.
<Input type = "text" name = "someInput" placeholder = "Douglas Quaid" required autofocus>
16. Audio support
HTML5 provides the <audio> tag. You do not need to use third-party plug-ins to render Audio. Most modern browsers provide support for HTML5 audio. However, currently, some compatible processing is still required, such
<Audio autoplay = "autoplay" controls = "controls">
<Source src00000000file.ogg "/> <! -FF->
<Source src?#file="/> <! -Webkit->
<A href00000000file0000"> Download this file. </a>
</Audio>
17. Video Support
Like Audio, the <video> TAG provides video support. Because the HTML5 document does not specify a specific encoding for video, the browser determines which encoding to support, this causes many inconsistencies. Safari and IE support H.264 encoding formats. Firefox and Opera Support Theora and Vorbis encoding formats. When using HTML5 video, you must provide:
<Video controls preload>
<Source src = "cohagenPhoneCall. ogv" type = "video/ogg; codecs = 'vorbis, theora '"/>
<Source src00000000cohagenphonecall.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 attribute is as simple as its literal meaning. You need to decide whether to pre-load the video during page loading.
<Video preload>
19. Video Display Control
<Video preload controls>
20. Regular Expression
Because of the pattern attribute, we can directly use the regular expression 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. Support for detection attributes
In addition to Modernizr, we can also use javascript to easily check whether some attributes are supported, such:
<Script>
If (! 'Pattern' in document. createElement ('input ')){
// Do client/server side validation
}
</Script>
22. Mark Element
The <mark> element is regarded as the highlighted function. When I select a text segment, the effect of javascript on HTML markup should be as follows:
<H3> Search Results <P> They were interrupted, just after Quato said, <mark> "Open your Mind" </mark>. </p>
23. When to use <div>
If HTML5 has introduced so many elements, do we need to use them? Div you can use it when there are no better elements.
24. Do you want to use HTML5 now?
Don't wait for 2022. Now you can use just do it.
25. Which are not HTML5
1) SVG
2) CSS3
3) Geolocation
4) Client Storage
5) Web Sockets
26. Data attributes
<Div id = "myDiv" data-custom-attr = "My Value"> Bla </div>
Use 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
<Output> the element is used to display the calculation result. It also has the same for attribute as the label.
28. Use Range Input to create a slider
You can create a slider for the range type referenced by html5. it accepts the min, max, step, and value attributes.
You can use the following css: before AND: after to display min and max values.
<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 ;}