New HTML5 tags

  1. New semantic labels, such as: article, header, nav, main, footer, value, section, figure
  2. Added input types: color, URL, email, date, week, time, number, range, search, and tel
  3. Added form control element placeholder to set default text box prompt text autofocus autocomplete keyword association
  4. Storage: Provides sessionStorage, localStorage, and local offline storage (using the manifest configuration file)
  5. Multimedia: Audio elements Audio, video elements vedio

Add play, pause, and volume controls for video.
The video tag is provided if Your browser does not support the content displayed

You can use dom to read the paused property of the video tag and call Video.play () to broadcast and video.pause() to pause

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

Copy the code

Here are three formats for video and audioThe attributes of the audio tag are the same as those of video

  1. dragTo make elements draggable, add attributesdraggable="true"On the set
  2. Geolocation, Canvas canvas, multi-threaded programming webworker, WebSocket protocol

Since canvas itself has no drawing ability, all drawing needs to be done in JS

<canvas id= "myCanvas" /> <script> const canvas = document.getElementById('myCanvas') const ctx = Canvas.getcontext ('2d') // create the context object cxt.moveto (10,10); CXT. LineTo (50, 150); CXT. LineTo (10, 50); cxt.stroke(); / / draw < / script >Copy the code

Geolocation API passes The navigator. Geolocation, through the navigator. Geoloaction. GetCurrentPosition () to obtain the current position, through watchPosition () to monitor position change, watchPosition returns an id, By calling the navigator. Geoloaction. ClearWatch (id) to stop monitoring

navigator.geolocation.getCurrentPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
});
Copy the code

Responsive layout

Or use the @ meta (min – width: 500 px) {}