> 웹 프론트엔드 > HTML 튜토리얼 > HTML의 사전 태그

HTML의 사전 태그

WBOY
풀어 주다: 2024-09-04 16:25:20
원래의
844명이 탐색했습니다.

웹 브라우저에서는 공백, 줄 바꿈 및 기타 텍스트 서식 문자가 무시됩니다. 어떤 형식을 원했다면 매번 태그나 속성을 사용해야 합니다. 이런 단점을 없애기 위해 사용됩니다. Pre 태그는 텍스트 형식을 그대로 유지하기 위해 사용됩니다. CSS 태그를 적용하면 변경됩니다. 미리 포맷된 콘텐츠 텍스트를 보여줍니다.

구문:

HTML에는 다양한 목적을 위한 많은 태그가 있습니다.

예:


  • <사전> 등

pre 태그에는 다른 HTML 태그와 마찬가지로 여는 태그와 닫는 태그가 있습니다.

<pre class="brush:php;toolbar:false"> content of web 
로그인 후 복사

위 구문은 미리 형식화된 콘텐츠 텍스트가 필요한 경우에 사용됩니다.

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

다음은 사전 태그 작동 방식에 대한 설명입니다.

1. HTML에서 사전 태그 사용

코드:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space,   line breaks, and other formatting characters of text.
If you wanted some   format then tag or attribute must have used every time.
Pre tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is   changed when CSS tags are applied.
Pre tag in HTML shows the  preformatted text of the content.
로그인 후 복사

출력:

HTML의 사전 태그

위 코드에 대한 설명: 위의 코드 예를 보여주세요. 콘텐츠의 필수 부분에 프리태그를 적용하면 콘텐츠가 그대로 포맷되어 보입니다. 텍스트에 사전 태그를 적용하면 공백과 다음 줄은 무시되지 않습니다.

2. HTML에서 사전 태그를 사용하지 않고

코드:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
The Web browser is ignored space, line breaks, and other
formatting characters of text.
If you wanted some format then tag or attribute must have
used every time.
This tag is used to remove this drawback. Pre tag used to
keep text format as it is. It is changed when CSS tags are applied.
This pre tag shows the preformatted text of the content.
</body>
</html>
로그인 후 복사

출력:

HTML의 사전 태그

위 코드에 대한 설명: 사용하지 않은 위의 예를 보여주세요. 공백, 줄 바꿈 및 새 줄은 자동으로 무시됩니다. 웹 페이지에는 요구 사항에 따라 콘텐츠가 표시됩니다. 공백을 주고 줄바꿈을 하려면 HTML 태그를 사용해야 합니다.

3. HTML 기타 태그 사용

코드:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html </title>
</head>
<body>
The Web browser is ignored space,         line breaks, and other formatting characters of text.<br>
If you wanted some      format then tag or attribute must have used every time.<br>
This is used to remove its drawback. Pre tag used to keep text format as it is.<br> It is changed when CSS tags are applied. <br>
It shows preformatted text of the content.<br>
</body>
</html>
로그인 후 복사

출력:

HTML의 사전 태그

위 코드에 대한 설명: pre 태그를 사용하지 않은 위의 예를 보여주세요. 하지만 pre 태그를 사용하는 대신 다른 HTML 태그를 사용하고 있습니다.
태그는 줄을 끊는 데 사용되며   공백에 사용되는 문자입니다.

프리태그 활용

  • 태그와 속성을 사용하지 않는 경우 웹페이지에서는 공백과 줄 바꿈을 무시합니다. 하지만 모든 라인에서 이러한 속성을 사용해야 합니다.
  • 사전 태그는 원본 콘텐츠 형식을 유지합니다.
  • 개발자는 여러 태그를 사용하는 대신 블록에 하나의 태그를 사용할 수 있습니다. 코딩을 줄여 이해하기 쉽습니다.

사전 태그는 다음 웹 브라우저를 지원합니다:

  • 구글 크롬
  • 인터넷 익스플로러
  • 파이어폭스
  • 오페라
  • 사파리

구현예

아래는 구현 예입니다.

예시 #1

CSS 태그와 함께 사전 태그 사용

코드:

<!DOCTYPE>
<html>
<head>
<title> using pre tag with CSS </title>
<style>
pre {
font-family: Arial;
color: yellow;
border: solid black;
background-color: black;
}
</style>
</head>
<body>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
This tag in HTML shows the preformatted text of the content.
로그인 후 복사

출력:

HTML의 사전 태그

위 코드에 대한 설명: 위의 예는 CSS 스타일 태그와 함께 사용되는 것을 보여줍니다. 사전 태그를 사용한 경우 CSS 스타일 태그도 콘텐츠 형식을 변경할 수 있습니다. 스타일 태그는 CSS의 글꼴 스타일, 테두리, 텍스트 색상을 사용했습니다.

예시 #2

아래 예시입니다. 다른 HTML 태그와 CSS를 이용한 pre 태그의 조합입니다.

 코드:

<!DOCTYPE>
<html>
<head>
<title> using pre tag in html  with CSS </title>
<style>
pre {
font-family: Arial;
color: yellow;
border: solid black;
background-color:black;
}
</style>
</head>
<body>
<p>
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
It shows the preformatted text of the content.
</p>
<pre class="brush:php;toolbar:false">
The Web browser is ignored space, line breaks, and other formatting characters of text.
If you wanted some format then tag or attribute must have used every time.
This tag in HTML used to remove this drawback. Pre tag used to keep text format as it is.
It is changed when CSS tags are applied.
This tag in HTML shows the preformatted text of the content.
로그인 후 복사

출력:

HTML의 사전 태그

결론

개발자는 이 태그를 사용하여 코딩을 줄이고 형식화된 콘텐츠를 얻습니다. 웹은 pre 태그 안의 콘텐츠 형식을 무시할 수 없습니다.

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

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