検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLのスパンタグ

HTMLのスパンタグ

WBOY
WBOYオリジナル
2024-09-04 16:25:35645ブラウズ

HTMLのspanタグはインライン要素とみなされます。これは div タグに似ていますが、div タグは意図的にブロックレベルの要素に使用され、span はインライン要素に使用されます。これは主に、ユーザーがインライン要素をコード構造にグループ化したい場合に使用されます。 HTMLのspanタグは、要素のclassやid属性を利用して特定のコンテンツにスタイルを与えるために使用されます。 HTML ドキュメントのspanタグを使用して、それ自体で視覚的な変更を行うことはできません。 HTML ドキュメント内のインライン タグとして機能します。コード内でspanタグを使用すると、コードとHTMLの属性を減らすのに役立ちます。

構文と例

span タグを定義するための構文は次のとおりです。

構文:

<span class=""> Contents </span>
  • 上に示すように、開始部分 で囲まれた構文テキストそして終了タグ
    • はspan属性とみなされます。
  • これは主にインライン要素のグループ化に使用されます。これは、HTML ドキュメント内のコードを最小限に抑えるのに役立ちます。
  • これは div タグと同様に機能しますが、大きな違いは、div がブロックレベルの要素として機能するのに対し、span タグは HTML のインライン タグとして機能することです。
  • span タグは、それ自体で視覚的な変更を提供することはできません。
  • 、、、、、 などのタグで機能します。
  • このタグは改行を作成できませんが、ユーザーは他の要素と区別することができます。したがって、コード全体を変更するのではなく、選択したテキストのみを変更することが可能です。
  • コンテナ内の利用可能な幅全体を占有するのではなく、必要な幅だけを使用します。 SPAN タグの最良の例は、属性と画像です。これは、span タグの使用を示す一部のテキストにコンテナを使用します。
  • コーディングに特定の属性は必要ありません。いくつかの一般的な CSS とクラスを利用して、span タグを定義できます。
  • HTML の spam タグを使用して、特定のテキストを強調表示したり、テキストに背景色を適用したり、背景画像をテキストに追加したりできます。
  • spanタグを使用してテキストのフォントを変更することもできます。フォントのサイズ、色、背景色、フォント スタイルなどを変更するのに役立ちます。

例:

<!DOCTYPE html>
<html>
<head>
<title>Span tag in HTML </title>
<style>
.demo {
color: blue;
font-size: 200%;
position: relative;
top: 5px;
}
</style>
</head>
<body>
<p><span class="demo">О</span>Pride make us artificial and Humility make us real.</p>
<p>True fact about life </p>
</body>
</html>

出力:

HTMLのスパンタグ

  • Span タグには特定の属性がありません。他のタグと同様に、グローバル属性とイベント属性もサポートします。

HTML の Span タグのプロパティ

ここでは、 を使用してスタイルを適用するためのプロパティをいくつか示します。それらは次のとおりです:

  • CSS font-style: 指定されたテキストにスタイルを適用するために使用されます。テキストは通常​​、斜体、イニシャル、継承などにする必要があります。
  • CSS フォントファミリー: 指定されたリストのさまざまなフォント タイプを特定のテキストに適用するために使用されます。
  • CSS font-size: テキストにフォント サイズを設定すると便利です。
  • CSS font-weight: このプロパティは、太字または太字のフォントを設定するために使用されます。
  • CSS text-transform: テキストを大文字にします。
  • CSS テキスト装飾: このプロパティは、テキスト装飾線、テキスト装飾色などの形式でテキストを装飾するために使用されます。
  • CSS カラー: テキスト コンテンツとテキスト装飾の色付けに使用される Span タグのこのプロパティ。
  • CSS 背景色: これは、要素の背景色を設定するのに便利なプロパティです。
  • CSS text-shadow: このプロパティを使用すると、ユーザーはテキストに影を追加できます。
  • CSS text-align-last: テキストの位置合わせを行うのに役立ちます。
  • CSS word-spacing: span タグのこのプロパティは、単語間の間隔を管理するために使用されます。
  • CSS ホワイトスペース: このプロパティは、指定された要素内のホワイトスペースを処理するのに役立ちます。
  • CSS line-height: HTML コードの行の高さを提供します。
  • CSS ワードブレイク: このプロパティは、実際の行をどこで区切るかを定義するのに役立ちます。
  • CSS text-overflow: これは、span タグの最も便利なプロパティであり、ユーザーに通知する必要がある表示されていないオーバーフローされたコンテンツを識別するのに役立ちます。

HTML の Span タグの例

HTML の spam タグの例を以下に示します。

例 #1

コード:

<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<style>
.imgdemo {
padding-left:25px;
background:url(./Content/data/2.jpg) no-repeat top left;
display: inline-block;
height: 150px;
width: 150px;
}
</style>
<body>
<!-- span tags with inline style/css  -->
<h2>Span tag with text color</h2>
<span style="color:brown;">
Do those things which makes your soul happy </span>
<br>
<h2> Span tag with background color</h2>
<span style="background-color:lightblue;">
Everybody have natural beauty. Try look at your picture when you are a baby. Your     eyes, eyebrows, lips, body. When you are smiling, crying, staring, etc. That it, you got     it.</span>
<br>
<h2> Span tag with background image</h2>
<br>
<span class="imgdemo" style="color: azure; font-size: 16px; font-display: block;">
Image as background</span>
</body>
</html>

出力:

HTMLのスパンタグ

例 #2

コード:

<!--Example 2-->
<!DOCTYPE html>
<html>
<head>
<title>HTML Span Tag</title>
</head>
<body>
<h2> Span tag Examples</h2>
<p>Good, Better, Best Never let it rest.
<span style="color:crimson;"> "Till your good is better and your better is best" </span></p>
<p>Everyday you have a choice -<span style="font-family: cursive; font-weight: 200; font-   size: 18px;">
STAY THE SAME OR CHANGE    </span>
</p>
<p>Whenever you see a successful person you only see the public glories, never the private sacrifices to reach them."<span style="background-color: aqua ; color:darkblue;">
"Opportunities don't happen, you create them" </span></p>
</body>
</html>

出力:

HTMLのスパンタグ

Example #3

Code:

<!DOCTYPE html>
<html>
<style>
.spandemo {
background:url(./Content/data/3.jpg) no-repeat top left;
display: inline-block;
padding-top: 20px;
width: 1800px;
height: 500px;
}
</style>
<body>
<h2> Span tag for image</h2> <br>
<span class="spandemo" style="color: aliceblue; font-weight: bold;">
<p> Nature always wears<br> Color of SPIRIT. </p> <br>
Heaven is under our feet <br>as well as over our heads <br>
<p> Deep in their roots,<br>all flowers Keep the light </p>
<p> My soul steers me<br> into nature's silence</p>
</span>
</body>
</html>

Output:

HTMLのスパンタグ

Conclusion

From all the above information, we came to know that the tag in HTML is used to give styling to inline elements. One can group this styling attribute and specifies them inline. Span tag mainly used to arrange structural sections and proper layout sections on our webpage with the help of inline CSS.

以上がHTMLのスパンタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html define for require break signal using class Attribute Property Event this overflow background transform word
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTMLの事前タグ次の記事：HTMLの事前タグ

関連記事

続きを見る