html5 features (common work summary)

1. New Doctype

Even if it is used <!DOCTYPE html>, even if the browser does not understand this sentence, it will render according to the standard mode

2. Figure element

Use <figure>and <figcaption>to semantically represent captioned images

<figure>
  <img src="path/to/image" alt="About image" />
  <figcaption>
    <p>This is an image of something interesting. </p>
  </figcaption>
</figure>

3. Redefined`<small>`

<small>Has been redefined and is now used to denote small typography, such as a copyright notice at the bottom of a website

4. Remove the type attribute in the link and script tags

5. With/without brackets

HTML5 does not strictly require attributes to be enclosed in quotation marks, closed or closed, but it is recommended to add quotation marks and closed tags

6. To make your content editable, just add a contenteditable attribute

7. Email Inputs

If we set the type of Input to email, the browser will verify whether the input is of email type. Of course, we can’t just rely on the front-end verification, and the back-end must also have corresponding verification.

8. Placeholders

The meaning of this input attribute is that it is not necessary to use javascript to do the placeholder effect

9. Local Storage

Using Local Storage can permanently store large data fragments on the client (unless it is actively deleted), and most browsers currently support it. You can check whether window.localStorage exists before using it.

11. More HTML5 form features

12. Internet Explorer and HTML5

By default, HTML5 new elements are rendered inline, but they can be rendered in block in the following way

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

It is generally used in the header to combine a group of headers, such as

<header>
<hgroup>
<h1> Recall Fan Page </h1>
<h2> Only for people who want the memory of a lifetime. </h2>
</hgroup>
</header>

14. Required attribute

The required attribute defines whether an input is required, you can declare it like this

<input type="text" name="someInput" required>

<input type="text" name="someInput" required="required">

15. Autofocus properties

Just like its meaning, it is to focus on the input box

<input type="text" name="someInput" placeholder="Douglas Quaid"  required autofocus>

16. Audio support

HTML5 provides <audio>tags, you don't need to render audio according to third-party plug-ins, most modern browsers provide support for HTML5 Audio, but still 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

Much like Audio, <video>the 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 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 both:

<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. Preload video

The preload attribute is as simple as it sounds, you need to decide whether you want to preload the video when the page loads

<video preload>

19. Show video controls

<video preload controls>

20. Regular expressions

Thanks to 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. Detect attribute support

In addition to Modernizr, we can also simply check whether some attributes are supported through javascript, such as:

<script>
if (!'pattern' in document.createElement('input') ) {
// do client/server side validation
}
</script>

22. Mark element

Think <mark>of elements as highlighting. When I select a piece of text, the markup effect of javascript on HTML should be like this:

<h3> Search Results </h3>
<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 do we still need to use div? div you can use when there is no better element.

24. Want to use HTML5 now?

Don't wait for 2022, it's available now, just do it.

25. What is not HTML5

SVG
CSS3
Geolocation
Client Storage
Web Sockets

26. Data property

<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>

<h1 data-hover-response="I Said Don’t Touch Me!"> Don’t Touch Me  </h1>

27. Output element

<output>The element is used to display calculation results, and also has a for attribute like label

28. Using Range Input to create sliders

The range type referenced by HTML5 can create a slider, which accepts min, max, step and value attributes and can use css :before and :after to display the 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;
}