ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLのspanタグとは何を意味するのでしょうか? spanタグの機能を詳しく解説

HTMLのspanタグとは何を意味するのでしょうか? spanタグの機能を詳しく解説

寻∝梦
リリース: 2018-08-22 13:58:29
オリジナル
58593 人が閲覧しました

HTMLのspanタグの意味は何ですか?この記事では、spanタグの機能やhtmlのspanタグの使い方、htmlのspanタグの属性について詳しく紹介していきます

htmlのspanタグの定義と機能:

span タグは、ハイパーテキスト マークアップ言語 (HTML) のインライン タグであり、ドキュメント内のインライン要素を結合するために使用されます。スパンには固定フォーマットはありません。スタイルを適用すると、視覚的な変化が生じます。

タグ自体は視覚的な効果を生み出しません。

これは、ドキュメントの一部を参照する方法を提供するだけです。

この方法で、テキストの一部を引用してスタイルを設定したり、JavaScript で操作したりできます。

タグは、ドキュメント内のインライン要素をグループ化するために使用されます。

ここに例があります:

<p><span>some text.</span>some other text.</p>
ログイン後にコピー

例の説明:

span にスタイルを適用しない場合、span 要素内のテキストは他のテキストと視覚的な違いがありません。それでも、上記の例のspan要素は、p要素に追加の構造を追加します。

ID またはクラス属性をスパンに適用できます。これにより、適切なセマンティクスを追加できるだけでなく、スパンにスタイルを適用することも簡単になります。

同じ 要素に class 属性または id 属性のいずれかを適用することは可能ですが、どちらか 1 つだけを適用するのが一般的です。 2 つの主な違いは、class は要素のグループ (類似した要素、または特定のタイプの要素として理解できる) に使用されるのに対し、id は個々の固有の要素を識別するために使用されることです。

ヒント: 実際、W3School サイト上の一部のテキストのスタイルが他のテキストとは異なることに気づいたかもしれません。たとえば、「ヒント」は太字のオレンジ色で表示されます。この効果を実現するにはさまざまな方法がありますが、私たちのアプローチは次のとおりです。「ヒント」を使用してspan要素を使用し、次にspan要素の親要素、つまりp要素にclassを適用して、このクラスの子要素に対応するスタイルを指定します。

HTML:
<p><span>提示:</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
ログイン後にコピー

HTMLのspanタグの使用方法:

は、行内の領域を定義します。つまり、行は、特定の効果を実現するために、によって複数の領域に分割できます。 自体にはプロパティがありません。

は CSS 定義のインライン要素に属しますが、
は大きなコンテナーであると一般的に理解されています。 、大きな容器 もちろん小さな容器も入れられます、 は小さな容器です。

例もあります:

<html><body><script>
function setspan{if( id==1){a.innerText="设置文字"};
if( id==2){a.innerHTML="<font color=red size=7>设置代码</font>"};}
</script><span id=a></span>
<a href=javascript:setspan(1)>设置span的文字</a></br>
<a href=javascript:setspan(2)>设置span的代码</a></br>
</body></html>
ログイン後にコピー

例:

<span id=&#39;span_slide_container&#39; style=&#39;display:block; overflow-y: auto; overflow-x: auto; height: 500px;&#39;>
ログイン後にコピー
display:block; をここに追加する必要があります。そうしないと、span が機能しません

中央に配置されるようにspanタグを定義したい場合は、最初につまり、目的の効果を実現するには、最初にスパンの display:block; 属性を定義し、次にマージン属性 margin:0px auto; を追加する必要があります。 Span には多くの属性がありますが、Span 自体はタグの機能を補完するものであり、Span がブロックレベルの要素になると、ほとんどすべての属性が有効になります。補助タグ。通常はテキストのスタイルのみを識別できます。そのため、span タグにさらに他のスタイル属性を定義したい場合は、最初にブロック レベルの属性をスパンに追加する必要があります。つまり、表示を追加する必要があります。 :block; 属性。これにより、将来スタイルが機能します。

HTML の spam タグのコア属性:

DTD 列は、どのドキュメント タイプがこの属性をサポートするかを示します。 S=厳密、T=移行、F=フレームセット。

タグは次のコア属性をサポートしています:

HTMLのspanタグとは何を意味するのでしょうか? spanタグの機能を詳しく解説

最後に を記述すると、自由にスタイルを追加できます。

styleはspanの属性だけですが、このうちマウスアクション属性はonclickのみで、他にも多数のマウスアクション属性があります。

テキストコンテンツ

ヒントとメモ:

ヒント: を使用してインライン要素をグループ化し、スタイルで書式設定します。

注: スパンには固定フォーマット表現がありません。スタイルを適用したときにのみ視覚的に変化します。

以上、htmlのspanタグの意味、機能、使い方について詳しく説明しました。ご不明な点がございましたら、下記までお問い合わせください。

【関連おすすめ】

HTMLフォントタグのフォントスタイルを設定するにはどうすればよいですか? CSSを使用してテキストサイズを制御する方法

HTML emタグの役割は何ですか? の違い

以上がHTMLのspanタグとは何を意味するのでしょうか? spanタグの機能を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート