HTML abbr タグ-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML abbr タグ

王林

Sep 04, 2024 pm 04:26 PM

htmlhtml5HTML TutorialHTML PropertiesHTML tags

HTML 5 には、最小限のコード記述で HTML Web ページのデザインを簡単にする興味深い機能があります。 Web 要素を設計するための興味深いタグの豊富なセットが提供されます。このようなタグの 1 つは、として知られており、便利です。タグ。このはタグを使用すると、略語を一度に定義して表示できます。 HTML abbr タグを使用すると、略語または頭字語の完全な形式を定義でき、ブラウザは通常、Web ページ上に文字の短縮形を表示しますが、これらの略語の上にマウスを置くと、ブラウザは完全な形式で表示します。その頭字語は自動的に設定されます。

HTML abbr タグの構文

タグは通常、

と一緒に使用されます。属性。 title タグはドキュメントのタイトルを定義するために使用されるため、<abbr> と一緒に使用するとタイトルになります。タグは属性となり、特別な意味を持ちます。タイトルには、人間が読める形式のタイトルまたは頭字語の完全な形式が含まれます。タグは、ユーザーにカーソルを合わせると完全なフォームを表示し、説明の定義を簡素化します。この情報は、ブラウザ、検索エンジン、翻訳システムなどの支援システムにとってはるかに役立ちます。以下は abbr タグの構文です。 <ul> <li>通常の略語タグ:</li> </ul> <pre class="brush:php;toolbar:false"><abbr> PFA </abbr></pre> これでは、意味のない単純なテキストのみが表示されます。上記の略語、つまり PFA に完全な形式を割り当て、次に <title> を使用するとします。属性が使用されます。 <ul> <li>abbr タイトルタグ付きタグ:</li> </ul> <pre class="brush:php;toolbar:false"><abbr title="Please Find Attached"> PFA </abbr></pre> ここでは、表示タイトルを短い形式として定義しましたが、同時に <abbr> を使用してその完全な形式を定義しました。 <title> タグと一緒に使用します。タグ。タグはペアとして指定されるため、常に終了が存在します。タグが利用可能です。

属性: 構文で見たように、タイトルタグはと一緒に使用されます。タグは属性となり、特別な機能が割り当てられます。それ以外の場合、で使用できる特定のタグはありません。タグですが、このタグ HTML でデフォルトで使用できるグローバル属性とイベント属性をサポートします。

HTML abbr タグの実装例

以下は、HTML abbr タグの実装例です。

例 #1

この例では、タイトルタグのない単純な略語が表示されます。

コード:



 abbr tag in HTML 



<abbr> PFA </abbr>

出力: は以下のような単純なテキストになります。

HTML abbr タグ

例 #2

この例では、タイトルタグが付いた abbr が表示されます。

コード:



 abbr tag in HTML 



<abbr title="Please Find Attached"> PFA </abbr>

出力: は点線の下線が付いた頭字語になります。

HTML abbr タグ

これにマウスを移動すると、ツールチップと同様の方法で指定したタイトルが表示されます。

例 #3

ここでは、CSS スタイル要素のフォントスタイルをの上に斜体として使用しています。タグ。

コード:



 abbr tag in HTML 



 while writing an email, generally <abbr title="Please Find Attached"> PFA </abbr> is used

出力:

HTML abbr タグ

例 #4

の上にさらに CSS スタイル要素を使用してみましょう。タグ。

コード:



 abbr tag in HTML 



 while writing an email, generally <abbr title="Please Find Attached"> PFA </abbr> is used

出力:

HTML abbr タグ

ここでは、CSS スタイル要素を使用して頭字語を太字と赤にしました。

例 #5

同じ例を変更して、スタイルとデザインをさらに追加してみましょう。

コード:



 abbr tag in HTML 



 while writing an email, generally <abbr title="Please Find Attached"> PFA </abbr> is used

出力:

HTML abbr タグ

上記のそれぞれの例で、使用した頭字語、つまり PFA の上にマウスを移動して、それに割り当てたタイトルがブラウザでどのように表示されるかを確認してください。

覚えておくべき重要なポイント

タグは、Google Chrome、Internet Explorer、Safari、Firefox、Opera などを含むほぼすべてのブラウザでサポートされています。すべてのブラウザで生成される出力は場合によって異なる場合がありますが、結果は同じです。
では使用できる特定の属性がないため、タグを使用する場合、次の例で (利用可能なグローバル属性を使用して) 属性をどのようにスタイル設定できるかを見ていきます。この要素を表示するためのデフォルトのスタイルは、display: inline であり、ブラウザごとに異なる場合があります。
タグを使用すると、完全なフォームをユーザーに提供したり、特定のコンテンツの定義を提供したり、ドキュメントのスタイルを設定したりすることができます。を常に使用することは必須ではありません。タグ。
属性は、完全な情報、または内の指定された頭字語の完全な形式を提供するために使用されます。タグ。属性はオプションであり、の開始タグで使用されます。タグ。
以前はがありました。 HTML 5 よりも前にこのタグを使用して略語や頭字語を定義できますが、このタグは HTML 5 では非推奨となっているため、使用しないでください。

結論

これで、を見てきました。タグ。HTML 5 で導入されました。このタグは、略語や頭字語を定義し、それらのタイトルや詳細情報を一度に表示する方法を提供しました。の例を複数見てきました。属性。このタグではそのような特別な属性は使用できません。

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。