잘 알려져 있지 않지만 유용한 HTML 태그-CSS 튜토리얼-php.cn

잘 알려져 있지 않지만 유용한 HTML 태그

Susan Sarandon

풀어 주다： 2024-10-06 06:09:02

원래의

728명이 탐색했습니다.

안녕하세요 여러분, 이번 글에서는 잘 알려지지 않았지만 유용한 HTML 태그 6가지에 대해 알려드리겠습니다. 애플리케이션에서 이러한 요소를 사용할 수 있습니다.

1. HTML 세부정보 태그

세부정보 태그를 사용하면 사용자가 클릭하여 열거나 닫을 수 있는 대화형 위젯을 만들 수 있습니다. 위젯은 기본적으로 꺼져 있습니다. 열면 확장되어 안에 들어있는 내용물이 보입니다.


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

속성

열기: 사용자에게 세부정보가 표시(열려)되도록 지정합니다

2. HTML 측정기 태그

미터 태그를 사용하면 알려진 범위 내에서 스칼라 측정값이나 분수 값을 정의할 수 있습니다.

예 :

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>

로그인 후 복사

속성

비활성화: 관련 양식 요소 그룹을 비활성화하도록 지정합니다
이름: 필드 세트의 이름을 지정합니다

5. HTML 출력 태그

output 태그를 사용하여 한 계산의 결과를 표시할 수 있습니다.

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 템플릿 태그

애플리케이션 페이지가 로드될 때 일부 콘텐츠를 숨기려면 템플릿 요소를 사용하세요. 자바스크립트를 사용하여 확인하세요.

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>

로그인 후 복사