> 웹 프론트엔드 > HTML 튜토리얼 > HTML 약어 태그

HTML 약어 태그

王林
풀어 주다: 2024-09-04 16:26:50
원래의
1009명이 탐색했습니다.

HTML 5에는 최소한의 코드 작성만으로 HTML 웹 페이지를 더욱 간단하게 디자인할 수 있는 흥미로운 기능이 있습니다. 웹 요소를 디자인하는 데 필요한 다양한 흥미로운 태그 세트를 제공합니다. 이러한 태그 중 하나가 유용하며, 이는 꼬리표. 이 태그는 약어를 한 번에 정의하고 표시하는 데 사용됩니다. HTML abbr 태그를 사용하면 약어 또는 두문자어의 전체 형식을 정의할 수 있으며 브라우저는 일반적으로 웹 페이지에 짧은 형식의 문자 버전을 표시하지만 해당 약어 위로 마우스를 가져가면 브라우저는 다음의 전체 형식을 표시합니다. 자동으로 해당 약어가 표시됩니다.

HTML abr 태그 구문

태그는 일반적으로 기인하다. 제목 태그는 문서의 제목을 정의하는 데 사용되므로 <abbr> 태그는 속성이 되며 특별한 의미를 갖습니다. 제목에는 사람이 읽을 수 있는 제목이나 약어의 전체 형식이 포함됩니다. <abbr> 태그는 사용자에게 마우스를 가져가면 전체 양식을 표시하고 설명 정의를 단순화합니다. 이 정보는 브라우저, 검색 엔진 및 번역 시스템과 같은 보조 시스템에 훨씬 더 유용합니다. 다음은 abbr 태그의 구문입니다.</p> <ul> <li><strong>일반 약어 태그:</strong></li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><abbr> PFA </abbr></pre><div class="contentsignin">로그인 후 복사</div></div> <p>이렇게 하면 아무런 의미도 없이 간단한 텍스트만 표시됩니다. 위의 약어에 대해 전체 형식 할당(예: PFA)을 사용하고 <title> 속성이 사용됩니다.</p> <ul> <li><strong>제목 태그가 포함된 abr 태그:</strong></li> </ul> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><abbr title = "Please Find Attached" > PFA </abbr></pre><div class="contentsignin">로그인 후 복사</div></div> <p>여기에서는 표시 제목을 약식으로 정의했지만 동시에 <abbr> <제목> 꼬리표. <abbr> 태그는 쌍으로 제공되므로 항상 닫는 </abbr> 태그가 가능합니다.</p> <p><strong>속성: </strong>구문에서 본 것처럼 제목 태그는 <abbr> 태그는 속성이 되어 특별한 기능을 할당합니다. 그렇지 않으면 <abbr> 태그가 있지만 이 태그는 <abbr> HTML에서 기본적으로 사용할 수 있는 전역 속성과 이벤트 속성을 지원합니다.</p> <h3>HTML abr 태그 구현 예시</h3> <p>다음은 HTML abr 태그 구현 예입니다.</p> <h4>예시 #1</h4> <p>이 예에서는 제목 태그 없이 단순 약어를 볼 수 있습니다.</p> <p><strong>코드:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> abbr tag in HTML </title> <style> body { text-align: left ; } </style> </head> <body> <abbr > PFA </abbr> </body> </html></pre><div class="contentsignin">로그인 후 복사</div></div> <p><strong>출력:</strong> 아래와 같은 간단한 텍스트가 됩니다.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543841332785.jpg" alt="HTML 약어 태그" ></p> <h4>예시 #2</h4> <p>이 예에서는 제목 태그와 함께 약어를 볼 수 있습니다.</p> <p><strong>코드:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> abbr tag in HTML

<abbr title = "Please Find Attached" > PFA </abbr>
로그인 후 복사

출력: 점선 밑줄이 있는 약어가 됩니다.

HTML 약어 태그

이 위에 마우스를 가져가면 툴팁과 비슷한 방식으로 지정한 제목이 표시됩니다.

예시 #3

여기서 위에 CSS 스타일링 요소 글꼴 스타일을 기울임꼴로 사용했습니다. 태그.

코드:




 abbr tag in HTML 


while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used

로그인 후 복사

출력:

HTML 약어 태그

예시 #4

대신 CSS 스타일 요소를 더 사용해 보겠습니다. 태그.

코드:




 abbr tag in HTML 


while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used

로그인 후 복사

출력:

HTML 약어 태그

여기서 CSS 스타일링 요소를 사용하여 약어를 굵은 글씨와 빨간색으로 만들었습니다.

예시 #5

동일한 예를 수정하여 더 많은 스타일과 디자인을 추가해 보겠습니다.

코드:




 abbr tag in HTML 


while writing an email, generally <abbr title = "Please Find Attached" > PFA </abbr> is used

로그인 후 복사

출력:

HTML 약어 태그

위의 각 예에서 우리가 사용한 약어(예: PFA) 위로 마우스를 가져가서 우리가 할당한 제목이 브라우저에 어떻게 표시되는지 확인하세요.

유의사항

  • 태그는 Google Chrome, Internet Explorer, Safari, Firefox, Opera 등을 포함한 거의 모든 브라우저에서 지원됩니다. 모든 브라우저에서 생성되는 출력은 경우에 따라 다를 수 있지만 결과는 동일합니다.
  • 태그를 사용하면 다음 예에서 속성의 스타일을 지정하는 방법(사용 가능한 전역 속성을 사용하여)을 살펴보겠습니다. 이 요소를 표시하는 기본 스타일은 display: inline이며 브라우저마다 다를 수 있습니다.
  • 태그는 사용자에게 전체 형식을 제공하거나 특정 콘텐츠를 정의하는 동안 또는 문서 스타일을 지정하는 경우 사용할 수 있습니다. 항상 태그.
  • <제목> 속성은 꼬리표. <제목> 속성은 선택사항이며 태그.
  • 옛날에는 약어나 두문자어를 정의하기 위해 HTML 5 앞에 태그를 추가해야 하지만 HTML 5에서는 더 이상 사용되지 않으므로 사용해서는 안 됩니다.

결론

이제 HTML 5에서 도입된 태그입니다. 이 태그는 약어나 두문자어를 정의하고 해당 제목이나 세부 정보를 한 번에 표시하는 방법을 제공했습니다. 우리는 기인하다. 이 태그에는 그러한 특별한 속성이 없습니다.

위 내용은 HTML 약어 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