Semantic labels

Html5 semantic tags make it easier for developers to build a clear layout of a page

The label describe
<header> Defines the header area of the document
<footer> Defines the tail area of the document
<nav> Define the navigation of the document
<section> Define sections in the document
<article> Define the article
<aside> Define content outside the page
<details> Define additional details that the user can see or hide
<summary> The tag contains the title of the Details element
<dialog> Define dialog
<figure> Define self-contained content, such as charts
<main> Define the document main content
<mark> Define the main content of the document
<time> Define the date/time

The form

  • Html5 modifies some new input features, improving better input control and validation
  • Html5 has five new form elements
The label describe
<datalist> Users see a drop-down list of domain definition options as they enter data
<progress> Progress bar, showing connection/download progress
<meter> A graduated value used for certain measures, such as temperature, weight, etc
<keygen> Provides a reliable way to authenticate a user by generating a public and private key
<output> Used for different types of output, such as acid or script output
  • New form attributes in HTML5
attribute describe
placehoder Input box default prompt text
required Whether the input is nullable is required
pattern Describes a regular expression that validates the input value
min/max Sets the element minimum/maximum value
step Specifies a legal number interval for the input field
height/wdith For image typesLabel image height/width
autofocus Specifies that the domain automatically gets focus when the page loads
multiple provisionsThe element allows you to select multiple values

Audio and Video

Html5 provides standards for audio and video files.

The < audio > audio:

<audio src=""></audio>
Copy the code
<audio controls>// Controls property to add play, pause, and volume controls.<source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element. // Display text when the browser does not support it</audio>
Copy the code

<audio>Tag attributes

attribute describe
src URL to play audio
preload preload
autoplay Automatically play
loop Loop for
controls The browser comes with a control bar

< video > video:

<video src=""></video>
Copy the code
<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">Your browser does not support the Video TAB.</video>
Copy the code

<video>Attributes of tags

attribute describe
src The URL to play the video
poster Video cover, no picture displayed when playing
preload preload
autoplay Automatically play
loop Loop for
controls The browser comes with a control bar
width Width of the video
height Video height

Canvas

  • The Canvas element is used to draw graphics on web pages.
  • The Canvas element of HTML5 uses JavaScript to draw images on web pages. The canvas element itself has no drawing ability. All of the drawing must be done inside JavaScript.
  • A canvas is a rectangular area, each pixel of which can be controlled.
  • Canvas has a variety of ways to draw paths, rectangles, circles, characters and add images.

Example: (1) Draw a line

<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
    </canvas>
    <script type="text/javascript">
        var c=document.getElementById("myCanvas");
        var cxt=c.getContext("2d");
        cxt.moveTo(10.10);
        cxt.lineTo(150.50);
        cxt.lineTo(10.50);
        cxt.stroke();
    </script>
</body>
Copy the code

(2) Draw a circle

  • The fill() method fills the current image (path). The default color is black.
  • The arc () method to create arc/curve (used to create a circle or part of the circle) : context. The arc (x, y, r, sAngle eAngle, counterclockwise).

  • Center: the arc (100,75,50,0Math. PI, 1.5Math.PI)
  • Starting Angle: arc(100,75,50,0,1.5* math.pi)
  • End Angle: arc(100,75,50,0Math. PI, 1.5Math.PI)
  • Cxt. beginPath() : indicates the start path. After you enable this function, you can set related properties again. Cxt.closePath() : closes a path.

(3) Color gradient

  • The createLinearGradient() method creates a linear gradient object. Gradients can be used to fill rectangles, circles, lines, text, and more.
  • The addColorStop() method specifies the color and position in the gradient object.

(4) Place an image on the canvas

The drawImage() method draws an image, canvas, or video on a canvas. Can also draw parts of an image and/or increase or decrease the size of the image.

  • JS syntax 1: Position the image on the canvas:
context.drawImage(img,x,y);
Copy the code
  • Position the image on the canvas and specify the width and height of the image:
context.drawImage(img,x,y,width,height);
Copy the code
  • JS syntax 3: Clip the image and position the clipped part on the canvas:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
Copy the code