HTML <!--...--> コメントタグの役割の詳細な分析

HTML <!--...--> コメントタグの役割の詳細な分析

多くのウェブサイトのソースコードを確認すると、多くのコメントが見つかります。特に、ソース文書にコメントを挿入するために使用されるSina.comコメントタグはそうです。コメントテキストは一般的にプログラマーの参考資料として使用され、特に複数人で開発された大規模なウェブサイトのソースコードではそうです。コメントがない場合、プログラマーAが書いたコードはプログラマーBには認識されません。このように、プログラマーAが辞めた場合、彼が書いたコードを維持することは困難になります。コメントがあれば、コードを理解しやすくなります。

Sina.com ソースコード HTML コメント

Sina.com ソースコード HTML コメント (緑色のテキストはコメントです)

HTML コメントはブラウザによって無視され、Web サイトのソース コード内に直接記述された HTML コメントはフロント エンドには表示されません。上の図に示すように、緑色の部分はコメントであり、表示されません。上記の緑色のテキストを通じて、このコードの意味とコードの開始位置と終了位置を知ることができます。 HTML コメントの形式は次のとおりです。


コードをコピー
コードは次のとおりです。

<!-- これは www.jb51.net による注釈テキストです -->
<!--
これもコメントテキストですが、www.jb51.netで囲むこともできます。
-->

HTMLコメントの高度な機能

名前が示すように、HTML コメントはプログラムの内部構造を説明するコメントの一種です。実際、これは最も基本的な機能にすぎませんが、フロントエンド ブラウザーによって無視されるこれらの機能があるからこそ、現代​​の Web プログラムでは注釈についてさらに深く検討が行われ、注釈がますます便利になっています。

ページ内の CSS/JS への影響

HTML コメントは、ページ内の Javascript や CSS コードにも使用されます。多くの古いブラウザや Javascript や CSS を認識できないブラウザでは、コードが直接記述されている場合、テキストが表示されることが多く、読みやすさに大きな影響を与えます。


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
ボディ{色:#F00}
</スタイル>
<script type="text/javascript">
alert('www.jb51.netへようこそ');
</スクリプト>
</head>
<本文>
<p>Jbzj!</p>
</本文>
</html>

上記のコードでは HTML コメントは使用されていません。一部の古いモバイル ブラウザーや IE6 より前のバージョンでアクセスすると、次のテキストが表示されます。


コードをコピー
コードは次のとおりです。

body{color:#F00} alert('www.jb51.net へようこそ');</p> <p>Jbzj!

これらの古いブラウザが <style> や <script> などのタグを認識しない場合でも、これらのタグはタグ非表示の原則に従って表示されず、認識できないカスタム タグとして扱われます。これらのタグ内のテキストはそのまま表示されます。これらの CSS および Javascript コードは表示されたくないことは間違いないので、次のコメント付きコードを使用すると CSS および Javascript は表示されなくなります。


コードをコピー
コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
<!--
ボディ{色:#F00}
--!>
</スタイル>
<script type="text/javascript">
<!--
alert('www.jb51.netへようこそ');
--!>
</スクリプト>
</head>
<本文>
<p>Jbzj!</p>
</本文>
</html>

HTMLコメントはMVC設計で使用される

多くの最新のオープンソース コード プロジェクト、特に MVC Web デザイン スタイルのプロジェクトでは、従来の HTML コードにコメントを挿入し、そのコメントに広告などのコンテンツを追加します。

DiscuzはHTMLコメントを使用してコードを挿入し、Discuzコードを判断します

DiscuzはHTMLコメントを使用してコードを挿入し、Discuzコードを判断します

<<:  CSSアニメーションでポイント獲得効果を実現するアイデアを詳しく解説

>>:  setup+ref+reactive は vue3 の応答性を実装します

推薦する

マークアップ言語 - Web アプリケーション CSS スタイル

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

MySQL 8.x msi バージョンのインストール チュートリアル (画像とテキスト付き)

1. MySQLをダウンロードする公式サイトのダウンロードアドレス https://dev.mys...

Vue3のサンドボックスの仕組みの詳しい説明

目次序文ブラウザコンパイル版ローカルプリコンパイルバージョン要約する序文vue3サンドボックスには主...

2列の水平タイムラインを実装するためのVueサンプルコード

目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...

mysql8.0.12 でルートパスワードをリセットする方法

データベースをインストールした後、誤ってインストール ウィンドウを閉じたり、長期間 root ユーザ...

TSで最も一般的な宣言マージ(インターフェースマージ)

目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...

MyCat を使用して Linux で MySQL マスター/スレーブの読み取り/書き込み分離を実装する方法

目次Linux - MyCat を使用して MySQL マスター スレーブの読み取り書き込み分離を実...

HTML テーブル タグ チュートリアル (47): ネストされたテーブル

<br />このページでは、テーブルをネストすることで組版を実現しています。つまり、1 ...

JavaScriptアップロードファイル制限パラメータケースの詳細な説明

プロジェクトシナリオ: 1. アップロードファイルの制限関数: 1. フロントエンド操作による異常な...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

Windows 10 インストール vmware14 チュートリアル図

ソフトウェアのダウンロードソフトウェアのダウンロード リンク: https://pan.baidu....

JavaScript クロージャの説明

目次1. クロージャとは何ですか? 2. クロージャの役割2.1) メモリ2.2) プライベート変数...

Linux環境変数の設定に関する完全なガイド

Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...

RGBカラーテーブルコレクション

RGBカラーテーブル色英語名RGB 16色雪255 250 250 #FFFAFAゴーストホワイト2...