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

推薦する

Reactは、読み込み、読み込み完了、読み込み失敗の3つの段階の原則分析を実装します。

最近ブログに書いたのですが、プロジェクトリストの中に写真がたくさんあり、最初は読み込みが遅いので、ス...

CocosCreator ユニバーサルフレームワークデザインネットワーク

目次序文Websocketの使用Websocketオブジェクトの構築Websocket ステータスW...

MySQL インデックスの設計と最適化の方法

目次インデックスとは何ですか?左端のプレフィックス一致の原則key_lenの計算方法インデックスの最...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

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

MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...

最新のウェブフロントエンドフレームワーク10選を紹介(翻訳)

Web 開発の世界では、フレームワークは非常に一般的です。新しいフレームワークやテンプレートが毎日の...

MySQLカバーインデックスの利点

一般的な提案は、WHERE 条件のインデックスを作成することですが、これは実際には一方的です。インデ...

html オプション 無効 選択 選択 無効 オプションの例

コードをコピーコードは次のとおりです。 <選択> <オプション値="&q...

フォームファイル選択ボックスのスタイルをカスタマイズする例

コードをコピーコードは次のとおりです。 <!DOCTYPE html> <html...

Zabbix の psk 暗号化と zabbix_get 値の組み合わせ

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...

WeChat アプレット開発フォーム検証 WxValidate の使用

個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...

Nginx 転送ソケットポート設定の詳細な説明

Nginx によるソケット ポート転送の一般的なシナリオ: オンライン学習アプリケーションでは、通常...

Vue のルータールーティングの 2 つのモード (ハッシュと履歴) の詳細な説明

ハッシュモード(デフォルト)動作原理:ウェブページのハッシュ値の変化を監視する—> onhas...

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

jsとcssのブロッキング問題の詳細な分析

目次DOMContentLoadedとロードjs ブロッキングとは何ですか? CSS ブロッキングと...