简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

HTMLコードタグ

PHPz
リリース： 2024-09-04 16:28:53
オリジナル
783 人が閲覧しました

HTML またはハイパー テキスト マークアップ言語は、Web ページ要素の定義、宣言、および操作の実行にタグを使用する Web 開発プログラミング言語です。タグは記号 < を使用して定義されます。 > と終了タグの前に「/」を付ける必要があります。 code タグは、プログラマが のように間にコードのチャンクを記述できるタグのタイプです。 ……。 。HTML 内のすべてのタグには終了タグが必要です。

説明付きの構文:

基本的な構文を以下に示します。要素にはペアが付属し、コードの断片はこれらのタグの間に記述されます。デフォルトでは開始タグと終了タグの両方が必須であるため、ここではタグの省略は実行されません。

<pre class="brush:php;toolbar:false">
<code>
….
….
</code>
ログイン後にコピー

HTML でコード タグはどのように機能しますか?

デフォルトでは、 の内容はタグのフォントは等幅を使用して表示されます。これは、特定のコンテンツ内のすべての文字が同じ幅であることを意味します。これは、HTML 5 と HTML4 の両方の標準で指定されています。

HTML では、さまざまなテキスト サイズと、フォントとインデントを伴うより多くのプロパティが使用されます。テキストとスニペットのコードの両方を使用してブラウザーにコンテンツを表示する必要があるシナリオがあり、この を使用します。タグ。 code タグは、ソース文書に書かれたテキストの正確な形式を保持する、事前にフォーマットされたタグ 

 と組み合わされます。</p>
<p>まったく同じ行でテキストを開始するには、文字通り空白を削除するこのタグが使用されています。コードをフォント スタイルで表現するには、CSS スタイルでコード セレクターを使用し、視覚的な重みを与えることをお勧めします。フォントを選択するには、既にフォントファミリーが等幅に設定されている CSS を使用すると便利です。ブラウザの互換性に関しては、Chrome、Edge、Opera、Safari、Firefox でサポートされています。この要素でも、イベント属性とグローバル属性の両方がサポートされています。コード タグは、定義済み言語の class 属性と、<id>、<style>、<title> を使用します。</p>
<p>このコード タグは、実装中にいくつかの要素を使用します。</p>
<ul>
<li>
<strong><コード>:</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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>複数の <code> の使用同じプログラム内の要素。</p>
<p><strong>コード:</strong></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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 プログラミング サンプルを Web ページに表示する小さなコード スナップショットがあります。

出力:

HTMLコードタグ

例 #2

2 番目の例は、コードを中央揃えで表示するサンプル プログラムを示しています。

コード:

<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>
ログイン後にコピー

出力:

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;
}
ログイン後にコピー

出力:

HTMLコードタグ

例 #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;
}
ログイン後にコピー

出力:

HTMLコードタグ

例 #5

コードを適切に作成し、ファッションを見て読んだりするには、