XHTMLコードの一般的なアプリケーション問題をまとめる

XHTMLコードの一般的なアプリケーション問題をまとめる

時間が経つにつれて、多くの人が XHTML の使い方を知らないことに気づきました。普通の初心者だけでなく、一部のプログラマーも XHTML の書き方を知りません。ここでは、一般的なアプリケーションの問題についてまとめたいと思います。これにより、誰もがコミュニケーションと協力において暗黙の了解に達することができるかもしれません。
時間が経つにつれて、多くの人が XHTML の使い方を知らないことに気づきました。普通の初心者だけでなく、一部のプログラマーも XHTML の書き方を知りません。ここでは、一般的なアプリケーションの問題についてまとめたいと思います。これにより、誰もがコミュニケーションと協力において暗黙の了解に達することができるかもしれません。
XHTML には多くのタグがありますが、頻繁に使用されるのはごくわずかであり、習得する必要があるのはこれらのタグだけです。一つずつリストしてみましょう: div、p、span、ul、li、dl、dt、dd、a、img、h、strong、em
頭の中ではいつもそれをボトルや箱として考えていて、とても難しいと感じています。この 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 イメージのインポートとエクスポートのコード例

>>:  MYSQL大規模書き込み問題の最適化の詳細な説明

推薦する

初心者向けウェブサイト構築ガイド⑦:美しいウェブサイトを作るのはとっても簡単

私はかつて、ウェブサイトを一度も構築したことのない人々が、初心者向けのウェブサイト構築方法に関する私...

Vue の共通 A​​PI と高度な API の概要

目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...

MySQLインデックスに関する重要な面接の質問をいくつか共有します

序文インデックスは、データベース内の 1 つ以上の列の値を並べ替え、データベースが効率的にデータを取...

JavaScriptコールバック関数の詳細な理解

目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...

MySQL 8.0 パスワード有効期限ポリシーの詳細な説明

MySQL 8.0.16 以降では、パスワードの有効期限ポリシーを設定できます。今日は、この小さな知...

マークアップ言語 - フレーズ要素

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQL 5.7 における部分テーブルのデュアルマスター同期の実装プロセスの詳細な説明

序文最近、私はある要件に遭遇しました。会社の業務上、2 つのデータベース間の一部のテーブルは、リアル...

MySQL 5.7 の /etc/my.cnf パラメータの紹介

以下は、mysql 5.7 の /etc/my.cnf の一般的なパラメータの一部です。これらを自分...

JavaScript マクロタスクとマイクロタスク

マクロタスクとマイクロタスクJavaScript はシングルスレッド言語です (マルチスレッドの場合...

Dockerを使用してOracle_11gをインストールする方法

DockerでOracle_11gをインストールする1. oracle_11gイメージを取得する d...

ウェブページ読み込み時に左右にジャンプする原因の分析と解決

最近、ウェブサイトを設計するときにこの問題に遭遇しています。メンバーセンターを設計し、コンテンツを ...

CSS で TikTok テキスト揺れエフェクトを実装する例

日々の開発において、フロントエンドの学生はアニメーションやデザインについてよく議論します。デザイナー...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

マークアップ言語 - タイトル

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

CSSスコープ(スタイル分割)の使用の概要

1. CSSスコープの使用(スタイル分割) Vue では、CSS スタイルを現在のコンポーネントでの...