TEG HTML YANG AMAT DIKETAHUI TETAPI BERGUNA-tutorial css-php.cn

TEG HTML YANG AMAT DIKETAHUI TETAPI BERGUNA

Susan Sarandon

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

asal

566 orang telah melayarinya

Hello semua, dalam artikel ini, saya akan memberitahu anda tentang 6 tag HTML yang kurang diketahui tetapi berguna. Anda boleh menggunakan elemen ini dalam aplikasi anda.

1. Butiran HTML Tag

Anda boleh menggunakan teg butiran untuk mencipta widget interaktif yang pengguna boleh klik untuk membuka atau menutup. Widget dimatikan secara lalai. Apabila dibuka, ia mengembang dan kandungan di dalamnya kelihatan.


<!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**

Salin selepas log masuk

ITTLE KNOWN BUT USEFUL HTML TAGS

Atribut

Buka : Menentukan butiran harus kelihatan (terbuka) kepada pengguna

2. Tag meter HTML

Menggunakan teg meter, anda boleh mentakrifkan ukuran skalar atau nilai pecahan dalam julat yang diketahui.

Contoh :

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>

Salin selepas log masuk

3. Tag tanda HTML

Anda boleh menyerlahkan bahagian teks menggunakan teg tanda.

Contoh :

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>

Salin selepas log masuk

Anda boleh menukar warna serlahan jika anda mahu.


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

Salin selepas log masuk

ITTLE KNOWN BUT USEFUL HTML TAGS

4. Tag set medan HTML

Anda boleh mengumpulkan elemen berkaitan dalam borang menggunakan teg set medan. Melukis kotak di sekeliling item.

Contoh :

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>

Salin selepas log masuk

Atribut

Dilumpuhkan: Menentukan bahawa sekumpulan elemen borang yang berkaitan harus dilumpuhkan
Nama: Menentukan nama untuk set medan

5. Tag keluaran HTML

Anda boleh menggunakan teg output untuk memaparkan hasil satu pengiraan.

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>

Salin selepas log masuk

Teg templat HTML

Jika anda ingin menyembunyikan beberapa kandungan apabila halaman aplikasi anda dimuatkan, gunakan elemen templat. Gunakan JavaScript untuk melihat.

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>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami meneliti 6 teg HTML yang kurang diketahui tetapi berguna.
Anda boleh menggunakan elemen ini dalam aplikasi anda.

Atas ialah kandungan terperinci TEG HTML YANG AMAT DIKETAHUI TETAPI BERGUNA. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!