あまり知られていないが便利な HTML タグ-CSSチュートリアル-php.cn

あまり知られていないが便利な HTML タグ

Susan Sarandon

リリース： 2024-10-06 06:09:02

オリジナル

746 人が閲覧しました

皆さんこんにちは。この記事では、あまり知られていないが便利な HTML タグ 6 つについて説明します。これらの要素をアプリケーションで使用できます。

1. HTML詳細タグ

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

ログイン後にコピー

ITTLE KNOWN BUT USEFUL HTML TAGS

属性

Open : 詳細がユーザーに表示される (開く) ことを指定します

2. HTMLメータータグ

meter タグを使用すると、スカラー測定値または既知の範囲内の分数値を定義できます。

例 :

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>

ログイン後にコピー

3. HTMLマークタグ

マーク タグを使用して、テキストの一部を強調表示できます。

例 :

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>

ログイン後にコピー

必要に応じて、ハイライトの色を変更できます。


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

ログイン後にコピー

ITTLE KNOWN BUT USEFUL HTML TAGS

4. HTMLフィールドセットタグ

fieldset タグを使用して、フォーム内の関連する要素をグループ化できます。アイテムの周囲にボックスを描画します。

例 :

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>

ログイン後にコピー

属性

無効: 関連するフォーム要素のグループを無効にすることを指定します
Name: フィールドセットの名前を指定します

5. HTML出力タグ

output タグを使用すると、1 つの計算の結果を表示できます。

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>

ログイン後にコピー

HTML テンプレートタグ

アプリケーションのページが読み込まれるときに一部のコンテンツを非表示にしたい場合は、template 要素を使用します。 JavaScript を使用して表示.

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>

ログイン後にコピー