ITTLE KNOWN BUT USEFUL HTML TAGS-CSS Tutorial-php.cn

ITTLE KNOWN BUT USEFUL HTML TAGS

Susan Sarandon

Release： 2024-10-06 06:09:02

Original

566 people have browsed it

Hello everyone, in this article, I will tell you about 6 little-known but useful HTML tags. You can use these elements in your applications.

1. HTML details Tag

You can use the details tag to create an interactive widget that the user can click to open or close. The widget is off by default. When opened, it expands and the content inside is visible.


<!DOCTYPE html>
<html>
<body>


<details>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</details>

</body>
</html>


**Gif**

Copy after login

ITTLE KNOWN BUT USEFUL HTML TAGS

Attribute

Open : Specifies that details should be visible (open) to the user

2. HTML meter Tag

Using the meter tag, you can define a scalar measurement or a fractional value within a known range.

Example :

ITTLE KNOWN BUT USEFUL HTML TAGS


<!DOCTYPE html>
<html>
<body>
<label for="member">Member</label>
<meter id="member" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="register">Register:</label>
<meter id="register" value="0.6">60%</meter>
</body>
</html>

Copy after login

3. HTML mark Tag

You can highlight parts of a text using the mark tag.

Example :

ITTLE KNOWN BUT USEFUL HTML TAGS


<!DOCTYPE html>
<html>
<body>
  <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>

Copy after login

You can change the highlight color if you want.


mark {
  background-color: red;
  color: black;
}

Copy after login

ITTLE KNOWN BUT USEFUL HTML TAGS

4. HTML fieldset Tag

You can group related elements in the form using the fieldset tag. Draws a box around items.

Example :

ITTLE KNOWN BUT USEFUL HTML TAGS


<!DOCTYPE html>
<html>
<body>
<form >
 <fieldset>
  <legend>User:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit" value="Submit">
 </fieldset>
</form>
</body>
</html>

Copy after login

Attributes

Disabled: Specifies that a group of related form elements should be disabled
Name: Specifies a name for the fieldset

5. HTML output Tag

You can use the output tag to display the results of one calculation.

Gif :

ITTLE KNOWN BUT USEFUL HTML TAGS


<p><!DOCTYPE html><br>
<html><br>
<body><br>
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)"><br>
      <input type="range" id="a" value="50"><br>
      +<input type="number" id="b" value="25"><br>
      =<output name="x" for="a b"></output><br>
    </form><br>
</body><br>
</html></p>

Copy after login

HTML template Tag

If you want to hide some content when your application's page loads, use the template element. Use JavaScript to view.

Gif :

ITTLE KNOWN BUT USEFUL HTML TAGS


<p><!DOCTYPE html><br>
<html><br>
<body></p>

<p><button onclick="showContent()">Show hidden content</button><br>
<template><br>
  <h2>Flower</h2><br>
  <img src="https://picsum.photos/200" width="214" height="204"><br>
</template></p>

<p><script><br>
function showContent() {<br>
  let temp = document.getElementsByTagName("template")[0];<br>
  let clon = temp.content.cloneNode(true);<br>
  document.body.appendChild(clon);<br>
}<br>
</script></p>

<p></body><br>
</html></p>

Copy after login

Conclusion

In this article, we examined 6 little-known but useful HTML tags.
You can use these elements in your applications.

The above is the detailed content of ITTLE KNOWN BUT USEFUL HTML TAGS. For more information, please follow other related articles on the PHP Chinese website!