This is the third day of my participation in the August Text Challenge.More challenges in August

One, foreword

Today’s homework is going well, but typescript and React pecking is a bit tricky. After the activity is over, we will focus on the typescript and React pecking. Today I went over the course of the last few days and took notes.

Second, the content

I’m going to talk about some of the new tags that are commonly used in HTML5

1. New media labels

(1) audio

Used to define audio content

<audio src="./music.mp3" type="media/mp3"></audio>
Copy the code
  • Used to define the content of an audio class
  • Need to close
  • The type can be omitted

(2) video

Used to define video content

<video src="./movie.mp4" type="media/mp4"></video>
Copy the code
  • Used to define the content of a video class
  • Need to close
  • The type can be omitted

(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 the code
  • When multiple media resources are defined, they are selected based on compatibility
  • Need to close
  • The type attribute 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 the code
  • Will be ininputForm a drop-down list for users to select, the content of the drop-down list indatalistIn eachoptionIt’s an option
  • The value of the drop-down option isoptionthevalueattribute
  • datalistNeed to close,optionYou don’t have to close it

3. New semantic labels

<article><article>  <! -- Define page-independent content area -->
<aside></aside>  <! Define page sidebar content -->
<header></header>  <! Define the header area of the page
<footer></footer>  <! Define the end area of the page
<mark></mark>  <! Define marked text -->
<nav></nav>  <! Define the navigation area of the page -->
<progress></progress>  <! Define a progress bar -->
<ruby><ruby>  <! -- Define ruby comments -->
<time></time>  <! -- Define date or time -->
Copy the code
  • All belong to semantic tags, and all need to be closed

4. Canvas

Canvas is a new way of drawing images and a new tag of H5

<canvas id="myCanvas" width="200" height="200"></canvas>
Copy the code
  • Canvas needs to close tags
  • Drawing a Canvas image requires js

I hope you can point out any questions in the comments section, AND I will correct them in time.

New people on the road, but also include more. I am MoonLight, a fledgling small front end.