HTML의 kbd 태그-HTML 튜토리얼-php.cn

구문

HTML에서 kbd 태그는 어떻게 작동하나요?

HTML의 kbd 태그 예

예 #1 – 이것은 <kbd> 태그.

예 #2 – <kbd> CSS 속성을 사용하여 태그를 지정하세요.

예시 #3

결론 – HTML의 kbd 태그

집

웹 프론트엔드

HTML 튜토리얼

HTML의 kbd 태그

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2024 pm 04:29 PM

html html5 HTML Tutorial HTML Properties HTML tags

다음 기사에서는 HTML의 kbd 태그에 대해 설명합니다. HTML의 태그는 사용자의 키보드 입력에 의해 정의된 텍스트를 인식하는 데 도움이 됩니다. 키보드에서 입력을 받는 데 사용됩니다. 사용자가 키보드를 통해 입력하는 텍스트를 표시해야 할 때마다 주로 사용됩니다. 이는 문구 태그로 알려진 태그 카테고리에 속합니다. 이는 인라인 요소라고도 합니다. 이 태그에 설정된 기본 글꼴은 글꼴 계열의 고정폭 글꼴입니다. 에 포함된 텍스트의 모양과 느낌을 개선하기 위해 다양한 스타일 코드를 사용할 수 있습니다. 꼬리표. 항상 키보드를 통해 쉽게 입력할 수 있는 텍스트가 포함되어 있습니다.

구문

열기 내의 HTML에 정의된 태그 그리고 태그.

이 태그 안에 포함된 텍스트는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Kbd tag in HTML
< kbd> Text </kbd> <kbd> Text </kbd> <kbd> Text </kbd>
</body>
</html>

로그인 후 복사

이 태그는 고정 폭 유형의 글꼴 형식을 포함하는 구문 태그로 알려져 있습니다. 내에 포함된 텍스트의 스타일을 변경할 수 있습니다. 다음과 같이 다양한 CSS 속성을 사용하여 태그를 지정하세요.

텍스트의 글꼴 스타일을 변경하려면 텍스트에 CSS-font-style 속성을 사용하여 텍스트가 일반, 기울임꼴, 이니셜 등이 되도록 할 수 있습니다.
기본적으로 고정 폭 형식이지만 CSS-font-family를 사용하여 변경할 수 있습니다. 여러 글꼴 모음 목록을 표시하여 그 중에서 텍스트에 적합한 것을 선택할 수 있습니다.
CSS-font-size를 사용하여 텍스트 크기를 변경할 수도 있습니다.
CSS-font-weight 속성을 사용하여 글꼴 두께를 변경하여 텍스트를 굵게 또는 두꺼운 형식으로 표시할 수 있습니다. CSS-text-transform을 통해 텍스트를 대문자로 만들거나 텍스트 대소문자를 제어하는 것도 가능합니다.
텍스트 장식 목적으로 텍스트 색상을 지정하는 데 도움이 되는 CSS-텍스트 장식, 선이 있는 텍스트 장식, 텍스트 장식 스타일 등과 같은 속성을 사용할 수 있습니다. 간단히 말해서, 텍스트 장식 색상은 텍스트 장식을 사용합니다. 텍스트 색상을 위한 CSS-color와 배경 색상을 설정하는 CSS-ground-color와 같은 2가지 속성.

텍스트 레이아웃 스타일을 태그에는 CSS에 다음과 같은 다양한 속성이 있습니다.

텍스트의 공백을 처리하려면 CSS 공백을 사용할 수 있습니다.
사용자에게 표시되지 않는 오버플로된 텍스트 콘텐츠를 표시하려면 CSS-text-overflow를 사용할 수 있습니다.
줄이나 단어 내에서 줄바꿈을 하려면 CSS-word-break를 사용하면 됩니다.
CSS-text-shadow 속성을 사용하여 텍스트에 그림자를 추가합니다.
줄의 마지막 위치에 텍스트를 정렬하려면 CSS-text-align-last 속성을 사용하면 됩니다.
CSS-letter-spacing 속성을 사용하여 문자나 문자 사이에 공백을 부여합니다.
줄 높이를 정의하려면 CSS-line-height 속성을 사용할 수 있습니다.
CSS-word-spacing을 사용하면 단어 사이의 공백을 정의할 수 있습니다.

HTML의 태그에는 특별한 속성이 없습니다. HTML에서 사용할 수 있는 이벤트 속성뿐만 아니라 전역 속성도 지원할 예정이었습니다.
이 태그는 항상 섹션.

HTML에서 kbd 태그는 어떻게 작동하나요?

