What new features are added to H5

preface

2.form enhancement

3. Video and audio

4.Canvas drawing

5.SVG drawing

6. Geolocation   API )

7. Drag and drop API

8.Web Worker

9.Web Storage

10.Web Socket

summary

preface

In this issue, we will summarize a question often asked in the interview, that is, what are the new features of H5, and the new features of H5 are often used in practical work. This chapter mainly summarizes, so there is no in-depth record. If you want to have an in-depth understanding, you need to study it separately~

1. Semantic label

The semantic tags added in HTML5 mainly include:
< article >, < section >, < NAV >, < side >, < header >, < footer >, < time > and so on

2.form enhancement

  • New Input type attributes: number, data, month, week, time, email, url, etc;
  • New unique attribute of Input tag

code:

<input type="number" name="demoNumber" min="1" max="100" step="2"/>
<input type="email" name="email" placeholder="Please enter the registration email" />
<input type="url" placeholder="Please enter the web address" name="url" />
<input type="tel" placeholder="Enter phone" name="phone"/>
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
<input type="date" name="datedemo" />
<input type="color"/>
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
Input Unique attributes added to the label
<input type="text" autofocus="autofocus"/>
1)autofocus Property this property can be set in the current page input Get focus after the tag is loaded.
2)max,min,step These are all related to numbers.
3)placeholder:Prompt information attribute, with demo. 
4)multiple: Used for file upload control. After this property is set, multiple files can be uploaded.

3. Video and audio

The code is as follows:

<!-- Video tag -->
<video src="url" controls="controls"></video> //src video URL controls display controls, such as play buttons
<!-- Audio tag -->
<audio src="url" loop="loop" muted="muted"></audio> //src audio URL loop playback muted playback at the end of audio

4.Canvas drawing

         The canvas element of HTML5 uses JavaScript to draw images on Web pages. The canvas is a rectangular area that controls each pixel. Canvas has many ways to draw paths, rectangles, circles, characters and add images.

Case code:

<html>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</html>
<script>
    var c=document.getElementById("myCanvas"); //Use the id to find the canvas element
    var cxt=c.getContext("2d"); //getContext("2d") object is a built-in HTML5 object, which has a variety of drawing paths, rectangles, circles, characters and methods to add images.
    cxt.fillStyle="#Ff0000 "; / / use the fillStyle method to dye it red.
    cxt.fillRect(0,0,150,75);  //The fillRect method specifies the shape, position and size.
</script>

effect:  

 

 

5.SVG drawing

         SVG (Scalable Vector Graphics) is an HTML5 tag used to draw vector graphics. As long as the XML attribute is defined, the image elements consistent with it can be obtained.  

         Before using SVG, add tags to the HTML body. Like other HTML tags, you can add ID attributes to SVG tags. You can also add css styles, such as "border style: solid; border width: 2px;". SVG tags have common attributes with other HTML tags. You can add height and width to svg tags with height="100px" width="200px".

Case code:

<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
    <!-- appoint x1,y1,x2,y2 Value to represent the start and end coordinates, in style Property“ stroke:Green;"Specifies the color for the line stroke-width:2 Sets the width for the line -->
    <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
    <!-- Center of circle cx="55" cy="55",radius r="50",fill="#219E3E"Fill color, stroke="#17301d "stroke width =" 2 "line color and width -- >
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>

effect:  

 

6. Geolocation   API )

         Geolocation is one of the important features of HTML5. It provides the function of determining the user's location. With this feature, applications based on location information can be developed, so that developers can easily realize location search, map application, navigation and other functions without the help of other software, which is of epoch-making significance.

We use the getCurrentPosition(success(position),error(err),options) method to get the geographic location of the current user

    success(position)The callback function is called when geographic information is obtained, in which position A parameter is an object that includes:
          latitude(latitude)
         longitude(longitude)
         altitude(Altitude)
         accuracy(The accuracy of latitude and longitude in meters)
         latitudeAccuracy(Accuracy of altitude in meters)
         heading(Forward direction of equipment),speed(Forward speed of equipment in units m/s)
         timestamp(Time to get location). 
   error(err)The call back function is called when the geographic location acquisition fails, where err The parameter has two properties:
          code and message,code{1:Indicates that the user rejected the location service,2:Unable to get location information,3:Get information timeout error},message Is a string representing an error message.
   opations Is a list of optional properties, including: 
          enableHighAccuracy(Is high-precision geographic location information required),Value is true or false. 
         timeout(Make a timeout limit for geographic information acquisition. If it times out, an error will be returned),The value is a number in milliseconds.
         maximumAge(Make a limit on the effective time of caching geographic location information),The value is a number in milliseconds.

