10 great HTML5 features

attribute to define an image map (a clickable link region). Clickable areas can be any of these shapes, rectangular, circular or polygonal areas. If no shape is specified, the entire image is considered.

Example:

<div> <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap"> <map name="circusmap"> <area Href ="elephant.htm"> <area shape="rect" coords="222,141,318, "Href ="lion.htm"> <area shape="rect" coords="343,111,455, "Href ="horse.htm"> <area shape="circle" Coords = "426409100" href = "clown. HTM" > < / map > < / div >Copy the code

Running results:

skills

Map has its drawbacks, but you can use it for visual demonstrations.

🔥 markThe label

<p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
Copy the code

Running results:

skills

You can change the highlighting color using CSS:

mark {
  background-color: green;
  color: #FFFFFF;
}
Copy the code

🔥 data – * attributes

The data-* property is used to store custom data that is specific to the page or application. You can use the stored data in JavaScript code to create more user experiences.

The data-* property consists of two parts

• Attribute names cannot contain any uppercase letters and must be preceded by”data-“Followed by at least one character
• The property value can be any string

Example:

<h2> Know data attribute </h2> <div class="data-attribute" id="data-attr" data-custom-attr="You are just Awesome!" > I have a hidden secret! </div> <button onclick="reveal()">Reveal</button>Copy the code

In JS:

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
Copy the code

** Note: ** To retrieve the values of these attributes in JS, you can use getAttribute(‘data-custom-attr’)g, but the standard way is to dataset.

skills

You can use it to store some data in a page and then pass it to the server using REST calls.

🔥 output label

The

tag represents the result of a calculation or user action.

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
   <input type="number" id="a" value="0">
          * <input type="number" id="b" value="0">
                = <output name="x" for="a b"></output>
</form>
Copy the code

skills

If you want to perform any calculations in the client JS and want the results to be reflected on the page, you can use < Output >, eliminating the extra step of getting the element using getElementById().

🔥 datalist

The

Example:

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>  
Copy the code

skills

DataList behaves much like a select drop-down list, but it is only a prompt and does not restrict what the user can type in the input field

The Select TAB creates a menu. The options in the menu are specified by the Option TAB. A select element must contain an option element,

In general, they all display a dropdown form box, but the Select TAB can only select from the options it provides, whereas the Datalist TAB allows you to not only select, but also enter other options yourself.

🔥 Range (the Slider)

Range is an input type, given a range selector of type slider.

<form method="post">
    <input 
         type="range" 
         name="range" 
         min="0" 
         max="100" 
         step="1" 
         value=""
         onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div>
Copy the code

🔥 meter

The element is used to display a known range of scalar or fractional values.

<label for="home">/home/atapas</label> <meter id="home" value="4" min="0" max="10">2 out of 10</meter><br> <label For = "root" > / root < / label > < meter id = "root" value = "0.6" > 60% < / meter > < br >Copy the code

skills

Do not use as a Progress bar, the Progress bar corresponds to the TAB.

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Copy the code

🔥 Inputs

For input tag types, the most common are text, password, etc. Here are some of the less common syntax.

required

Required Input field Mandatory.

<input type="text" id="username1" name="username" required>
Copy the code

autofocus

The text input field is set to get focus when the page loads:

<input type="text" id="username2" name="username" required autofocus>
Copy the code

Verify with regular expressions

You can use the regex to specify a pattern to validate the input.

<input type="password" name="password" id="password" placeholder="6-20 chars, at least 1 digit, 1 uppercase and one lowercase letter" pattern="^(? =.*\d)(? =.*[a-z])(? =. * [a-z]). 6, 20} {$" autofocus required >Copy the code

Color picker

A simple color picker.

<input type="color" onchange="showColor(event)"> <p id="colorMe">Color Me! </p>Copy the code

Original text: dev. To/atapas / 10 – u…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.