태그는 HTML에서 다양한 목적으로 사용되는 가장 유용한 태그 중 하나입니다. 의 주요 용도 사용자 문서에 태그를 추가하세요. 키보드에 입력할 텍스트를 표시하는 데 도움이 되기 때문입니다. 이는 HTML의 환상적이고 유용한 요소입니다. 이 태그는 키보드 단축키를 생성하는 데에도 사용됩니다.

이는 새 문서 만들기, 문서 저장, 새 탭에서 열기 등에 도움이 됩니다. 스타일이 지정된 출력을 위해 다양한 CSS 속성에서 작동합니다. 를 사용하여 키보드 단축키를 생성한다고 가정해 보겠습니다. HTML의 태그. 여기서는 일부 텍스트를 복사하여 붙여넣습니다.

그래서 다음과 같이 단축키를 통해 태그를 사용하여 이 작업을 수행하겠습니다.

ctrl + c 그런 다음 ctrl + v

따라서 이 예에서는 ctrl +c로 텍스트를 복사하고 ctrl + v를 사용하여 붙여넣는 단축키를 만듭니다.

HTML의 kbd 태그 예

다음은 HTML의 kbd 태그의 예입니다.

예 #1 – 이것은 `태그.`

<!DOCTYPE html>
<html>
<head>
<title>kbd tag</title>
<style>
kbd.key {
padding: 3px 3px 0;
border-radius: 2px;
border: 1px solid #666;
border-color: blueviolet;}
</style>
</head>
<body>
<p>Copy some code using <kbd><kbd>Ctrl</kbd>+<kbd>c</kbd></kbd>.</p>
<p>Paste copied code using <kbd><kbd>Ctrl</kbd>+<kbd>v</kbd></kbd>.</p>
<p>Save all the details of the data using <kbd ><kbd class="key" >Ctrl</kbd>+
<kbd   class="key">s</kbd></kbd>.</p>
<p>Create a new document by pressing <kbd><kbd class="key">Ctrl</kbd>+
<kbd  class="key">N</kbd></kbd>.</p>
</body>
</html>

로그인 후 복사

출력:
HTML의 kbd 태그

예 #2 – `CSS 속성을 사용하여 태그를 지정하세요.`

<!DOCTYPE html>
<html>
<head>
<title>kbd tag</title>
<style>
kbd.font {
font-style: italic;
font-size: 20px;
}
kbd.cursive{
font-family: cursive;
}
kbd.fantasy{
font-family:fantasy;
color:darkmagenta;
}
kbd.inherit{
font-family:inherit;
}
kbd.sans-serif{
font-family:sans-serif;
background-color: aquamarine;
}
kbd.weight{
font-weight:bold;
}
</style>
</head>
<body>
<h4>kbd tag uses Font style</h4>
<p><kbd class="font">The Whole world steps aside for the man who knows where he is going</kbd><hr>
<h4>kbd tag uses Font Family</h4>
<p><kbd class="cursive">People rarely succeed unless they have fun in what they are doing</kbd>
<p><kbd class="fantasy">People rarely succeed unless they have fun in what they are doing</kbd>
<p><kbd class=" inherit">People rarely succeed unless they have fun in what they are doing</kbd>
<p><kbd class="sans-serif">People rarely succeed unless they have fun in what they are doing</kbd>
<hr>
<h4>kbd tag uses Font weight </h4>
<p><kbd class="weight"> Only those who dare to fail greatly can ever achieve greatly</kbd>
<hr>
</body>
</html>

로그인 후 복사

출력:
HTML의 kbd 태그

예시 #3

<!DOCTYPE html>
<html>
<head>
<title>HTML kbd Tag</title>
</head>
<body>
<p>kbd tag to reopen previously closed tab by clicking
<br>
<br>
<kbd>ctrl</kbd>+
<kbd>shift</kbd>+
<kbd>t</kbd>
</body>
</html>

로그인 후 복사

출력:

HTML의 kbd 태그

키보드에서 Ctrl+Shift+T 키를 클릭하면 브라우저에서 이전에 닫은 탭이 다시 열립니다.

결론 – HTML의 kbd 태그

HTML의 태그는 텍스트를 키보드 입력으로 표시하는 데 사용됩니다. 고정 폭 글꼴입니다. 이 태그는 글꼴 모음, 글꼴 두께, 글꼴 색상, 배경색, 글꼴 크기, 글꼴 스타일, 텍스트 장식, 공백, 텍스트와 같은 다양한 CSS 속성을 사용하여 스타일을 지정할 수 있습니다. break, text-shadow, text- align -last, text letter-spacing, text-overflow 등

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.