自己終了XHTMLタグを書くときに注意すべきこと

自己終了XHTMLタグを書くときに注意すべきこと

XHTML の img タグはいわゆる自己終了タグであり、XML では完全に合法です。
XHTMLの img タグは、次のように記述する必要があります: <img alt="" src="" />。この記述方法は自己終了とも呼ばれ、XML では完全に合法です。 XML 関連の開発に慣れている方であれば、XML 内の子ノードを持たない要素はすべてこの方法で記述でき、XHTML 内のコンテンツのないタグもすべてこの方法で記述できると考え、この記述方法に慣れているかもしれません。理論上、XHTML では任意のタグを自己終了形式で記述できますが、ブラウザの互換性によって新たな問題が発生しています。つまり、IE は特定のタグの自己終了形式の記述方法を正しく認識できません。 文字列 8
次の XHTML コードを入力して、IE で参照してみてください: <p>hello <script type="text/javascript" /> world</p>。先頭の hello しか表示されず、最後の world が表示されないことがわかります。これは本当に不可解です。皆さんの多くは、この問題に遭遇したことがあり、合理的な説明が見つからないまま何時間も費やしたことがあるかもしれません。 文字列 4
説明は、別の類似コードから得られます: <p>hello <textarea /> world</p>。IE での表示効果を確認することで、合理的な説明が得られますか?手前のhelloは正常に表示されていますが、奥のworldはtextareaに表示されていることがわかります。これは、IEがtextareaタグがそれ自体で閉じられていることを正しく認識しておらず、閉じられていないものとして扱い、次のコンテンツをtextarea内のコンテンツとして認識していることを証明しています。
これで、以前のコードがスクリプトの一部として認識されるため、その背後にある世界を認識できない理由がわかりました。これは、XHTML を使用する場合、XML ほど自由に自己終了の記述スタイルを使用できないことを示しています。自己終了の方法で記述できるのは、閉じる必要のないタグだけです。その他のタグについては、コンテンツがない場合でも、ペア終了の記述スタイルを使用するのが最適です。
最後に、実は愚かなパーサーは IE だけに見られるのではないということを皆さんに思い出していただきたいと思います。不正確なパーサーによって引き起こされる問題は、さまざまな場所で発生する可能性があります。したがって、XHTML を書くときは、古い HTML から受け継いだいくつかの習慣に適応する必要があります。本物の XML のように標準を満たしていると思って、気軽に書くことはできません。信じられませんか?もう一つ試してみましょう: <p>hello <br></br> world</p>、IE と Opera でどのように表示されるか確認します。
XHTML の関連仕様:
1. すべてのタグには対応する終了タグが必要です
2. すべてのタグ要素と属性の名前は小文字でなければなりません
3. すべてのXMLタグは適切にネストされている必要があります
4. すべての属性は引用符「」で囲む必要があります。
5. すべての<と&の特殊記号をエンコードする
6. すべての属性に値を割り当てる
7. コメントに「--」を使わない

<<:  CSS 要約ノート: 変換、遷移、アニメーションの例

>>:  mysql 更新ケース更新フィールド値が固定されていない操作

推薦する

スキン効果を実現するJavaScript(背景の変更)

この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

Vueドロップダウンリストの2つの実装方法の比較

Vueドロップダウンリストの2つの実装最初の方法はv-forを使用する <el-select ...

MySQL マスタースレーブレプリケーションの実践の詳細説明 - ログポイントに基づくレプリケーション

ログポイントベースのレプリケーション1. マスターデータベースとスレーブデータベースに専用のレプリケ...

色の16進数カラーコード表表示と16進値の比較表示で簡単に検索できます

さまざまな色の16進コード表[パート1] 赤とピンク、およびそれらの 16 進コード。 #99003...

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例

MySQL SQL ステートメントのパフォーマンス チューニングの簡単な例サーバー開発を行う際には、...

HTML の基礎必読 - CSS スタイルシートの包括的な理解

CSS (カスケーディング スタイル シート) は、HTML Web ページを美しくするために使用さ...

完全なショッピングカートを実装するためのミニプログラム

ミニプログラムは、参考までに完全なショッピングカート[すべて選択/選択解除して金額を計算/加算と減算...

MySQL トリガーの使用方法と利点と欠点の紹介

目次序文1. トリガーの概要2. トリガーの作成2.1 トリガー構文の作成2.2 コード例3. トリ...

MySQL はリレーショナルデータベースですか?

MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...

キープアライブキャッシュをクリアする方法の詳細なグラフィック説明

目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...

Dockerを使用してサーバー上で複数のPHPバージョンを実行する

PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...

この記事はJavaScriptの変数とデータ型を理解するのに役立ちます

目次序文:親切なヒント:変数1. 免責事項2. 譲渡3. 2つの小さな文法上の詳細変数の命名規則なぜ...

MySQL インデックスの原理と最適化の詳細な説明

序文この記事は Meituan の大物によって書かれました。とても素晴らしいので、皆さんと共有したい...

CSS3はさまざまな境界効果を実現します

半透明の境界線結果: 実装コード: <div> 半透明の境界線が見えますか? </...

Mysqlは実行中のトランザクションを照会し、ロックを待機する方法

navicatを使用してテストと学習を行います。まず、 set autocommit = 0;を使用...