current position:Home>[Youth Camp] - a new tag commonly used in HTML5

[Youth Camp] - a new tag commonly used in HTML5

2022-01-27 04:21:35 MoonLight

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 .

copyright notice
author[MoonLight],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270421296179.html

Random recommended