HTML is not a new technology, do front-end students to master HTML is the first. This article will list some useful HTML tags or attributes that you don’t usually use.

1. The details TAB

Using the < Details > tag, we can easily control the expansion and collapse of content.

Here’s how it’s used:

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
Copy the code

Look at the effect

But this tag does not support IE

2. Contenteditable attribute

Contenteditable is a global property, and you can set the contenteditable property for almost all HTML tags.

A few things to note:

  • When Contenteditable is true or an empty string, the corresponding element is editable.
  • Cannot be edited when contenteditable is true or a character other than an empty string.
  • If no value is set for Contenteditable, it defaults to an empty string and can be edited.
  • Contenteditable is inherited. If the parent element has contenteditable= True, all child elements are editable.

Here’s the code

<div contenteditable=true>
    <p>
        <span>Edit this content to add your own quote</span>
    </p>
</div>
Copy the code

Take a look at the effect:

3. mark

The <mark> tag can be set to highlight text.

Usage:

<p>Several species of <mark>salamander</mark> inhabit the temperate rainforest of the Pacific Northwest.</p>
Copy the code

The effect is as follows:

4. Customize the data property

You can customize some attributes in HTML tags with data-*, and then you can get custom attributes in JS or CSS.

Here’s the code

<li data-fullname="Thomas Cruise Mapother IV">Tom Cruise</li> // css li:after { content: 'FullName: ' attr(data-fullname); position: absolute; top: -22px; left: 10px; background: black; color: white; padding: 2px; border: 1px solid #eee; opacity: 0; The transition: 0.5 s opacity; }Copy the code

The full name will be displayed when the mouse hover over it:

Custom attribute values can also be obtained in JS

this.dataset.fullname
Copy the code

5. The output element

The <output> tag is displayed as the calculated result.

Here’s how it’s used

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result" for="a b"></output>
</form>
Copy the code
  • For: Describes the relationship between the elements used in the calculation and the result of the calculation.
  • Form: Defines one or more forms to which an input field belongs.
  • Name: Defines the unique name of the object.

This label does not support IE.

6. Datalist element

The <datalist> element contains a set of <option> elements that represent optional values for other form controls.

Here’s how it’s used

<label for="ice-cream-choice">Choose a flavor:</label> <input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" /> <datalist id="ice-cream-flavors"> <option value="Chocolate"> <option value="Coconut"> <option  value="Mint"> <option value="Strawberry"> <option value="Vanilla"> </datalist>Copy the code

7. The map element

The <map> tag is used with the <area> tag to make a specific area of the image clickable.

Here’s how it’s used

< p id = "choose" > < / p > < the map name = "it" > < area shape = "poly real coords" = "130147200107254219130228" href = "# HTML" Onclick = "onAreaClick (' HTML ')" Alt = "HTML" / > < area shape = "poly real coords" = "130147130228,6,219,59,107" href = "# CSS" Onclick = "onAreaClick (' CSS ')" Alt = "CSS" / > < area shape = "poly real coords" = "130147200107130,4,59,107" href = "# JavaScript" onclick="onAreaClick('JavaScript')" alt="JavaScript" /> </map> <img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info2.png" alt="MDN infographic" />Copy the code

The effect is as follows:

8. Meter elementswithProgress element

The <meter> and <progress> tags are used to indicate the ratio and are displayed as progress bars by default.

They can be used as follows:

The < meter > usage

<label for="fuel">Fuel level:</label>

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

Copy the code

The < progress > usage

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>
Copy the code

Unlike <meter>, the <progress> attributes are few and the min attribute is not supported, and the default minimum value is always 0.

But <progress> is compatible with almost all browsers, while <meter> is not compatible with IE.

9. Dialog elements

The <dialog> tag is used to display a dialog box.

It can be used as follows:

<dialog open> <p>Greetings, one and all! </p> </dialog>Copy the code

It’s not very compatible and doesn’t support Internet Explorer or Safari.

10. Picture element

The <picture> element is similar to the <img> element in that it displays images, but is more powerful than the <img> element.

  • can only load one image and always load and display the same image on any device, which can cause poor display on some devices.
  • can be embedded with multipleelements, you can use SRcset and media to achieve different resolutions to display different pictures, to achieve the best display effect.

Here’s the basic usage:

<picture>
    <source srcset="https://interactive-examples.mdn.mozilla.net/media/cc0-images/surfer-240-200.jpg"
            media="(min-width: 550px)">
    <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fda16dfe9d42473ab91bcec54629e4ab~tplv-k3u1fbpfcp-zoom-1.image" alt="" />
</picture>
Copy the code

By resizing the browser window, surfer-240-200. JPG is displayed when the browser width is greater than 550, otherwise the default image defined in IMG is displayed.

11. Input element

< input > tag light type attribute has more than 20, in addition to the commonly used “text”, “number”, “checkbox” and so on, mainly the following a few less but useful properties.

Required

<input type="text" required/>
Copy the code

Pick color

<input type="color" />
Copy the code

Range

<input type="range" />
Copy the code

Email

<input type="email" placeholder="email" required />
Copy the code

Regex (^(? =.\d)(? =.[a-z])(? =. * [a-z]). 6, 20} {$)

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

The sample code in the article has been uploadedGitHub