一般的な 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マスクのフルスクリーン中央揃えを実装する方法

推薦する

nginxとIISで使用できるSSL証明書を作成する

目次SSL証明書の作成1. 秘密鍵を生成する2. 証明書要求ファイルを生成する3. CRT証明書ファ...

js が CSS 属性 (値) のサポートを決定して通知する状況の分析

新しい CSS 機能を使用する場合、その互換性は常に考慮されます。おそらく、その互換性、どのブラウザ...

MySQL サービスに iptables ファイアウォール ポリシーを追加するためのソリューション

MySQL データベースが Centos7 システムにインストールされており、オペレーティング シス...

Vue3 ベースのスクリプト設定構文 $refs の使用

目次1. Vue2 構文2. Vue3の使用1. コンポーネントのref値を設定する2. コンポーネ...

ハイパーリンクを開くターゲットのテスト

リンクのターゲット属性は、リンクが開く場所を決定します。その値は通常、_blank、_self、_p...

IE5.0以降のHTCコンポーネントの定義の概要

Microsoft IE 5.0 がリリースされる前は、Web プログラミングにおける最大の課題は、...

JavaScript 遅延読み込みの詳細な説明

目次遅延読み込みCSS スタイル: HTML部分:スクリプト部分:要約する遅延読み込み名前の通り、私...

MySQL監視グループレプリケーションについて簡単に説明します

元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...

MySQLデータベースの一般的な最適化操作のまとめ(経験共有)

序文データ中心のアプリケーションの場合、データベースの品質はプログラムのパフォーマンスに直接影響する...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

あなたを救うために、私のテーブルは何を使えばいいでしょうか (Haiyu Blog)

テーブルはかつて、Web ページの開発、つまりレイアウトにおいて非常に重要な役割を果たしていました。...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...

TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル

1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

MySQLの行ロックとテーブルロックの意味と違いの詳細な説明

1. はじめに行ロックとテーブルロックの違いは面接で頻繁に出てくるはずです。MySQL のロックにつ...