ホームページ > 記事 > ウェブフロントエンド > フロントエンド開発でステートメントに注釈を付けるにはどうすればよいですか? 3 つのアノテーション方法 (はじめに)
フロントエンド開発では、何らかの理由 (コードの説明、注釈など) でコメント ステートメントが必要になることがよくあります。では、アノテーション ステートメントにアノテーションを付ける方法と、アノテーション ステートメントに関する注意事項は何でしょうか。この章では、フロントエンド開発でステートメントに注釈を付ける方法を説明します。アノテーションの 3 つの方法 (はじめに)。困っている友人は参考にしていただければ幸いです。
1. HTML タグ
1.定義:
Comment タグは、HTML ソース コードにコメントを挿入するために使用されます。コメントはブラウザに表示されません。
2. 使用方法
<!--xxxxxx(需要注释的语句)-->
コード例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML <!--...--> 标签</title> <style> *{ margin: 0; padding: 0; } .demo{ width: 200px; height: 100px; margin: 50px auto; } ul li{ width: 20px; height: 20px; float: left; margin: 10px; list-style: none; background-color: #70DBDB; } </style> </head> <body> <div class="demo"> <p>1~5的数字,不会显示2</p> <ul> <li>1</li> <!--<li>2</li>--> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
レンダリング:
#上記の例では、数値 2モニターに表示できないのは、数字の2を表示するコード列がコメントアウトされていて表示できないためです。 タグは複数行のコメントに使用でき、HTML ファイル内で HTML ソース コードにコメントを付ける場合にのみ使用できます。 2. //--単一行コメント
<script type="text/javascript"> //alert("Hello World!") </script>上記のコードを実行すると、「Hello World!」ダイアログ ボックスは表示されません。
3. /*...*/--複数行のコメント ## スラッシュスターコメント (/*.. */) は、CSS ソース コードと JavaScript ソース コードをコメントするために使用でき、複数の行をまとめてコメントするために使用できます。
CSS ソース ファイル内:
/* 注释内容 */ /* ----------文字样式开始---------- */ /* 白色12象素文字 */ .dreamduwhite12px { color:white; font-size:12px; } /* 黑色16象素文字 */ .dreamdublack16px { color:black; font-size:16px; } /* ----------文字样式结束---------- */
ソース コードをコメントすると、コードの説明が容易になり、コードの読みやすさが向上します。
JavaScript の場合:
/* var jb51 = "www.php.cn"; var jb51 = "du"; */注:
##JavaScript で過剰なコメントを使用すると、JavaScript の実行速度と読み込み速度が低下します。したがって、Web サイトを公開する前に、JavaScript コメントを削除する必要があります。
フロントエンド開発のプロセスでは、コメントを使用してコードを説明し、コードの可読性を高めることができます。これは、将来のコードの編集 (保守またはレビュー) に役立ちます。これは、大量のコードを記述する場合に特に便利です。コメント タグを使用して、ブラウザでサポートされていないスクリプトを非表示にすることができます (スクリプトがプレーン テキストとして表示されないようにします)。
以上がフロントエンド開発でステートメントに注釈を付けるにはどうすればよいですか? 3 つのアノテーション方法 (はじめに)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。