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

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

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. コメントに「--」を使わない

<<:  Vue ソースコード学習でレスポンシブ性を実装する方法

>>:  Windows 10でDockerコンテナのポートにアクセスできない問題に対する完璧な解決策

推薦する

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...

Centos8 で yum を使用して rabbitmq をインストールするチュートリアル

/etc/yum.repos.d/フォルダに入るrabbitmq-erlang.repo ファイルを...

HTML/CSS におけるフロートの使用例の詳細

1. floatの基本的な使用例1. まず 2 つの div ボックスを作成し、高さ、幅、背景色を設...

nginx をコンパイルしてインストールした後、スムーズに nginx をアップグレードする方法

nginx をコンパイルしてインストールし、一定期間使用した後、現在のバージョンに脆弱性があることや...

Spring環境を構成するためのDocker-composeの手順

最近、メンバーがテストできるようにプロジェクトをパッケージ化する必要がありますが、パッケージ化された...

Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策

目次シナリオ解決してみる解決するシナリオ今日、コンポーネントの双方向データバインディングにv-mod...

Vueフォームバインディングとコンポーネントの詳細な説明

目次1. 双方向データバインディングとは1. データの双方向バインディングを実装する必要があるのはな...

MySQL データベースのバックアップ プロセスに関する注意事項

今日は、データ バックアップに関連するいくつかの点について調べ、MySQL データ バックアップに関...

JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

目次1. 場所オブジェクト1. URL 2. 場所オブジェクトのプロパティ3. ロケーションオブジェ...

Docker+gitlab+jenkins は、ゼロから自動デプロイメントを構築します

目次序文: 1. Dockerをインストールする2. DockerでJenkinsをインストールする...

MySQL 8.0.12 のインストールと環境変数の設定チュートリアル (Win10 の場合)

Windows 10 プラットフォームでの MySQL のインストール、構成、起動、ログイン、環境...

Homebrewを使用してMacにMySQLをインストールするときにログインできない問題を解決する

お使いのコンピュータが Mac の場合、homebrew を使用して MySQL をインストールする...

Linux の daily_routine サンプルコードの詳細な説明

まずサンプルコードを見てみましょう: #/bin/bash cal 日付 -u echo "...

HTML フォーム_PowerNode Java アカデミー

1. フォーム1. フォームの役割HTML フォームは、さまざまな種類のユーザー入力を受け取り、ユー...