一般的な XHTML タグの使用方法の紹介

一般的な XHTML タグの使用方法の紹介

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのはこれらのタグだけです。一つずつリストしてみましょう: div、p、span、ul、li、dl、dt、dd、a、img、h、strong、em
時間が経つにつれて、多くの人が XHTML の使い方を知らないことに気づきました。普通の初心者だけでなく、一部のプログラマーも XHTML の書き方を知りません。ここでは、一般的なアプリケーションの問題についてまとめたいと思います。これにより、誰もがコミュニケーションと協力において暗黙の了解に達することができるかもしれません。
頭の中ではいつもそれをボトルや箱として考えていて、とても難しいと感じています。この div には特別な意味はなく、さまざまな場所で使用できるため、さまざまなものを保持できます。正しい書き方は、<div></div> に閉じ部分が必要です。誰もがレイアウト目的で使用し、記事を保存して段落を形成するために使用する人もいます。実際には、記事の段落として使用するための特定のタグが当然存在するため、このアプローチはあまり適切ではありません。これは、以下で説明する <p></p> タグですが、すべての段落全体を囲むには DIV を使用します。これは非常に実用的です。
p これは特定の意味を持つタグで、段落を示し、段落を区別するために使用されます。ほとんどのブラウザでは、P には基本的に上部と下部の余白があります。ただし、行のインデントは段落を示すための方法にすぎず、必要でも必須でもないため、行のインデントはありません。したがって、P タグを使用する場合は、必要に応じて P の行インデントを設定できます。P には特定の意味があり、他の場所で使用すると適切ではない可能性があるため、記事の外部では P を使用しないことをお勧めします。正しい書き方は<p></p>です。
span も非常によく使われるタグです。このタグは div と非常によく似ており、特別な意味はありませんが、ブロックレベル要素ではなくカスケード要素です。私はいつもそれをバッグとして考えています。箱とは違って、幅や高さはありません。幅と高さは中身の量によってのみ決まるので、バッグにとても似ています。このタグは div と完全に補完します。
ul,li これはリストです。リストにはULの他にOLもありますが、OLはちょっと役に立たないと思います。 UL は CSS 定義を通じて OL と同じ数値ソート効果を持つことができるためです。したがって、一般的に OL の使用はお勧めしません。UL で十分です。 UL はブロックレベルであり、その子 li もブロックレベルのタグです。正しい書き方は、<ul><li></li>< /ul> です。LI タグは UL タグで囲まれます。UL タグ内には LI タグが無数に存在する可能性があります。LI タグは単独で使用することはできません。また、LI タグは密封する必要があります。これは美観の問題であるだけでなく、後のメンテナンスにも役立ちます。多くのプログラマーはこの LI をシールすることを好みません。 UL リストの目的は、主に同じタイプの 1 次元データをリストすることです。具体的な例としては、メニューでの使用や、記事内でのルールの一覧表示などが挙げられます。リストには UL とは異なる特別な形式があります。それは以下のDLです
dl、dt、dd これは 3 つのラベルの非常に特殊な組み合わせです。ここで、DT はタイトルを指し、DD はコンテンツを指します。 DL はそれらを格納するコンテナーです。正しい書き方は、<dl><dt> </dt><dd></dd></dl> です。DL には DT と DD のグループが複数存在する場合があります。グループが多数ある場合は、1 つの DT を 1 つの DD に一致させるようにしてください。DD の内容が多い場合は、DD に P タグを追加して使用できます。 DL リストは非常に優れたリスト形式であり、より頻繁に使用できます。
a これはリンクを表します。リンクは特定の属性であり、Web ページ上で最も魔法のようなタグでもあります。無数の Web ページを接続するためです。正しい書き方は、<a href="" title=""></a> です。ここで、href はターゲット アドレスを示し、TITLE はマウスをその上に置いたときのプロンプト テキストです (オプション)。しかし、そのメリットは不在を上回らなければなりません。
img これは画像タグであり、特定の属性を持つタグでもあります。通常の書き方は次のとおりです: <img src="" alt="" title=""/> ここで、src はターゲット アドレス、ALT と TITLE は置換テキスト、ALT は IE 固有、TITLE は他のブラウザーに共通です。ただし、末尾のバックスラッシュは必須であることに注意してください。
H これは H1 から H6 まで、合計 6 つのラベルのシリーズです。少なすぎるという人もいれば、ちょうどよいという人もいれば、それほど多くは必要ないという人もいます。いずれにしても、同じくらいだと思います。正しい書き方は、<h> </h>です。主にタイトルを入れるために使われますが、友人の中には他の用途で使っている人もいます。個人的には、このタグはそのままにして、タイトルとして使った方が良いと思います。これら 6 つのラベルは相互に包含しない方がよいでしょう。
「strong」という単語は「強調する」という意味で、意味論的であり、その機能は非常に単純です。サンプル作品については、太字で強調するか、色を使って強調するかはあなた次第です。正しい書き方は<strong></strong>です。
em は strong に非常に似ており、強調を表現するために使用されます。ほとんどのブラウザのデフォルト設定は斜体です。使い方はstrongと同じです。書き方は次のとおりです。
フォームについては基本的に変更がなく、特に言うこともないのでここでは触れません。

<<:  Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ

>>:  PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

推薦する

Docker で php-nginx-alpine イメージをゼロから構築する方法

これまでにも Docker 環境でいくつかのプロジェクトを実行したことはありますが、まだイメージをよ...

div の水平レイアウトを両側に揃える 3 つの方法

この記事では、主に、div の水平レイアウトの両側の配置を実装する 3 つの方法を紹介し、それらを共...

HTML スタイル タグと関連する CSS リファレンスの詳細な説明

HTML スタイル タグスタイルタグ - ドキュメント内でスタイルを宣言するときにこのタグを使用しま...

bodyタグの主な属性の概要

bgcolor="テキストの色" background="背景画像&q...

IIS web.config でクロスドメイン アクセスを設定する方法

要件: ページに画像を表示する必要がありますが、さまざまな理由により、画像はサーバー 2 にあります...

Mysql のデッドロックの表示とデッドロックの除去の詳細な説明

序文しばらく前にMysqlのデッドロック問題に遭遇したので、解決しました。問題の説明: Mysql ...

MySQL クエリ キャッシュのグラフィカルな説明

目次1. 原則の概要クエリキャッシュシステム変数1. クエリキャッシュを持つ2. クエリキャッシュ制...

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...

MySQL で遅いファジークエリを最適化する方法

目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...

MySql の忘れたパスワードの変更方法はバージョン 5.7 以上に適しています

1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...

React、Angular、Vueの3つの主要なフロントエンド技術の詳細説明

目次1. 反応する基本的な使い方注目すべき機能クラスコンポーネント仮想DOMライフサイクルメソッドJ...

優れた登録プロセスの手順

ウェブサイトにとって、これは最も基本的な機能です。それでは、登録プロセスに含まれる手順を見てみましょ...

Linux 構成で MySQL データベースへのリモート接続が失敗する問題の解決方法

今日は、Linux でリモート アクセス用に MySQL データベースを構成する方法について質問があ...

Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)

サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...

クリエイティブな会社概要ウェブページデザイン

ユニークな「About」ページ自分を他の人たちと差別化する素晴らしい方法は、本当にユニークな自己紹介...