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 の応答性を実装します

推薦する

Vueを使用してタイマー機能を実装する

この記事の例では、タイマー機能を実装するためのVueの具体的なコードを参考までに共有しています。具体...

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...

デザイナーはコーディングを学ぶ必要がありますか?

多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...

JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明

目次JS スリーマウンテンズ同期 非同期同期と非同期の違い範囲、終了関数スコープチェーンブロックスコ...

画像を使用してハイパーリンクのパーソナライズされた下線を実現します

画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるので...

Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...

Windows 2019 アクティベーション チュートリアル (Office2019)

数日前、Server2019の正式版がリリースされたことを知り、面白半分でインストールしてみることに...

MySQLデータベースの管理者パスワードを忘れた場合の解決策

1. コマンド mysqld --skip-grant-tables を入力します (前提条件: m...

CSS の優先順位に関する詳細な紹介

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

MySQLは間違ったパスワードを入力する試行回数を制御します

1. 本番環境でMySQLのデッドロックを監視し、デッドロックの可能性を減らす方法まず、デッドロック...

MySQLクエリ文の実行プロセスの詳細な説明

目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...

Linux で NFS ファイル共有サーバーを構築するための詳細な手順

Linux が NFS サーバーを構築異なるオペレーティング システム間でデータを共有するために、通...

CSS3セレクターの新機能の実装

目次基本的なセレクタ拡張属性セレクタ疑似クラスと疑似要素セレクター基本的なセレクタ拡張1. 子要素セ...

VantフレームワークをWeChatアプレットに導入するプロセス全体の記録

序文WeChat ミニプログラムのネイティブ UI が少し物足りないと感じることがあるので、サードパ...