1. New Doctype Although using , even if the browser does not understand this sentence, it will render according to the standard mode
2. Figure element Use
and to semantically represent captioned images This is an image of something interesting.
3. Redefined has been redefined and is now used to mean small Typesetting, such as the copyright statement at the bottom of the website 4. Remove the type attribute in the link and script tags 5. Add/without brackets HTML5 does not have strict requirements that attributes must be added Quotes, closed or not, but it is recommended to add quotes and closing tags6. To make your content editable, just add a contenteditable attribute 7. Email Inputs If we Set the input type to email, and the browser will verify whether the input is of email type. Of course, you cannot just rely on the front-end verification, the back-end must also have corresponding verification 8. Placeholders The meaning of this input attribute is that there is no need to use javascript to achieve the placeholder effect9. Local Storage Using Local Storage, you can permanently store large data fragments on the client (unless you actively Delete), currently supported by most browsers, you can check whether window.localStorage exists before using it 10. Semantic header and footer 11. More HTML5 form features 12. IE and HTML5 By default, new HTML5 elements are rendered inline, but you can use the following method to make render them in block header, footer, article, section , nav, menu, hgroup { display: block; } Unfortunately IE will ignore these styles, you can fix it like this: document.createElement("article"); document.createElement("footer"); document.createElement("header"); document.createElement("hgroup"); document.createElement("nav"); document .createElement("menu"); 13. hgroup is generally used to group a group of titles together in the header, such as Recall Fan Page Only for people who want the memory of a lifetime. 14. Required attribute The required attribute defines whether an input is required. You can declare or 15 as follows . Autofocus attribute Just like its meaning, it is to focus on the input box 16. Audio support HTML5 provides the tag, You no longer need to follow third-party plug-ins to render audio. Most modern browsers provide support for HTML5 Audio. However, some compatibility processing is still required, such as Download this file. 17. Video support It is very similar to Audio, tag provides support for video. Since the HTML5 document does not specify a specific encoding for video, the browser has to decide which encodings to support, resulting in many inconsistencies. Safari and IE support H.264 encoding format, Firefox and Opera support Theora and Vorbis encoding format. When using HTML5 video, you must provide both: Your browser is old. Download this video instead.
18. Preload video The preload attribute is as simple as its literal meaning. You need to decide whether you need to preload the video when the page loads 19. Display video control 20. Regular expression Thanks to the pattern attribute, we can Regular expressions are used directly in markup 21. Detection attribute support In addition to Modernizr, we can also simply detect some through javascript Is the attribute supported, such as: 22. Mark element treats the element as a highlight. When I select a piece of text, javascript The markup effect for HTML should be like this: Search Results They were interrupted, just after Quato said, ”Open your Mind”
. 23. When to use
HTML5 has introduced so many elements, so do we still need to use div? You can use div when there are no better elements. .
24. Want to use HTML5 immediately? Don’t wait for 2022, you can use it now, just do it.
25. What is not HTML5 1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data attribute
Bla Bla
Used in CSS:
Don't Touch Me 27. Output element The element is used to display calculation results and has the same for attribute as label 28. Use Range Input to create a slider The range type referenced by HTML5 can create a slider block, which accepts min, max, step and value attributes <script> <br />if (!’pattern’ in document.createElement(’input’) ) { <br />// do client/server side validation <br />} <br /></script> You can use CSS’s :before and :after to display the values of min and max input[type=range]:before { content : attr(min); padding-right: 5px; } input[type=range]:after { content: attr(max); padding-left: 5px;}