ホームページ > 記事 > ウェブフロントエンド > あまり知られていないが便利な HTML タグ
皆さんこんにちは。この記事では、あまり知られていないが便利な HTML タグ 6 つについて説明します。これらの要素をアプリケーションで使用できます。
details タグを使用して、ユーザーがクリックして開閉できる対話型ウィジェットを作成できます。ウィジェットはデフォルトではオフになっています。開くと拡大して中身が見えます。
<!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**
属性
Open : 詳細がユーザーに表示される (開く) ことを指定します
meter タグを使用すると、スカラー測定値または既知の範囲内の分数値を定義できます。
例 :
<!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>
マーク タグを使用して、テキストの一部を強調表示できます。
例 :
<!DOCTYPE html> <html> <body> <p><mark>Lorem Ipsum</mark> is simply dummy text of the printing and typesetting industry.</p> </body> </html>
必要に応じて、ハイライトの色を変更できます。
mark {
background-color: red;
color: black;
}
fieldset タグを使用して、フォーム内の関連する要素をグループ化できます。アイテムの周囲にボックスを描画します。
例 :
<!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>
属性
無効: 関連するフォーム要素のグループを無効にすることを指定します
Name: フィールドセットの名前を指定します
output タグを使用すると、1 つの計算の結果を表示できます。
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>
アプリケーションのページが読み込まれるときに一部のコンテンツを非表示にしたい場合は、template 要素を使用します。 JavaScript を使用して表示.
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>
この記事では、あまり知られていないが便利な 6 つの HTML タグを検討しました。
これらの要素をアプリケーションで使用できます。
以上があまり知られていないが便利な HTML タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。