Rumah >hujung hadapan web >tutorial css >TEG HTML YANG AMAT DIKETAHUI TETAPI BERGUNA
TEG HTML YANG AMAT DIKETAHUI TETAPI BERGUNA
- Susan Sarandonasal
- 2024-10-06 06:09:02783semak imbas
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**
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 :
<!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>
3. Tag tanda HTML
Anda boleh menyerlahkan bahagian teks menggunakan teg tanda.
Contoh :
<!DOCTYPE html> <html> <body> <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p> </body> </html>
Anda boleh menukar warna serlahan jika anda mahu.
mark {
background-color: red;
color: black;
}
4. Tag set medan HTML
Anda boleh mengumpulkan elemen berkaitan dalam borang menggunakan teg set medan. Melukis kotak di sekeliling item.
Contoh :
<!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>
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 :
<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>
- Teg templat HTML
Jika anda ingin menyembunyikan beberapa kandungan apabila halaman aplikasi anda dimuatkan, gunakan elemen templat. Gunakan JavaScript untuk melihat.
Gif :
<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>
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!