This is my participation 8 The fourth of the yuegengwen challenge 3 God , Check out the activity details ：8 Yuegengwen challenge

One 、 Preface

The way of doing homework today is still very smooth , Namely typescript collocation React It's a little difficult to peck on the , When the activity is over, we will take care of these two goods . Today I went to turn over the courses of the previous few days , Take notes .

Two 、 Content

It's mainly about HTML5 New labels commonly used in

1. New media label

(1) audio

Used to define audio content

<audio src="./music.mp3" type="media/mp3"></audio>
 Copy code 

• Used to define the content of audio class
• Need to close
• type Omission

(2) video

Used to define video content

<video src="./movie.mp4" type="media/mp4"></video>
 Copy code 

• Used to define the content of the video class
• Need to close
• type Omission

(3) source

Used to define multimedia resources （video and audio）

<video>
    <source src="./movie.mp4"></source>
    <source src="./movie.mkv"></source>
</video>
<audio>
    <source src="./music.mp3"></source>
    <source src="./music.xxx"></source>
</audio>
 Copy code 

• When defining multiple media resources , Will choose between the two based on compatibility
• Need to close
• type Property can be omitted

2. New form elements

(1) input list And datalist

<input list="browsers">
<datalist>
    <option value="Internet Explorer">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
    <option value="Firefox">
</datalist>
 Copy code 

• Will be in input Form a drop-down list for users to choose , The contents of the drop-down list are datalist in , each option It's an option
• The value of the drop-down option is option Of value attribute
• datalist Need to close ,option No closure required

3. New semantic tags

<article><article>  <!-- Define page independent content areas -->
<aside></aside>  <!-- Define page sidebar content -->
<header></header>  <!-- Define the header area of the page -->
<footer></footer>  <!-- Define the tail area of the page -->
<mark></mark>  <!-- Define marked text -->
<nav></nav>  <!-- Define the navigation bar area of the page -->
<progress></progress>  <!-- Define a progress bar -->
<ruby><ruby>  <!-- Definition ruby notes -->
<time></time>  <!-- Define the date or time -->
 Copy code 

• All belong to semantic tags , And all need to be closed

4. Canvas

canvas It is a new way of image rendering , yes h5 The new label

<canvas id="myCanvas" width="200" height="200"></canvas>
 Copy code 

• canvas Need to close the label
• draw canvas Pictures need to use js

If you have any questions, I hope you can point them out in the comment area , I correct it in time .

New people on the road , Please also include .
I am a MoonLight, A new little front end .