HTML タグに類似: strong および em、q、cite、blockquote

HTML タグに類似: strong および em、q、cite、blockquote

XHTML には似た機能を持つタグがいくつかあります。もちろん、ここでの類似性とは意味の類似性を指すため、これらの類似タグの使い方が明確でない人も多くいます。そこで、今日のトピックでは、類似タグを分解し、各タグの目的を明確にします。以前、strong と em の違いについてすでに説明しました。 strongとemに加えて、q、citeなどの類似のタグもあります。
XHTML には似た機能を持つタグがいくつかあります。もちろん、ここでの類似性とは意味の類似性を指すため、これらの類似タグの使い方が明確でない人も多くいます。そこで、今日のトピックでは、類似タグを分解し、各タグの目的を明確にします。以前、strong と em の違いについてすでに説明しました。 strong や em の他に、q、cite、blockquote などの類似のタグもあります。これら3つはいずれも参照のカテゴリーに属しますが、いくつか違いがあります。1つずつ説明していきましょう。
<q></q> の場合、q の機能は非ブロック要素を引用すること、つまり段落を形成できない内容を引用することです。引用するのは誰かが言った文であったり、文書の抜粋などです。ここでは「文」であることが特徴として明らかです。また、q だけでは段落は生成されません。 q 自体にはスタイルがなく、ほとんどのブラウザでは目立つようにデフォルトのスタイルを設定していません。しかし、CSS を使用すると、一般的なコンテンツと区別することができます。 q タグには、cite という非常に重要な属性がもう 1 つあります。 cite 属性値は主に、引用されたコンテンツの出典を示すか、オンライン アドレスを提供します。
<q cite="http://andymao.com/andy/post/92.html">このコンテンツを読むと、段落の詳細をより深く理解できます</q>
これら 2 つのラベルは混同されやすいため、q を p と書かないように特に注意してください。
実は前回の記事で cite についてお話ししました。その記事では、「このラベルは文書のタイトルと名前のみを示します。このラベルは本の最後にある参考文献のカタログに少し似ており、脚注のようなものでもあります」と書きました。では、it と q の違いは何でしょうか?実のところ、これは非常に簡単に理解できます。q はコンテンツを表示し、cite はコンテンツを述べている人物または書籍の名前を表示します。 Cite と q は一緒に使用されることが多いです。例えば:
<cite>魯迅</cite>はこう言っています: <q>もともと地上には道がなかったが、歩く人が増えるにつれて道が現れた</q>。このサイトでさらに多くの HTML マークアップ コンテンツを表示します。
では、blockquote とそれらの違いは何でしょうか? Blockquote はブロック引用であり、XHTML では任意のタグを含めることができます。上記の質問と引用はそれほど包括的ではありません。 Blockquote は、1 つ以上の段落を引用する必要がある場合に使用します。ブラウザは通常、引用されたコンテンツを通常の段落と区別するためにデフォルトでインデントします。もちろん、CSS スタイルを通じて区別の形式を変更することもできます。
blockquote には cite 属性があり、q と同様に引用元を示すために使用されます。オンライン ドキュメントの URL を含めることができます。
XHTML タグには pre というタグもあります。このタグは Dreamweaver では「フォーマット」と呼ばれています。以前 Dreamweaver を使用していたときは、これが何に使われるのかよくわかりませんでした。 pre は通常ソース コードを表示するために使用され、<p> などの段落を区切ることができるタグをサポートしていないことが、今になって明らかになりました。表示されるコンテンツをラップする必要がある場合は、コードを必要とせずにソース ファイル内でラップできます。同時に、pre はすべてのスペースを保持して表示します。
一般的に言えば、pre は現在ソース コードを表示するために使用されており、code の目的と似ています。違いは、pre はブロック レベルであるのに対し、code はインラインである点です。簡単に言えば、pre には複数行のコンテンツを含めることができますが、code には短い文または数文字のみが含まれます。
ここで説明されている内容は完全には説明できないため、ドキュメントを読んだ後に実際に試してみて、その特別な機能を自分で発見する必要があります。友人の中には、CSS に関する知識がほしいという人もいました。ここで私の執筆意図を伝えたいと思います。まだテーブルレイアウトを廃止していない友人たちが、まずは全体の状況に影響を与えないいくつかのフォームを使用できるように、段階的に進めていきたいと思います。 CSS が関係すると互換性の問題が発生する可能性があるため、ここではまずドキュメントについて説明し、その後、全体のレイアウトに影響を与えない CSS の知識を追加します。段階的に深く理解することで、読者は最終的にテーブル レイアウトから標準レイアウトに自然に移行できるようになります。もちろん、すでに独学でこのステップを完了している友人がいる場合は、「その他の基準」の欄で私と連絡を取ることができます。

<<:  フレックスマルチカラムレイアウトで発生する問題と解決策の詳細な説明

>>:  SQL グループ化により重複を削除し、他のフィールドで並べ替える

ブログ    

推薦する

LinuxカーネルとSVNバージョン間の競合の解決策

現象システムは Linux システムカーネルを正常にコンパイルできましたが、SVN をインストールし...

MySQL で制限を使用するとパフォーマンスに影響するのはなぜですか?

まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...

MySQL CHARとVARCHARの選択方法

目次VARCHAR 型と CHAR 型結論: VARCHAR 型と CHAR 型VARCHAR と ...

MySQL インデックスに関するヒントのまとめ

目次1. インデックスの基礎知識1.1 インデックスの利点1.2 インデックスの有用性1.3 インデ...

VMware 仮想マシンの 3 つのネットワーク方式と原則 (概要)

1. ブリッジ: デフォルトでは VMnet0 が使用されます1. 原則:ブリッジは、それぞれ 2...

JavaScript の BigIn 関数の共通プロパティをまとめます

目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...

MySQLデータベーステーブルの容量を確認する方法の例

この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...

SqlクエリMySqlデータベーステーブル名と説明テーブルフィールド(列)情報

以下では、SQL クエリ ステートメントを使用して、Mysql データベース内のテーブルのテーブル名...

Linux システムでデプロイメント プロジェクトを設定する方法

1. ファイアウォールの設定を変更し、対応するポートを開きますLinux システムのファイアウォール...

Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)

目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...

アクティビティページでの CSS3 アニメーション効果の適用

背景あっという間に忙しい一年が終わり、毎年恒例のイベントの時期がやってきます。お祭り気分を演出するに...

HTTPS の原則の説明

HTTPS ウェブサイトの構築コストが下がるにつれて、ほとんどのウェブサイトが HTTPS プロトコ...

Dockerのネットワークモードと設定方法

1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...

ウェブフロントエンドに対する一般的な攻撃とその防止方法

ウェブサイトのフロントエンド開発で発生するセキュリティ問題は、クライアントブラウザで実行されるコード...

nginx の default_server 定義とマッチングルールの詳細な説明

nginx の default_server ディレクティブは、server_name と一致しない...