HTML 코드 태그

PHPz원래의: 2024-09-04 16:28:53789검색
HTML 또는 하이퍼 텍스트 마크업 언어는 웹 페이지 요소에 대한 작업을 정의, 선언 및 수행하기 위해 태그를 사용하는 웹 개발 프로그래밍 언어입니다. 태그는 < 기호를 사용하여 정의됩니다. 및 >, 닫는 태그 앞에는 '/'가 있어야 합니다. 코드 태그는 프로그래머가 ……. , HTML의 모든 태그에는 닫기 태그가 있어야 합니다.














설명 구문:
기본 구문은 다음과 같습니다. 여기서 요소는 쌍으로 제공되고 코드 조각은 이러한 태그 사이에 작성됩니다. 여기서는 시작 태그와 닫는 태그가 모두 기본으로 필수이므로 태그 생략은 수행하지 않습니다.
<pre class="brush:php;toolbar:false">
<code>
….
….
</code>

HTML에서 코드 태그는 어떻게 작동하나요?
기본적으로  태그 글꼴은 고정 폭을 사용하여 표시됩니다. 이는 주어진 콘텐츠의 모든 문자가 동일한 너비를 의미함을 의미합니다. HTML 5 및 HTML4 표준 모두에 지정되어 있습니다.



HTML은 다양한 텍스트 크기와 글꼴 및 들여쓰기와 같은 추가 속성을 사용합니다. 텍스트와 스니펫 코드를 모두 사용하여 브라우저에 일부 콘텐츠를 표시해야 하는 경우가 있습니다. 그런 다음 이 <코드> 꼬리표. 코드 태그는 미리 형식이 지정된 태그 
와 쌍을 이루어 소스 문서에 작성된 텍스트의 정확한 형식을 유지합니다.</p>
<p>정확히 같은 줄에서 텍스트를 시작하기 위해 문자 그대로 공백을 제거하는 이 태그가 사용되었습니다. 코드를 글꼴 스타일로 표현하려면 CSS 스타일의 코드 선택기를 사용하고 시각적인 무게감을 주는 것이 좋습니다. 글꼴을 선택하려면 이미 글꼴 모음이 고정폭으로 설정된 CSS를 사용하는 것이 좋습니다. 브라우저 호환성에 따라 Chrome, Edge, Opera, Safari, Firefox에서 지원됩니다. 이 요소도 이벤트 및 전역 속성을 모두 지원합니다. 코드 태그는 사전 정의된 언어에 대한 클래스 속성과 <id>, <style>, <title></p>을 활용합니다.
<p>이 코드 태그는 구현 중에 일부 요소를 사용합니다.</p>
<ul>
<li>
<strong><Code>:</strong> 코드 조각 정의</li>
<li>
<strong><var>:</strong> 변수를 설명합니다</li>
<li>
<strong><samp></strong>: 컴퓨터 출력을 발생시킵니다</li>
<li>
<strong><kbd></strong>: 키보드 입력 표시에 도움</li>
</ul>
<h3>HTML 코드 태그 구현 예시</h3>
<p>다음은 코드 태그에 다양한 스타일을 적용한 예입니다.</p>
<h4>예시 #1</h4>
<p>여기서 첫 번째 예제 프로그램은 기본 인라인 개념을 형성하는 코드를 표시하는 것입니다.</p>
<p><strong>코드:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<em># Display the sum</em><br>
<strong>program adds two numbers</strong><br>
<pre class="brush:php;toolbar:false">
<code>
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))</code> 


 output from a program

input

Variable declaration


생성된 출력은 프로그램 코드의 내용과  웹페이지에 태그를 추가하세요. 조각의 여러 줄을 래핑하려면 컴퓨터 코드 
 아래 요소가 사용되었습니다.</p>
<p><strong>출력:</strong></p>
<p><img  src="https://img.php.cn/upload/article/000/000/000/172543853827005.png" alt="HTML 코드 태그" ></p>
<p>여러 개의 <코드> 사용 동일한 프로그램의 요소입니다.</p>
<p><strong>코드:</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<h1>Various Programming language</h1>
<h2> Java</h2>
<code>
import java.io.*;<br>
System.out.println();
</code>
<h2>C programming</h2>
<code>
#include <stdio.h><br>
void main()<br>
printf()
</code>
</body>
</html>
위 코드에 대한 웹페이지에 Java 및 C 프로그래밍 샘플을 표시하는 작은 코드 스냅샷이 있습니다.
출력:

예시 #2
두 번째 예는 중앙 정렬로 코드를 표시하는 샘플 프로그램을 보여줍니다.
코드:


<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>
출력:

예시 #3
여기에 
 설명 내용과 함께 프로그램을 표시하는 개념입니다(의미론적 정보 제공). 심지어 프로그램의 이점을 제공하기 위해 그 사이에 기능 코드를 추가할 수도 있습니다.
코드:
<!DOCTYPE html>
<h1>Demo of article tag</h1>
<p>The <code> fact()</code> this method is used to calculate a factorial of a given number.</p>
코드:
code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
출력:

예시 #4
href linkOutput을 사용하는 HTML 코드 형식.
코드:
<!DOCTYPE html>
<h1>Demo of code tag</h1>
<p>This is an implementaion of a <a href="http://www.educba.com" title="online tutorial"><code>link to edu</code></a> displayed with code tag.</p>
코드:
code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
출력:



예시 #5
코드를 제대로 만들고, 패션을 보고 읽으려면