28 new HTML5 features, skills and technologies that you must know, and new html5 features
1. New Doctype
Although<!DOCTYPE html>Even if the browser does not understand this sentence, the rendering will follow the standard mode.
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.
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. PlaceholdersThe meaning of this input attribute is that it does not have to use javascript to do the placeholder effect.
9. Local StorageYou 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 footer11. more HTML5 form features 12. IE and HTML5By default, new HTML5 elements are rendered in inline mode. However, you can use the following method to make them 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
14. Required attributesThe 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 attributesAs its meaning is, it is focused on the input box.
<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>16. Audio supportHTML5 provides
<audio>Tags, you do not need to use third-party plug-ins to render Audio. Most modern browsers provide support for HTML5 Audio, but currently they still need to provide compatible processing, such<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 SupportLike Audio,
<video>Tags provide video support. Because HTML5 documents do not specify a specific encoding for video, the browser determines which encoding to support, resulting in 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 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 videoThe 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 ExpressionBecause 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 attributesIn 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 ElementSet
<mark>Elements are highlighted. When I select a piece of text, the effect of javascript on HTML markup should be as follows: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 HTML526. Data attributes?<div id="myDiv" data-custom-attr="My Value"> Bla Bla </div>Use in CSS:
<style>h1:hover:after { content: attr(data-hover-response); color: black; position: absolute; left: 0;}</style>27. Output Element
<output>The element is used to display the calculation result. It also has the same for attribute as 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 and 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;}
From: http://justjavac.com/html5/2012/04/05/25-html5-features-tips-and-techniques-you-must-know.html
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
