“This is the 8th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The importance of HTML5

  • It was born in 1990
  • HTML4 came out in 1997 and lasted for 10 years
  • HTML5 emerged in 2008 and stabilized in 2012 (bonus period of mobile Internet)

HTML 5 new features

www.w3school.com.cn/html/

Semantic tag

<div class="header">Header</div>
  <div class="nav">Nav</div>
  <div class="body">
    <div class="article">
      Article
      <div class="section">
        Section
      </div>
    </div>
    <div class="aside">
      Aside
    </div>
  </div>
<div class="footer">Footer</div>

Copy the code
<header>Header</header>
  <nav>Nav</nav>
  <div class="body">
    <article>
      Article
      <section>Section</section>
    </article>
    <aside>Aside</aside>
  </div>
<footer>Footer</footer>
Copy the code
  • Clear and easy to read
  • Good for SEO and easy for search engines to identify page structure
  • Convenient device interpretation, such as blind reading

Form enhancement

 <form action="" method="get">
    <p>Email label:<input type="email"></p>
    <p>Digital label:<input type="number"></p>
    <p>Slider label:<input type="range"></p>
    <p>Search box tag:<input type="search"></p>
    <p>Box:<input type="date"></p>
    <p>Week box:<input type="week"></p>
    <p>In the box:<input type="month"></p>
    <p>Color box:<input type="color"></p>
    <p>Url box:<input type="url"></p>
    <div>
      <input type="submit">
      <input type="reset">
    </div>
</form>
Copy the code

Audio and Video labels

Before H5, embedded audio and video in web pages are generally implemented in Flash.

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
</video>
Copy the code

Canvas – Canvas+ SVG

HTML5’s Canvas element uses JavaScript to draw images on web pages.

A canvas is a rectangular area that you can control every pixel of.

Canvas has a variety of ways to draw paths, rectangles, circles, characters and add images.

This will be followed by a special issue comparing SVG.

<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0.0.150.75);
</script>
Copy the code

Drag and drop

Drag and Drop (Drag and Drop) are common features. It means that you grab something and drag it into a different position. Drag-and-drop is part of the HTML5 standard: any element is drag-and-drop.

<! DOCTYPEhtml>
<html>
  <head>
    <style type="text/css">
      #div1 {
        width: 120px;
        height: 120px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
    <script type="text/javascript">
      function allowDrop(ev) {
        ev.preventDefault();
      }

      function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
      }

      function drop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
      }
    </script>
  </head>
  <body>
    <p>Please drag and drop the image into the rectangle:</p>

    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img
      id="drag1"
      src="img.png"
      draggable="true"
      ondragstart="drag(event)"
    />
  </body>
</html>

Copy the code

The local store

Through Local Storage, Web applications can store data locally in the user’s browser.

Prior to HTML5, application data could only be stored in cookies, including each server request. Local storage is more secure and allows you to store large amounts of data locally without impacting the performance of your site.

Unlike cookies, the storage limit is much larger (at least 5MB), and the information is not transferred to the server.

Local storage via origin (via domain and protocol). All pages, from the source, are able to store and access the same data.

Web Worker

When a script is executed in an HTML page, the page is unresponsive until the script is complete.

Web workers are JavaScript running in the background, independent of other scripts, and do not affect page performance. You can continue to do whatever you want: click, select content, and so on, while the Web worker runs in the background.

geolocation

The HTML5 Geolocation API is used to get the user’s geographical location.

Because this feature may violate user privacy, user location information is not available unless the user consents.

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
Copy the code

datalist

It’s just that we often use UI components that others have already wrapped, so we don’t use them much. This tag is the Select API wrapped in HTML5.

<input id="fruits" list="list" />
<datalist id="list">
  <option value=The word "apple"></option>
  <option value="Banana"></option>
  <option value="Haw"></option>
</datalist>

Copy the code

Editable content

It is widely used, such as many web editors, content switching editing state, etc., can be achieved through this property.

<div class="edit" contenteditable='true'></div>
Copy the code

The interview guide

HTML5 was new ten years ago. Some applications are already very common. There’s still a lot of work to be done, and it’s a good opportunity to see what new H5 features Vite’s HMR technology uses.