Directly on the code

<script>
  //Determine whether the browser supports Geolocation API
  if ('geolocation' in navigator) {
    //Call navigator.location.getcurrentposition
    navigator.geolocation.getCurrentPosition(successCB, errorCB,{
      // Indicates that the browser obtains a high-precision location. The default is false
      enableHighAccuracy: true,
      // Specifies the timeout for obtaining the geographic location. The default is unlimited, and the unit is milliseconds
      timeout: 5000,
      // Maximum validity period. This parameter specifies how long to obtain the location again when repeatedly obtaining the geographic location.
      maximumAge: 3000
    })
  } else {
    alert('I won't support it geolocation')
  }
  //Callback function on success
  function successCB(res) {
    console.log('dimension' + res.coords.latitude);   //Dimension 39.8218870257394
    console.log('longitude' + res.coords.longitude);  //Longitude 116.28083042845932
  } 
  //Callback function on failure
  function errorCB(res) {
    console.log(res)
  }
</script>

7. Drag and drop API

  HTML5 provides a drop & drop API for Drag and drop behavior. Drop represents Drag and drop represents drop. The main events are as follows. Bind the corresponding events when using.

//Event type
/*
//The event that the dragged object can start
     dragstart:Drag start event. (drag start)
     drag:From the beginning of dragstart to the end of dragend, it appears continuously during dragging. (drag event)
     dragend:Drag end event. (drag end)

//The event that can be triggered by the target object you drag to
     dragenter:Drag an event into the current element area. (drag into)
     dragover:Drag to the area event of the current element, which is triggered continuously during the drag. (suspension event)
     dragleave: Drag out the current element area event. (drag out)
     drop:The event that the current element area stops dragging. ps:drop often occurs before the drop event (drop event)
*/

Note: when using discarded event (drop), you need to call e.preventDefault() in dragover to trigger drop.  .

8.Web Worker

Web worker is a JavaScript running in the background. It is independent of other scripts and will not affect the performance of the page. You can continue to do whatever you like: click, select content, etc., while the web worker is running in the background.

The main thread can create a child thread in the way of new Worker("worker.js"); at the same time, it listens for the value returned by the child thread in the way of worker. Onmessage = e = > {console. Log (e.data)}; the child thread has a global variable self, which is equivalent to window, and transmits information to the main thread in the way of self.postMessage(result)

Case code:

worker.js file

//worker.js
var i=0;
function timedCount()
{
    i=i+1;
    postMessage(i);
    setTimeout("timedCount()",500);
}
timedCount();

worker.html file, in which a new thread is created using Web Worker simulation  

<html>
  <p>Count: <output id="result"></output></p>
  <button onclick="startWorker()">start-up</button> 
  <button onclick="stopWorker()">Stop working</button>
</html>
<script>
  var w;
 function startWorker() {
     if(typeof(Worker) !== "undefined") {
         if(typeof(w) == "undefined") {
             w = new Worker("./demo_workers.js");
         }
         w.onmessage = function(event) {
             document.getElementById("result").innerHTML = event.data;
         };
     } else {
         document.getElementById("result").innerHTML = "Sorry, your browser doesn't support it Web Workers...";
     }
 }
  
 function stopWorker() 
 { 
     w.terminate();
     w = undefined;
 }
</script>

  [warm tip] Chrome browser does not allow web worker s to be loaded locally. You can deploy files to the server and access them through the browser, or try another browser. It is said that Microsoft Edge is OK on the Internet, but I still failed in the test. Finally, I passed the test under IE.

9.Web Storage

Web Storage provides two API s: sessionStorage and locaStorage

  • The storage size is generally 5MB
  • Storage location: it is stored on the client and does not interact with the server
  • Storage content type: both locaStorage and sessionStorage can only store string types. For complex objects, you can use stringify and parse of JSON objects.
  • sessionStorage when the browser page closes, the data disappears.
  • And locaStorage data are permanently stored locally in the client. Even if the page is closed, the data will not disappear. It can be used again when it is opened next time.

10.Web Socket

WebSocket protocol is essentially a TCP based protocol. WebSocket makes the data exchange between the client and the server easier. After obtaining the WebSocket connection, you can send data to the server through the send() method and receive the data returned by the server through the onmessage event.

summary

This chapter records some new and commonly used features of H5. Some contents are not recorded in depth. I'm tired and tired. I'll record them separately when I have time. Look forward to it

Tags: html5

Posted on Thu, 09 Sep 2021 23:22:53 -0400 by kaushikgotecha