Home >Web Front-end >HTML Tutorial >How to annotate statements in front-end development? Three methods of annotation (introduction)

How to annotate statements in front-end development? Three methods of annotation (introduction)

青灯夜游
青灯夜游Original
2018-09-15 17:37:5213807browse

In front-end development, comment statements are often needed for some reasons (such as code description, annotation, etc.). So how to annotate annotation statements, and what are some precautions for annotation statements? This chapter shows you how to annotate statements in front-end development? Three methods of annotation (introduction). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. HTML Tag

1.Definition:

Comment tag is used to insert comments in html source code. Comments will not be displayed in the browser.

2. Usage

<!--xxxxxx(需要注释的语句)-->

Code example:

<!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>

Rendering:

How to annotate statements in front-end development? Three methods of annotation (introduction)

##In the above example, the number 2 The reason why it cannot be displayed on the monitor is because the string of code that displays the number 2 is commented out and cannot be displayed.

tag can be used for multi-line comments and can only be used in HTML files to comment HTML source code.

2. //--Single line comment

Double slash comment line (//) can only be used in JavaScript Comments on source code can only be implemented as single-line comments.

Code example:

<script type="text/javascript">
//alert("Hello World!")
</script>

When you run the above code, the "Hello World!" dialog box will not pop up.


3. /*...*/--Multi-line comments ## Slash star comments (/*.. .*/) can be used to comment CSS source code and JavaScript source code, and can be used to comment multiple lines together.

In the css source file:

/* 注释内容 */ 
/* ----------文字样式开始---------- */ 
/* 白色12象素文字 */ 
.dreamduwhite12px 
{ 
color:white; 
font-size:12px; 
} 
/* 黑色16象素文字 */ 
.dreamdublack16px 
{ 
color:black; 
font-size:16px; 
} 
/* ----------文字样式结束---------- */

Commenting the source code can help explain the code and enhance the readability of the code.

In JavaScript:

/* var jb51 = "m.sbmmt.com"; 
var jb51 = "du"; 
*/

Note:

##Excessive comments in JavaScript will reduce the execution speed of JavaScript and loading speed, so before publishing the website, JavaScript comments need to be removed.
  • In JavaScript, (/* or */) cannot appear in the comment block (/* ... */), because this kind of code may be generated in JavaScript regular expressions , this will produce a syntax error, so it is recommended to use // as a comment statement in JavaScript to comment the code.
Summary:

In the process of front-end development, you can use comments to explain the code and enhance the readability of the code. This will help you edit (maintain or review) the code in the future. This is especially useful when writing a lot of code; you can use comment tags to hide scripts that are not supported by the browser (so that the script is not displayed as plain text).

The above is the detailed content of How to annotate statements in front-end development? Three methods of annotation (introduction). For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Related articles

See more