XHTMLタグには終了タグがある

XHTMLタグには終了タグがある
<br />オリジナルリンク: http://www.dudo.org/article.asp?id=253
XHTML 仕様には、「各 XHTML タグには終了タグがある」という標準があります。 HTML 内の終了タグがない要素の場合は、終了タグの前に「/」を追加してタグを閉じます。たとえば、HTML の <img> タグの本来の記述方法は次のとおりです。
<img src="..." alt="...">
XHTML では、タグを閉じるために ">" の前に "/" を追加する必要があります。一部の古いブラウザがこの記述方法を認識しないようにするには、"/" の前にスペースを追加する必要があります (HTML 互換性標準)。
<img src="..." alt="..." />
これは、開始タグに「/」を追加するとタグが閉じられることを意味しているようです。特にスペース内のラベルの場合は、この方法を使用する方が簡潔であるようです。例えば、
<div class="clear"></div>
これは、フロートをクリアする (フローティング要素を閉じる) ときによく使用されるコードです。すると、次のように書けるようです。
<div class="clear" />
はい、<div> 要素は空にすることができ、このように記述しても問題はありませんが、他のタグに同様の記述方法を使用するとどのような結果が生じるでしょうか?外部の JavaScript ファイルを <head> にインポートするには、通常次のように記述します。
<script type="text/javascript" src="..." language="javascript"></script>
空の内容がないので、次のように書くことができますか?
<script type="text/javascript" src="..." language="javascript" />
この書き方は機能しないか、ブラウザでエラーが発生することがわかりました。ほとんどの場合、ブラウザはタグが閉じられていないと認識し、<script> 以降のすべてのコンテンツが JavaScript コードであると誤って認識し、エラーが発生します。例えば、
<テキストエリア id="tt" 列数="10" 行数="8" />
このコードをブラウザで実行すると、<textarea> から始まるすべての XHTML コードがテキスト ボックスの内容として扱われ、テキスト ボックスに表示されることがわかります。
HTML4.0 にすでに存在するペアタグは、XHTML の既存の終了タグを使用する必要があるようです。では、なぜ <div> が問題ないのでしょうか?実際のところ、<div> も許可されていません。<div> はブラウザでそれほど明確に表示されないというだけです。 <span /> のような書き方はさらに間違いです。まず、<span> 自体に終了タグ </span> があります。さらに、<span> タグの内容を空白にすることはできません (純粋なスペースも許可されません)。つまり、<img>、<hr>、<link>、<br> などの「/」で閉じることができるタグを除いて、他の要素には </...> を使用する必要があります。そうしないと、予期しない問題が発生します。

<<:  Docker に Tomcat をインストールし、Springboot プロジェクトの WAR パッケージをデプロイする方法

>>:  SeataがMySQL 8バージョンを使用できない問題を解決する方法

推薦する

Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します

この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...

MySQL Group by最適化の詳細な説明

目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...

JavaScript で H5 ゴールド コイン関数を実装する (サンプル コード)

今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...

JavaScriptは文字の出現回数をカウントします

この記事の例では、文字の出現回数をカウントするJavaScriptの具体的なコードを参考までに共有し...

divは、自動入力スタイルをブロックする入力ボックスとして入力を使用せずにコンテンツを入力できます。

今日、私は公開用の動的なウィンドウ スタイルを設計しましたが、マウスで入力をクリックしたときにブラウ...

WeChatアプレットはユーザーログインモジュールサーバーの構築を実装します

サーバーの構築には node.js を選択しました。まだインストールしていない方は、私の他の nod...

ウェブページの読み込み速度を上げる簡単なヒント

Web ページの読み込み速度は、Web サイトの品質を評価するための重要な指標です。その理由は、ほと...

React クラスコンポーネントのライフサイクルと実行順序

1. Reactコンポーネントを定義する2つの方法1. 関数コンポーネント。単純な関数コンポーネント...

18 個のキラー JavaScript ワンライナー

序文JavaScript は習得が最も簡単な言語の 1 つであるため、成長と繁栄を続けており、市場に...

Ubuntu システムにおけるネットワーク構成ファイルの分析と説明

今日は奇妙なネットワーク問題に遭遇しました。調査プロセスといくつかの構成状況を記録し、Linux で...

固定テーブル幅テーブルレイアウト: 固定

テーブルを画面全体(残りの空白領域)に表示するために、幅属性は 100% と定義されることが多く、セ...

モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)

1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...

DockerプライベートイメージライブラリとAlibaba CloudオブジェクトストレージOSSの簡単な分析

Docker プライベートイメージライブラリDockerプライベートイメージライブラリとAlibab...

div が iframe に覆われるいくつかの状況とその解決策

類似の構造:コードをコピーコードは次のとおりです。 <div></div>&...

HTML テーブルタグチュートリアル (27): セルの背景画像属性 BACKGROUND

セルの背景画像を設定でき、任意の GIF または JPEG 画像ファイルを使用できます。基本的な構文...