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

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

XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのはこれらのタグだけです。一つずつリストしてみましょう: div、p、span、ul、li、dl、dt、dd、a、img、h、strong、em
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と同じです。書き方は次のとおりです。
フォームについては基本的に変更がなく、特に言うこともないのでここでは触れません。

<<:  Windows Server 2016 リモート デスクトップ サービスの構成とライセンスのアクティブ化 (2 ユーザー)

>>:  CSSマスクのフルスクリーン中央揃えを実装する方法

推薦する

シンプルなプログレスバーを作成するための HTML+CSS

1. HTMLコードコードをコピーコードは次のとおりです。経験値: <span class=...

Vue検証コードコンポーネントの使い方の詳しい説明

この記事の例では、vue検証コードコンポーネントで使用される具体的な実装コードを参考までに共有してい...

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

HTMLテキスト内のすべてのタグを置き換える方法

(?i) は大文字と小文字を区別しないことを意味します。大文字と小文字をすべて置き換えます。 htm...

ウェブページ制作TDは隠し表示もオーバーフロー可能

おそらく、この記事にこのようなタイトルを付けると、誰かがこう尋ねるでしょう。「なぜまだテーブルに注目...

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...

写真をアップロードして顔を認識する Vue+axios サンプルコード

目次Axios リクエストQs処理データ分析Vantアップロードファイル形式完全なコードこの記事では...

JS は複数のタブを切り替えるカルーセルを実装します

カルーセルアニメーションは、ページの外観とインタラクティブなパフォーマンスを向上させることができます...

js クロージャとガベージ コレクション メカニズムの例の詳細な説明

目次序文文章1. 終了1.1 クロージャとは何ですか? 1.2 クロージャの特性1.3 クロージャを...

Centos6.5 glibc アップグレードプロセスの紹介

目次シナリオ要件glibc バージョンglibcのインストールglibc ソフトリンクシナリオ要件C...

MySql カンマ連結文字列クエリの 2 つの方法

次の2つの関数は、 FIND_IN_SETと同じように使用されます。使用する場合、 FIND_IN_...

Linux のさまざまなロックメカニズムの使用方法と違いについて詳しく説明します

序文:この知識を理解する必要がある人は、すでにプロセス間通信とスレッド間通信の基本的な理解を持ってい...

Zabbix redis 自動ポート検出スクリプトは json 形式を返します

自動検出を行う際には、ポートなどの情報を取得してjson形式で返すスクリプトが必ず存在します。Red...

デザイン視点技術はデザイン能力の重要な資本である

ある設計士はこう尋ねた。「実際のプロジェクト制作には参加せずに、純粋に設計だけをすることはできますか...

ウェブページ作成のテスト問題を全て解けますか?

Web ページのデザインに関する質問です。すべてに答えられるでしょうか? 1. 単一選択の質問 (...