Article content: notes, feeling and experience in the process of learningCopy the code

An overview,

1, concept,

  • Narrow sense: the fifth version of THE HTML language
  • Broad: HTML5 itself +CSS3+JavaScript technology integration

1. HTML5 advantages

  • Improve usability and user friendliness
  • Better semantic tags
  • Can bring more multimedia elements (video and audio) to the site
  • A good alternative to FLASH and Silverlight
  • SEO friendly when it comes to crawling and indexing websites
  • Can be widely used in mobile applications and games
  • Good portability

2. Disadvantages of HTML5

  • The standard is not well supported by PC browsers
  • Almost all browsers below IE9 are incompatible

New HTML5 features

1. Add semantic labels

  • <header>: Header label
  • <nav>: Navigation TAB
  • <main>: Main label
  • <article>: Tags for independent content
  • <section>: Segment label
  • <aside>: sidebar tag
  • <footer>: Tail tag

Note: This semantic standard is mainly for search engines. Tag pages can be used multiple times. In IE9, these elements are converted to block-level elements. Other tags

2. Add multimedia labels

They make it easy to embed audio and video in your pages, rather than using outdated Flash and other browser plugins.

(1) Audio labels<audio>

format MIME-type IE9 Firefox3.5 Opera10.5 matched Safari3.0
Ogg audio/ogg Square root Square root Square root
MP3 audio/mpeg Square root Square root Square root
Wav audio/wav Square root Square root Square root

Note: Audio and video formats can be modified using format factory software

attribute value describe
autoplay autoplay If this property is present, the audio is played immediately after it is ready.
controls controls If present, the control, such as a play button, is displayed to the user.
loop loop If this property is present, the playback is restarted whenever the audio ends.
preload preload If this property is present, the audio is loaded when the page loads and ready to play. If “autoplay” is used, this property is ignored.
src url The URL of the audio to play 
<! -- Audio tags and attributes -->
    <! -- Controls display autoplay (Google disabled) loop -->
    <! If the name of the tag attribute is the same as the value of the attribute, then you can omit the value of the attribute.
    <audio src="media/snow.mp3" controls autoplay loop></audio>
    <! -- preload page loading, autoplay failure -->
    <audio src="media/snow.mp3" controls preload="preload" loop></audio>
    <audio src="media/snow.mp3" controls="controls"></audio>
<! -- Compatible writing for multiple audio formats -->
    <audio controls>
        <source src="media/snow.mp3" type="audio/mpeg">
        <source src="media/snow.ogg" type="audio/ogg">Your browser version is too early to support audio playback</audio>
Copy the code

(2) Video label<video>

format MIME-type IE9 Firefox Opera Chrome Safari
Ogg video/ogg x 3.5 + 10.5 + 5.0 + x
MP4 video/mp4 9.0 + x x 5.0 + 3.0 +
Webm video/webm x 4.0 + 10.6 + 6.0 + x

attribute value describe
autoplay autoplay Video ready autoplay (Google Browser added to reduce autoplay)
controls controls Displays the play control to the user
loop loop After playing whether to continue to play the video, loop playback
preload Auto (preload video), None (should not load video) Specifies whether to preload the video (ignore this property if autoplay is available)
src url Video URL
width px Set the player width
height px Setting the Player height
poster Imgurl Load the waiting screen picture
muted muted Mute play 
<! -- Video file labels and properties -->
  <! -- reduced automuted playback problem --> poster loaded wait;
  <! -- <video src="media/video.mp4" controls muted="muted" width="200px" height="300px" poster="images/pig.jpg"></video> -->
  <! Add multiple video resource files for different browsers -->
  <! -- <video controls width="200px"> <source src="media/video.mp4" type="video/mp4"> <source src="media/video.ogg" Type ="video/ogg"> Your browser version is too early to support video
   <video src="media/video.mp4" muted width="200px" height="300px" controls="controls"></video>
Copy the code

Note: Audio and video labels are the same, and browser support varies; a video label can be reduced to a muted attribute, whereas an audio label cannot be reduced. Video tabs are the focus, we often set autoplay, loop and set size properties without using controls.

3. Add form labels

(1) Input labels

Attribute values describe
type=”email” Restrict user input to email
type=”url” Restrict user input to url type
type=”date” Restrict user input to a date type
type=”time” Restrict user input to time type
type=”month” Restricted user input must be a month type
type=”week” Restrict user input must be weekly
type=”number” Restrict user input to be numeric
type=”range” slider
type=”tel” Mobile phone number
type=”search” The search box
type=”color” Generate a color selection form

(2)<datalist>The label

  • provisions<input>List of possible options for the element
  • Contains a set of<option>Elements that represent predefined optional values in<input>The element is automatically responded to during input<option>The value of the element
  • The binding of<input>The tag must set the list attribute, whose value is equal to<datalist>The id attribute value of the tag
<form action="">Name:<input type="text" value=""><br>Email address:<input type="email"><br>Personal Website:<input type="url"><br>Birthday:<input type="date"><br>Time:<input type="time"><br>Month:<input type="month"><br>Weeks:<input type="week"><br>Age:<input type="number" max="100" min="0" step="4" value="4"><br>Age range:<input type="range" max="100" min="0" step="4" value="4"><br>Mobile phone:<input type="tel"><br>Search:<input type="search"><br>Color:<input type="color"><br>City:<input type="text" list="list01"><br>
        <! -- Predefined options -->
        <datalist id="list01">
            <option value="Guangzhou">gz</option>
            <option value="Shenzhen">sz</option>
            <option value="Beijing">bj</option>
            <option value="Shanghai">
        </datalist>
        <input type="submit" value="Submit">
    </form>
Copy the code

(3) Form attributes

attribute value describe
required required Having this property means that the form cannot be empty and must be filled in
placeholder Tooltip text The prompt message of the form will not be displayed if there is a default value
autofocus autofocus Automatic focus attribute, automatically focus to the specified form after page loading, usually put 1 in the page
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 you typed earlier. It has been opened by default, for example, Autocomplete = “on”, and autocomplete= “off” is closed. It needs to be put in the form with the name attribute and submitted successfully
multiple multiple You can select multiple file submissions