1 New semantic tags in HTML5

1.1 Added structured Layout labels

Tag name Semantics and functionality attribute Single label or double label
header The header of a page or section double
footer Footer of a page or section double
nav navigation double
section A section of a page or a paragraph of an article double
article Articles, news, posts, comments, etc double
aside The sidebar double

Note:

These new structured layout tags are essentially semantic divs.

1.2 Added status labels

Tag name Semantics and functionality attribute Single label or double label
meter Represents static metrics, such as power, temperature, disk capacity, and so on Max, min, value, low, high, Optimum (understand) double
progress Represents progress, such as a progress bar Max, value (Understanding) double

Q: What is the difference between Meter and Progress? (important)

4. Meter stands for static measurement and progress stands for dynamic progress.

Note:

Meter and Progress behave differently in different browsers and are not easy to style. However, you need to know the difference.

1.3 Adding list labels

Tag name Semantics and functionality attribute Single label or double label
datalist Keyword tips for the search box double
details Used to show questions and answers or proper nouns and explanations of proper names double
summary Write it inside details to specify questions or proper nouns double

① Datalist

<input type="text" list="myData">
<datalist id="myData">
    <option value="a1"></option>
    <option value="a2"></option>
    <option value="ab1"></option>
    <option value="abb"></option>
    <option value="abc"></option>
    <option value="bbc"></option>
    <option value="a100"></option>
</datalist>
Copy the code

Note:

The list attribute value of input must be the same as the ID value of datalist.

② Details

 <details>
     <summary>How to get rich overnight?</summary>
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis non voluptatem porro natus maiores. Obcaecati pariatur sequi dolorum, nihil rerum, culpa modi ducimus magni iusto praesentium ad perspiciatis ab ipsa.
     </p>
     <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae illum dolorem pariatur autem minima doloribus deserunt qui  quasi ut culpa, alias corrupti nihil atque aliquam mollitia quibusdam a. Possimus, iusto?</p>
</details>
Copy the code

1.4 Adding Annotation Labels (Phonetic Labels)

Tag name Semantics and functionality attribute Single label or double label
ruby Packages require phonetic characters double
rt Write zhuyin inside, rt tag is written inside Ruby double 
<p>Meng said<ruby>Chi<rt>chi</rt></ruby>
    <ruby>Influenced by<rt>mei</rt></ruby>
    <ruby>Wang<rt>wang</rt></ruby>
    <ruby>Liang<rt>liang</rt></ruby>delicious</p>
Copy the code

1.5 Adding text Labels

Tag name Semantics and functionality attribute Single label or double label
mark tag double

Note:

The W3C recommends that Mark be used to tag keywords in search results.

2 New HTML5 forms features

2.1 New properties of form controls

Placeholder: set prompt text; Form controls for text entry classes (such as text fields, password fields, text fields, and so on).

Autofocus: automatically obtain the focus without giving a value; Applies to all form controls.

Autocomplete: Sets whether the form control records input history. The value is on, the latter off; A form control that applies to a text input class.

Required: Sets the form control to mandatory or optional; No value is required; If required is set and not filled in, the submission will be prompted and cannot be submitted. Applies to form controls other than buttons.

Pattern: Specifies the format of the regular validation form control, applicable to text input type form controls. Verify when the form is submitted. If the verification fails, it will prompt and the form cannot be submitted. Empty input boxes do not validate and are often paired with required.

2.2 New value of the Type attribute of the input tag

Text input class

  • Email: email address.
  • Url: indicates the URL.
  • Number C. You can set the number Max, min, and step.
  • Search: indicates the search box.
  • Tel number c. The numeric keypad is displayed on the mobile terminal.
<! - email - >
<! -- Verify at the time of submission; Empty will not validate -->
<input type="email" name="email" placeholder="Please enter email address">

<! --url-->
<! -- Verify at the time of submission; Empty will not validate -->
<input type="url" name="url" placeholder="Please enter url">

<! - digital -- -- >
<! -- Can not input any character other than a number, with the Max \min\step attribute to set the valid range of the number, the submission is also validated; Empty do not validate -->
<input type="number" name="num">
<input type="number" name="num" min='10' max='100' step='10'>

<! -- Search box -->
<! -- < span style = "max-width: 100%; clear: both;
<input type="search" name="kw" placeholder="Search">

<! -- The phone number is the same as text, but with mobile devices, the numeric keypad will pop up directly -->
<input type="tel" name="tel_num" placeholder="Please enter your telephone number">
Copy the code

② Range selection box

  • Range Range selection box
<input type="range" name="range">
<input type="range" name="range" value="80">
<input type="range" name="range" value="80" max="100" min="0">
Copy the code

③ Color selection box

  • **color ** Color selection box
<input type="color" name="color">
Copy the code

④ Time and date selection class

  • Date: Select the date (year month day).
  • Month: Choose a year or a month.
  • Week: select the week of a year.
  • Time: Select the time (hour).
  • Datetime-local: select the date and time.
input type="date" name="date">
<input type="month" name="month">
<input type="week" name="week">
<input type="time" name="time">
<input type="datetime" name="datetime">
<input type="datetime-local" name="datetime">
Copy the code

2.3 New attributes for the Form label

The novalidate attribute: If this attribute is set to the form tag, the form submission will not be validated. No value is required for this property.

3 HTML5 audio and video

3.1 Audio and Video Labels

Tag name Function and semantics attribute Single label or double label
video video SRC Specifies the video address.

Width Sets the video width

Height Sets the video height

Controls Displays a control bar without a value

Muted, no value is required

Autoplay plays automatically without a value

Loop Sets the loop to play without a value

Preload is preloaded when the video is played by default. No value is required

Poster Specifies the address of the video cover image		 double
audio audio SRC Specifies the audio address.

Controls Displays a control bar without a value

Muted, no value is required

Autoplay plays automatically without a value

Loop Sets the loop to play without a value

Preload is preloaded when the video is played by default. No value is required		 double
source Importing resources (audio and video) SRC Specifies the address of the audio or video

Type Specifies the audio or video type		 single

3.2 Audio and Video Formats Supported by Browsers

① Video format

Mp4 is recommended. Webm OGg is supported by all browsersCopy the code

② Audio format

Mp3 recommended, all browsers support WAV OGGCopy the code

3.3 Audio and video Processing with high compatibility

<video controls>
        <source src=".. /sources/video/movie.mp4" type='video/mp4; Codecs = "avc1.42 E01E mp4a. 40.2" '>
        <source src=".. /sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src=".. /sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'>Your crappy browser does not support video</video>
Copy the code

4 New global attributes for HTML5

Contenteditable can be set to true or false, and the Settings element can edit the text inside hidden to add the property back to hide, as with display: None; Doesn't have to give valueCopy the code

5 HTML5 compatibility scheme

<! --[if lt ie 9]> <script src=".. /sources/js/html5shiv.js"></script> <! [endif]-->
Copy the code

Html5shiv.js was introduced in Internet Explorer 8 and later versions of the browser to enable the browser to recognize new H5 tags.