Understand what HTML5 is

HTML5 adds semantic tags

  • Label semantics

    • In the past, when making web layouts, we used to use divs. Div is just a plain block-level tag that has no semantics for search engines.

  • Added semantic tags

    • : Header tag

    • : the body tag
    • : independent content tag
    • : Section tag
    • <footer> : Tail tag

  • Matters needing attention

    • Semantic standards are aimed at search engines
    • The new TAB can be used multiple times in the page
    • In IE9, these elements need to be converted to block-level elements
      header.nav.main {
      display: block;
  }
Copy the code
    • Mobile devices prefer to use these tags
    • HTML5 also adds a number of other tags, linked below: developer.mozilla.org/zh-CN/docs/…

HTML5 adds multimedia tags

  • Multimedia tags: Use them to make it easy to embed audio and video on a page, rather than using outdated Flash and other browser plug-ins.

    • <audio> Audio label

      1. HTML5 can natively support playback of audio files without the use of plug-ins, although the supported formats are limited.

      Audio format:

      1. Syntax format 
         <audio src="File Address" controls="controls"></audio>

 <! -- compatible writing -->
 <! < span style = "box-sizing: border-box; color: RGB (51, 51, 51); line-height: 25px; font-size: 14px! Important;"
  <audio controls="controls">
    <source src="happy.mp3" type="audio/mpeg">
    <source src="happy.oog" type="audio/ogg">Your browser does not currently support audio tags</audio>
Copy the code
      2. Common properties
        attribute value describe
        autoplay autoplay Play the audio as soon as it’s readyChrome disables this property
        controls controls Displays controls, such as play buttons, to the user
        loop loop Restart when the audio ends
        preload preload The audio is loaded when the page is loaded and ready to play; If autoplay is used, this property is ignored
        src url The URL of the audio to play
      • Note: We don’t use controls as a property because different browsers load them differently. Later you can use JS to control playback.

    • <video> Video tag

      1. HTML5 can natively support the playback of video files without the use of plug-ins, although the supported formats are limited.

      Video format:

      1. Syntax format

         <video src="File Address" controls="controls"></video>

 <! -- compatible writing -->
 <! < span style = "box-sizing: border-box; color: RGB (51, 51, 51); line-height: 25px; font-size: 14px! Important;"
  <video controls="controls">
    <source src="happy.mp4" type="video/mp4">
    <source src="happy.oog" type="video/ogg">Your browser does not currently support the video TAB</video>
Copy the code

      2. Common properties

        attribute value describe
        autoplay autoplay Play the video as soon as it’s readyChrome disables this property(Use muted to address autoplay)
        controls controls Displays controls, such as play buttons, to the user
        loop loop Restart when the video ends
        preload Auto (preloading), None (not loading) Specifies whether to preload the video (ignore this property if using Autoplay)
        src url The URL of the audio to play
        width px Set the player width
        height px Setting the player height
        poster imgurl Load the waiting screen image
        muted muted Mute play

    • conclusion

      • Audio and video tags are basically the same
      • Browser support varies
      • You can add the muted attribute to the video label to automatically mute video, but not audio
      • The video TAB is the key, often set auto play, loop and set size properties, do not use controls controls.

HTML5 added form tags

  • Enter the label

    • H5 adds the <input> form type

      1. Type = “email” Specifies the email type
      2. Type = “URL” Specifies the URL type
      3. Type = “date” limits user input: date type
      4. Type = “time” Specifies the time type
      5. Type = “month” Specifies the month type
      6. Type = “week” Specifies the type of a week
      7. Type = “number” limit user input: number type (min, Max)
      8. Type = “range” slider (min, Max)
      9. Type = “tel” Mobile phone number
      10. Type = “search” Search box
      11. Type = “color” generates a color selection form

    • The < datalist > tag

      • Meaning: Specifies a list of possible options for the element
      • Contains a set of
      • The bound <input> tag must have alist attribute equal to the ID attribute of the <datalist> tag.
        1. Double label
        2. A single tag

  • The form properties

    attribute value describe
    required required mandatory
    placeholder Tooltip text Form prompt. If there is a default value, it will not be displayed
    autofocus autofocus Auto focus attribute, page loading completed auto focus to the specified form, the general page put 1
    autocomplete off / on When the user starts typing in the field, the browser should display the options to fill in the field based on the values previously typed. It is enabled by default (on).
    multiple multiple You can select multiple files to submit

    Note: the autocompleteYou need to put a name attribute inside the form Simultaneously successfully submitted